陆陆续续的也写过一些后台管理系统，有团队合作的，也有自己负责的

以下就整理一些自己的心得，文中有vue和react的用例。

首先，拿到一个类似后台管理系统的项目的时候，先明确大概的功能的需求（可能也会有比较坑的时候是那种领导想到啥就加啥的情况），例如：国际化、权限系统...

ok，直接来...

1.  分层

管理系统一般可以划分为三层：

1. 菜单栏
2. 账户信息，以及其他被认为是整个系统层级的、（相对独立、使用频率极高,这两点参考）的功能，比如：站内信、换肤、系统设置、路由面包屑......
3. main区，主展示区，或者是叫主路由入口

2.系统级功能

1. 账户系统

• 登陆（注册）
• 修改密码
• 权限设计

     2. 换肤

     3. 国际化（我自己写的react用例）

     4. 站内信

     5. 面包屑（一个不错的包）

3. layout布局（登陆 or 未登录）---有链接哦

         思路来自react umi的目录设计，由登陆的状态决定layout采用哪种布局

          未登录： 登陆页面

         已登录： 页面布局（栗子：左侧菜单，右侧：main区域）

4. 菜单栏（已登陆）

       多数情况下：一、二、三级菜单

       无权限划分：   前端路由直接写，vue-router  or  react umi（推荐）

        有权限划分：   

       4.1  权限是某些特定的字符，在路由信息中配置这些字符，在登录之后进行路由的初始化（将拥有权限的路由放入）

两种方法更新权限:   a、每一次的http请求都附带一次用户信息获取的请求，刷新个人信息

                                 b、将个人信息存入本地，通过socket信息通知客户端重新登录，从而刷新个人信息

 5. 具体的功能页面

       a .            vue: 列表、搜索、分页,  （有用例链接哦）          react： 地址记录搜索条件 （这个也有）

       b.             增、删、改、查  

                        改和查合理运用路由query传值，    增做好检测工作，value是否符合规则

-----------------------------------------------------------------------------------------------------------------------------------------

系统功能的统一处理：

A.  请求

设置baseurl

封装请求方式，做统一的信息处理 ： 

               1. axios.create({})   统一设置，如：baseURL、headers等

               2. request  and  response  拦截，const instance = axios.create({})

使用UI组件显示，统一的处理错误的信息

最后 

export default function $axios (options) {

instance(options.sendData).then(res => { }).catch(error => { })

B.  站内信

new WebSocket

import store from '@/store'import qs from 'qs'import {getCookieToken} from '@/utils/auth'// import {messageTip} from '@/common/Noti'const {ws} = store.getters.apiConfigclass Websocket {opts = {query: {}}hbHandler = {}constructor (url, autoConnect) {this.url = url}init () {this._on('open', this._connectHandler)._on('message', this._messagehandler)._on('close', this._disconnectHandler)._on('error', this._errorHandler)}open () {this.setOpenQuery({authToken: getCookieToken()})this.$io = new WebSocket(this._wsUrl())this.init()}close () {this.closeWs()}closeWs () {if (this.$io) {this.$io.close()clearInterval(this.hbHandler)this._off('open', this._connectHandler)._off('message', this._messagehandler)._off('close', this._disconnectHandler)._off('error', this._errorHandler)}}commit (action) {let data = {action}this.$io && (this.$io.readyState === 1) && this.$io.send(JSON.stringify(data))if ((this.$io && (this.$io.readyState === 2)) || (this.$io && (this.$io.readyState === 3))) {this.close()}}_on (eventName, handler) {this.$io.addEventListener(eventName, handler)return this}_off (eventName, handler) {this.$io.removeEventListener(eventName, handler)return this}setOpenQuery (query = {}) {this.resetOptions({query})}resetOptions (opts) {Object.assign(this.opts, opts)}_wsUrl () {let url = new URL(this.url, window.location.href)url.protocol = url.protocol.replace('https', 'wss')return url.href + '?' + qs.stringify(this.opts.query)}_connectHandler = (event) => {console.log('连接->正常')this.i = 0this._heartBeat()}_heartBeat () {this.hbHandler = setInterval(() => {this.commit('heartbeat')}, 10000)}_messagehandler = (event) => {let meg = JSON.parse(event.data)//处理事件}_disconnectHandler = (event) => {//断开this.close()}_errorHandler = () => {//连接错误this.close()}}export default {install (Vue, options) {Vue.prototype.$ws = new Websocket(ws)}}

持续更新......