react全家桶+antd从零打造网站开发模板

笔者最近使用react全家桶开发项目的过程当中，发现后台网站之间功能内容差别较小，样式布局也大同小异，为提升网站开发的效率，同时也为了解放前端的生产力，因此打造了react-web这个react后台网站开发模板。

动图展现

• 功能简介
• 路由跳转
• 状态管理
• 本地存储
• 权限控制
• 统一的UI风格
• 同时还集成了react社区经常使用的插件，例如富文本编辑器、代码编辑器、excel表导入数据、百度地图、echars等，简单实用，易于配置。

在开发过程当中笔者注意组件化的开发方式，同时代码也注意书写风格，还结合了eslint作为语法检查的工具，经过配合antd框架，使页面风格十分简洁实用。

 一、登录页面

登录页面采用极简风格，只须要输入登陆用户名和密码便可成功登录（提示：若是须要注册功能或者找回密码功能只需添加相应的按钮便可），我已经把后端代码抽离出来了，因此逻辑十分简单

核心代码以下

handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
        if (!err) {
            const {username, password} = values
            if (username === 'admin' && password === 'admin') {
                let content = this.props.loginClick({ ...values, token: 'user_token' })
                this.context.router.push("/")
            }

        }
    });
}
复制代码

主要是经过在前端进行验证用户输入，而后调用redux进行保存用户的登录状态，从而进行用户的身份验证，应为只是后台模板，为了方便你们书写本身的逻辑，笔者已经把后端代码抽离出来，若是须要后台的话这里可能还要进行异步处理，这里各位能够结合本身的须要进行配置

二、首页

首页主要是网站重要信息的展现，这里结合了百度的echars进行首页的展现，你们查看源码便可明白其中的配置，这里主要说一下身份验证和侧面菜单栏的展现，首先看下首页效果

页面顶部主要是我的的信息和一些提示信息，这里重要的是模板配置了面包屑导航，方便用户能够回退到历史浏览记录，在这里，我设置的默认配置是登出后清除历史浏览记录的选项，由于考虑到笔者在实际开发过程当中使用到了身份验证功能，这就致使了面包屑导航的浏览记录并不适用于全部身份的用户，如需保留能够直接修改配置项，把清除选项注释掉就好

这里是一些主要的代码

export function clearMessage() {
       Cookies.set(ROUTER_HISTORY, {}, { expires: 0 })
        Cookies.set(LOGIN_TOKEN, '', { expires:0 }) }
复制代码

//页面登出,清除token和历史记录

在首页的侧边栏菜单是根据路由配置自动生成的，大大节约了开发者的路由配置时间，同时作了用户的身份验证，这样一来开发者能够经过验证用户身份来展现不一样的页面，这是一个重要的功能，这里只贴出了部分代码

const routes = [{
  path: "/",     //侧面菜单栏的路由必须是根路由的子路由哦！
  name: 'first-page',
  component: Main,
  meta: {
    icon: 'home',
    title: '首页',
    hideInMenu: false,
    access: ['student'],
    },
   indexRoute: { component: Home },
   childRoutes: [
    {
        path: "person",
        name: 'person-page',
        component: Person,
        onEnter: onRouteEnter,
        meta: {
            icon: 'team',
            title: '我的中心',
            hideInMenu: false,
            access: ['student'],
        }
    }, {
        path: "editor",
        name: 'editor-page',
        component: MyEditor,
        onEnter: onRouteEnter,
        meta: {
            icon: 'read',
            title: '富文本编辑器',
            hideInMenu: false,
            access: ['student'],
        }
    }, 
复制代码

须要注意如下几点

只有配置在根路由下的子路由才会在侧面菜单栏中显视 meta对象里面的配置必定要填写，其中icon表示菜单栏图标，title表示名称，hideMenu表示是否显示该菜单，access是用户权限控制 onRouteEnter是路由的生命周期函数，主要用于对用户的身份认证和路由过滤

三、其余功能插件

这里主要说下结合react社区提供的开发模块，给网站配置了一些经常使用的功能，例如富文本编辑器、代码编辑器、excel表导入数据、百度地图、echars等

• 3.1富文本编辑器，这里主要用到了react-draft-wysiwyg这个插件

• 3.2代码编辑器、这里用到了react-monaco-editor这个插件

  

• 3.2 excel表导入数据，这是一个实际开发中很是实用的功能

  

核心代码以下

readFile(file) {
    const reader = new FileReader()
    reader.readAsArrayBuffer(file)
    reader.onloadstart = e => {
        this.setState({
            uploadLoading: false,
            tableLoading: false,
            showProgress: true
        })
    }
    reader.onprogress = e => {
        this.progressPercent = Math.round(e.loaded / e.total * 100)
    }
    reader.onerror = e => {
        message.error('文件读取出错')
    }
    reader.onload = e => {
        message.info('文件读取成功')
        const data = e.target.result
        const { results } = excel.read(data, 'array')
        let infos = []
        results.forEach((item, index) => {
            infos.push({
                key:'key' + index,
                time: getMyDate(new Date().getTime(),"yyyy-MM-dd"),
                code: item['教师工号'],
                name: item['教师姓名'],
                major: item['负责方向'],
                experient: item["教学经验"],
                description: item['教师简介'],
            })

        })
        this.setState({
            newData: infos,
            uploadLoading: false,
            tableLoading: false,
            showRemoveFile: true
        })
    }
}
复制代码

• 3.3百度地图，定位也是一个重要的功能插件，这里也在模板中集成了

以上内容就是对react-web这个react后台模板的简单介绍，比较感兴趣的开发这能够上github连接上clone到本地进行开发，若是能够pr那就再好不过了，若是在开发过程当中遇到问题，能够给我提issue，我必定会在第一时间解决。

感受您的耐性读完，谢谢！