ssm+elementUI综合练习03-vue-element-admin按照maven多模块后端接口文档真实crud
1、接口文档
2、vue-element-admin
官网地址https://panjiachen.github.io/vue-element-admin-site/zh/
2.1、介绍：
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
2.2、建议：
本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。
- 集成方案: vue-element-admin
- 基础模板: vue-admin-template
- 桌面终端:electron-vue-admin
- Typescript 版: vue-typescript-admin-template (鸣谢:@Armour)
- Others: awesome-project
2.3、本项目使用：
本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。
2.4、安装
Github地址：https://github.com/PanJiaChen/vue-element-admin
2.5、解压、启动
直接解压，启动项目
- npm install 安装依赖前端js库
- npm run dev 运行前端项目
- npm run build 打包–先不管 发布时候使用
2.6、登录页面
3、实现crud（department为例）
3.1、新建vue
新建一个department.vue
3.2、导入vue组件
在routes.js中
import department from './views/sevens/department.vue'
3.3、配置路由
{
path: '/',
component: Home,
name: '导航一',
iconCls: 'el-icon-message',//图标样式class
children: [
{
path: '/main', component: Main, name: '主页', hidden: true},
{
path: '/table', component: Table, name: 'Table'},
{
path: '/department', component: department, name: '部门'},
{
path: '/form', component: Form, name: 'Form'},
{
path: '/user', component: user, name: '列表'},
]
}
3.4、关闭mock模拟数据，引入axios
联合后台使用真实数据，将mock模拟数据关闭
3.5、分页查询
department.vue
<el-table :data="departments" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
style="width: 100%;">
<el-table-column type="selection" width="55">
el-table-column>
<el-table-column type="index" label="编号" width="80">
el-table-column>
<el-table-column prop="name" label="名称" sortable>
el-table-column>
<el-table-column label="操作" width="150">
<template scope="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑el-button>
<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除el-button>
template>
el-table-column>
el-table>
<script>
export default {
data() {
return {
//部门数据
departments: [],
//加载框效果
listLoading: false,
//分页大小，默认显示10条
pageSize: 10,
//总数据
total: 0,
//当前页
currentPage: 1,
//分页展示大小规格
pageSizes: [5, 10, 15, 20],
}
},
methods: {
//获取部门列表
getdepartments() {
let param = {
pageSize: this.pageSize,
currentPage: this.currentPage,
name: this.searchForm.name
}
this.$http.patch("/department/pagelist", param).then((res) => {
//console.debug(res);
this.total = res.data.total;
this.departments = res.data.result;
this.listLoading = false;
});
},
//当前页改变触发
handleCurrentChange(v) {
this.currentPage = v;
this.getdepartments();
},
//改变当前页显示数量
handleSizeChange(v) {
this.currentPage = 1;
this.pageSize = v;
this.getdepartments();
},
}
//加载完执行
mounted() {
this.getdepartments();
}
}
script>
3.5、高级查询
department.vue
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="searchForm">
<el-form-item>
<el-input v-model="searchForm.name" placeholder="部门">el-input>
el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="getdepartments">查询el-button>
el-form-item>
<el-form-item>
<el-button type="primary" @click="handleAdd">新增el-button>
el-form-item>
el-form>
el-col>
data() {
return {
//查询条件
searchForm: {
name: ""
},
｝
｝
3.5、新增和修改
<el-dialog :title="title" v-model="formVisible">
<el-form :model="form" label-width="80px" :rules="formRules" ref="addForm">
<el-form-item label="部门名称" prop="name">
<el-input v-model="form.name" auto-complete="off">el-input>
el-form-item>
el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="formVisible = false">取消el-button>
<el-button type="primary" @click.native="submit" :loading="addLoading">提交el-button>
div>
el-dialog>
data() {
return {
//弹出框是否可见，默认不可见
formVisible: false,
//添加和修改的form表单双向绑定
form: {
id: "",
name: "",
},
//提交按钮的加载框
addLoading: false,
//验证
formRules: {
name: [
{
required: true, message: '请输入姓名', trigger: 'blur'}
]
},
｝
｝
methods
//添加
handleAdd() {
this.title = "添加部门";
this.formVisible = true;
//打开及重置form表单
this.$refs['addForm'].resetFields();
},
//编辑
handleEdit(i, r) {
//console.debug(r.id,r);
this.title = "修改部门";
this.formVisible = true;
this.form = Object.assign({
}, r);
},
//添加和修改提交
submit() {
this.$refs.addForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {
}).then(() => {
this.addLoading = true;
//NProgress.start();
//继承form表单的内容，相当于复制一份
let para = Object.assign({
}, this.form);
//如果有id，则为修改，没有则为新增保存
if (para.id) {
this.$http.post("/department/update", para).then(res => {
//关闭提交按钮的加载框特效
this.addLoading = false;
//如果修改成功
if (res.data.success) {
this.$message({
message: "修改成功",
type: 'success'
});
//关闭弹窗
this.formVisible = false;
//重置form表单，相当于清空
this.$refs['addForm'].resetFields();
//重新加载
this.getdepartments();
} else {
this.$message({
message: res.data.msg,
type: 'error'
});
}
})
} else {
this.$http.put("/department/save", para).then(res => {
//关闭提交按钮的加载框特效
this.addLoading = false;
//如果删除成功
if (res.data.success) {
this.$message({
message: "保存成功",
type: 'success'
});
//关闭弹窗
this.formVisible = false;
//重置form表单，相当于清空
this.$refs['addForm'].resetFields();
//重新加载
this.getdepartments();
} else {
this.$message({
message: res.data.msg,
type: 'error'
});
}
})
}
});
}
});
},
3.6、单个删除
methods
selsChange(sels) {
this.sels = sels;
},
//单个删除
handleDel(i, r) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.listLoading = true;
this.$http.delete("/department/delete/" + r.id, r).then(res => {
this.listLoading = false;
// console.debug(res.data.success);
if (res.data.success) {
this.$message({
message: '删除成功',
type: 'success'
});
//可以返回至第一页
//this.currentPage = 1;
this.getdepartments();
} else {
this.$message({
message: res.data.msg,
type: 'warning'
});
}
});
}).catch(() => {
});
},
3.7、批量删除
methods
//批量删除获取行
batchRemove(v) {
this.$confirm('确认删除该记录吗?', '提示', {
type: 'warning'
}).then(() => {
this.$http.patch("/department/batchDelete",this.sels).then(res=>{
if(res.data.success){
//NProgress.done();
this.$message({
message: '删除成功',
type: 'success'
});
this.getdepartments();
}else{
this.$message.error(res.data.msg);
}
})
}).catch(() => {
});
}
},