vue后台系统开发实践

[zWingz]

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