- 前端项目搭建
- 建立静态web项目
- npm install -y (初始化package.json文件)
- npm install vue(下载vue)
- vue init webpack(安装脚手架)
- npm run dev (运行项目)
- 安装ElementUi
- npm i element-ui -S
- 在main.js引入
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
Vue.use(ElementUI)//告诉Vue使用elementui
- 去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对话框
修改
给修改按钮添加事件
实现数据回显