vue+element-ui管理后台开发规范

一、目录结构

1. /dist：执行npm run build命令后此文件夹下会自动生成文件，这些文件是真正需要发布到服务器上的文件

2. /node_modules：使用npm install module_name --save命令后，第三方包所存放的目录，引入时只需要 import xx from "module_name"

3. /public：不需要webpack处理的文件所存在的目录，如tinymce(富文本编辑器)

4. /src：源代码目录
   4.1 /src/api：接口文件目录
   此目录下文件命名规范："Api" + "业务名" + ".js"
   此目录下文件方法命名规范：['add', 'list', 'detail', 'edit', 'del']为每个接口文件都具备的方法

   接口调用示例

   import ApiArticle from "@(注1)/api/ApiArticle.js";
   
   ApiArticle.add( 数据放在这里 )
   .then(res => {
       请求成功走这里
   })
   .catch(e => {
       请求失败走这里
   });
   

   接口基地址(如"http://******:8080/zhaosheng")统一配置在/src/util/request.js

   关联方法(涉及两个以上的表的方法)放在主要的接口文件中，如查询一篇文章是否已经被收藏，涉及到文章表和收藏表，但是该方法放在ApiArticle.js中

   ajax库使用axios，不是$.ajax()，支持promise写法(.then() .catch())

   POST请求中，content-type已经统一处理为application/x-www-form-urlencoded，multipart/form-data因为项目使用base64图片上传，因此不会使用

   注意： 具有分页功能的接口，前端处理后返回的数据格式为 {count：xx ,list:[{xx1},{xx2}]}
   使用示例如下

           this.tableData = res.list;
           this.count = res.count;
   

   Vue.js具有双向数据绑定的特点，更改数据的时候，视图会同步变化，不需要手动拼接html模板之后插入到dom节点中

5. /src/util：公共函数文件目录，Helper.js集成base64图片上传函数，request.js为axios配置文件

6. /src/components：Vue公共组件目录，集成富文本编辑器(tinymce)

7. /src/view：注意： 视图文件目录
   7.1 /src/view/Layout：布局文件目录，包含侧边栏，头部
   7.2 /src/view/业务名：业务视图文件夹

   注意： 业务视图文件夹下包含两个文件
   Index.vue：列表页，关键element组件：Table
   AddAndEdit.vue：新增，修改页面，关键element组件：Form Upload Pagination

8. /src/router.js：Vue路由文件，新增加页面时需要配置路由，路由会自动渲染成侧边栏，无需手动修改/src/view/Layout/Aside.vue文件

9. /src/store.js：Vuex文件，全局数据仓库

10. /src/main.js：webpack入口文件

二、element管理后台开发工作流程

1. 新增加页面时需要进行的工作
   1.1. 增加/src/api目录下的接口文件，命名为"Api" + "业务名" + ".js"
   1.2. 在/src/view/路径下，新建业务名目录，命名规则为大驼峰规则(单词首字母大写，包括第一个单词)
   1.3. 在/src/view/业务名目录下，新建Index.vue，AddAndEdit.vue两个文件，此两个文件的命名无需更改，固定即可
   1.4. 修改路由文件 /src/router.js，新增加一条路由规则

   注意： 文件请按以上顺序建立，否则有可能报文件找不到的错误(找不到所引入的文件)

   以上四项流程中，都需要进行的工作：修改"业务名"，如原来是ApiArticle.js，替换成ApiQa.js，以此类推

三、开发工具与运行环境

1. chrome浏览器，chrome开发者工具，chrome浏览器安装vuedevtools
2. ide：vscode，vscode安装汉化包，vetur
   注意： ide不可混用，一个文件中途不要换ide
3. node.js
4. vuecli

四、命令行

注意： 命令行请在项目根目录下运行

1. 安装vuecli：npm install --save @vue/cli
2. 安装项目依赖：npm install
3. 运行项目：npm run serve
4. 编译项目：npm run build
5. 进入目录 cd 目录名
6. 返回上级目录 cd…
7. 查看本机ip cmd => ipconfig
8. 在当前目录打开命令行 shift + 右键

