項(xiàng)目地址：https://github.com/Nealyang/R...

本想等項(xiàng)目做完再連載一波系列博客，隨著開發(fā)的進(jìn)行，也是的確遇到了不少坑，請教了不少人。遂想，何不一邊記錄踩坑，一邊分享收獲呢。分享當(dāng)然是好的，
如果能做到集思廣益，那豈不是更美。我們的口號是：堅(jiān)決不會爛尾

本博客為連載代碼博客同步更新博客，隨著項(xiàng)目往后開發(fā)可能會遇到前面寫的不合適的地方會再回頭修改。如有不妥~歡迎兄弟們不嗇賜教。謝謝！

前面內(nèi)容修改部分

由于該博客內(nèi)容是開發(fā)和發(fā)文同步連載，所以在隨著開發(fā)的進(jìn)行，會修改之前的開發(fā)代碼。

權(quán)限認(rèn)證

對于權(quán)限認(rèn)證之前我們只做了一部分權(quán)限管理，在前端頁面發(fā)生跳轉(zhuǎn)的時候，我們通過檢測state的userInfo來確定當(dāng)前登錄用戶是否有權(quán)訪問。

但是，這里存在一個隱患，就是我登錄到一個管理界面以管理員身份，但是知道我身份過期之前都沒進(jìn)行操作和跳轉(zhuǎn)，一直在后端管理界面。然后當(dāng)我身份過期以后，我進(jìn)行了admin的一些管理操作（增刪改查），且不涉及到頁面的跳轉(zhuǎn)。前端沒法通過url來判斷。

所以，這里我們修改了前后端內(nèi)容，攔截所有的/admin的api操作，來判斷身份是否過期。

admin.js

//admin請求后臺驗(yàn)證router.use( (req,res,next) =>{if(req.session.userInfo){next()}else{res.send(responseClient(res,200,1,'身份信息已過期，請重新登錄'));} });

在前端saga里我們需要判斷接口返回的信息。

export function* delTagFlow() {while (true){let req = yield take(ManagerTagsTypes.DELETE_TAG);let res = yield call(delTag,req.name);if (res.code === 0) {yield put({type: IndexActionTypes.SET_MESSAGE, msgContent: res.message, msgType: 1});yield put({type:ManagerTagsTypes.GET_ALL_TAGS});} 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});}}}

目前我沒有想到可以一勞永逸不要每個saga都做處理的方法，如果兄弟們有好的想法，望不嗇賜教，提issue，我們一起討論

前端路由抽出組件

之前我們在前端頁面中，front組件直接寫的一個函數(shù)，后來發(fā)現(xiàn)不是很合理，因?yàn)閒ront我需要將他變?yōu)槿萜鹘M件。所以這里我們需要把它抽出來一個class作為container

const {get_all_tags} = actions;class Front extends Component{constructor(props){super(props);}render(){const {url} = this.props.match;return(<div><div className={`${animationStyle.animated} ${animationStyle.fadeInDown}`}><Banner/><Menus categories={this.props.categories} history={this.props.history}/></div><Switch><Route exact path={url} component={Home}/><Route path={`/detail/:id`} component={Detail}/><Route path={`/:tag`} component={Home}/><Route component={NotFound}/></Switch></div>)}componentDidMount() {this.props.get_all_tags();} }Front.defaultProps = {categories:[] };Front.propTypes = {categories:PropTypes.array.isRequired };function mapStateToProps(state) {return{categories:state.admin.tags} } function mapDispatchToProps(dispatch) {return{get_all_tags:bindActionCreators(get_all_tags,dispatch)} } export default connect(mapStateToProps,mapDispatchToProps )(Front)

Home.js 路由判斷重定向

return (tags.length>1&&this.props.match.params.tag && (tags.indexOf(this.props.match.params.tag) === -1 || this.props.location.pathname.lastIndexOf('\/') > 0)?<Redirect to='/404'/>:<div className={style.container}><div className={style.contentContainer}><div className={`${style.newsContainer} ${anStyle.animated} ${anStyle.fadeInUp}`}><ArticleList/><div className={style.paginationContainer}><Pagination defaultCurrent={6} total={500}/></div></div><div className={`${style.loginContainer} ${anStyle.animated} ${anStyle.fadeInRight}`}>{this.props.userInfo.userId?<Logined history={this.props.history} userInfo={this.props.userInfo}/>:<Login login={login} register={register}/>}</div></div></div>)

這里我們需要判斷tags的長度，因?yàn)楝F(xiàn)在tags是異步獲取的。所以存在時差。比如命名可以訪問/Html標(biāo)簽，但是由于是異步獲取的tags，當(dāng)在當(dāng)前頁面刷新的時候，tags并沒有加載完全，所以會直接重定向到404頁面。

