P31：后台管理系统开发10-读取添加文章页面的类别信息

上节我们把后台添加文章的 UI 和守卫都已经做好了，那本文将制作从后台开一个读取文章类别的接口，然后从接口中获得数据，展现在添加文章页面上，方便以后选择文章类别，本文的重点是练习如何通过路由守卫守护接口的。

编写获取文章类别的接口

打开 service 文件夹，然后进入/app/controller/admin/main.js文件，然后编写getTypeInfo（）方法，这里直接使用egg-mysql提供的 API 就可以得到。

代码如下：

//后台文章分类信息
async getTypeInfo(){
    const resType = await this.app.mysql.select('type')
    this.ctx.body={data:resType}
}

编写中台路由

当方法写完后，还不能直接使用，需要到/app/router/admin/admin.js中进行配置，这个接口我们就添加了路由守卫，也就是说你不登录，去访问这个接口是无效的，会返回让你去登录的。

'use strict';
module.exports = app => {
  const { router, controller } = app;
  const adminauth = app.middleware.adminauth();
  router.get('/admin/index', controller.admin.main.index);
  router.post('/admin/checkLogin', controller.admin.main.checkLogin);
  router.get('/admin/getTypeInfo', adminauth, controller.admin.main.getTypeInfo);
};

这样编程完成后，后台就可以访问到这个接口了。

后台 apiUrl.js 的设置

当我们的接口都写完了之后，我们需要到后台admin/src/config/apiUrl.js下做一下访问的统一管理文件，我经常使用apiUrl.js这个名字来命名文件，这个文件其实就是一个对象，里边是后台用到的所有接口。

let ipUrl = 'http://127.0.0.1:7001/admin/' 

let servicePath = {
    getTypeInfo: ipUrl + 'getTypeInfo', // 获得文章类别信息
    checkLogin: ipUrl + 'checkLogin', // 检查用户名密码是否正确
}

export default servicePath;

这样设置代码的好处是以后我们更换正式环境的时候非常简单，直接修改ipUrl变量的值就可以了。

在添加文章页面显示出类别

在/admin/pages/AddArticle.js引入Select、axios和servicePath，代码如下。

import { Row, Col ,Input, Select , Button ,DatePicker } from 'antd'
import axios from 'axios'
import servicePath from '../config/apiUrl'

用 React hooks 增加useState参数和方法，在组件头部增加代码如下：

const [typeInfo ,setTypeInfo] = useState([]) // 文章类别信息

引入后编写getTypeInfo方法，代码如下：

const getTypeInfo = () => {
    axios({
        method: 'get',
        url: servicePath.getTypeInfo,
        withCredentials: true
    }).then(res => {
        if(res.data.data == '没有登录') {
            localStorage.removeItem('openId');
            props.history.push('/');
        }else{
            setTypeInfo(res.data.data);
        }
    })
}

方法写好后，直接在useEffect里进行使用就可以了

useEffect(()=>{
    getTypeInfo()
// eslint-disable-next-line react-hooks/exhaustive-deps
},[]);

最后编写 JSX 部分代码就可以了，这里用map进行了循环，代码如下：

<Col span={4}>
    <Select defaultValue={selectedType} size="large" onChange={selectTypeHandler}>
        {
            typeInfo.map((item,index)=>{
                return (<Option key={index} value={item.Id}>{item.typeName}</Option>)
            })
        }
    </Select>
</Col>

如果一切正常，这时候就可以显示出对应的文章信息列表了。

为了方便你的学习,我这里给出整个页面的代码，方便你出错时自行查找。

import React,{useState, useEffect} from 'react';
import marked from 'marked'
import '../static/css/AddArticle.css'
import { Row, Col ,Input, Select , Button ,DatePicker } from 'antd'
import axios from 'axios'
import servicePath from '../config/apiUrl'
import { PropertySafetyFilled } from '@ant-design/icons';

const { Option } = Select;
const { TextArea } = Input;

