1 管理后台搭建

一.什么是ElementUI

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

二.脚手架

  1. 快速搭建
    官网上提供了非常基础的脚手架，如果我们使用官网的脚手架需要自己写很多代码比如登陆界面、主界面菜单等内容。 课程已经提供了功能完整的脚手架，我们可以拿过来在此基础上开发，这样可以极大节省我们开发的时间。
  1. 解压vueAdmin-template-master
  2. 在命令提示符进入该目录，输入命令：

    这样下载安装所有的依赖，几分钟后下载完成。
  3. 输入命令：

    运行后自动弹出浏览器。
  1. 了解工程结构

三.项目初始化

  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 ，在操作列增加删除按钮