后台管理系统--前端解决思路

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

以下就整理一些自己的心得，文中有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.apiConfig

class 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 = 0
    this._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)
  }
}

持续更新......