P33:后台管理系统开发12-实现左侧菜单的文章列表功能
目前已经可以添加博客文章了,然后我们需要作一个文章列表,方便我们后续的删除和修改操作。我们先把接口和页面布局做好。
建立 ArticleList.js 文件
我们在/admin/src/pages
文件夹下新建立一个ArticleList.js
文件。
然后先import
引入一些必须要使用的包。
import React, { useState, useEffect } from 'react'; import '../static/css/ArticleList.css' import { List, Row, Col, Modal, message, Button, Switch } from 'antd'; import axios from 'axios' import servicePath from '../config/apiUrl' const { confirm } = Modal;
上面这些都是我们需要用到的包,所以就一次性的都引入进来了,以后如果再增加,可以再次引入。 然后编写一下基本的结构,让页面基本可用。
function ArticleList(props) { const [list, setList] = useState([]); return ( <div> <List header={ <Row className="list-div"> <Col span={8}> <b>标题</b> </Col> <Col span={4}> <b>类别</b> </Col> <Col span={4}> <b>发布时间</b> </Col> <Col span={4}> <b>浏览量</b> </Col> <Col span={4}> <b>操作</b> </Col> </Row> } bordered dataSource={list} renderItem={item => ( <List.Item> <Row className="list-div"> <Col span={8}> {item.title} </Col> <Col span={4}> {item.typeName} </Col> <Col span={4}> {item.addTime} </Col> <Col span={4}> {item.view_count} </Col> <Col span={4}> <Button type="primary">修改</Button> <Button>删除 </Button> </Col> </Row> </List.Item> )} /> </div> ) } export default ArticleList
编写对应的路由
当页面编写完成后,你需要编写路由,只有路由配置正常,你次能正常访问到这个页面。进入AdminIndex.js
文件,引入ArticleList.js
页面,
import ArticleList from './ArticleList';
然后主操作区添加路由。
<div> <Route path="/index/" exact component={AddArticle} /> <Route path="/index/add/" exact component={AddArticle} /> <Route path="/index/list/" exact component={ArticleList} /> </div>
然后找到文章管理,文章列表的部分,修改代码如下:
<SubMenu key="sub1" onClick={handleClickArticle} icon={<UserOutlined />} title="文章管理" > <Menu.Item key="addArticle">添加文章</Menu.Item> <Menu.Item key="articleList">文章列表</Menu.Item> </SubMenu>
然后编写HandleClickArticle()
方法,代码如下:
const handleClickArticle = e => { if (e.key === 'addArticle') { props.history.push('/index/add') } else { props.history.push('/index/list') } }
然后到浏览器中预览一下,应该可以打开页面了,只是没有数据,但是页面是正常可以打开的。
如果你觉的页面不好看,可以加入一下 CSS 样式,但是记得单独在static/css
文件夹下新建立一个ArticleList.css
文件。
接下来编写中台的列表方法,然后通过方法读取数据并显示在页面上,有了博客前台读取首页列表数据的经验后,你做起来应该不算什么难事了。
编写中台获取文章列表接口
直接进入/service/app/controller/admin
文件夹下的main.js
文件,然后编写一个新的getArticleList
方法,代码如下:
// 获得文章列表 async getArticleList() { const sql = 'SELECT article.id as id,' + 'article.title as title,' + 'article.introduce as introduce,' + "FROM_UNIXTIME(article.addTime,'%Y-%m-%d' ) as addTime," + 'article.view_count as view_count ,' + 'type.typeName as typeName ' + 'FROM article LEFT JOIN type ON article.type_id = type.Id ' + 'ORDER BY article.id DESC '; const resList = await this.app.mysql.query(sql); this.ctx.body = { list: resList }; }
编写完方法后记得要配置路由,打开/router
文件夹的admin.js
文件。
module.exports = app =>{ const {router,controller} = app const adminauth = app.middleware.adminauth() router.get('/admin/index',controller.admin.main.index) router.get('/admin/getTypeInfo',adminauth ,controller.admin.main.getTypeInfo) router.post('/admin/addArticle',adminauth,controller.admin.main.addArticle) router.post('/admin/updateArticle',adminauth,controller.admin.main.updateArticle) router.get('/admin/getArticleList',adminauth,controller.admin.main.getArticleList) }
其实只要添加最后一行代码就可以完成路由的设置。
配置 apiUrl.js 文件
后台配置完成,再到admin
文件夹加下的/src/config/apiUrl.js
文件,配置中台对应的路径。
let ipUrl = 'http://127.0.0.1:7001/admin/' let servicePath = { getTypeInfo: ipUrl + 'getTypeInfo', // 获得文章类别信息 checkLogin: ipUrl + 'checkLogin', // 检查用户名密码是否正确 addArticle: ipUrl + 'addArticle', // 添加文章 updateArticle: ipUrl + 'updateArticle', // 修改文章 getArticleList:ipUrl + 'getArticleList' , // 文章列表 } export default servicePath;
这时候后台就可以使用Axios
来配置获得文章列表数据了。
后台 Axios 获取文章列表
我们再ArticleList.js
文件里,写一个getList
方法,代码如下:
//得到文章列表 const getList = () => { axios({ method: 'get', url: servicePath.getArticleList, withCredentials: true, header: { 'Access-Control-Allow-Origin': '*' } }).then( res => { setList(res.data.list) } ) }
当我们进入页面的使用,就希望可以获得博客文章的列表,所以要使用useEffect()
方法来进行操作。
useEffect(() => { getList(); },[])
这就就可以进入页面就显示所有的文章列表了,下节我们接着编写列表页的相关操作。
码云笔记 » P33:后台管理系统开发12-实现左侧菜单的文章列表功能