Java项目 (SpringBoot+SpringCloud) 十次方:前端(三) 使用ElementUI开发管理后台

1 管理后台搭建

一.什么是ElementUI

1. Element 饿了么前端出品的一套 Vue.js 后台组件库
   官网： http://element.eleme.io/#/zh-CN

二.脚手架

1. 快速搭建
   官网上提供了非常基础的脚手架，如果我们使用官网的脚手架需要自己写很多代码比如登陆界面、主界面菜单等内容。 课程已经提供了功能完整的脚手架，我们可以拿过来在此基础上开发，这样可以极大节省我们开发的时间。
   1. 解压vueAdmin-template-master
   2. 在命令提示符进入该目录，输入命令：
      
      这样下载安装所有的依赖，几分钟后下载完成。
   3. 输入命令：
      
      运行后自动弹出浏览器。
2. 了解工程结构
   

三.项目初始化

1. 修改config/index.js ，将useEslint的值改为false。
   此配置作用: 是否开启语法检查，语法检查是通过ESLint 来实现的。
   我们现在科普一下,什么是ESLint : ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。如果我们开启了Eslint , 也就意味着要接受它非常苛刻的语法检查，包括空格不能少些或多些，必须单引不能双引，语句后不可以写分号等等，这些规则其实是可以设置的。我们作为前端的初学者，最好先关闭这种校验，否则会浪费很多精力在语法的规范性上。如果以后做真正的企业级开发，建议开启。
2. 国际化设置
   打开main.js 找到这句代码
   
   我们将en修改为zn-CN
   
   修改后组件都是按照中文的习惯展示
3. 与easy-mock对接
   1. 修改config下的dev.env.js中的BASE_API为easy-mock的Base URL
      
   2. easy-mock添加登陆认证模拟数据
      地址： /user/login
      提交方式：post
      内容：
      
   3. 添加返回用户信息url模拟数据
      地址：/user/info
      提交方式：get

四.更改标题与菜单

1. 修改index.html里的标题为"十次方后台管理系统"，修改后浏览器自动刷新。这就是脚手架中已经为我们添加了热部署功能。
2. 修改src/router 下的index.js 中constantRouterMap的内容

2 活动管理-列表

一.需求分析

1. 实现活动管理的列表页，包括分页，条件查询。

二.表格组件

1. 准备工作：我们将swaggerAPI同步到easyMock 然后修改/gathering/gathering （GET方法）的内容
   
2. 在src/api创建gathering.js
   
3. 创建gathering.vue中 ，编写脚本部分
   
4. 修改gathering.vue，编写html代码部分
   

三.分页组件

1. 准备工作：修改接口/gathering/gathering/search/{page}/{size} method:POST
   
2. 修改src/api/gathering.js，增加方法导出
   
3. 修改src/views/table/gathering.vue，编写脚本部分
   
4. 修改src/views/table/gathering.vue，增加分页栏
   
   注意：template里面要求必须有唯一的跟节点，我们这里用div将表格和分页控件包起来。

四.条件查询

1. 需求：在分页列表的基础上实现条件查询功能
   
2. 修改src/views/table/gathering.vue，增加查询表单
   

3 活动管理-增加

一.需求分析

1. 界面中加入"新增"按钮，点击弹出编辑窗口
   
   点击“修改”按钮，关闭窗口并刷新表格，弹出提示（成功或失败）

二.弹出窗口

1. 修改src/api/gathering.js，在template中增加对话框组件
   
   属性title为对话框标题， visible为是否显示。
2. 变量dialogFormVisible用于控制对话框的显示。我们在脚本代码中定义
   
3. template中增加按钮，用于打开对话框
   

三.编辑表单

1. 修改src/views/table/gathering.vue，在弹出窗口添加编辑表单
   
   
   这里我们主要要掌握多行文本编辑框与开关组件switch的使用

四.下拉选择框

1. 需求：在新增窗口实现城市下拉选择框
   我们这里需要使用elementUI提供的下拉选择框
   准备工作：修改easyMock 中的/base/city (GET)
   
2. 创建src/api/city.js
   
3. 修改src/views/table/gathering.vue的js脚本部分
   为data添加属性
   
   引入城市API
   
   修改created，增加对城市方法的调用
   
4. 修改src/views/table/gathering.vue，增加城市下拉框
   

五.表单提交

1. 修改easymock中的/gathering/gathering （增加活动 POST）
   
2. 修改src/api/gathering.js，增加方法导出
   
3. 修改src/views/table/gathering.vue的js脚本部分 增加方法执行保存
   
4. 修改弹出框中的“保存”按钮，调用保存方法
   

4 活动管理-修改

一.需求分析

1. 在表格的操作列增加"修改"按钮，点击修改按钮弹出窗口并显示数据，点击保存按钮保存修改并刷新表格。

二.根据ID加载数据

1. 准备工作：修改easymock 接口 /gathering/gathering/{id} （GET）
   
2. 修改src/api/gathering.js，增加方法定义
   
3. 修改src/views/table/gathering.vue的js脚本部分
   新增handleEdit方法
   
4. 在表格table中增加模板列 ,模板列中放置修改按钮，调用handleEdit方法
   
   fixed="right"的作用是定义此列为右固定列
   slot-scope用于指定当前行的上下文。使用scope.row可以获取行对象

三.新增窗口表单清空

1. 测试：我们在点开修改后，关闭窗口，再次新增打开窗口，会发现表单里依然有数据。这样显然是不行的。所以我们要在点击新增时清空表单。这个逻辑我们我们在handleEdit方法中实现
   
   修改新增按钮，调用handleEdit方法时传递空字符串
   

四.保存修改

1. 准备工作：修改easymock 接口 /gathering/gathering/{id} （PUT）
   
2. 修改src/api/gathering.js，增加方法定义
   
3. 修改src/views/table/gathering.vue的js脚本部分
   
   修改handleEdit,增加
   
   修改方法handleSave
   
   以上代码我们可以做一下优化：
   修改src/api/gathering.js
   
   修改src/views/table/gathering.vue的handleSave
   

五.消息提示框

1. alert(response.message)可以替换为以下代码：
   

5 活动管理-删除

一.需求分析

1. 在表格的操作列增加”删除“按钮，点击删除按钮弹出提示框，确定后执行删除并刷新表格。

二.EasyMock接口

1. URL:gathering/:id Method: delete
   

三.代码实现

1. 修改src/api/gathering.js，增加方法定义
   
2. 修改src/views/table/gathering.vue的js脚本部分
   
3. 修改src/views/table/gathering.vue ，在操作列增加删除按钮