ElementUI-基于vue前端ui框架
- 搭建static web项目
- 安装脚手架
npm install -g vue-cli
vue init webpack - 运行项目
npm run dev - 安装elementui
api----http://element-cn.eleme.io/#/zh-CN
输入命令
npm install element -ui -S - 导入
在main.js中引入并使用elementui
//引入elementui
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
//使用elementui
Vue.use(ElementUI);
Mock
Mock.js (官网http://mockjs.com/)是一款模拟数据生成器,旨在帮助前端人员独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能:
1.根据数据模板生成模拟数据
2.模拟 Ajax 请求,生成并返回模拟数据
3.基于 HTML 模板生成模拟数据
- 准备数据–安装mockjs
输入命令安装
npm install mockjs - 安装axios并且引入axios模块
npm install axios
引入
//引入axios
import axios from 'axios';
/*对Vue对象进行扩展属性$http*/
Vue.prototype.$http = axios;
Elementui+Crud实现
- main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//引入elementui
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
//引入axios
import axios from 'axios';
/*对Vue对象进行扩展属性$http*/
Vue.prototype.$http = axios;
//使用elementui
Vue.use(ElementUI);
Vue.use(axios);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});
- index.js
浏览器通过/user进行访问
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import User from '@/components/User'
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/user',
name: 'User',
component: User
},
]
})
- mockjs生成模拟数据—user.js
// 引入 Mock
var Mock = require('mockjs')
let result = Mock.mock({
'list|203':[{
'id': '@increment',
'name': '@cname',
'phone': /^1[0-9]{10}$/,
'email': '@email',
'address': '@county(true)',
'createTime': '@date("yyyy-MM-dd")'
}]
})
// 输出结果
//console.log(JSON.stringify(data))
//对外暴露资源(接口)
Mock.mock("/user/list","post", function(options){
//返回数据
let data = result.list;
//获取json字符串
let jsonStr = options.body;
//转成json对象
let jsonObj = JSON.parse(jsonStr);
//获取当前页
let currentPage = jsonObj.currentPage;
//获取每页条数
let pageSize = jsonObj.pageSize;
//计算分页 后台根据begin和end进行分页
let begin = (currentPage-1)*currentPage;
let end = pageSize*currentPage;
return {
result:data.slice(begin,end),
total:data.length
};
});
//删除
Mock.mock("/user/remove","post", function(options){
return {
success:true,
msg:"删除成功"
}
});
//批量删除
Mock.mock("/user/batchRemove","post", function(options){
return {
success:true,
msg:"删除成功"
}
});
- user.vue
<template>
<div>
<el-dialog :visible.sync="visible" :title="title">
<el-form :inline="true" :model="form" class="demo-form-inline">
<el-form-item label="用户名">
<el-input v-model="form.name" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="form.email" placeholder="邮箱"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取 消</el-button>
<el-button type="primary" @click="visible = false">确 定</el-button>
</span>
</el-dialog>
<!--高级查询表单-->
<el-form :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 label="邮箱">
<el-input v-model="searchForm.email" placeholder="邮箱"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="add">新增</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
:data="tableData"
@selection-change="selectionChange"
style="width: 100%">
<el-table-column
type="selection">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
>
</el-table-column>
<el-table-column
prop="email"
label="邮箱"
>
</el-table-column>
<el-table-column
prop="phone"
label="电话">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column
prop="createTime"
label="日期">
</el-table-column>
<!--按钮组-->
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="edit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="remove(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button size="mini" type="danger" style="float: left;margin-left: 20px" @click="batchRemove">批量删除</el-button>
<div class="block">
<span class="demonstration"></span>
<el-pagination
@size-change="sizeChange"
@current-change="currentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
//引入user.js
import User from '../js/user';
export default {
name: 'User',
data () {
return {
//当前页
currentPage:1,
//每页显示条数
pageSize:10,
//选择每页显示条数
pageSizes:[5,10,15,20],
//总条数
total:0,
//存放数据
tableData:[],
//加载的样式
loading:true,
//存放复选框选中的数据
selectRow:[],
//高级查询
searchForm:{
name:"",
email:""
},
//添加数据
form:{
name:"",
email:""
},
visible:false,
//添加框的标题
title:""
}
},
methods:{
//当前页改变时触发事件
currentChange(val){
//页数改变时设置当前页数
this.currentPage = val;
//当前页改变后 加载列表 因为双向绑定
this.loadUserList();
},
//设置每页显示条数时触发事件
sizeChange(val){
//只要修改每页显示条数就回到第一页
this.currentPage = 1;
//每页显示条数改变时设置
this.pageSize = val;
this.loadUserList();
},
//复选框选中的数据放进selectRow中
selectionChange(val) {
this.selectRow = val;
},
//编辑
edit(index,row){
for(let k in row){//回显
this.form[k] = row[k];
}
this.visible= true;
this.title="修改用户"
},
//删除单个数据
remove(index,row){
this.$confirm('确认要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(() => {
this.$http.post("/user/remove",row).then(res=>{
if (res.data.success){//返回的数据如果为true就删除
this.$message({
type: 'success',
message: '删除成功!'
});
//删除之后刷新页面
this.loadUserList();
}
});
}).catch(() => {
});
},
//批量删除
batchRemove(){
if(!this.selectRow.length){
this.$message.error('亲!请选中数据进行删除哦!!');
return;
}
this.$confirm('确认要删除选中的数据吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(() => {
this.$http.post("/user/batchRemove",{"row":this.selectRow}).then(res=>{
if (res.data.success){//返回的数据如果为true就删除
this.$message({
type: 'success',
message: '删除成功!'
});
//删除之后刷新页面
this.loadUserList();
}
});
});
},
//高级查询
search(){
this.loadUserList();
},
//添加
add(){
this.form={};
this.visible= true;
this.title="添加用户"
},
//加载数据列表
loadUserList(){
//查询传递参数 会自动把param封装到options中
let param = {"pageSize":this.pageSize,"currentPage":this.currentPage,"search":this.searchForm};
//加载框
this.loading=true;
this.$http.post("/user/list",param).then(res=>{
//赋值给tableData 前台展示数据
this.tableData = res.data.result;
//设置总条数
this.total = res.data.total;
//加载完成后 加载样式不显示
this.loading=false;
});
}
},
mounted(){
//发送ajax请求加载数据列表
this.loadUserList();
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>