實戰react技術棧+express前後端部落格專案（9）– 前端管理介面發表文章功能+後端對應介面

Neal_yang發表於2019-02-21
ReactExpress後端前端

專案地址：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語法，展示效果。

結束語

總體來說，文章釋出也是比較簡單。一些細節，還希望大家多多琢磨。至此，一個部落格網站的核心功能就完成了。

專案實現步驟系列部落格

歡迎兄弟們加入：

Node.js技術交流群：209530601

React技術棧：398240621

前端技術雜談：604953717 (新建)

相關文章