实战react技术栈+express前后端博客项目（9）-- 前端管理界面发
发布时间：2020-12-15 06:44:48 所属栏目：百科 来源：网络整理
导读：项目地址：https://github.com/Nealyang/R... 本想等项目做完再连载一波系列博客，随着开发的进行，也是的确遇到了不少坑，请教了不少人。遂想，何不一边记录踩坑，一边分享收获呢。分享当然是好的， 如果能做到集思广益，那岂不是更美。我们的口号是： 坚决
|
项目地址：https://github.com/Nealyang/R...
本博客为连载代码博客同步更新博客，随着项目往后开发可能会遇到前面写的不合适的地方会再回头修改。如有不妥~欢迎兄弟们不啬赐教。谢谢！ 效果演示
后端部分实现文章内容初定包含如下字段：文章标题、文章内容、作者、文章标签、浏览数、评论数、发表时间、是否发布 所以定义schema如下： import mongoose from 'mongoose'
module.exports = new mongoose.Schema({
title:String,//文章标题
content:String,//文章内容
viewCount:Number,//浏览次数
commentCount:Number,//评论次数
time:String,//发表时间
coverImg:String,//封面图片
author:String,//作者
tags:Array,//标签
isPublish:Boolean//是否发布
});
后端发文接口开发其实就是一个存储文章的接口，初步接口设计为/api/admin/article/addArticle router.post('/addArticle',function (req,res) {
const {
title,content,time,tags,isPublish
} = req.body;
const author = req.session.userInfo.username;
const coverImg = `/${Math.round(Math.random() * 9 + 1)}.jpg`;
const viewCount = 0;
const commentCount = 0;
let tempArticle = new Article({
title,isPublish,viewCount,commentCount,author,coverImg,tags
});
tempArticle.save().then(data=>{
responseClient(res,200,'保存成功',data)
}).cancel(err=>{
console.log(err);
responseClient(res);
});
});
后端都比较常规。对于路由设计以及model大家可以自行查看源码 前端部分界面编码： render() {
return (
<div>
<h2>发文</h2>
<div className={style.container}>
<span className={style.subTitle}>标题</span>
<Input
className={style.titleInput}
placeholder={'请输入文章标题'}
type='text'
value={this.props.title}
onChange={this.titleOnChange.bind(this)}/>
<span className={style.subTitle}>正文</span>
<textarea
className={style.textArea}
value={this.props.content}
onChange={this.onChanges.bind(this)}/>
<span className={style.subTitle}>分类</span>
<Select
mode="multiple"
className={style.titleInput}
placeholder="请选择分类"
onChange={this.selectTags.bind(this)}
defaultValue={this.props.tags}
>
{
this.props.tagsBase.map((item) => {
return (
<Option key={item}>{item}</Option>
)
})
}
</Select>
<div className={style.bottomContainer}>
<Button type="primary" onClick={this.publishArticle.bind(this)} className={style.buttonStyle}>发布</Button>
<Button type="primary" onClick={this.saveArticle.bind(this)} className={style.buttonStyle}>保存</Button>
<Button type="primary" onClick={this.preView.bind(this)} className={style.buttonStyle}>预览</Button>
</div>
</div>
<Modal
visible={this.state.modalVisible}
title="文章预览"
onOk={this.handleOk.bind(this)}
width={'900px'}
onCancel={this.handleOk.bind(this)}
footer={null}
>
<div className={style.modalContainer}>
<div id='preview' className={style.testCode}>
{remark().use(reactRenderer).processSync(this.props.content).contents}
</div>
</div>
</Modal>
</div>
)
}
由于定义为技术博客，所以这里我们只支持md语法。使用remark-react插件将md语法转换。textArea作为输入框。目前没有支持图片上传。如若想想支持图片上传功能，请查看我github上另一个demo。这里就不做演示了。 前端部分state设计对于发文部分，我单独存储了title,content。为了方便用户文章在写到一般的时候，切换别的菜单项。所以将他存储在state。在input中输入title,tags的时候，直接更新到state中。这样，在用户切换到别的tab再切换回来的时候，依旧可以看到自己之前输入的内容。 const initialState={
title:'',content:'',tags:[]
};
export const actionTypes = {
UPDATING_TITLE:"UPDATING_TITLE",UPDATING_CONTENT:"UPDATING_CONTENT",UPDATING_TAGS:"UPDATING_TAGS",SAVE_ARTICLE:"SAVE_ARTICLE"
};
export const actions = {
update_title:function (title) {
return{
type:actionTypes.UPDATING_TITLE,title
}
},update_content:function (content) {
return{
type:actionTypes.UPDATING_CONTENT,content
}
},update_tags:function (tags) {
return{
type:actionTypes.UPDATING_TAGS,tags
}
},save_article:function (data) {
return{
type:actionTypes.SAVE_ARTICLE,data
}
}
};
export function reducer(state=initialState,action) {
switch (action.type){
case actionTypes.UPDATING_TITLE:
return{
...state,title:action.title
};
case actionTypes.UPDATING_CONTENT:
return{
...state,content:action.content
};
case actionTypes.UPDATING_TAGS:
return{
...state,tags:action.tags
};
default:
return state;
}
}
前端saga部分saga中，我们需要判断用户是保存还是发布。所以我们加了isPublish字段来区分。当为发布的时候，一些必填字段需要我们去判断。 export function* saveArticleFlow () {
while (true){
let request = yield take(NewArticleActionTypes.SAVE_ARTICLE);
console.log(request);
if(request.data.isPublish){
if(request.data.title === ''){
yield put({type: IndexActionTypes.SET_MESSAGE,msgContent: '请输入文章标题',msgType: 0});
}else if(request.data.content === ""){
yield put({type: IndexActionTypes.SET_MESSAGE,msgContent: '请输入文章内容',msgType: 0});
}else if(request.data.tags.length === 0){
yield put({type: IndexActionTypes.SET_MESSAGE,msgContent: '请选择文章分类',msgType: 0});
}
}
if((request.data.title&&request.data.content&&request.data.tags.length>0&&request.data.isPublish)|| (!request.data.isPublish)){
let res = yield call(saveArticle,request.data);
if(res){
if (res.code === 0) {
yield put({type: IndexActionTypes.SET_MESSAGE,msgContent: res.message,msgType: 1});
setTimeout(function () {
location.replace('/admin/managerArticle');
},1000);
} else if (res.message === '身份信息已过期，请重新登录') {
yield put({type: IndexActionTypes.SET_MESSAGE,msgType: 0});
setTimeout(function () {
location.replace('/');
},1000);
} else {
yield put({type: IndexActionTypes.SET_MESSAGE,msgType: 0});
}
}
}
}
}
当文章发表成功后，我们这里给定一秒后，跳转到文章管理界面，由于管理界面目前没有开发，所以现在跳转到管理界面后，是404.下一篇，我们将介绍文章管理部分的功能开发。 文章预览文章的预览，直接使用antd的modal，然后转换md语法，展示效果。 结束语总体来说，文章发布也是比较简单。一些细节，还希望大家多多琢磨。至此，一个博客网站的核心功能就完成了。 项目实现步骤系列博客
## 交流 倘若有哪里说的不是很明白，或者有什么需要与我交流，欢迎各位提issue。或者加群联系我~ 扫码关注我的个人微信公众号，直接回复，必有回应。分享更多原创文章。点击交流学习加我微信、qq群。一起学习，一起进步
--- 欢迎兄弟们加入： Node.js技术交流群：209530601 React技术栈：398240621 前端技术杂谈：604953717 (新建) --- （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |