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();
},[])

这就就可以进入页面就显示所有的文章列表了,下节我们接着编写列表页的相关操作。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P33:后台管理系统开发12-实现左侧菜单的文章列表功能

发表评论

提供最优质的资源集合

立即查看 了解详情