ElementUI ，MockJs ，Ajax优化axios请求_mockjs 优化

• 前端项目搭建
• 建立静态web项目

1. npm install -y （初始化package.json文件)
2. npm install vue(下载vue）
3. vue init webpack（安装脚手架）
4. npm run dev (运行项目)
5. 安装ElementUi
6. npm i element-ui -S
7. 在main.js引入

 import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
Vue.use(ElementUI)//告诉Vue使用elementui
1
2
3

• 去ElementUi官网复制一个组件 放在一个新建的Vue文件A.vue里面
• 然后去路由导入，添加新的组件，这样就可以通过tomcat访问A.vue文件了。
• 这些数据都是死的，所有要使用Mock.js来生成虚拟数据。
• 下载Mock,js
• npm install mockjs
• 去官网复制js文件放在一个新的js文件user.js
• 
• Ajax请求优化-axios
• 需要发送Ajax请求像后台请求数据
• 所以需要下载Ajax请求插件
• npm install axios --save
• 在main.js引入Axios
• 给Vue添加属性$http
• 在Mock.js中暴露资源路径
• 并返回虚拟数据
• 在vue界面动态请求数据，并且把值赋值给绑定的值

分页

在官网拷贝一个完整的分页条，
然后改绑定值，使用v-bind绑定
虚拟页面返回一个total
vue界面把接收，并赋值给分页total
在单击每页多少条时需要把当前值赋值给PageSize并且再次的动态请求数据
在选择当前页数是也需要把当前选择的值赋值给当前页currentPage并且再次动态请求数据

高级查询

在官网拷贝from表单
双向绑定需要传到后台的值
给查询按添加事件 重新发送请求发送数据

CRUD

拷贝按钮，给按钮注册事件。

删除

当单击删除按钮时应该弹出一个确认框，是否删除。
官网拷贝确认框
在then后面就是确认以后执行的逻辑
在then编写删除逻辑
发送删除请求，如果成功就返回成功信息
如果失败就去返回失败信息

增加

官网拷贝dialog模态框，v-model绑定值，方便传到后台去
给按钮添加事件add()
单击添加事件时就要清空对话框和弹出dialog对话框

修改

给修改按钮添加事件
实现数据回显