实战react技术栈+express前后端博客项目8-- 前端管理界面标签管理+后端对应接口开发

分类：React作者：编程之家用户

项目地址：https://github.com/Nealyang/R...

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

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

前面内容修改部分

由于该博客内容是开发和发文同步连载，所以在随着开发的进行，会修改之前的开发代码。

权限认证

对于权限认证之前我们只做了一部分权限管理，在前端页面发生跳转的时候，我们通过检测state的userInfo来确定当前登录用户是否有权访问。

但是，这里存在一个隐患，就是我登录到一个管理界面以管理员身份，但是知道我身份过期之前都没进行操作和跳转，一直在后端管理界面。然后当我身份过期以后，我进行了admin的一些管理操作（增删改查），且不涉及到页面的跳转。前端没法通过url来判断。

所以，这里我们修改了前后端内容，拦截所有的/admin的api操作，来判断身份是否过期。

admin.js

//admin请求后台验证

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,msgType: 0});
                 setTimeout(function () {
                     location.replace('/');
                 },1000);
             } else {
                 yield put({type: IndexActionTypes.SET_MESSAGE,msgType: 0});
             }
         }
     }

目前我没有想到可以一劳永逸不要每个saga都做处理的方法，如果兄弟们有好的想法，望不啬赐教，提issue，我们一起讨论

前端路由抽出组件

之前我们在前端页面中，front组件直接写的一个函数，后来发现不是很合理，因为front我需要将他变为容器组件。所以这里我们需要把它抽出来一个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的长度，因为现在tags是异步获取的。所以存在时差。比如命名可以访问/Html标签，但是由于是异步获取的tags，当在当前页面刷新的时候，tags并没有加载完全，所以会直接重定向到404页面。

标签管理运行效果展示

因为gif是在太大了所以这里就放两张图片，大家略微感受下。

  • 初始状态

  • 添加tag

状态]

  • 前端标签变化

  • 删除tag

态]

  • 回到初始状态，/Vue刷新会Redirect到404

g)

后端代码部分

//删除标签
router.get('/delTag',function (req,res) {
    let {name} = req.query;
    Tags.remove({name})
        .then(result => {
            if(result.result.n === 1){
                responseClient(res,'删除成功!')
            }else{
                responseClient(res,'标签不存在');
            }
        }).catch(err => {
        responseClient(res);
    });
});

//添加标签
router.post('/addTag',res) {
    let {name} = req.body;
    Tags.findOne({
        name
    }).then(result => {
        if (!result) {
            let tag = new Tags({
                name
            });
            tag.save()
                .then(data => {
                    responseClient(res,'添加成功',data);
                }).catch(err => {
                throw err
            })
        } else {
            responseClient(res,'该标签已存在');
        }
    }).catch(err => {
        responseClient(res);
    });
});


module.exports = router;

为了代码清晰，方便管理，这里直接就分路由到/tag下。操作很常规，就是删除和添加标签。

对于获取全部标签，我放到admin外面，因为毕竟前端页面也需要这个接口。如果都放到/api/admin/getAllTags的话，在/admin请求的时候会进行身份验证。所以将获取全部标签接口放到tags下是不合理的。

这里我们选择放在main.js中

//获取全部标签
router.get('/getAllTags',res) {
    Tags.find(null,'name').then(data => {
        responseClient(res,'请求成功',data);
    }).catch(err => {
        responseClient(res);
    })
});

前端部分修改

对于前端组织结构部分的修改上面已经说完了。这里说下saga中的处理

adminTag界面编码：

class AdminManagerTags extends Component{
    constructor(props){
        super(props);
        this.state={
            tags: ['首页','HTML','CSS','JAVASCRIPT'],inputVisible: false,inputValue: '',}
    }
    handleClose = (removedTag) => {
        //删除标签
        this.props.deleteTag(removedTag)
    };

    showInput = () => {
        this.setState({ inputVisible: true },() => this.input.focus());
    };

    handleInputChange = (e) => {
        this.setState({ inputValue: e.target.value });
    };

    handleInputConfirm = () => {
        // 添加标签
        this.props.addTag(this.state.inputValue);
        this.setState({
            inputVisible: false,});
    };

    saveInputRef = input => this.input = input;
    render(){
        const { inputVisible,inputValue } = this.state;
        const {tags} = this.props;
        return(
            <div>
                <h2 className={style.titleStyle}>标签管理</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 && (
                    <Input
                        className={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,addTag : bindActionCreators(add_tag,}
}

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: '网络请求错误',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,msgType: 1});
            yield put({type:ManagerTagsTypes.GET_ALL_TAGS});
        } 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});
        }
    }
}

