3 前端框架

3.1 脚手架工程

技术栈


  • vue 2.5++
  • elementUI 2.2.2
  • vuex
  • axios
  • vue-router
  • vue-i18n

前端环境


  • node 8.++
  • npm 5.++

3.2 启动与安装

(1)解压提供的资源包

(2)在命令提示符进入该目录,输入命令:

cnpm install

通过淘宝镜像下载安装所有的依赖,几分钟后下载完成

如果没有安装淘宝镜像,请使用npm install

(3)关闭语法检查

打开 config/index.js 将useEslint的值改为false。

useEslint: false,


此配置作用: 是否开启语法检查,语法检查是通过ESLint 来实现的。我们现在科普一下,什么是ESLint : ESLint是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。如果我们开启了Eslint , 也就意味着要接受它非常苛刻的语法检查,包括空格不能少些或多些,必须单引不能双引,语句后不可以写分号等等,这些规则其实是可以设置的。我们作为前端的初学者,最好先关闭这种校验,否则会浪费很多精力在语法的规范性上。如果以后做真正的企业级开发,建议开启


(4)输入命令:

npm run dev

3.3 工程结构

整个前端工程的工程目录结构如下:

├── assets                         | 资源
├── build | webpack编译配置
├── config | 全局变量
├── src | 源码
│ ├── api | 数据请求
│ ├── assets | 资源
│ ├── components | 组件
│ ├── mixins | mixins
│ ├── filters | vue filter
│ ├── icons | 图标
│ ├── lang | 多语言
│ ├── router | 路由
│ ├── store | 数据
│ ├── styles | 样式
│ ├── utils | 工具函数库
│ ├── module-dashboard | 框架程序
│ │ ├── assets
│ │ ├── components
│ │ ├── pages
│ │ ├── router
│ │ └── store
│ ├── module-example | 示例程序
│ │ ├── assets
│ │ ├── components
│ │ ├── pages
│ │ ├── router
│ │ └── store
│ ├── App.vue | app
│ ├── main.js | 主引导
│ └── errorLog.js | vue全局错误捕捉
├── dist | 编译发布目录
├── README.md
├── index.html | 页面模板
├── package.json | npn包配置
├── static
└── test | 测试
├── e2e
└── unit

3.4 执行流程分析

3.4.1 路由和菜单

路由和菜单是组织起一个后台应用的关键骨架。本项目侧边栏和路由是绑定在一起的,所以你只有在​​@/router/index.js​​ 下面配置对应的路由,侧边栏就能动态的生成了。大大减轻了手动编辑侧边栏的工作量。当然这样就需要在配置路由的时候遵循很多的约定

这里的路由分为两种, ​​constantRouterMap​​​ 和 ​​asyncRouterMap​​ 。


  • ​constantRouterMap​​ 代通用页面。
  • ​asyncRouterMap​​​ 代表那些业务中通过 ​​addRouters​​ 动态添加的页面。

SaaS-多租户SaaS平台的数据库方案(前端框架)_多租户SaaS平台的数据库方案

3.4.2 前端数据交互

一个完整的前端 UI 交互到服务端处理流程是这样的:


  1. UI 组件交互操作;
  2. 调用统一管理的 api service 请求函数;
  3. 使用封装的 request.js 发送请求;
  4. 获取服务端返回;
  5. 更新 data;

从上面的流程可以看出,为了方便管理维护,统一的请求处理都放在 src/api 文件夹中,并且一般按照 model纬度进行拆分文件

api/
frame.js
menus.js
users.js
permissions.js
...

其中, ​​src/utils/request.js​​​ 是基于 axios 的封装,便于统一处理 POST,GET 等请求参数,请求头,以及错误提示信息等。具体可以参看 ​​request.js​​。 它封装了全局 request拦截器 、 respone拦截器 、 统一的错误处理 、 统一做了超时,baseURL设置等