SaaS-多租户SaaS平台的数据库方案(前端框架)
SaaS-多租户SaaS平台的数据库方案(前端框架)
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 dev3.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
└── unit3.4 执行流程分析
3.4.1 路由和菜单
路由和菜单是组织起一个后台应用的关键骨架。本项目侧边栏和路由是绑定在一起的，所以你只有在@/router/index.js 下面配置对应的路由，侧边栏就能动态的生成了。大大减轻了手动编辑侧边栏的工作量。当然这样就需要在配置路由的时候遵循很多的约定
这里的路由分为两种， constantRouterMap 和 asyncRouterMap 。
constantRouterMap代通用页面。asyncRouterMap代表那些业务中通过addRouters动态添加的页面。
3.4.2 前端数据交互
一个完整的前端 UI 交互到服务端处理流程是这样的：
- UI 组件交互操作；
- 调用统一管理的 api service 请求函数；
- 使用封装的 request.js 发送请求；
- 获取服务端返回；
- 更新 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设置等