vue后台系统开发实践

Js Webpack Vue Front End

Vue后台系统开发实践

依赖库

  • vue@2.4.4
  • vue-router@3.0.0
  • vuex@3.0.0
  • axios
  • element-ui

搭建流程

  1. webpack-template

  2. createApp.js, createRouter.js, store.js, http.js

    • createaApp.js 多页时候用来配置各个页面相同的vue选项,比如配置api,mixin等等
    • createRouter.js 多页时候用到配置各个页面相同的路由选项,比如配置路由模式,路由钩子等等
    • store.js 配置全局状态管理.state,action,mutation,getter
    • http.js 配置异步请求, 例如: baseRoot, 请求钩子interceptors

  3. utils.js, ConstValue.js, mixin.js, registerComponent.js

    • utils.js 工具类函数
    • ConstValue.js 常量,例如: isProduction, httpRoot(后端地址)
    • mixin.js 混合
    • registerComponent.js 将经常用到的组件在这里引入并注册为全局组件

  4. route.js, app.js

    • route/.js 具体的路由
    • app.js 每个页面的app启动页

  5. page-view&components

    • 页面级内容

后台大致内容

  • 登录/权限
  • 列表页
  • 详情/审核页
  • 创建/修改页

问题分析

  • 登录/权限

    • 登录态的保存.以及用户权限的判断
      1. 后端设置sessionid, 前端只需要在axios配置withCredentials=true.(此方法在Safari行不通,safari默认选项(仅)允许来自我访问的网站, 由于后端地址不是直接访问.所以safari不会带上cookie去请求.部署的时候将前后端都部署到同一个nginx就可以解决)
      2. json web token(jwt)
      3. 后端生成token,并由保存在http header.
      4. 权限判断一种是导航显示控制,一种是直接通过url进去后的判断

  • 列表页

    • 内容过多.会引起页面滚动.表头以及两侧需固定

      1. 全局滚动.(表格过大.页面整体会被撑开)
      2. 容器内滚动.(表格显得很狭窄)
      3. 垂直方向全局滚动, 水平方向是局部滚动. (页面宽度不被撑开, 加虚拟滚动条辅助时候水平滚动不需要拉到最后)
      4. Demo

    • 有很多的查询条件

      • 查询需要被保留,同时url需要被查询条件修改($router.replace)

    • 每一个列表页类似.但又有不同,主要差异在于查询条件以及表格内容

      • 使用mixin
      • 设置查询query
      • 根据query以及url获取数据
      • 对数据进行处理,比如: loading态设为false, 初始化多选等. 看具体

    • 列表页/详情页切换后列表数据的保存(保留列表页状态)

      • vuex(全局状态管理, 写起来会很多,一个页面一个state,action,mutation,getters)
      • keepAlive(active/mounted获取数据, active会导致数据次数过多, mounted会导致数据不同步. 此时可以使用trigger,主动触发列表页拉取数据)

  • 详情页/审核页

    • 数据展示形式类似. 形如: label: content;

      • 声明式会导致页面重复内容过多
      • 封装Field组件,通过js去配置数据展示

    • 布局类似

      • 这是无解的,除非真的很像很像.就可以用mixin解决

  • 创建/修改页

    • 数据形式类似. 形如: label: form

      • 声明式同样导致重复内容过多
      • 依然使用封装的Field组件,通过js去配置form.

    • 数据验证. 简单点就是能否提交

      • 要么逐个验证
      • 要么简单粗暴添加一个canSave的computed.保证数据不为空

组件

  • Table(如上所说) Demo

  • LoadingBar(顶部的进度条,主要是切换路由时候出现,挂在beforeEach和afterEach中调用, 有异步路由时候建议使用)

  • Message(消息提示)

    实现方式

      1. 使用createElement创建dom元素,并且把message组件挂载上去即可,不过需要使用到vue完整版
  2. 将组件挂在到App.vue中,并使用vuex管理其状态. 可以在初次调用message时候才注册store

  • Modal 没什么好说.哪里用到就声明一个Modal.

  • Confirm(确认式提升,与message一样的实现方式)

  • AsyncButton(会触发异步操作的按钮,监听异步请求的路由,当请求未结束时button处于loading态.)

  • AutoCompleteInput(带搜索建议的Input. 可以封装多装搜索框)

  • Panel (可收缩面包.很简单)

  • Field (label: content\form; 类型展示组件)

  • Pagination (分页,很简单)

  • Tree (树, 使用递归组件即可, 如果要做节点多选, 管理选择状态会比较麻烦.)

  • Select, Checkbox, Radio, Switch (自定义组件v-model即可,简单)

  • Spin (请求时间很长的时候, 可以弹出model,并构建一个假的进度条. 上传文件的时候也能用到,当然这时候的进度是真实的.通过onprogress获取)

  • BackToTop (回到顶部, 加个贝塞尔动画就好了)

  • Scroller (自定义非原生滚动条, 建议直接用css来设置原生scroll样式.目前应该firefox不支持设置原生滚动条样式)

  • Img (hover时候出现蒙层.点击时候出现查看器)

建议

  1. 如果对组件进行for命令,必须加上:key,这是官方指定. 但对于原生dom进行for循环时候.其实可以不加:key,或者使用index作为key. 一旦设置了key,只有key得值不一样,会直接销毁重建dom. 那么用index作为key的话,则只会更新dom而不会销毁重建

  2. 任何通过addEventListeners添加的监听事件,销毁时最好使用removeEventListeners给去掉

  3. 如果不需要运行时构建,可以在webpack中指定使用vue.runtime.js, 会剩了几十k体积

  4. sass-loader前再加一层sass-resources-loader可以将一些变量或者方法全局引入,那就不用到处import了.

    {
        loader: 'sass-resources-loader',
        options: {
            resources: [path.resolve(__dirname, '../src/sass/variable.scss')]
        }
    }

安利

Fundebug

EasyMock

Apizza