標(biāo)簽管理運(yùn)行效果展示

因?yàn)間if是在太大了所以這里就放兩張圖片，大家略微感受下。

• 初始狀態(tài)

• 添加tag

狀態(tài)]

• 前端標(biāo)簽變化

• 刪除tag

態(tài)]

• 回到初始狀態(tài)，/Vue刷新會Redirect到404

g)

后端代碼部分

//刪除標(biāo)簽 router.get('/delTag', function (req, res) {let {name} = req.query;Tags.remove({name}).then(result => {if(result.result.n === 1){responseClient(res,200,0,'刪除成功!')}else{responseClient(res,200,1,'標(biāo)簽不存在');}}).catch(err => {responseClient(res);}); });//添加標(biāo)簽 router.post('/addTag', function (req, res) {let {name} = req.body;Tags.findOne({name}).then(result => {if (!result) {let tag = new Tags({name});tag.save().then(data => {responseClient(res, 200, 0, '添加成功', data);}).catch(err => {throw err})} else {responseClient(res, 200, 1, '該標(biāo)簽已存在');}}).catch(err => {responseClient(res);}); });module.exports = router;

為了代碼清晰，方便管理，這里直接就分路由到/tag下。操作很常規(guī)，就是刪除和添加標(biāo)簽。

對于獲取全部標(biāo)簽，我放到admin外面，因?yàn)楫吘骨岸隧撁嬉残枰@個接口。如果都放到/api/admin/getAllTags的話，在/admin請求的時候會進(jìn)行身份驗(yàn)證。所以將獲取全部標(biāo)簽接口放到tags下是不合理的。

這里我們選擇放在main.js中

//獲取全部標(biāo)簽 router.get('/getAllTags', function (req, res) {Tags.find(null,'name').then(data => {responseClient(res, 200, 0, '請求成功', data);}).catch(err => {responseClient(res);}) });

前端部分修改

對于前端組織結(jié)構(gòu)部分的修改上面已經(jīng)說完了。這里說下saga中的處理

adminTag界面編碼：

class AdminManagerTags extends Component{constructor(props){super(props);this.state={tags: ['首頁', 'HTML', 'CSS','JAVASCRIPT'],inputVisible: false,inputValue: '',}}handleClose = (removedTag) => {//刪除標(biāo)簽this.props.deleteTag(removedTag)};showInput = () => {this.setState({ inputVisible: true }, () => this.input.focus());};handleInputChange = (e) => {this.setState({ inputValue: e.target.value });};handleInputConfirm = () => {// 添加標(biāo)簽this.props.addTag(this.state.inputValue);this.setState({inputVisible: false,inputValue: '',});};saveInputRef = input => this.input = input;render(){const { inputVisible, inputValue } = this.state;const {tags} = this.props;return(<div><h2 className={style.titleStyle}>標(biāo)簽管理</h2>{tags.map((tag, index) => {const isLongTag = tag.length > 20;const tagElem = (<Tag className={style.tagStyle} key={index} closable={index !== 0} afterClose={() => this.handleClose(tag)}>{isLongTag ? `${tag.slice(0, 20)}...` : tag}</Tag>);return isLongTag ? <Tooltip key={tag} title={tag}>{tagElem}</Tooltip> : tagElem;})}{inputVisible && (<InputclassName={style.tagStyle}ref={this.saveInputRef}type="text"size="small"style={{ width: 108 }}value={inputValue}onChange={this.handleInputChange}onBlur={this.handleInputConfirm}onPressEnter={this.handleInputConfirm}/>)}{!inputVisible && <Button className={style.tagStyle} size="small" type="dashed" onClick={this.showInput}>+ New Tag</Button>}</div>)}componentDidMount() {this.props.getAllTags();} }function mapStateToProps(state) {return{tags:state.admin.tags} }function mapDispatchToProps(dispatch) {return{getAllTags : bindActionCreators(get_all_tags,dispatch),deleteTag : bindActionCreators(delete_tag,dispatch),addTag : bindActionCreators(add_tag,dispatch),} }export default connect(mapStateToProps,mapDispatchToProps )(AdminManagerTags)

saga的處理：

export function* delTag(name) {yield put({type: IndexActionTypes.FETCH_START});try {return yield call(get, `/admin/tags/delTag?name=${name}`);} catch (err) {yield put({type: IndexActionTypes.SET_MESSAGE, msgContent: '網(wǎng)絡(luò)請求錯誤', msgType: 0});} finally {yield put({type: IndexActionTypes.FETCH_END})} } ... ...export function* delTagFlow() {while (true){let req = yield take(ManagerTagsTypes.DELETE_TAG);let res = yield call(delTag,req.name);if (res.code === 0) {yield put({type: IndexActionTypes.SET_MESSAGE, msgContent: res.message, msgType: 1});yield put({type:ManagerTagsTypes.GET_ALL_TAGS});} 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});}} }

