# 系统框架

管理平台项目框架目标使用规范说明及部分系统 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

以上项目结构将为作为后续所有项目的基础结构

# 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

# 自定义指令集 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

# 实例

<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

# v-number

数字类型格式化(保留小数点位数),将元素内容格式化为指定位数小数点数字,位数不足则使用 0 补充,推荐用于数据统计,金额计算、展示等场景

# 参数

  • 保留小数点位数 (number)

指定数字保留小数点位数,默认为:2

# 使用方式

<!-- 指定自定义保留位数 -->
<span v-number="4">3450.20</span>
<!-- 不指定格式,使用默认保留位数 -->
<span v-number>3450</span>
1
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

# 表单校验规则

# 使用方式

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

# 自定义验证函数

  • checkNumOrLetter 验证只能包含数字和字母
  • checkNum 验证只能为整数
  • validateNumAndFloat 验证必须是整数或小数
  • velidateSpecialNUm 验证只能是范围0.0001 ~ 999999999.9999的数字
  • fourDigitsAfter 验证只能是小数点后4位的浮点数
  • checkPhoneNum 验证只能是电话号码
最后更新时间: 10/13/2020, 10:23:58 AM