水处理前端说明文档


该文档内部使用,已抹除具体信息,如:

公司名称

内部链接

相关地点

内部相关技术

1. 技术说明

水处理的前端项目的后台管理使用Vue进行开发,

框架:Ant Design Pro of Vue 参考案例 ANTD PRO VUE

打包工具:webpack

路由:vuex

存储:vue-ls

通信:axios

2. 项目模块说明

目录说明:@/及为~/wt_vue/src/

2.1 路由配置

基础路由的配置地址:@/router/router.js

若挂载自定义路由、如权限路由,则在@/router 下新建自定义路由.js 并在@/router/index.js中挂载

2.2 权限逻辑

权限控制逻辑由控制路由实现,在@/permission.js中写详细实现。

注:控制按钮是否有显示权限,在路由器配置中,目前本项目中暂无案例。

2.3 页面添加

页面添加在@/views/中建立相应的文件夹,编写相应的页面之后,要在路由中注册相应的组件。

例如:

1
2
3
4
5
6
7
8
9
10
export const baseRouter = [{
path: '/',
name: 'index',
component: BasicLayout,
children: [{
path: '/dashboard',
name: '/dashboard',
component: () => import('xxx')
}]]
}

2.4逻辑添加

2.4.1 逻辑代码

尽量避免在@/vuews/*中写逻辑处理,逻辑处理写在@/store/modules/

2.4.2 数据交互

数据交互使用的是axios,代码实现在@/utils/apiUtil/*

基础url地址:@/config/baseInfo/baseInfo.BASEURL

请求超时时间:@/config/baseInfo/baseInfo.OVER_TIME

若要添加新的请求,在@/config/中建立相应的文件,并注册到

@/config/index.js

使用方法:

1
2
3
4
5
6
7
8
9
10
11
12

import { axios } from '@/utils/apiUtil/request'
import { userInfo } from '@/config/index'

export function login (params) {
return axios({
url: userInfo.login.url,
method: userInfo.login.url,
data: params

})
}

注:webSocket暂无封装

2.5 mock的使用

使用mock.js模拟数据,已搭建数据模拟平台:YApi

使用方式:YApi接口设置

2.6 项目启动

npm run serve