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-实现左侧菜单的文章列表功能的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。