# 系统框架
管理平台项目框架目标使用规范说明及部分系统 API 描述,目前仅适用于 素+管理平台
项目
# 目录结构描述
项目结构目录树如下
project/
│ .browserslistrc 浏览器版本配置
│ .editorconfig 编辑器配置
│ .env.development 开发环境下使用的环境变量配置文件
│ .env.production 生产环境下使用的环境变量配置文件
│ .env.test 单元测试环境下使用的环境变量配置文件
│ .eslintrc.js ESLint 配置
│ .gitignore 设置 git 忽略上传的内容
│ babel.config.js 项目脚本兼容版本设置
│ cypress.json cypress 配置文件
│ Dockerfile docker 配置文件
│ package.json 项目总体描述及依赖描述
│ postcss.config.js 预编译样式
│ vue.config.js vue-cli 脚手架配置及 webpack 配置
│
├─public 静态资源文件目录
│ favicon.ico 网站图标
│ index.html 网站实际入口
│
├─src
│ │ main.js 项目主入口
│ │
│ ├─assets 项目相关资产 / 附件,通常用于存放图片资源
│ │
│ ├─business 业务处理逻辑、框架相关 API
│ │
│ ├─components 自定义业务组件
│ │
│ ├─config 项目相关配置
│ │ constants.js 常量配置
│ │ directives.js 自定义指令集配置
│ │ element-plugins.js element-ui 插件配置
│ │ menu-path.js 系统菜单及路由匹配关系
│ │ plugins.js 项目中除 element-ui 外的插件引用配置
│ │ polyfill.js 自定义脚本兼容
│ │ velidateData.js 自定义表单校验规则
│ │
│ ├─layouts 整体布局结构
│ │
│ ├─mixins 公共抽象模型
│ │
│ ├─plugins 系统公共插件
│ │
│ ├─router vue-router 路由配置
│ │
│ ├─store Vuex 与本地缓存的相关处理
│ │
│ ├─style 自定义样式文件收纳
│ │
│ ├─utils 工具类
│ │
│ └─views 系统业务功能页面
│ │
│ ├─alonePage 独立页
│ │
│ ├─demo 框架组件、API 实例
│ │
│ └─inner 移动端内嵌页
│
└─tests
├─e2e 端对端测试
│
├─sample 部分数据样例
│
└─unit 单元测试
.eslintrc.js 针对单元测试的 eslint 配置
setup.js 单元测试的前置处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
以上项目结构将为作为后续所有项目的基础结构
# API
# $http(url, [data], [options])
http 数据请求统一入口
- url
目标请求地址,地址分为两种类型:当前域地址
和 其他域地址
- data
提交的数据参数
- options
配置参数,主要用于特殊情况下需要覆盖 axios 原生配置的情况,多数情况下不需要进行设置
return
Promise 接口对象
常见使用场景
//访问当前域服务
this.$http('/user/list', { groupId: 1 })
.then(resp => ...)
.catch(resp => ...)
//访问其他域服务
this.$http('http://aaa.com/user/list', { groupId: 1 })
.then(resp => ...)
.catch(resp => ...)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 自定义指令集 directive
# v-date
日期格式化,将元素的内容格式化为指定的日期格式
# 参数
- 日期格式 (string)
指定日期格式,例如:'yyyy-MM-dd hh:mm:ss',若不指定格式则默认使用格式:'yyyy-MM-dd'
# 使用方式
<!-- 指定自定义格式 -->
<span v-date="'yyyy-MM-dd hh:mm:ss'">1559631857305</span>
<!-- 不指定格式,使用默认格式 -->
<span v-date>1559631857305</span>
1
2
3
4
2
3
4
# 实例
<span v-date="'yyyy-MM-dd hh:mm:ss'">1559631857305</span>
<!-- 结果:2019-06-04 15:04:17 -->
<span v-date>Tue Jun 04 2019 15:33:06 GMT+0800 (中国标准时间)</span>
<!-- 结果:2019-06-04 -->
1
2
3
4
2
3
4
# v-number
数字类型格式化(保留小数点位数),将元素内容格式化为指定位数小数点数字,位数不足则使用 0 补充,推荐用于数据统计,金额计算、展示等场景
# 参数
- 保留小数点位数 (number)
指定数字保留小数点位数,默认为:2
# 使用方式
<!-- 指定自定义保留位数 -->
<span v-number="4">3450.20</span>
<!-- 不指定格式,使用默认保留位数 -->
<span v-number>3450</span>
1
2
3
4
2
3
4
# 实例
<span v-number="4">3450.20</span>
<!-- 结果:3450.2000 -->
<span v-number>3450</span>
<!-- 结果:3450.00 -->
<span v-number>3450.1234</span>
<!-- 结果:3450.12 -->
1
2
3
4
5
6
2
3
4
5
6
# 表单校验规则
# 使用方式
Form 组件通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名
<el-form :rules="rules">
...
</el-form>
<script>
export default {
data() {
return {
ruleForm: {
name: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
}
};
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 自定义验证函数
checkNumOrLetter
验证只能包含数字和字母checkNum
验证只能为整数validateNumAndFloat
验证必须是整数或小数velidateSpecialNUm
验证只能是范围0.0001 ~ 999999999.9999的数字fourDigitsAfter
验证只能是小数点后4位的浮点数checkPhoneNum
验证只能是电话号码