function AddArticle(props) {
    const [articleId, setArticleId] = useState(0);  // 文章的 ID，如果是 0 说明是新增加，如果不是 0，说明是修改
    const [articleTitle, setArticleTitle] = useState('');   //文章标题
    const [articleContent, setArticleContent] = useState('');  //markdown 的编辑内容
    const [markdownContent, setMarkdownContent] = useState('预览内容'); //html 内容
    const [introducemd, setIntroducemd] = useState();            //简介的 markdown 内容
    const [introducehtml, setIntroducehtml] = useState('等待编辑'); //简介的 html 内容
    const [showDate, setShowDate] = useState();   //发布日期
    const [updateDate, setUpdateDate] = useState(); //修改日志的日期
    const [typeInfo, setTypeInfo] = useState([]); // 文章类别信息
    const [selectedType, setSelectType] = useState('选择类型'); //选择的文章类别

    useEffect(()=>{
        getTypeInfo()
    },[]);

    marked.setOptions({
        renderer: marked.Renderer(),
        gfm: true,
        pedantic: false,
        sanitize: false,
        tables: true,
        breaks: false,
        smartLists: true,
        smartypants: false,
    });
    const changeContent = (e)=>{
        setArticleContent(e.target.value);
        let html=marked(e.target.value);
        setMarkdownContent(html);
    }

    const changeIntroduce = (e)=>{
        setIntroducemd(e.target.value);
        let html=marked(e.target.value);
        setIntroducehtml(html);
    }

    const getTypeInfo = () => {
        axios({
            method: 'get',
            url: servicePath.getTypeInfo,
            withCredentials: true
        }).then(res => {
            // eslint-disable-next-line eqeqeq
            if(res.data.data == '没有登录') {
                localStorage.removeItem('openId');
                props.history.push('/');
            }else{
                setTypeInfo(res.data.data);
            }
        })
    }

    return (
        <div>
            <Row gutter={5}>
                <Col span={18}>
                        <Row gutter={10} >
                            <Col span={20}>
                                <Input 
                                    placeholder="博客标题" 
                                    size="large" />
                            </Col>
                            <Col span={4}>
                                &nbsp;
                                <Select defaultValue={selectedType} size="large">
                                    {
                                        typeInfo.map((item,index)=>{
                                            return (<Option key={index} value={item.Id}>{item.typeName}</Option>)
                                        })
                                    }
                                </Select>
                            </Col>
                        </Row>
                        <br/>
                        <Row gutter={10} >
                            <Col span={12}>
                                <TextArea
                                    value={articleContent}
                                    className="markdown-content"
                                    rows={35}
                                    onChange={changeContent}
                                    onPressEnter={changeContent}
                                    placeholder="文章内容"
                                    />
                            </Col>
                            <Col span={12}>
                                <div 
                                    className="show-html"
                                    dangerouslySetInnerHTML = {{__html:markdownContent}}>

                                </div>

                            </Col>
                        </Row>  

                </Col>

                <Col span={6}>
                    <Row>
                        <Col span={24}>
                            <Button  size="large">暂存文章</Button>&nbsp;
                            <Button type="primary" size="large">发布文章</Button>
                            <br/>
                        </Col>
                        <Col span={24}>
                            <br/>
                            <TextArea 
                                rows={4}
                                value={introducemd}
                                onChange={changeIntroduce}
                                onPressEnter={changeIntroduce}
                                placeholder="文章简介"
                            />
                            <br/><br/>
                            <div className="introduce-html"
                                dangerouslySetInnerHTML = {{__html:'文章简介：'+introducehtml}}></div>
                        </Col>
                        <Col span={12}>
                            <div className="date-select">
                                <DatePicker
                                    placeholder="发布日期"
                                    size="large"  
                                />
                            </div>
                        </Col>
                    </Row>
                </Col>
            </Row>
        </div>
    )
}

export default AddArticle

以上就是本文主要内容了，主要讲了如何使用路由守卫和中台接口的配合，读出对应的文章类别信息。代码虽然不多，但是还是希望大家之后多多练习一下。

以上关于P31：后台管理系统开发10-读取添加文章页面的类别信息的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。