实战react技术栈+express先后端博客项目（9）-- 前端管理界面发表文章功能+后端对应接口

项目地址：github.com/Nealyang/Re…

本想等项目作完再连载一波系列博客，随着开发的进行，也是的确遇到了很多坑，请教了很多人。遂想，何不一边记录踩坑，一边分享收获呢。分享固然是好的， 若是能作到集思广益，那岂不是更美。咱们的口号是：坚定不会烂尾

本博客为连载代码博客同步更新博客，随着项目日后开发可能会遇到前面写的不合适的地方会再回头修改。若有不妥~欢迎兄弟们不啬赐教。谢谢！

效果演示

• 效果展现

• 数据库截图

后端部分实现

文章内容初定包含以下字段：文章标题、文章内容、做者、文章标签、浏览数、评论数、发表时间、是否发布

因此定义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,
        content,
        isPublish,
        viewCount,
        commentCount,
        time,
        author,
        coverImg,
        tags
    });
    tempArticle.save().then(data=>{
        responseClient(res,200,0,'保存成功',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,tags,content。为了方便用户文章在写到通常的时候，切换别的菜单项。因此将他存储在state。在input中输入title,content,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, msgContent: res.message, msgType: 0});
                    setTimeout(function () {
                        location.replace('/');
                    }, 1000);
                } else {
                    yield put({type: IndexActionTypes.SET_MESSAGE, msgContent: res.message, msgType: 0});
                }
            }
        }
    }
}
复制代码

当文章发表成功后，咱们这里给定一秒后，跳转到文章管理界面，因为管理界面目前没有开发，因此如今跳转到管理界面后，是404.下一篇，咱们将介绍文章管理部分的功能开发。

文章预览

文章的预览，直接使用antd的modal，而后转换md语法，展现效果。

结束语

整体来讲，文章发布也是比较简单。一些细节，还但愿你们多多琢磨。至此，一个博客网站的核心功能就完成了。

项目实现步骤系列博客

• 实战react技术栈+express先后端博客项目（0）-- 预热一波
• 实战react技术栈+express先后端博客项目（1）-- 总体项目结构搭建、state状态树设计
• 实战react技术栈+express先后端博客项目（2）-- 前端react-xxx、路由配置
• 实战react技术栈+express先后端博客项目（3）-- 后端路由、代理以及静态资源托管等其余配置说明
• 实战react技术栈+express先后端博客项目（4）-- 博客首页代码编写以及redux-saga组织
• 实战react技术栈+express先后端博客项目（5）-- 先后端实现登陆功能
• 实战react技术栈+express先后端博客项目（6）-- 使用session实现免登录+管理后台权限验证
• 实战react技术栈+express先后端博客项目（7）-- 前端管理界面用户查看功能+后端对应接口开发
• 实战react技术栈+express先后端博客项目（8）-- 前端管理界面标签管理功能+后端对应接口开发
• 实战react技术栈+express先后端博客项目（9）-- 前端管理界面发表文章功能+后端对应接口
• 实战react技术栈+express先后端博客项目（10）-- 前端管理界面评论管理功能+后端对应接口开发
• 实战react技术栈+express先后端博客项目（11）-- 后端接口对应文章部分的增删改查
• 实战react技术栈+express先后端博客项目（12）-- 前端对于发文部分的完善（增删改查、分页等）
• 实战react技术栈+express先后端博客项目（13）-- 前端对于发文部分的完善（增删改查等）
• 实战react技术栈+express先后端博客项目（14）-- 内容详情页以及阅读数的展现
• 实战react技术栈+express先后端博客项目（15）-- 博客添加评论功能以及对应后端实现
• 实战react技术栈+express先后端博客项目（16）-- pm2 的使用说明
• 实战react技术栈+express先后端博客项目（17）-- 收工

学习交流

欢迎关注我的微信公众号: Nealyang 全栈前端，获取第一手文章推送和免费全栈电子书分享福利