介绍
本篇介绍以简单的页面进行做单表的CRUD操作，目的是为了掌握CRUD的基本操作，简单掌握前端vue,axios进行请求后端进行操作。
实体表dict
-- test.dict definition
CREATE TABLE `dict` (
`dict_id` int NOT NULL AUTO_INCREMENT COMMENT '主键',
`dict_type` int NOT NULL COMMENT '字典类别',
`dict_code` varchar(10) NOT NULL COMMENT '代码值',
`dict_name` varchar(100) NOT NULL COMMENT '代码名称',
`dict_parent` int DEFAULT NULL COMMENT '父节点',
`dict_status` varchar(10) DEFAULT NULL COMMENT '字典状态',
`create_by` varchar(100) DEFAULT NULL COMMENT '创建人',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
`update_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '更新人',
`update_by` varchar(20) DEFAULT NULL COMMENT '创建人',
PRIMARY KEY (`dict_id`),
KEY `dict_dict_code_IDX` (`dict_code`,`dict_type`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='字典表';
controller类
package com.elite.springboot.controller;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.elite.springboot.common.R;
import com.elite.springboot.entity.Dict;
import com.elite.springboot.entity.Order;
import com.elite.springboot.service.IDictService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
/**
* <p>
* 字典表 前端控制器
* </p>
*
* @author elite
* @since 2022-08-24
*/
@Api(tags = "字典接口")
@RestController
@RequestMapping("/springboot/dict")
public class DictController {
@Autowired
IDictService dictService;
/**
* 获取字段列表
*/
@ApiOperation(value = "获取字段列表")
@PostMapping("/getDictListByPage/{currentPage}/{PageSize}")
public R getOrderListPage(@PathVariable("currentPage")Integer currentPage,
@PathVariable("PageSize") Integer PageSize,
@RequestBody Dict dict){
QueryWrapper<Dict> queryWrapper = new QueryWrapper<>();
IPage<Dict> page = new Page<>();
page.setCurrent(currentPage);
page.setSize(PageSize);
if (!StringUtils.isEmpty(dict.getDictType())){
queryWrapper.eq("dict_type",dict.getDictType());
}
if (!StringUtils.isEmpty(dict.getDictCode())){
queryWrapper.eq("dict_code",dict.getDictCode());
}
IPage<Dict> Orders = dictService.page(page, queryWrapper);
return R.ok(Orders);
}
/**
* 根据字典ID获取字典
*/
@PostMapping("/getDictByDictId/{dict_id}")
@ApiOperation(value = "获取字段列表")
public R getDictByDictId(@PathVariable("dict_id") Integer dict_id){
Dict dict = dictService.getById(dict_id);
return R.ok(dict);
}
/**
* 新增字典
*/
@PostMapping("/saveDict")
@ApiOperation(value = "新增字典")
public R saveDict(@RequestBody Dict dict){
boolean save = dictService.save(dict);
if (save){
return R.ok(null);
}
return R.fail();
}
/**
* 更新字典
*/
@ApiOperation(value = "更新字典")
@PutMapping("/updateDictById")
public R updateDictById(@RequestBody Dict dict){
boolean success = dictService.updateById(dict);
if (success){
return R.ok(null);
}
return R.fail();
}
/**
* 删除字典
*/
@ApiOperation(value = "删除字典")
@DeleteMapping("/removeDictById/{dict_id}")
public R removeDictById(@PathVariable("dict_id") Integer dict_id){
boolean success = dictService.removeById(dict_id);
//删除成功
if (success){
return R.ok(null);
}
return R.fail();
}
}
service层
字典接口服务类
/**
* <p>
* 字典表 服务类
* </p>
*
* @author elite
* @since 2022-08-24
*/
public interface IDictService extends IService<Dict> {
}
字典接口服务实现类
/**
* <p>
* 字典表 服务实现类
* </p>
*
* @author elite
* @since 2022-08-24
*/
@Service
public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements IDictService {
}
mapper类
/**
* <p>
* 字典表 Mapper 接口
* </p>
*
* @author elite
* @since 2022-08-24
*/
public interface DictMapper extends BaseMapper<Dict> {
}
前端页面
前端主要制作的单页面实现CRDU，我们需要在静态文件index中引入vue.js,axios.js.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字典管理</title>
</head>
<!--script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script-->
<!--引入静态的路径-->
<script type="text/javascript" src="js/vue.min.js"></script>
<!--script src="https://unpkg.com/element-ui/lib/index.js"></script-->
<script type="text/javascript" src="js/index.js"></script>
<!-- 引入样式 -->
<!--link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"-->
<link rel="stylesheet" href="css/index.css">
<!-- 引入组件库 -->
<!--引入通信框架-->
<!--script src="https://unpkg.com/axios/dist/axios.min.js"></script-->
<script type="text/javascript" src="js/axios.min.js"></script>
<body>
<div id="app">
<h1 style="background-color: #409EFF;text-align: center;">字典管理</h1>
<div>
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="字典类别">
<el-select v-model="dictType" clearable placeholder="选择字典类型">
<el-option v-for="item in dicTypeList"
:key="item.dictId"
:label="item.dictName"
:value="item.dictType">
</el-option>
</el-select>
<el-form-item label="字典码值">
<el-input v-model="dictCode"></el-input>
</el-form-item>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="btnQuery">查询</el-button>
<el-button type="primary" @click="btnAdd">添加</el-button>
</el-form-item>
</el-form>
<!--数据表格--->
<template>
<el-table
ref="multipleTable"
:data="dicList"
size="mini"
border
@selection-change="handleSelectionChange">
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="dictId"
label="字典ID"
width="120">
</el-table-column>
<el-table-column
prop="dictType"
label="字典类别"
width="150">
</el-table-column>
<el-table-column
prop="dictCode"
label="字典码值"
width="100">
</el-table-column>
<el-table-column
prop="dictName"
label="字典码值名称"
width="120">
</el-table-column>
<el-table-column
label="状态"
width="100">
<template slot-scope="scope">
<el-switch
v-model="scope.row.dictStatus"
active-value="1"
inactive-value="0"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</template>
</el-table-column>
<el-table-column
label="操作"
width="200px"
>
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
@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>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</template>
<!--添加对象-->
<el-dialog
title="添加"
:visible.sync="centerDialogVisible"
width="30%"
center>
<el-form ref="SysDicData" :model="SysDicData" label-width="80px">
<el-form-item label="字典类别">
<el-select v-model="SysDicData.dictType" clearable placeholder="请选择字典类别">
<el-option v-for="item in dicTypeList" :key="item.dictId"
:label="item.dictName"
:value="item.dictType"></el-option>
</el-select>
</el-form-item>
<el-form-item label="字典码值">
<el-input v-model="SysDicData.dictCode"></el-input>
</el-form-item>
<el-form-item label="字典名称">
<el-input v-model="SysDicData.dictName"></el-input>
</el-form-item>
<el-form-item label="字典状态">
<el-input v-model="SysDicData.dictStatus"></el-input>
</el-form-item>
<el-form-item label="父级字典">
<el-input v-model="SysDicData.dictParent"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="Cancel">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</span>
</el-dialog>
</div>
</div>
</body>
</html>
<script>
new Vue({
el: "#app",
//数据
data() {
return {
dicTypeList:[
{
"dictId":1,
"dictName":"性别",
"dictType":"1"
},
{
"dictId":2,
"dictName":"民族",
"dictType":"2"
},
{
"dictId":3,
"dictName":"婚姻",
"dictType":"3"
}
],
dicList:[],
options:[],
dictType:"", //字典类型
dictCode:"", //字典码值
centerDialogVisible:false,
SysDicData:{},
diagTitle:"",
formLabelWidth: '120px',
multipleSelection: [],
currentPage:1,
pageSize:10,
total:0,
dialogImportVisible:false
}
},
//创建之前
created() {
},
//初始化加载数据
mounted() {
//获取字典列表
this.getDicList(this.currentPage,this.pageSize,{"dictType":"","dictCode":""})
},
methods: {
//页数大小改变
handleSizeChange(pagesize){
this.pageSize = pagesize
this.getDicList(this.currentPage,this.pageSize,{"dictType":""})
},
//处理当前页变化
handleCurrentChange(CurrentChange){
this.currentPage = CurrentChange
this.getDicList(this.currentPage,this.pageSize,{"dictType":""})
},
//多选
handleSelectionChange(selection){
this.multipleSelection = selection;
},
//编辑数据
handleEdit(index, row) {
//数据赋值
this.SysDicData = row;
this.centerDialogVisible = true
this.diagTitle = "修改字典"
},
//删除数据
handleDelete(index, row) {
this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//删除字典
axios.delete("/springboot/dict/removeDictById/"+row.dictId).then((res => {
this.$notify({
title: res.data.code === 200 ? "修改成功" : "修改失败",
message: res.data.msg,
type: res.data.code === 200 ? "success" : "error"
});
//绑定表格数据
if (res.data.code === 200) {
//调用获取列表
this.btnQuery();
}
}));
}).then((response) => {
this.getDictList()
this.$message.success("删除成功")
}).catch(error => {
this.$message.info('取消删除')
})
},
//查询数据
btnQuery(){
this.getDicList(this.currentPage,this.pageSize,{"dictType":this.dictType,"dictCode":this.dictCode})
},
//添加字典
btnAdd(){
this.SysDicData = {}
this.centerDialogVisible = true;
},
Cancel(){
this.centerDialogVisible = false;
tihs.SysDicData = {}
},
//添加字典
submit(){
console.log(this.SysDicData)
//获取字典ID
if(this.SysDicData.dictId){
//修改
axios.put("/springboot/dict/updateDictById", this.SysDicData).then((res => {
this.$notify({
title: res.data.code === 200 ? "修改成功" : "修改失败",
message: res.data.msg,
type: res.data.code === 200 ? "success" : "error"
});
//绑定表格数据
if (res.data.code === 200) {
this.centerDialogVisible = false
this.SysDicData = {}
//调用获取列表
this.btnQuery();
}else{
}
}));
}else{
//新增
axios.post("/springboot/dict/saveDict",this.SysDicData).then((res => {
this.$notify({
title: res.data.code === 200 ? "新增成功" : "新增失败",
message: res.data.msg,
type: res.data.code === 200 ? "success" : "error"
});
//绑定表格数据
if (res.data.code == 200) {
this.centerDialogVisible = false
tihs.SysDicData = {}
//调用获取列表
this.getDicList(this.currentPage,this.pageSize,{"dictType":"","dictCode":""})
}
}));
}
},
//获取字段数据
getDicList(currentPage,pageSize,params){
axios.post("/springboot/dict/getDictListByPage/"+currentPage+"/"+pageSize, params).then((res => {
console.log(res.data)
this.$notify({
title: res.data.code === 200 ? "成功" : "失败",
message: res.data.msg,
type: res.data.code === 200 ? "success" : "error"
});
//绑定表格数据
if (res.data.code === 200) {
this.dicList = res.data.data.records
this.total = res.data.data.total
this.currentPage = res.data.data.pages
this.pageSize= res.data.data.size
}
}));
}
}
});
</script>
<style scoped>
</style>
测试
