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引入SelectaxiosservicePath,代码如下。

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 [email protected]/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

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

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

发表评论

提供最优质的资源集合

立即查看 了解详情