学习目标：

掌握elementUI提供的脚手架搭建管理后台的方法

掌握elementUI的table组件的使用，实现列表功能

掌握elementUI的pagination组件的使用，实现分页功能

掌握elementUI的form相关组件的使用，实现条件查询功能

掌握elementUI的dialog组件和$message的使用，实现弹出窗口和消息提示功能

掌握elementUI的select组件的使用，实现下拉列表功能

实现新增数据和修改数据的功能

掌握confirm的使用，实现询问框，实现删除功能

1管理后台搭建

我们的十次方管理后台就采用ElementUI来进行搭建.

1.1什么是ElementUI

Element 饿了么前端出品的一套 Vue.js 后台组件库官网：

1.2神奇的脚手架

1.2.1快速搭建

官网上提供了非常基础的脚手架，如果我们使用官网的脚手架需要自己写很多代码 比如登陆界面、主界面菜单等内容。 课程已经提供了功能完整的脚手架，我们可以拿过来在此基础上开发，这样可以极大节省我们开发的时间。

（1）解压vueAdmin-template-master

（2）在命令提示符进入该目录，输入命令：

cnpm install

这样下载安装所有的依赖，几分钟后下载完成。

（3）输入命令：

npm run dev

运行后自动弹出浏览器。

1.2.2了解工程结构

以下是主要的目录结构：

1.3项目初始化

1.3.1关闭语法规范性检查

修改config/index.js ，将useEslint的值改为false。

此配置作用: 是否开启语法检查，语法检查是通过ESLint 来实现的。

我们现在科普一下,什么是ESLint : ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。如果我们开启了Eslint , 也就意味着要接受它非常苛刻的语法检查，包括空格不能少些或多些，必须单引不能双引，语句后不可以写 分号等等，这些规则其实是可以设置的。我们作为前端的初学者，最好先关闭这种校验，否则会浪费很多精力在语法的规范性上。如果以后做真正的企业级开发，建议开启。

1.3.2国际化设置

打开main.js 找到这句代码

import locale from 'element‐ui/lib/locale/lang/en'

我们将en修改为zn-CN

import locale from 'element‐ui/lib/locale/lang/zh‐CN'

修改后组件都是按照中文的习惯展示

1.3.3与easy-mock对接

（1）修改config下的dev.env.js中的BASE_API为easy-mock的Base URL

....BASE_API: '""',....

（2）easy-mock添加登陆认证模拟数据

地址： /user/login

提交方式：post

内容

{"code": 20000,"data": {"token": "admin"}}

（3）添加返回用户信息url模拟数据

地址：/user/info

提交方式：get

内容：

{"code": 20000,"data": {"roles": ["admin"],"role": ["admin"],"name": "admin","avatar": "‐e4f8‐4870‐b634‐ 56703b4acafe.gif"}}

1.3.4更改标题与菜单

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

（2）修改src/router 下的index.js 中constantRouterMap的内容

