文章目录
一、Hello ElementUI
1、准备工作
①、搭建脚手架
创建普通得web项目,在该项目下搭建脚手架——vue init webpack
启动npm run dev
在浏览器中进行查看,查看是否成功
②、安装Element
根据官网:https://element.eleme.cn/#/zh-CN/component/installation
npm安装:npm i element-ui -S
引入 Element(完整引入):
main.js中
/*模块化引入elementui*/
import ElementUI from 'element-ui';
/*模块化引入elementui核心样式*/
import 'element-ui/lib/theme-chalk/index.css';
/*要使用element提供得所有组件*/
Vue.use(ElementUI);
2、Hello elementui
<template>
<el-row>
<el-col :span="24" style="background-color: crimson ; width: 100% ; font-size: 50px ">Hello ElementUI</el-col>
</el-row>
</template>
<script>
export default {
name: 'Hello',
data () {
return {
}
}
}
</script>
还需在index.js中配置路由路径
elementui得标签基本都是以el-
开头得
二、Mock.js
在前后端分离开发模式中,前后端是分离并行开发的,前端开发人员在开发的时候后台提供接口数据的接口还没有写好,所以需要模拟数据。优点及作用都可以在官网上进行学习:http://mockjs.com/
1、安装Mock.js
在项目中进行Node (CommonJS):npm install mockjs
2、使用
在src下创建js/employee.js文件
// 导入 Mockjs得核心插件(组件commonJS规范)
let Mock = require('mockjs')
/*模拟数据*/
let data = Mock.mock({
// 属性 list 的值是一个数组,其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数,起始值为 1,每次增 1
'id|+1': 1
}]
});
// 输出结果
console.log(JSON.stringify(data));
显示数据需要进入到该js文件所在文件夹,然后执行node employee.js
就得到随机模拟得数据
注:上述模拟数据得代码,可以自行百度或者根据官网进行编写(前端人员使用较多,后端了解即可)
三、Axios(发送Ajax请求)
vue更新到2.0之后,官方推荐使用axios请求服务器数据。Axios和其他的ajax库都很类似,他是基于promise的http库,可以用在浏览器和node.js中。
简单理解就是vue不包含ajax请求,如果使用vue插件,并且想发送ajax请求,就得安装Axios(Axios与ajax关系就类似jQuery与js得)
1、安装
在项目执行npm install axios --save
进行安装
同时在main.js中需要引入axios以及扩展vus原型属性
/*引入axiox*/
import axios from 'axios';
/*给vue扩展原型属性,方便vue实例对象中获取axios,类似于给vue添加一个方法*/
Vue.prototype.$http = axios;
后台js模拟数据进行测试
// 导入 Mockjs得核心插件(组件commonJS规范)
let Mock = require('mockjs');
/*模拟数据*/
let data = Mock.mock({
'list|202': [{//产生得数量,设置为202条
'id': '@increment',
'name': '@cname',
'phone': /^1[0-9]{10}$/,//正则表达式
'email': '@email',//邮箱
'address': '@county(true)',//地址,三级省市区
'createTime': '@date("yyyy-MM-dd")'//创建时间 年月日
}]
});
// 输出结果
console.log(JSON.stringify(data));
前台vue进行接收
2、前台发送Axios请求
<template>
<!--数据展示列表-->
<el-table :data="tableData" stripe border style="width: 100%"><!--stripe斑马格;border边框-->
<!--prop:JSON对象的key值,通过key进行取值;label表头;align:对齐方式-->
<el-table-column type="index" align="center" label="编号" width="150">
</el-table-column>
<el-table-column prop="name" align="center" label="姓名">
</el-table-column>
<el-table-column prop="phone" align="center" label="电话">
</el-table-column>
<el-table-column prop="email" align="center" label="邮箱">
</el-table-column>
<el-table-column prop="address" align="center" label="地址">
</el-table-column>
<el-table-column prop="createTime" align="center" label="创建时间">
</el-table-column>
</el-table>
</template>
<script>
/*模块化引入employee.js*/
import employee from "../js/employee.js"
export default {
name: 'Employee',
data () {
return {
tableData:[]
}
},
/*页面渲染完后(dom节点挂载完毕)立刻执行,类似于jQuery中的$(function)*/
mounted(){
/*前台模拟发送axios的post请求,并通过回调函数接收模拟的数据*/
this.$http.post("/employee/list").then(res=>{/*响应成功res存放返回的数据*/
/*通过解构表达式获取传回的数据*/
let {list} = res.data;
/*给tableData进行赋值展示*/
this.tableData = list;
})
}
}
</script>
注:前台显示的样式可以自行在Element官网进行查找
3、后台拦截Axios并传回模拟数据
// 导入 Mockjs得核心插件(组件commonJS规范)
let Mock = require('mockjs');
/*模拟数据*/
let data = Mock.mock({
'list|202': [{//产生得数量,设置为202条
'id': '@increment',
'name': '@cname',
'phone': /^1[0-9]{10}$/,//正则表达式
'email': '@email',//邮箱
'address': '@county(true)',//地址,三级省市区
'createTime': '@date("yyyy-MM-dd")'//创建时间 年月日
}]
});
/*拦截axios对应路径的请求*/
Mock.mock("/employee/list","post",function (options) {
/*响应至前台的数据*/
return data;
});
四、elementui-CRUD
1、数据分页
- 拷贝分页条模板
- 补全对应的函数以及提取参数至data
- 设置当前也默认值1和每页条数默认10
- 前台传递当前页于每页条数作为axios参数
- 后台接收参数,处理模拟数据
- 对总数居进行分割
jsArray.slice(begin,end)
- 将处理的模拟数据进行返回,返回包括总的数据total(自动分页用),list分页列表(table展示数据)
页面展示
<!--分页条-->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page=currentPage :page-sizes=pageSize :page-size=pagesize
layout="total, sizes, prev, pager, next, jumper" :total=total>
</el-pagination>
<script>
/*模块化引入employee.js*/
import employee from "../js/employee.js"
export default {
name: 'Employee',
data () {
return {
tableData:[],//表格中数据
currentPage:1,//当前页
pageSize : [5,10,20,30],//下拉框每页显示条数
pagesize : 10,//每页条显示条数
total : 10,//总的数据条数
}
},
methods: {
/*每页条数发生变化时调用此函数*/
handleSizeChange(val) {
/*每次分页后跳至第一页*/
this.currentPage = 1;
/*改变每页条数*/
this.pageSize = val;
/*查询员工分页列表*/
this.loadEmployee();
},
/*当前页发生变化时调用此函数*/
handleCurrentChange(val) {
/*改变当前页*/
this.currentPage = val;
/*查询员工分页列表*/
this.loadEmployee();
},
/*分页显示*/
loadEmployee(){
/*传递需要进行分页的参数,就是当前页和每页条数和*/
let param = {"currentPage":this.currentPage,"pagesize":this.pagesize}
/*前台模拟发送axios的post请求,并通过回调函数接收模拟的数据*/
this.$http.post("/employee/list",param).then(res=>{/*响应成功res存放返回的数据*/
/*通过解构表达式获取传回的数据*/
let {list,total} = res.data;
/*赋值总数据*/
this.total = total;
/*给tableData进行赋值展示*/
this.tableData = list;
})
}
},
/*页面渲染完后(dom节点挂载完毕)立刻执行,类似于jQuery中的$(function)*/
mounted(){
this.loadEmployee();
}
}
</script>
后台接收数据
Mock.mock("/employee/list","post",function (options) {
let jsonStr = options.body;//接收前台传回的json字符串信息
let param = JSON.parse(jsonStr);//转换为json对象,方便取值
let currentPage = param.currentPage;//获取当前页
let pagesize = param.pagesize;//获取每页条数
let list = data.list;//获取总的数据
/*关键步骤,需要对总数居进行分割,放进分页信息中*/
let begin = (currentPage-1)*pagesize;
let end = currentPage*pagesize;
/*分割同时会进行分页*/
list = list.slice(begin,end);
/*响应至前台的数据*/
return {//返回总条数进行分页,返回分页列表
"list":list,
"total":data.list.length
}
});
2、高级查询
<!--高级查询,使用行内表单:inline="true"
:model="searchForm双向绑定的公共前缀,类似于定义一个对象,里面可以又字段-->
<el-form style="float: left" :inline="true" :model="searchForm" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="searchForm.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loadEmployee">查询</el-button>
</el-form-item>
</el-form>
点击查询的时候可以直接调用已有的分页方法,将需要查询的内容作为参数进行传递
let param = {"currentPage": this.currentPage, "pageSize": this.pageSize, "name":this.searchForm.name};
3、删除
删除得显示样式
<!--编辑或删除操作-->
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
删除前台方法
/*删除按钮执行得方法*/
handleDelete(index, row) {
this.$confirm('亲!你确定要删除这条数据吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {//删除成功执行这里
/*删除成功时候发送axios请求到后台,同时把需要删除得那行数据作为参数*/
this.$http.post("/employee/delete",row).then(res=>{
let {success,msg} = res.data;
if(success){/*根据后台传回得Boolean值显示提示信息*/
this.$message({
type: 'success',
message: msg
});
} else {/*删除失败*/
this.$message.error(msg);
}
});
}).catch(() => {//删除失败执行这里,因为是模拟数据所以暂时没有方法
});
}
删除向后台发送axios请求
/*对删除请求进行拦截*/
Mock.mock("/employee/delete","post",function (options) {
return {
"success":true,
"msg":"删除成功"
}
});
4、新增
页面样式需要使用弹出框以及按钮
<el-form-item>
<el-button type="primary" @click="loadEmployee">查询</el-button>
<el-button type="success" @click="openDialog">新增</el-button>
</el-form-item>
<!--新增按钮-->
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" >
<el-form label-width="80px" :model="addForm">
<el-form-item label="名称">
<el-input v-model="addForm.name"></el-input>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="addForm.phone"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="addForm.address"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
传输数据
/*新增的from表单*/
addForm:{
name:"",
phone:"",
email:"",
address:""
},
//弹出框默认关闭状态
dialogVisible:false,
/*新增弹出框*/
openDialog(){
//修改弹出框标题
this.title = "新增";
//清空form表单
this.addForm.id = "";
this.addForm.name = "";
this.addForm.email = "";
this.addForm.phone = "";
this.addForm.address = "";
//显示新增得弹出框
this.dialogVisible = true;
}
5、修改
前端显示使用得还是之前编辑与删除使用得
<!--编辑或删除操作-->
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
为编辑按钮注册事件,可以使用新增得弹出框,只需要在新增得基础上传输数据做一个区分,为了实现回显
handleEdit(index, row) {
/*修改编译弹出框得标题*/
this.title = "修改";
/*回显数据*/
this.addForm.id = row.id;
this.addForm.name = row.name;
this.addForm.email = row.email;
this.addForm.phone = row.phone;
this.addForm.address = row.address;
//显示新增得弹出框
this.dialogVisible = true;
},