Vue前端整合后端的CRUD
用vue安装vue-router Element axios模块
Vue 快速入门https://blog.csdn.net/smilejiasmile/article/details/110819074
1.套用Element的侧边栏模板
1.1Layout.vue
<template>
<el-container>
<!-- 页头 -->
<el-header>
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-menu-item index="1">
<el-button icon="el-icon-s-shop">商城后台管理</el-button>
</el-menu-item>
<el-submenu index="2" class="fr1">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-menu-item index="3" >消息中心</el-menu-item>
<el-menu-item index="4" class="fr4"><a href="#" target="_blank">退出管理</a></el-menu-item>
<el-menu-item index="5" class="fr5" disabled><i class="el-icon-s-custom"></i></el-menu-item>
</el-menu>
</el-header>
<!-- 侧边栏 -->
<el-container>
<el-aside width="200px">
<el-row class="tac">
<el-col :span="24">
<!-- 侧边栏内容 -->
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
background-color="#545c64" text-color="#fff" router active-text-color="#ffd04b">
<!-- 头像 -->
<el-menu-item index="5">
<i class="el-icon-loading"></i>
<span slot="title">
<el-avatar src="https://img0.baidu.com/it/u=503426158,3647382765&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400">
</el-avatar>
</span>
</el-menu-item>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>管理员管理</span>
</template>
<el-menu-item-group>
<template slot="title">操作</template>
<el-menu-item index="/admins" @click="clickMenu(item)">管理员列表</el-menu-item>
<el-menu-item index="/saveadmin" @click="clickMenu(item)">添加管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item index="/users" @click="clickMenu(item)">
<i class="el-icon-menu" ></i>
<span slot="title">用户管理</span>
</el-menu-item>
<el-menu-item index="/categorys" @click="clickMenu(item)">
<i class="el-icon-document"></i>
<span slot="title">分类管理</span>
</el-menu-item>
<el-menu-item index="/user" @click="clickMenu(item)">
<i class="el-icon-setting"></i>
<span slot="title">商品管理</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
</el-aside>
<el-main>
<!-- 在这里必须有router-view使内容在侧边栏右侧显示 -->
<router-view />
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: "Layout",
methods: {
clickMenu(item) {
this.$router.push(//页面跳转
{
name: item.name
}
)
}
}
}
</script>
<style>
.el-container {
position: absolute;
width: 100%;
top: 0px;
left: 0;
bottom: 0;
}
.el-header {
padding: 0;
z-index: 1000;
}
/* header菜单需要靠右的添加.fr即可(如：<el-menu-item class="fr" index="3">消息中心</el-menu-item>) */
.el-header .fr4 {
float: right;
}
.el-header .fr5 {
float: right;
}
.el-header .el-menu {
border-bottom: none;
}
.el-aside,
.el-main {
padding-top: 60px;
}
.el-aside {
background: #545c64;
}
.el-aside .el-menu {
border-right: none;
}
</style>
1.2侧边栏内容点击内容跳转右侧显示
- 在el-menu标签中添加router（一定要添加否则路由嵌套跳转没效果）
- 在侧边栏的子标签index=“跳转路径” 添加 跳转函数
<el-menu-item index="/categorys" @click="clickMenu(item)">
<i class="el-icon-document"></i>
<span slot="title">分类管理</span>
</el-menu-item>
- 跳转函数
methods: {
clickMenu(item) {
this.$router.push(//页面跳转
{
name: item.name
}
)
}
1.3在router.index页面配置路由
点击侧边栏内容跳转则需要使用嵌套路由
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Layout',
component: () => import('@/page/layout'),
// 嵌套路由
children: [{
// 这里不设置值，是把main作为默认页面 当加载页面时右侧默认显示页面
path: '/',
name: 'Main',
component: () => import('@/page/main'),
},
// 分类管理
{
path: '/categorys',
name: 'categorys',
component: () => import('@/page/category/categorys'),
},
]
}
]
})
2.在config的index页面开启跨域
//开启跨域
proxyTable: {
'/api':{
target: 'http://localhost:8888/',
changeOrigin: true, // 开启跨域
pathRewrite: {
'^/api': "/"
}
}
},
3.进行添加编辑删除操作
3.1新增categorys.vue插件
<template>
<div>
<el-row>
<el-button type="primary" plain @click="dialogFormVisible = true">新增分类</el-button>
</el-row>
<!-- 新增分类 -->
<el-dialog title="新增分类" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="类别" :label-width="formLabelWidth">
<el-input v-model="form.cateId" autocomplete="off" placeholder="int"></el-input>
</el-form-item>
<el-form-item label="类别名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off" placeholder="String"></el-input>
</el-form-item>
<el-form-item label="类别状态" :label-width="formLabelWidth">
<el-input v-model="form.status" autocomplete="off" placeholder="int"></el-input>
</el-form-item>
<!-- <el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item> -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="save()" >确 定</el-button>
</div>
</el-dialog>
<!-- 编辑 -->
<el-dialog title="编辑" :visible.sync="dialogFormVisible2" >
<el-form :model="form">
<el-form-item label="类别" :label-width="formLabelWidth">
<el-input v-model="form.cateId" autocomplete="off" placeholder="int"></el-input>
</el-form-item>
<el-form-item label="类别名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off" placeholder="String"></el-input>
</el-form-item>
<el-form-item label="类别状态" :label-width="formLabelWidth">
<el-input v-model="form.status" autocomplete="off" placeholder="int"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible2 = false">取 消</el-button>
<el-button type="primary" @click="update()">修改</el-button>
</div>
</el-dialog>
<!-- <el-table ref="multipleTable" tooltip-effect="dark" :data="category" height="500" border style="width: 100%" -->
<el-table ref="multipleTable" tooltip-effect="dark" :data="category.slice((currentPage - 1) * pagesize, currentPage * pagesize)" height="500" border style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column fixed prop="cateId" label="分类id" width="150">
</el-table-column>
<el-table-column prop="name" label="类别" width="120">
</el-table-column>
<el-table-column prop="status" label="状态" width="120">
</el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.row);dialogFormVisible2 = true" type="button" size="small" >编辑</el-button>
<el-button type="button" size="small" @click="open(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
style="margin: 12px 0px"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="category.length"
>
</el-pagination>
<!-- 批量删除 -->
<el-button type="primary" size="small" @click="deleteMul()" >批量删除</el-button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'category',
data() {
return {
//分页
currentPage: 1, //初始页
pagesize: 5, // 每页的数据
total: 0,
//批量删除
category: [],
ids: [],
dialogFormVisible: false,
dialogFormVisible2: false,
form: {},
formLabelWidth: '120px',
}
},
methods: {
//分页
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function (size) {
this.pagesize = size;
console.log(this.pagesize); //每页下拉显示数据
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
console.log(this.currentPage); //点击第几页
},
//添加函数
//点击保存确定按钮，异步修改信息
save: function () {
// alert(123);
var abc = this;
console.log(abc.form);
axios.post("api/category/saveCategory", abc.form).then(res => {
// 调用getAll函数刷新页面
this.getAllUsers();
this.dialogFormVisible=false;
})
},
//确定删除函数
open(row) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//通过id进行删除
// alert(row.cateId);
console.log(row);
axios.post("api/category/deleteById/" + row.cateId).then(res => {
// 刷新页面数据
this.getAllUsers();
});
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//点击编辑继续修改操作
handleEdit(row) {
console.log(row);
//row是该行tableData对应的一行
this.form = row;
//通过id获取对象
axios.get("api/category/queryById/" + row.cateId).then(res => {
alert(res.data);
this.form = res.data;
});
},
//异步进行修改
//点击修改按钮，异步修改信息
update: function () {
// alert(123);
var abc = this;
// console.log(abc.form);
axios.post("api/category/updateCategory", abc.form).then(res => {
// alert(res.data);
this.getAllUsers();
this.dialogFormVisible2 = false;
})
},
//选择复选框
handleSelectionChange(val) {
this.multipleSelection = val;
// alert(val)
for (var i = 0; i < val.length; i++) {
this.ids[i] = val[i].id;
}
alert(this.ids)
},
//批量删除
deleteMul: function () {
alert(this.ids);
axios.post("api/user/DeleteMul", { "ids": this.ids }).then(res => {
alert(res.data)
});
},
//异步获取所有数据，钩子函数在加载时调用
getAllUsers: function () {
//二、vue的ajax异步获取后端数据
// 1.安装axios和vue-axios
// 2.在main.js中引入，在项目模块中使用模板
var abc = this;
axios.get("api/category/getAll").then(res => {
console.log(res.data);
abc.category = res.data;
});
}
},
//钩子函数加载时调用
mounted() {
this.getAllUsers();
}
}
</script>
3.2新增分类
使用Element的弹出对话框模块dialogFormVisible = true代表对话框弹出dialogFormVisible = false对话框消失
<el-row>
<el-button type="primary" plain @click="dialogFormVisible = true">新增分类</el-button>
</el-row>
<!-- 新增分类 -->
<el-dialog title="新增分类" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="类别" :label-width="formLabelWidth">
<el-input v-model="form.cateId" autocomplete="off" placeholder="int"></el-input>
</el-form-item>
<el-form-item label="类别名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off" placeholder="String"></el-input>
</el-form-item>
<el-form-item label="类别状态" :label-width="formLabelWidth">
<el-input v-model="form.status" autocomplete="off" placeholder="int"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="save()" >确 定</el-button>
</div>
</el-dialog>
点击确认调用save（）函数
//添加函数
//点击保存确定按钮，异步修改信息
save: function () {
// alert(123);
var abc = this;
console.log(abc.form);
axios.post("api/category/saveCategory", abc.form).then(res => {
// 调用getAll函数刷新页面
this.getAllUsers();
this.dialogFormVisible=false;
})
},
后端参数的传递
@PostMapping("/saveCategory")
public @ResponseBody ResponseEntity<Category> add(@RequestBody Category category) {
return ResponseEntity.ok(this.categoryService.insert(category));
}
实现效果
3.3删除操作
使用Element的messageBox弹框组件
<el-button type="button" size="small" @click="open(scope.row)">删除</el-button>
//函数
//确定删除函数
open(row) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//通过id进行删除
// alert(row.cateId);
console.log(row);
axios.post("api/category/deleteById/" + row.cateId).then(res => {
// 刷新页面数据
this.getAllUsers();
});
this.$message({
type: 'success',
message: '删除成功!'
});
后台传参
@PostMapping("/deleteById/{cateId}")
public ResponseEntity<Boolean> deleteById(@PathVariable("cateId") Integer id) {
return ResponseEntity.ok(this.categoryService.deleteById(id));
}
3.4编辑操作
编辑操作也使用 Dialog 对话框组件
<el-button @click="handleEdit(scope.row);dialogFormVisible2 = true" type="button" size="small" >编辑</el-button>
<!-- 编辑 -->
<el-dialog title="编辑" :visible.sync="dialogFormVisible2" >
<el-form :model="form">
<el-form-item label="类别" :label-width="formLabelWidth">
<el-input v-model="form.cateId" autocomplete="off" placeholder="int"></el-input>
</el-form-item>
<el-form-item label="类别名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off" placeholder="String"></el-input>
</el-form-item>
<el-form-item label="类别状态" :label-width="formLabelWidth">
<el-input v-model="form.status" autocomplete="off" placeholder="int"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible2 = false">取 消</el-button>
<el-button type="primary" @click="update()">修改</el-button>
</div>
</el-dialog>
<!-- 点击编辑按钮触发两个函数 -->
<el-button @click="handleEdit(scope.row);dialogFormVisible2 = true" type="button" size="small" >编辑</el-button>
<!-- 通过id获取实体类函数 -->
//点击编辑继续修改操作
handleEdit(row) {
console.log(row);
//row是该行tableData对应的一行
this.form = row;
//通过id获取对象
axios.get("api/category/queryById/" + row.cateId).then(res => {
alert(res.data);
this.form = res.data;
});
},
<!-- 修改函数 -->
//异步进行修改
//点击修改按钮，异步修改信息
update: function () {
// alert(123);
var abc = this;
// console.log(abc.form);
axios.post("api/category/updateCategory", abc.form).then(res => {
// alert(res.data);
this.getAllUsers();
this.dialogFormVisible2 = false;
})
},
后台参数的传递
@GetMapping("/queryById/{id}")
public ResponseEntity<Category> queryById(@PathVariable("id") Integer id) {
return ResponseEntity.ok(this.categoryService.queryById(id));
}
@PostMapping("/updateCategory")
public ResponseEntity<Category> edit(@RequestBody Category category) {
return ResponseEntity.ok(this.categoryService.update(category));
}
实现效果
3.5分页的实现
element分页模板
<!-- 分页 -->
<el-pagination
style="margin: 12px 0px"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="category.length"
>
</el-pagination>
修改表格头的数据源
data="category.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
data() {
return {
currentPage: 1, //初始页
pagesize: 5, // 每页的数据
total: 0,
}
}
方法
//分页
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function (size) {
this.pagesize = size;
console.log(this.pagesize); //每页下拉显示数据
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
console.log(this.currentPage); //点击第几页
},
分页效果
499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