注意： npm run serve 具有热更新效果，更改代码后无需刷新，即可看到效果(更改路由或者添加文件有可能需要刷新)

http://localhost:8080/的地址是本机地址，只有本机可以访问
http://172.21.xxx.xxx:8080/的地址是校园网(局域网)地址，链接了校园网的设备都可以访问，不限制本机

五、注释规范

1. 什么时候加注释
   1.1 一长串代码只为了完成一个功能时
   如 //调整返回数据的格式

   1.2 复杂的if嵌套
   在if的分支点上加注释
   如 //没有登陆时
   //登陆时

   1.3 标明文档作者,时间
   如 //author xxx
   如 //date 2019-xx-xx 00:00:00

2. 注释格式
   2.1 作者，日期用多行，todo类(说明自己接下来将要去做的事情是什么)能用单行的用单行

六、关于Vue的常识

1. 什么是Vue
   Vue是一个渐进式JavaScript框架，核心思想是mvvm，即双向数据绑定。双向数据绑定的意思是视图的变化会自动同步到数据，数据的变化也会自动同步到视图。

举个例子，页面上有一个input输入框，这个input框上面有一个id属性，值为’test’，现如今用户在input输入框中输入’123456’，如何获取用户的输入值？

jQuery的做法：$("#test").val()，这样一来就获取到了输入框的值

Vue的做法：，这样写的话，数据就会同步到"form.test"，想要访问到这个数据，就可以使用以下语句

this.form.test

那么如何改变input框中的值呢？
jQuery的做法：$("#test").val('123456')，这样一来就改变了输入框中的值

Vue的做法：this.form.test = '123456'，这样写的话，数据就会同步到，就改变了输入框中的值

这就是Vue的双向数据绑定特性

2. v-if v-for
   如果我们向后台发送了请求，然后接收到了返回的数据，那么如何将数据同步到视图中去呢？

jQuery的做法：$("#container").html('' + data + '')，需要自己手动组装html和数据

Vue的做法：

{{data}}

this.data = 123456 

Vue改变数据的时候就会将数据自动填充到{{data}}中去(data是变量名)，如果需要根据条件判断是否显示，需要渲染列表，则需要用到v-if v-for

3. 生命周期函数
   Vue中mounted可以理解为 $(document).ready(function(){})

4. 绑定事件
   @click 理解为 onclick

5. 引入文件
   请使用import

6. 什么是elementui，他和Vue是什么关系
   elementui是一套基于Vue的组件库，不仅仅包含基础样式，如按钮样式，也包含着功能组件，如文件上传组件，对话框组件
   他们两者之间的关系类似于bootstrap的依赖JavaScript的部分，与jQuery之间的关系
   仔细回忆以下，bootstrap需要先引进jQuery，在引进bootstrap自己的JavaScript文件，才能使用对话框，轮播等等依赖JavaScript的部分功能
   Vue这边也是这样，需要先有Vue，然后安装elementui

7. 什么是"组件"
   组件是封装了"html css js"三大件的代码块
   体现为自定义的html标签，如< editor/>(html5没有这个标签，但是我们可以自己定义)

七、更多教程与手册

1. vue
2. elementui

八、ide(vscode)便捷操作指南

1. 搜索与替换功能 ctrl + f 或 ctrl + f
2. 多行光标，按住鼠标中键然后拖动
3. 查找下一个ctrl + d
4. 打开命令行 ctrl + `
5. ctrl + enter 行中换行
6. ctrl + 方向键 或 ctrl + shift + 方向键 快速移动光标
7. 快速打开文件 ctrl + p
8. 文件夹内关键词搜索
9. vscode的工作区是文件夹的集合

注：

1. @为指向src目录的一个快捷写法，在import的时候可以使用
2. "/"指的是项目根目录