操作和之前的都沒有兩樣，需要注意的就是這里返回信息我們多判斷了一層用戶信息是否過期以及在saga中的處理。

結(jié)束語

至此，標(biāo)簽管理也基本完事了。對于前端頁面路由的Link還是history.push這里就不做解釋了。大家可以多看看代碼。

下一篇我們將進(jìn)行文章的操作的。發(fā)文，增刪改查等功能。

項(xiàng)目實(shí)現(xiàn)步驟系列博客

• 實(shí)戰(zhàn)react技術(shù)棧+express前后端博客項(xiàng)目（0）-- 預(yù)熱一波
• 實(shí)戰(zhàn)react技術(shù)棧+express前后端博客項(xiàng)目（1）-- 整體項(xiàng)目結(jié)構(gòu)搭建、state狀態(tài)樹設(shè)計(jì)
• 實(shí)戰(zhàn)react技術(shù)棧+express前后端博客項(xiàng)目（2）-- 前端react-xxx、路由配置
• 實(shí)戰(zhàn)react技術(shù)棧+express前后端博客項(xiàng)目（3）-- 后端路由、代理以及靜態(tài)資源托管等其他配置說明
• 實(shí)戰(zhàn)react技術(shù)棧+express前后端博客項(xiàng)目（4）-- 博客首頁代碼編寫以及redux-saga組織
• 實(shí)戰(zhàn)react技術(shù)棧+express前后端博客項(xiàng)目（5）-- 前后端實(shí)現(xiàn)登錄功能
• 實(shí)戰(zhàn)react技術(shù)棧+express前后端博客項(xiàng)目（6）-- 使用session實(shí)現(xiàn)免登陸+管理后臺權(quán)限驗(yàn)證
• 實(shí)戰(zhàn)react技術(shù)棧+express前后端博客項(xiàng)目（7）-- 前端管理界面用戶查看功能+后端對應(yīng)接口開發(fā)
• 實(shí)戰(zhàn)react技術(shù)棧+express前后端博客項(xiàng)目（8）-- 前端管理界面標(biāo)簽管理功能+后端對應(yīng)接口開發(fā)
• 實(shí)戰(zhàn)react技術(shù)棧+express前后端博客項(xiàng)目（9）-- 前端管理界面評論管理功能+后端對應(yīng)接口開發(fā)
• 實(shí)戰(zhàn)react技術(shù)棧+express前后端博客項(xiàng)目（10）-- 前端管理界面發(fā)表文章功能
• 實(shí)戰(zhàn)react技術(shù)棧+express前后端博客項(xiàng)目（11）-- 后端接口對應(yīng)文章部分的增刪改查
• 實(shí)戰(zhàn)react技術(shù)棧+express前后端博客項(xiàng)目（12）-- 前端對于發(fā)文部分的完善（增刪改查、分頁等）
• 實(shí)戰(zhàn)react技術(shù)棧+express前后端博客項(xiàng)目（13）-- 前端對于發(fā)文部分的完善（增刪改查等）
• 實(shí)戰(zhàn)react技術(shù)棧+express前后端博客項(xiàng)目（14）-- 內(nèi)容詳情頁以及閱讀數(shù)的展示
• 實(shí)戰(zhàn)react技術(shù)棧+express前后端博客項(xiàng)目（15）-- 博客添加評論功能以及對應(yīng)后端實(shí)現(xiàn)
• 實(shí)戰(zhàn)react技術(shù)棧+express前后端博客項(xiàng)目（16）-- pm2 的使用說明
• 實(shí)戰(zhàn)react技術(shù)棧+express前后端博客項(xiàng)目（17）-- 收工

## 交流

倘若有哪里說的不是很明白，或者有什么需要與我交流，歡迎各位提issue。或者加群聯(lián)系我~

掃碼關(guān)注我的個人微信公眾號，直接回復(fù)，必有回應(yīng)。分享更多原創(chuàng)文章。點(diǎn)擊交流學(xué)習(xí)加我微信、qq群。一起學(xué)習(xí)，一起進(jìn)步

---

歡迎兄弟們加入：

Node.js技術(shù)交流群：209530601

React技術(shù)棧：398240621

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

---

總結(jié)

以上是生活随笔為你收集整理的实战react技术栈+express前后端博客项目（8）-- 前端管理界面标签管理+后端对应接口开发...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。