export const constantRouterMap = [{ path: '/login', component: () => import('@/views/login/index'), hidden: true },{ path: '/404', component: () => import('@/views/404'), hidden: true },{path: '/', component: Layout,redirect: '/dashboard', name: 'Dashboard', hidden: true,children: [{path: 'dashboard',component: () => import('@/views/dashboard/index')}]},{path: '/example', component: Layout, redirect: '/example/table', name: 'Example',meta: { title: '基本信息管理', 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.1需求分析

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

2.2表格组件

我们在这一环节先实现一个简单的列表，如下图所示：

准备工作：我们将swaggerAPI同步到easyMock 然后修改/gathering/gathering （GET方法）的内容

{"code": 20000,"flag": true, "message": "@string", "data|10": [{"id": "@string", "name": "@cword(8,12)","summary": "@cword(20,40)","detail": "@cword(20,40)", "sponsor": "@string", "image": "@image",  "starttime": "@date", "endtime": "@date","address": "@county(true)", "enrolltime": "@date", "state": "@string","city": "@string"}]}

代码实现步骤：

（1）在src/api创建gathering.js

import request from "@/utils/request" export default {getList(){return request({ url:'/gathering/gathering', method:'get'})}}

（2）创建gathering.vue中 ，编写脚本部分

<template></template><script>import gatheringApi from '@/api/gathering' export default {data(){ return {list:[]}},created(){this.fetchData();},methods:{fetchData(){ gatheringApi.getList().then(response => {this.list=response.data});}}}</script>

（3）修改gathering.vue，编写html代码部分

table组件的属性

table-column组件的属性

以上属性为我们代码中使用到的属性，其他属性请查阅官方文档.

2.3分页组件

我们已经通过表格组件完成了列表的展示，接下来需要使用分页组件完成分页功能

准备工作：修改接口/gathering/gathering/search/{page}/{size} method:POST

{"code": 20000,"flag": true, "message": "@string", "data": {"total": "@integer(100,200)", "rows|10": [{"id": "@string", "name": "@cword(8,12)","summary": "@cword(20,40)","detail": "@cword(20,40)", "sponsor": "@string", "image": "@image", "starttime": "@date", "endtime": "@date","address": "@county(true)", "enrolltime": "@date", "state": "1","city": "@string"}]}}

代码实现：

（1）修改src/api/gathering.js，增加方法导出

search(page,size,searchMap) { return request({url: `/gathering/gathering/search/${page}/${size}`, method: 'post',data: searchMap})}

（2）修改src/views/table/gathering.vue，编写脚本部分

import gatheringApi	from '@/api/gathering'export default { data(){return {list:[], total:0,//总记录数currentPage:1,//当前页pageSize:10,//每页大小searchMap: {}//查询表单绑定变量}},created(){this.fetchData()},methods:{fetchData(){gatheringApi.search(this.currentPage,this.pageSize,this.searchMap).then(response =>{this.list=response.data.rows this.total=response.data.total})}}}

（3）修改src/views/table/gathering.vue，增加分页栏

<template><div><el‐table :data="list" border style="width: 100%"><el‐table‐column	prop="id"	label="活动ID"	width="180"></el‐table‐ column><el‐table‐column	prop="name"	label="活动名称"	width="180"></el‐ table‐column><el‐table‐column	prop="sponsor"	label="主办方"	width="180"></el‐ table‐column><el‐table‐column	prop="address"	label="活动地址"	width="180"></el‐ table‐column><el‐table‐column	prop="starttime"	label="开始日期"	width="180"></el‐table‐column><el‐table‐column	prop="endtime"	label="结束日期"	width="180"></el‐table‐column></el‐table><el‐pagination @size‐change="fetchData" @current‐change="fetchData":current‐page="currentPage":page‐sizes="[5, 10, 20]":page‐size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el‐pagination></div></template>

currentPage为当前页 ， total为总记录数

注意：template里面要求必须有唯一的跟节点，我们这里用div将表格和分页控件包起 来。

pagination的常用属性：

pagination的常用事件：

更多属性方法事件请查看官方文档：- CN/component/pagination

2.4条件查询

需求：在分页列表的基础上实现条件查询功能

代码实现：

修改src/views/table/gathering.vue，增加查询表单

<!‐‐查询表单‐‐><el‐form :inline="true" class="demo‐form‐inline"><el‐form‐item label="活动名称"><el‐input v‐model="searchMap.name" placeholder="活动名称"></el‐input></el‐form‐item><el‐form‐item label="活动日期" ><el‐date‐picker	type="date" placeholder="选择开始日期" v‐ model="searchMap.starttime_1" ></el‐date‐picker><el‐date‐picker	type="date" placeholder="选择截止日期" v‐ model="searchMap.starttime_2" ></el‐date‐picker></el‐form‐item><el‐button type="primary" @click="fetchData()">查询</el‐button></el‐form>

form（表单）组件属性详见官方文档：- CN/component/form

input（文本框）组件属性详见官方文档：-

CN/component/input

date-picker（日期框）组件属性详见官方文档：- CN/component/date-picker

3活动管理-增加

3.1需求分析

界面中加入"新增"按钮，点击弹出编辑窗口

点击“修改”按钮，关闭窗口并刷新表格，弹出提示（成功或失败）

3.2弹出窗口

（1）修改src/api/gathering.js，在template中增加对话框组件

<el‐dialog	title="活动编辑" :visible.sync="dialogFormVisible" ></el‐dialog>

属性title为对话框标题， visible为是否显示。

（2）变量dialogFormVisible用于控制对话框的显示。我们在脚本代码中定义

data(){return {.....dialogFormVisible: false //对话框是否显示}}

（3）template中增加按钮，用于打开对话框

<el‐button type="primary" @click="dialogFormVisible = true">新增</el‐ button>

dialog属性详见官方文档：

3.3编辑表单

修改src/views/table/gathering.vue，在弹出窗口添加编辑表单

<el‐dialog title="编辑" :visible.sync="dialogFormVisible"><el‐form label‐width="80px"><el‐form‐item label="活动名称"><el‐input v‐model="pojo.name" placeholder="活动名称"></el‐input></el‐form‐item><el‐form‐item label="基本地址"><el‐input v‐model="pojo.address"	placeholder="基本地址"></el‐input></el‐form‐item><el‐form‐item label="开始日期"><el‐date‐picker type="date"	v‐model="pojo.starttime" placeholder="开始日期"></el‐date‐picker></el‐form‐item><el‐form‐item label="截至日期"><el‐date‐picker type="date" v‐model="pojo.endtime" placeholder="截至日期"></el‐date‐picker></el‐form‐item><el‐form‐item label="报名截止"><el‐date‐picker type="date" v‐model="pojo.enrolltime" placeholder="报名截止"></el‐date‐picker></el‐form‐item><el‐form‐item label="活动详情"><el‐input v‐model="pojo.detail" placeholder="活动详情" type="textarea"	:rows="2"></el‐input></el‐form‐item><el‐form‐item label="是否可见"><el‐switch active‐value="1" inactive‐value="0" v‐ model="pojo.status"></el‐switch></el‐form‐item><el‐form‐item><el‐button type="primary" >保存</el‐button><el‐button @click="dialogFormVisible = false" >关闭</el‐button></el‐form‐item></el‐form></el‐dialog>

这里我们主要要掌握多行文本编辑框与开关组件switch的使用

3.4下拉选择框

需求：在新增窗口实现城市下拉选择框

我们这里需要使用elementUI提供的下拉选择框

准备工作：修改easyMock 中的/base/city (GET)

{"flag": true,"code": 20000, 'message': "查询成功",'data|10': [{"id|+1": 1, "name": "@city","ishot": "1",}]}

代码实现

（1）创建src/api/city.js

import request from '@/utils/request' export default {getList(){return request({ url: '/base/city', method: 'get'})}}

（2）修改src/views/table/gathering.vue的js脚本部分

为data添加属性

cityList: []

引入城市API

import cityApi from '@/api/city'

修改created，增加对城市方法的调用

created() { this.fetchData()cityApi.getList().then(response =>{ this.cityList = response.data})}

（3）修改src/views/table/gathering.vue，增加城市下拉框

<el‐form‐item label="城市"><el‐select v‐model="pojo.city" placeholder="请选择"><el‐optionv‐for="item in cityList":key="item.id":label="item.name":value="item.id"></el‐option></el‐select></el‐form‐item>

3.5表单提交

（1）修改easymock中的/gathering/gathering （增加活动 POST）

{"flag": true,"code": 20000,'message': "执行成功"}

（2）修改src/api/gathering.js，增加方法导出

save(pojo) { return request({url: `/gathering/gathering`, method: 'post',data: pojo})}

（3）修改src/views/table/gathering.vue的js脚本部分 增加方法执行保存

handleSave(){ gatheringApi.save(this.pojo).then(response=>{alert(response.message) if(response.flag){//如果成功this.fetchData()//刷新列表}})this.dialogFormVisible=false//关闭窗口}

（4）修改弹出框中的“保存”按钮，调用保存方法

<el‐button type="primary" @click="handleSave()">保存</el‐button>

4.1需求分析

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

4.2根据ID加载数据

准备工作：修改easymock 接口 /gathering/gathering/{id} （GET）

{"flag": true,"code": 20000, 'message': "查询成功", 'data': {"id": "1","name": "测试活动","sponsor": "主办方","image": "@image", "starttime": "@date", "endtime": "@date","address": "@county(true)", "enrolltime": "@date", "state": "1"}}

代码实现：

（1）修改src/api/gathering.js，增加方法定义

findById(id) { return request({url: `/gathering/gathering/${id}`, method: 'get'})}

（2）修改src/views/table/gathering.vue的js脚本部分

新增handleEdit方法

handleEdit(id){this.dialogFormVisible=true//打开窗口//调用查询gatheringApi.findById(id).then( response=>{ if(response.flag){this.pojo=response.data}})}

（3）在表格table中增加模板列 ,模板列中防止修改按钮，调用handleEdit方法

<el‐table‐columnfixed="right" label="操作" width="100"><template slot‐scope="scope"><el‐button @click="handleEdit(scope.row.id)" type="text" size="small">修改</el‐button></template></el‐table‐column>

fixed="right"的作用是定义此列为右固定列

slot-scope用于指定当前行的上下文。使用scope.row可以获取行对象

4.3新增窗口表单清空

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

handleEdit(id){this.dialogFormVisible=true//打开窗口if(id!=''){//调用查询gatheringApi.findById(id).then( response=>{ if(response.flag){this.pojo=response.data}})}else{this.pojo={}//清空表单}}

修改新增按钮，调用handleEdit方法时传递空字符串

<el‐button type="primary" @click="handleEdit('')">新增</el‐button>

4.4保存修改

准备工作：修改easymock 接口 /gathering/gathering/{id} （PUT）

{"flag": true,"code": 20000,'message': "修改成功"}

代码：

（1）修改src/api/gathering.js，增加方法定义

update(id,pojo) { return request({url: `/gathering/gathering/${id}`, method: 'put',data: pojo})}

（2）修改src/views/table/gathering.vue的js脚本部分

增加属性id

data(){ return {......id:''//当前编辑的ID}}

修改handleEdit,增加

this.id=id

修改方法handleSave

handleSave(){ if(this.id!=''){//修改gatheringApi.update(this.id,this.pojo).then(response=>{ alert(response.message)if(response.flag){//如果成功this.fetchData()//刷新列表}})}else{//新增gatheringApi.save(this.pojo).then(response=>{alert(response.message) if(response.flag){//如果成功this.fetchData()//刷新列表}})}this.dialogFormVisible=false//关闭窗口}

以上代码我们可以做一下优化：

修改src/api/gathering.js

update(id,pojo){if(id == null || id == ''){ return save(pojo)}return request({url: `/gathering/gathering/${id}`, method: 'put',data: pojo})}

修改src/views/table/gathering.vue的handleSave

handleSave(){ gatheringApi.update(this.id,this.pojo).then(response=>{alert(response.message) if(response.flag){//如果成功this.fetchData()//刷新列表}})this.dialogFormVisible=false//关闭窗口}

4.5消息提示框

js原生的alert简直是丑爆了，有没有更漂亮的弹出框呀！当然有，用了elementUI提供了 消息提示框，真是美呆了！ alert(response.message)可以替换为以下代码：

this.$message({message: response.message,type: (response.flag?'success':'error')});

$message详见官方文档：

你可以尝试着参照文档做出更丰富的效果哦~

5活动管理-删除

5.1需求分析

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

5.2EasyMock接口

URL:gathering/:id Method: delete

{"flag": true,"code": 20000,'message': "执行成功"}

5.3代码实现

（1）修改src/api/gathering.js，增加方法定义

deleteById(id){ return request({url: `/gathering/gathering/${id}`, method: 'delete'})}

（2）修改src/views/table/gathering.vue的js脚本部分增加方法

handleDelete(id){this.$confirm('确定要删除此纪录吗?', '提示', { confirmButtonText: ' 确 定 ', cancelButtonText: '取消',type: 'warning'}).then(() => { gatheringApi.deleteById(id).then(response=>{this.$message({message: response.message,type: (response.flag?'success':'error')})if(response.flag){ this.fetchData()// 刷新数据}})}).catch(() => {});}

（3）修改src/views/table/gathering.vue ，在操作列增加删除按钮

<el‐button @click="handleDelete(scope.row.id)" type="text" size="small">删除</el‐button>

我们看一下现在的API代码

import request from "@/utils/request" export default {getList(){return request({url:'/gathering/gathering', method:'get'});},search(page,size,searchMap){ return request({url: `/gathering/gathering/search/${page}/${size}`, method: 'post',data: searchMap});},save(pojo){return request({url: `/gathering/gathering`, method: 'post',data: pojo})},findById(id){return request({url: `/gathering/gathering/${id}`, method: 'get'})},update(id,pojo){ if(id==null || id==''){return this.save(pojo)}return request({url: `/gathering/gathering/${id}`, method: 'put',data: pojo})},deleteById(id){ return request({url: `/gathering/gathering/${id}`, method: 'delete'})}}

这里面的url地址都是一样的，如果以后地址发生了变化，需要逐个修改，不利于维护， 所以我们这里把此字符串提取出来定义为常量，运用es6的模板字符串特性来进行拼接即 可。

修改后代码如下：

import request from "@/utils/request" const group_name='gathering'const api_name='gathering' export default {getList(){return request({url:`/${group_name}/${api_name}`, method:'get'});},search(page,size,searchMap){ return request({url: `/${group_name}/${api_name}/search/${page}/${size}`, method: 'post',data: searchMap});},save(pojo){return request({url: `/${group_name}/${api_name}`, method: 'post',data: pojo})},findById(id){return request({url: `/${group_name}/${api_name}/${id}`, method: 'get'})},update(id,pojo){ if(id==null || id==''){return this.save(pojo)}return request({url: `/${group_name}/${api_name}/${id}`,method: 'put',data: pojo})},deleteById(id){ return request({url: `/${group_name}/${api_name}/${id}`, method: 'delete'})}}