码云 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}>
<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>
<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-读取添加文章页面的类别信息
码云笔记 » P31：后台管理系统开发10-读取添加文章页面的类别信息
