From f9609c554372dcae1f6f5cd9a647f6c6f428fec8 Mon Sep 17 00:00:00 2001 From: Billy <1015018684@qq.com> Date: Tue, 8 Mar 2022 19:59:35 +0800 Subject: [PATCH] . --- frontend-specification.md | 37 ++++++++++++++++++++----------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/frontend-specification.md b/frontend-specification.md index d3d9647..dc68d80 100644 --- a/frontend-specification.md +++ b/frontend-specification.md @@ -2,28 +2,30 @@ * @Author: Billy * @Date: 2021-07-13 09:00:16 * @LastEditors: Billy - * @LastEditTime: 2021-10-12 15:32:11 - * @Description: v1.6 + * @LastEditTime: 2022-03-08 19:55:32 + * @Description: v2.1 --> ## 前端项目目录结构 -├─api // axios请求封装 +├─api // 对后端接口的封装，要客观反映后端接口(无论目录结构还是命名) │ ├─Disk // 分类子文件夹 +│ │ └─_BaseAxios.js // Base Axios │ ├─Rbac // 分类子文件夹 +│ │ └─_BaseAxios.js // Base Axios │ ├─_AxiosInterceptors.js // Axios拦截器 │ └─_ResponseHelper.js // 针对服务器返回值的处理方法 ├─assets // Vue静态资源 -├─biz // 如果一个常用业务需要用到多个api函数，建议在此封装 -│ └─Disk // 分类子文件夹 +├─biz // 处于api和views之间的一层，用于处理业务，要做到api层只读写数据，views层基本只做界面展示，而且views层不直接调用api层；api层设计决定权在于后端开发，views层设计决定权在于产品经理及UI，biz层设计决定权在于前端开发；方法名一般以add/del/edit/update/get/find开头 +│ └─Disk // 分类子文件夹(尽量跟views的结构有对应关系，但如果是多个页面共用的biz可以单独归类) ├─components // Vue组件 -│ ├─Disk // 分类子文件夹(按大功能模块划分) -│ │ └─Recycle // 分类子子文件夹(按功能模块划分) -│ ├─Home // 分类子文件夹(按大功能模块划分) +│ ├─Disk // 分类子文件夹(按大功能模块划分，尽量跟views的结构有对应关系) +│ │ └─Recycle // 分类子子文件夹(按小功能模块划分，尽量跟views的结构有对应关系) +│ ├─Home // 分类子文件夹(按大功能模块划分，尽量跟views的结构有对应关系) │ └─_Common // 常用Vue组件，在此进行归类，可在其它Vue组件或Vue页面使用 -│ │ ├─Drag // 分类子文件夹 -│ │ └─Tree // 分类子文件夹 -├─entity // 对象实体类，与后端返回的对象有关 +│ ├─Drag // 分类子文件夹 +│ └─Tree // 分类子文件夹 +├─entity // 对象实体类，由前端定义，不能照搬后端的定义，其new出来的对象，会在biz层和views层之间流转 │ ├─Disk // 分类子文件夹 │ └─Rbac // 分类子文件夹 ├─router @@ -32,27 +34,28 @@ │ └─user-role-auth.js // 路由子分类 ├─scss │ ├─HomeScreen // scss分类子文件夹 -│ ├─_globals.scss // 全局scss -│ └─_variables.scss // 常用的scss常量；原则上颜色都必须定义在此 +│ ├─_globals.scss // 全局scss，除element ui的重设样式，均在本文件编写或引用；在App.vue中引用本文件 +│ ├─_variables.scss // 常用的scss常量；原则上颜色都必须定义在此 +│ └─element-ui-reset.scss 对element ui的全局级别重设，以适应UI设计；在App.vue中引用本文件 ├─storage // 对localStorage或sessionStorage的操作的封装 │ └─login-info.js // 针对登录的storage封装 ├─store // Vuex -├─svgicon +├─svgicon // svg图标存放于此 │ └─homescreen ├─sys │ ├─SysCode.js // 信息码，与后端返回值的code对应 │ └─SysError.js // 错误类 -├─util // 常用工具类的封装(先看有没有合适用的，没有再自己实现) +├─util // 常用工具类的封装(先看有没有合适用的，没有再自行实现) ├─views // Vue页面 │ ├─HomeSubViews // 业务类子页面 │ │ ├─Disk // 子页面分类 │ │ └─Rbac // 子页面分类 │ └─SystemViews // 管理类子页面 -├─App.vue // 全局样式记在此 +├─App.vue // 全局样式记在此文件的style标签 ├─const.js // 全局常量记在此 ├─main.js ## 编码格式 * 习惯性用“;”作为语句结尾 * 单行注释文字前面加一个空格，如：// 注释 -* VUE 的 props 必须写明注释 \ No newline at end of file +* Vue 组件的 props 必须写明注释 \ No newline at end of file