VUE全家桶在SAAS前端系统的实践

2018-01-04 14:21:03:  

xxx Web代码设计文档

一、系统业务需求

  1. 系统与后台api服务器分离,前端单独进行开发、调试。并可发布到后台服务器的public目录下,以便做到功能版本统一规划。

  2. 系统分为saas部署与私有化部署,需要针对不同部署方式和不同版本进行项目初始化、功能菜单进行区分。

  3. 系统具有框架级二级菜单,并且每个菜单均有可能具备列表页、新增页、详情页、权限受限提示页等其他类型页面。

  4. 系统的每个页面均有可能存在tab下有多个业务子页面、model弹框内容复杂,如若多个tab下代码写一起,会导致单个页面业务过重、后期无法维护情况。

  5. 系统有图表、自己的font字体显示需求,需要单独引用第三方图表和使用设计人员给的font字体进行展示的需求。

  6. 系统需要对http请求进行拦截,并且对后台返回的http错误、业务错误进行统一提示。

  7. 二、层级结构

项目配置层

主要需要满足需求1,如图:

  1. build:项目相关webpack相关配置(包含热更新、loaders、webpack开发环境、生产环境、测试环境等配置)

  2. config:项目全局变量(作用于webpack和项目代码的全局变量使用、这里分为基础全局变量、开发环境全局变量、生产环境全局变量,可在此定义一些开发环境、生产环境不同的变量)

  3. dist:项目进行生产环境打包时,会把编译后的代码打包到此目录,直接拷贝此目录下代码放到后台服务器的public目录下即可运行。

  4. src:项目业务代码层

  5. static:用来存放项目所使用到的第三方代码(因为此目录存放内容不会经过webpack编译,webpack会直接把它们复制到dist目录下,所以我们需要单独在index.html的script标签中进行引用)

  6. test:项目配置的自动化测试相关代码(目前暂时没用到)

  7. .babelrc:es6 -> es5的相关转换规则

  8. .editorconfig:此项目编辑代码风格、方式的相关配置

  9. .eslintignore、.eslintrc.js:eslit忽略文件和相关验证规则

  10. .npmrc:项目的npm相关配置(比如使用淘宝镜像源)

  11. .postcssrc.js:自动转换css的相关规则

  12. index.html:项目的html容器页面

  13. package.json:相关npm包管理

项目代码层

本层代码在src目录下,主要满足需求2、3、4、5、6。如图:

  1. assets:公司内部设计的图片、font字体存放目录(此目录存放的image、font等会被webpack编译到代码中)

  2. components:项目通用组件(比如面包屑、菜单导航等)

  3. constant:项目全局变量,可以存放不同版本的菜单权限信息等(暂未用到)

  4. mapper:api服务器返回的业务错误码与业务错误信息的对应关系。

  5. pages:项目具体页面的业务代码

  6. router:项目各个页面、子页面的路由器

  7. store:项目所使用的vuex,目前主要使用到state、mutation、action、modules和命名空间等功能。主要处理同级页面、父子页面之间数据沟通、调用业务

  8. style:项目各个页面、子页面的样式

  9. utils:自己写的工具类(比如基于axios的http拦截器、日期格式化等)

  10. App.vue:整个项目跟组件、用来承载整个项目的子路由的分发

  11. Main.js:项目入口文件,用来引入vue、vuex、router、element-ui、axios、lodash等类库

  12. 三、层级代码业务分析

pages具体业务层

  1. 属于基础页面的就直接放到pages目录下,并且页面前缀需要加上Base,比如:BaseLogin.vue、BaseFramework.vue

  2. 属于菜单的页面,需要创建目录,按照页面类型进行存放,并且在页面前缀加上目录名称,比如:设备管理有框架页、列表页、详情页、受权限提示页,,这样就完美的解决了需求3的问题。如图:

这里的DevicesFramework.vue是主要用来处理项目一级菜单在router的层级关系,方便于新增页、列表页、详情页、受权限提示页在router中层级关系的确立。

  1. 单页面中存在多个tab,或存在多个业务复杂的model时,需要根据业务创建属于单页面的子页面,比如:策略详情下有四个tab,所以就在details下再创建页面,如图

红框中是四个tab分别对应的子页面,它们的存放位置与StrategyDetails.vue页面同级,不同的是命名上在StrategyDetails的基础上增加了子页面相关名称。

当创建完每个tab的子页面后,只需要在StrategyDetails.vue引用即可,这样就完美的解决了需求4的问题。如图:

  1. 由于每个版本(标准版、专业版、旗舰版)的价钱不同,所以不同版本就有不同的功能、页面,从而我们就需要对我们菜单设置是否正常显示(当权限允许,菜单可正常使用;当权限不允许,菜单显示权限受限提示页,引导用户花钱升级版本使用完整菜单功能),这样就可以解决需求2的问题

实现逻辑:

  1. 1  在用户登录后,api会返回此用户的菜单权限,我们会把相关权限写到vuex中。

  2. 2  对需要进行菜单权限过滤的页面添加“权限受限提示页”代码及路由,如图:

  1. 3  当用户要进入某个菜单时,通过路由守卫来过滤此用户的菜单权限是否可以进入。如果可以进入,next;如果不可以进入,自动跳转到权限受限提示页,具体路由守卫代码如图:

注:路由守卫代码需要写到具体需要过滤受限的页面里面

store页面间调用层和业务请求层

  1. 目前每个页面对应的vuex分为state、getter、types、mutation、action、service、modules层

  2. state、getter、types、mutation、action主要处理页面状态树,由于目前大部分业务都会放到pages中处理,所以这一系列操作主要负责页面与页面之间的数据传递。

  3. service主要处理和api服务器的http请求,通过pages调用action、然后action调用service服务来向api进行请求数据

  4. 在之前的pages层讲到了详情页有tab或model页面进行单独分离页面的情况,所以在vuex中就有了相对应的每个页面的状态,如图:

比如策略详情下有基本信息、应用、功能、用户等子页面,所以在StrategyDetails/modules下就有基本信息、应用、功能、用户等子页面所对应的vuex的state、getter、action等等。这样和上述中讲到的pages具体业务层的第3点联合起来实现了每个子页面的业务分离

style样式层

  1. style的源码在src/style目录下,Base.less中包含自定义方便使用的class、和重构的element-ui框架的样式,具体修改了框架的input、button、table、dialog等等

  2. 命名规则与pages每个子页面的规则一致

router路由层

  1. 首先使用vue-router提供的按需加载分割编译后的文件大小

  2. 每个路由在meta属性中都包含label属性,这个属性的值就是显示在界面上的菜单名称

  3. 每个菜单对应的路由都对应pages页面中的XXXFramework.vue,比如:路由application对应ApplicationFramework.vue用来承载不同类型的子页面路由,如图:


Tags :

精品书籍

更多

HTML5与CSS3权威指南代码清单
Sass和Compass设计师指南
JavaScript框架高级编程

最新评论

drakice
对 : java使用urlConnection抓取部分数据乱码
评论 : hahaha!!!!

爱仕达
对 : 关于我
评论 : 爱仕达

7890
对 : 关于我
评论 : 7890

6789
对 : 关于我
评论 : 6789

56785678
对 : 关于我
评论 : 5678