第十动力专属社交平台前端系统开发使用ElementUI进行后台开发和管理。

学习目标：
掌握elementUI提供的脚手架管理后台的方法。
掌握elementUI的表格组件的使用，实现列表功能。
掌握elementUI分页组件的使用，实现分页功能。
掌握elementUI的表单相关组件的使用，实现条件查询功能。
掌握elementUI的对话框组件和$message的使用，实现弹出窗口和消息提示的功能
掌握elementUI的select组件的使用，实现下拉列表功能。
实现添加和修改数据的功能。
掌握确认的使用，实现查询框和删除功能。
用ElementUI构建我们的第十个电源管理后台。
1.1什么是ElementUI？
你饿了吗？元素官网前端制作的一套Vue.js后端组件库：http://element.eleme.io/#/zh-CN
1.2魔法脚手架
1.2.1快速施工
官网提供非常基础的脚手架。如果我们在官网使用脚手架，需要写登录界面、主界面菜单等大量代码。课程已经提供了一个功能齐全的脚手架，我们可以拿着它在这个基础上进行开发，可以大大节省我们的开发时间。
(1)解压缩vueAdmin-template-master
(2)在命令提示符下输入目录，然后输入命令：
Cninstall通过这种方式下载并安装所有依赖项，下载在几分钟内完成。
(3)输入命令：
Npm run dev运行后自动弹出浏览器。
1.2.2了解工程结构
以下是主要的目录结构：
1.3项目初始化
1.3.1关闭语法检查。
修改config/index.js，将useEslint的值更改为false。
配置此功能3360是否开启语法检查，由ESLint实现。
现在就来科普一下。什么是ESLint : ESLint是一个检查语法规则和代码风格的工具，可以用来保证写出语法正确、风格统一的代码。如果我们打开Eslint，就意味着我们要接受它非常严格的语法检查，包括不能少也不能多空格，不能有双引号，语句后面不能有分号等等。这些规则其实是可以设定的。作为前端初学者，我们最好先把这个检查关掉，不然会浪费很多精力在语法的标准化上。如果以后做真正的企业级开发，建议开放。
1.3.2国际化设置
打开main.js，找到这段代码。
从“element ‐ ui/lib/locale/lang/en”导入区域设置，我们将en改为zn-CN。
从“element‐ui/lib/locale/lang/zh‐cn”导入区域设置，修改后的组件根据中文习惯显示。
1.3.3与easy-mock对接
(1)将config下dev.env.js中的BASE_API修改为easy-mock的基URL
.base _ API : ‘ \ ‘ 3358192 . 168 . 184 . 13:7300/mock/5af 314 a 4c 612520d 0d 7650 c 7 ‘ ‘，(2) Easy-mock增加了登录认证模拟数据。
地址：/用户/登录名
提交方式：邮寄
内容
{\’ code \’ 3360 20000，\ ‘ data \ ‘ 3360 { \ ‘ token \ ‘ 3360 \ ‘ admin \ ‘ } }(3)添加返回用户信息的url模拟数据
地址：/用户/信息
提交方式：获取
内容：
{\’code\’: 20000，\ ‘ data \ ‘ : { \ ‘ roles \ ‘ :[\ ‘ admin \ ‘]，\’role\’: [\’admin\’]，\’name\’: \’admin\ ‘，\ ‘ avatar \ ‘ : \ https://wpimg.wallstcn.com/f778738c‐E4 F8‐4870‐b634‐56703 b4a cafe . gif \ ‘ } 1 . 3 . 4更改标题和菜单
(1)将index.html的标题修改为‘第十电力后台管理系统’，修改后浏览器会自动刷新。也就是说，为我们增加了热部署功能。
(2)修改src/router下index.js中constantRouterMap的内容
export constantRouterMap=[{ path: ‘/log in ‘，component :()=import(‘ @/views/log in/index ‘)，hidden: true }，{ path: ‘/404 ‘，component :()=import(‘ @/views/404 ‘)，hidden: true }，{ path : ‘/’，component: Layout，redirect: ‘/dashboard ‘，name:基本信息管理，icon: ‘example’ }，children: [{path: ‘table ‘，name: ‘Table ‘，component :()=import(‘ @/views/Table/index ‘)，meta: { title: ‘城市管理，icon: ‘table’ }}，{path: ‘tree ‘，name: ‘Tree ‘，component :()=import(‘ @/views/Tree/index ‘)，meta: { title: ‘标签管理，icon: ‘tree’ }}]}，{path: ‘/form ‘，component: Layout，name: ‘Example2 ‘，meta: { title: ‘活动管理，icon: ‘example’ }，children: [{path: ‘index ‘，name: ‘Form ‘，component :()=import(‘ @/views/Form/index ‘)，meta: { title: ‘活动管理，icon: ‘form’ }}]}，{ path: ‘* ‘，redirect: ‘/404 ‘，hidden: true }]2活动管理-列表2.1需求分析
实现活动管理的列表页，包括分页，条件查询。
2.2表格组件
我们在这一环节先实现一个简单的列表，如下图所示：
准备工作：我们将斯瓦格拉皮同步到easyMock然后修改/正在收集/正在收集（获取方法)的内容
{\’code\’: 20000，\’flag\’: true，\’message\’: \’@string\ ‘，\ ‘ data | 10 \ ‘ :[{ \ ‘ id \ ‘ 33: \ ‘ @ string \ ‘，\’name\’: \’@cword(8，12)\ ‘，\’summary\’: \’@cword(20，40)\ ‘，\ ‘ detail \ ‘ :代码实现步骤：
(1)在src/api创建gathering.js
从\’@/utils/request\ ‘导出默认{ getList(){返回请求({ URL : ‘/gathering/gathering ‘，method:’get’})}}(2)创建聚集。某视频剪辑软件中，编写脚本部分
(3)修改gathering.vue，编写超文本标记语言代码部分
桌子组件的属性
表格列组件的属性
以上属性为我们代码中使用到的属性，其他属性请查阅官方文档。
http://element-cn.eleme.io/#/zh-CN/component/table
2.3分页组件
我们已经通过表格组件完成了列表的展示，接下来需要使用分页组件完成分页功能
准备工作：修改接口/gathering/gathering/search/{ page }/{ size }方法：帖子
{\’code\’: 20000，\’flag\’: true，\’message\’: \’@string\ ‘，\ ‘ data \ ‘ : { \ ‘ total \ ‘ : \ ‘ @ integer(100，200)\ ‘，\ ‘ rows | 10 \ ‘ :[{ \ ‘ id \ ‘ : \ ‘ @ string \ ‘，\’name\’: \’@cword(8，12代码实现：
(1)修改src/api/gathering.js，增加方法导出
search(page，size，search map){返回请求({ URL : `/gathering/gathering/search/$ { page }/$ { size } `，method: ‘post ‘，data: searchMap})}(2)修改src/views/table/gathering.vue，编写脚本部分
从“@/API/gathering”导入收集API导出默认{ data(){ return { list :[]，total:0，//总记录数当前页面：1,//当前页页面大小：10,//每页大小searchMap: {}//查询表单绑定变量}}，created(){this.fetchData()}，方法： { fetch data(){ gathering API。搜索(这个。当前页面，this.pageSize，this.searchMap).然后(回应={这个。列表=响应。数据。排这个。总计=响应。数据。总计})} }(3)修改src/views/table/gathering.vue，增加分页栏
‐表格-列-表格-列-表格-列-表格-列-表格-列-表格-列-表格-表格-分页
CurrentPage是当前页，total是记录总数
注意：模板需要一个唯一的追随者节点。这里，我们使用P来包装表和分页控件。
分页的常见属性：
分页的常见事件：
更多属性方法事件，请查看官方文档：http://element-cn.eleme.io/#/zh- CN/Component/Pagination。
2.4条件查询
需求：在分页列表的基础上实现条件查询的功能。
代码实现：
修改src/views/table/gathering.vue，添加查询表单。
‐输入‐表单‐项目‐日期‐选取器‐表单‐项目查询‐按钮‐表单(表单)组件属性在官方文档中有详细说明：http://element-cn.eleme.io/#/zh- CN/component/
有关输入组件属性的详细信息，请参考官方文件：http://element-cn.eleme.io/#/zh-。
CN/组件/输入
有关日期选择器组件属性的详细信息，请参见官方文档：http://element-cn.eleme.io/#/zh- cn/component/date-picker。
3活动管理-添加3.1需求分析
在界面中添加“添加”按钮，点击弹出编辑窗口。
点击“修改”按钮，关闭窗口，刷新表格，会弹出提示(成功或失败)。
3.2弹出窗口
(1)修改src/api/gathering.js，在模板中添加对话框组件。
‐对话框属性title是对话框的标题，visible是是否显示它。
(2)变量dialogFormVisible用于控制对话框的显示。我们在脚本代码中定义
Data () {return {.dialogformvisible : false//是否显示对话框}} (3)在模板中添加打开对话框的按钮。
新的‐ buttondialog属性显示在官方文档：http://element-cn.eleme.io/#/zh-CN/component/dialog.中
3.3编辑表格
修改src/views/table/gathering.vue，在弹出窗口中添加一个编辑表单。
‐input-form-item-input-form-item-date-picker-form-date-picker-form Orm-item-form-dialog这里我们主要需要掌握多行文本编辑框的使用和切换组件的切换。
3.4下拉选择框
要求：在新窗口中实现城市的下拉选择框。
这里我们需要使用elementUI提供的下拉选择框。
准备：在easyMock中修改/基地/城市(GET)
{\’ flag \’ 3360 true，\’ code \’ 3360 20000，’消息’ 3360 \ ‘查询成功\ ‘，’ data | 10′ 3360 [{\’ id | 1 \’ 3360 1，\ ‘
(1)创建src/API/city.js
从’ @/utils/request ‘导入导出默认{ getlist(){ return request({ URL 3360 ‘/base/city)，method3360′ get’}}} (2)修改src/views src/views/table/gathering . vue的js脚本部分
为数据添加属性
City: []引入城市API
从’ @/API/city ‘导入API修改创建的并添加对city方法的调用。
created(){ this . fetch data()city API . getlist()。然后(response={ this . city list=response . data })}(3)修改src/views/table/gathering.vue，增加城市下拉框。
‐选项‐选择‐表格‐项目3.5表格提交
(1)在easymock中修改/聚集/聚集。
{\’ flag \’ 3360 true，\’ code \’ 3360 20000，’ message’ 3360 \ ‘已成功执行\} (2)修改src/api/gathering.js以添加方法导出。
save(POJO){ return request({ URL : `/gathering/gathering `，方法3360’ post ‘，数据3360 POJO})} (3)修改src/views/table/gathering.vue的js脚本，增加方法执行和保存。
handle save(){收集API。保存(this.pojo)。然后(response={ alert(response . message)if(response . flag){//if this . fetch data()//刷新列表} })this . dialogformvisible=false//关闭窗口}(4
保存按钮4活动管理-修改4.1需求分析
在表格的操作栏中添加“修改”按钮，点击“修改”按钮弹出窗口并显示数据，点击“保存”按钮保存修改并刷新表格。
4.2根据ID加载数据
准备：修改easymock接口/gathering/gathering/{id} (GET)
{\’flag\’: true，\’code\’: 20000，’ message’: \ ‘查询成功\ ‘，’ data’: {\’id\’: \’1\ ‘，\’name\’: \ ‘测试活动\ ‘,\ ‘赞助商\’: \ ‘主办方\ ‘，\’image\’: \’@image\ ‘，\’starttime\’: \’@date\ ‘，\’endtime\’: \’@date\ ‘，\ ‘ address \ ‘ : \ ‘ @ county(true)\ ‘，\ ‘ enrollment time \ ‘ : \ ‘ @ date \ ‘，\ ‘ state \ ‘ : \ ‘ 1 \ ‘ } }代码实现：
(1)修改src/api/gathering.js，增加方法定义
findById(id) {返回请求({ URL : `/gathering/gathering/$ { id } `，method: ‘get’})}(2)修改src/views/table/gathering.vue的射流研究…脚本部分
新增handleEdit方法
handleEdit(id){ this。dialogformvisible=true//打开窗口//调用查询gatheringApi.findById(id).然后(response={ if(响应。flag){这个。POJO=响应。数据} })}(3)在表格桌子中增加模板列，模板列中防止修改按钮，调用handleEdit方法
修改‐按钮‐表格‐列固定=\ ‘右\ ‘的作用是定义此列为右固定列
狭缝示波器用于指定当前行的上下文。使用scope.row可以获取行对象
4.3新增窗口表单清空
测试：我们在点开修改后，关闭窗口，再次新增打开窗口，会发现表单里依然有数据。这样显然是不行的。所以我们要在点击新增时清空表单。这个逻辑我们我们在handleEdit方法中实现
handleEdit(id){ this。dialogformvisible=true//打开窗口如果(id！=”){//调用查询gatheringApi.findById(id).然后(response={ if(响应。flag){这个。POJO=响应。data } } } else { this。POJO={ }//清空表单}}修改新增按钮，调用handleEdit方法时传递空字符串
新增‐按钮4.4保存修改
准备工作：修改easymock接口/gathering/gathering/{id} (PUT)
{\’flag\’: true，\’code\’: 20000，’ message’: \ ‘修改成功\’}代码：
(1)修改src/api/gathering.js，增加方法定义
update(id，POJO){返回请求({ URL : `/gathering/gathering/$ { id } `，method: ‘put ‘，data: pojo})}(2)修改src/views/table/gathering.vue的射流研究…脚本部分
增加属性编号
data(){ return {.id:”//当前编辑的ID}}修改handleEdit增加
this.id=id修改方法手柄保存
handleSave(){ if(this.id！=”){//修改gatheringApi.update(this.id，this.pojo).然后(响应={ alert(响应。消息)如果(响应。flag){//如果成功this.fetchData()//刷新列表}})}else{//新增gatheringApi.save(this.pojo).然后(响应={ alert(响应。消息)如果(响应。flag){//如果成功this.fetchData()//刷新列表} })}这个。dialogformvisible=false//关闭窗口}以上代码我们可以做一下优化：
修改src/api/gathering.js
update(id，POJO){ if(id==null | | id==’ ‘){ return save(POJO)}返回请求({ URL : `/gathering/gathering/$ { id } `，method: ‘put ‘，data: pojo})}修改src/views/table/gathering.vue的手柄保存
handle save(){收集API。更新(这个。id，this.pojo)。然后(响应={ alert(响应。消息)如果(响应。flag){//如果成功this.fetchData()//刷新列表} })这个。dialogformvisible=false//关闭窗口}4.5消息提示框
射流研究…原生的警报简直是丑爆了，有没有更漂亮的弹出框呀！当然有，用了elementUI提供了消息提示框，真是美呆了！警报（响应。消息)可以替换为以下代码：
这个message({ message :响应。消息，类型：(响应。标志“成功”:“错误”))；$消息详见官方文档：http://element-CN。eleme。io/#/zh-CN/component/消息
你可以尝试着参照文档做出更丰富的效果哦~
5活动管理-删除5.1需求分析
在表格的操作列增加”删除”按钮，点击删除按钮弹出提示框，确定后执行删除并刷新表格。
5.2EasyMock接口
URL :正在收集/: id方法：删除
{\’flag\’: true，\’code\’: 20000，’ message’: \ ‘执行成功\’}5.3代码实现
(1)修改src/api/gathering.js，增加方法定义
deleteById(id){返回请求({ URL : `/gathering/gathering/$ { id } `，method: ‘delete’})}(2)修改src/views/table/gathering.vue的射流研究…脚本部分增加方法
handleDelete(id){this .$confirm(‘确定要删除此纪录吗’, ‘提示，{ confirmButtonText: ‘确定，取消按钮文本： ‘取消，键入：”警告”})。然后(()={ gatheringApi.deleteById(id).然后（回应={这个message({ message :响应。消息，类型：(响应。标志“成功”:“错误”)})if(响应。flag){这个。获取数据()//刷新数据}})}).catch(()={ })；}(3)修改src/views/table/gathering.vue，在操作列增加删除按钮
删除‐按钮6代码优化我们看一下现在的应用程序接口代码
从\’@/utils/request\ ‘导出默认{ getList(){返回请求({ URL : ‘/gathering/gathering ‘，方法： ‘ get ‘ })；}、search(page，size，search map){返回请求({ URL : `/gathering/gathering/search/$ { page }/$ { size } `，method: ‘post ‘，data : search map })；}、save(POJO){ return request({ URL : `/gathering/gathering `，method: ‘post ‘，data: pojo})}、find byid(id){ return request({ URL : `/gathering/$ { id } `，method: ‘get’})}、update(id，POJO){ if(id==null | | id==’ ‘){ return this。save(POJO)}退货请求({ URL 333333这里面的全球资源定位器(统一资源定位器)地址都是一样的，如果以后地址发生了变化，需要逐个修改，不利于维护，所以我们这里把此字符串提取出来定义为常量，运用es6的模板字符串特性来进行拼接即可。
修改后代码如下：
从\ ‘ @/utils/request \ ‘ const group _ name=’ gathering ‘ const API _ name=’ gathering ‘导出默认{ getList(){ return request({ URL : `/$ { group _ name }/$ { API _ name } `，method : ‘ get ‘ })；}、search(page，size，search map){返回请求({ URL : `/$ { group _ name }/$ { API _ name }/search/$ { page }/$ { size } `，method: ‘post ‘，data : search map })；}，save(POJO){ return request({ URL : `/$ { group _ name }/$ { API _ name } `，method: ‘post ‘，data: pojo})}，find byid(id){ return request({ URL : `/$ { group _ name }/$ { API _ name }/$ { id } `，method: ‘get’}，update(id，pojo){ if(id==null || id==。