操作和之前的都没有两样，需要注意的就是这里返回信息我们多判断了一层用户信息是否过期以及在saga中的处理。

结束语

至此，标签管理也基本完事了。对于前端页面路由的Link还是history.push这里就不做解释了。大家可以多看看代码。

下一篇我们将进行文章的操作的。发文，增删改查等功能。

项目实现步骤系列博客

## 交流

倘若有哪里说的不是很明白，或者有什么需要与我交流，欢迎各位提issue。或者加群联系我~

扫码关注我的个人微信公众号，直接回复，必有回应。分享更多原创文章。点击交流学习加我微信、qq群。一起学习，一起进步

---

欢迎兄弟们加入：

Node.js技术交流群：209530601

React技术栈：398240621

前端技术杂谈：604953717 (新建)

---

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

react 学习11高阶组件
react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如果组件之中有复用的代码，需要重新创建一个父类，父类中存储公共代码，返回子类，同时把公用属性...
react 学习(四) 批量更新及合成事件
我们上一节了解了组件的更新机制，但是只是停留在表层上，例如我们的 setState 函数式同步执行的，我们的事件处理直接绑定在了 dom 元素上，这些都跟 re...
react 学习(二) 实现类和函数式组件
我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层，一个是调...
react 学习12实现 cloneElement
react 本身提供了克隆组件的方法，但是平时开发中可能很少使用，可能是不了解。我公司的项目就没有使用，但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
实现简版 react 状态管理器 mobx
mobx 是一个简单可扩展的状态管理库，中文官网链接。小编在接触 react 就一直使用 mobx 库，上手简单不复杂。
mini react-window(一) 实现固定高度虚拟滚动
我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc 端可以使用分页进行渲染数限制，在移动端可以使用下拉加载更多。但是对于大量的列表渲染，特别像有实时数据...
react 学习(六) 函数组件实例及类组件生命周期
本小节开始前，我们先答复下一个同学的问题。上一小节发布后，有小伙伴后台来信问到：‘小编你只讲了类组件中怎么使用 ref，那在函数式组件中怎么使用呢？’。确实我们...
mini react-window(二) 实现可知变化高度虚拟列表
上一小节我们了解了固定高度的滚动列表实现，因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到，这种场景也适合我们常见的大部分场景，例如...
react 学习(五) 完善 setState 及实现 ref
上一小节我们处理了 setState 的批量更新机制，但是我们有两个遗漏点，一个是源码中的 setState 可以传入函数，同时 setState 可以传入第二...
react 学习13实现 PureComponent
我们知道 react 进行页面渲染或者刷新的时候，会从根节点到子节点全部执行一遍，即使子组件中没有状态的改变，也会执行。这就造成了性能不必要的浪费。之前我们了解...
react学习(十) React 中的 context
在平时工作中的某些场景下，你可能想在整个组件树中传递数据，但却不想手动地通过 props 属性在每一层传递属性，contextAPI 应用而生。
react 学习(一) 实现简版虚拟 dom 和挂载
楼主最近入职新单位了，恰好新单位使用的技术栈是 react，因为之前一直进行的是 vue2/vue3 和小程序开发，对于这些技术栈实现机制也有一些了解，最少面试...
react 学习(三) 组件更新
我们上一节了了解了函数式组件和类组件的处理方式，本质就是处理基于 babel 处理后的 type 类型，最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
react学习(八) diff 算法实现
前面几节我们学习了解了 react 的渲染机制和生命周期，本节我们正式进入基本面试必考的核心地带 -- diff 算法，了解如何优化和复用 dom 操作的，还有...
react学习(九) React 新的生命周期
我们在之前已经学习过 react 生命周期，但是在 16 版本中 will 类的生命周期进行了废除，虽然依然可以用，但是需要加上 UNSAFE 开头，表示是不安...
react 学习14实现 React.memo
上一小节我们学习了 react 中类组件的优化方式，对于 hooks 为主流的函数式编程，react 也提供了优化方式 memo 方法，本小节我们来了解下它的用...
细聊Concent & Recoil , 探索react数据流的新开发模式
开源不易，感谢你的支持，❤ star me if you like concent ^_^
使用hel-micro制作远程antd、tdesign-react
hel-micro，模块联邦sdk化，免构建、热更新、工具链无关的微模块方案 ，欢迎关注与了解
setup vs 5 react hooks,助你避开"沟"中陷阱
本文主题围绕concent的setup和react的五把钩子来展开，既然提到了setup就离不开composition api这个关键词，准确的说setup是由...
setState 同步 与异步
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot