一.CUD增删改查简述
CUD是数据库操作中常用的四个基本操作，分别是创建(Create)、更新(Update)、删除(Delete)和查询(Query)。
- 创建(Create)操作用于向数据库中添加新的数据记录。这可以通过插入一条新记录来完成，包括提供必要的数据和指定要插入的表。
- 更新(Update)操作用于修改数据库中的现有数据。通过更新操作，可以更改一个或多个记录的特定字段值，以反映实际数据的变化。
- 删除(Delete)操作用于从数据库中移除数据记录。可以通过指定特定的条件，删除满足条件的记录，或者直接删除整个表的内容。
- 查询(Query)操作用于从数据库中检索指定数据记录或满足特定条件的数据记录。查询操作可以根据给定的条件过滤和排序数据，并返回满足条件的结果集。
这四种操作通常是关系型数据库管理系统（RDBMS）中最基本和常用的操作，用于对数据库进行增加、修改、删除和检索数据。
1.1.增删改功能实现
在项目中的src文件下api中找到action.js进行配置数据访问的地址:
/** * 对后台请求的地址的封装，URL格式如下： * 模块名_实体名_操作 */ export default { 'SERVER': 'http://localhost:8080/', //服务器 'SYSTEM_USER_DOLOGIN': 'user/userLogin', //登陆 'SYSTEM_USER_DOREG': 'user/userRegister', //注册 'SYSTEM_MENUS': 'module/queryRootNode', //左侧菜单树 'BOOK_LIST': 'book/queryBookPager', //书籍列表 'BOOK_ADD': 'book/addBook', //书籍增加 'BOOK_UPD': 'book/editBook', //书籍修改 'BOOK_DEL': 'book/delBook', //书籍删除 'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用 return this.SERVER + this[k]; } }
在BookList.vue组件中进行编写增加修改的代码：
在ElementUI里面找到弹出窗进行编写增加修改的弹窗如下：
<!-- 4.编辑窗体 --> <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clear"> <el-form :model="book" :rules="rules" ref="book"> <el-form-item label="书籍编号" :label-width="formLabelWidth" prop="id"> <el-input v-model="book.id" autocomplete="off"></el-input> </el-form-item> <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname"> <el-input v-model="book.bookname" autocomplete="off"></el-input> </el-form-item> <el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price"> <el-input v-model="book.price" autocomplete="off"></el-input> </el-form-item> <el-form-item label="书籍类别" :label-width="formLabelWidth" prop="booktype"> <el-select v-model="book.booktype" placeholder="请选择活动区域"> <el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></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="dosub">确 定</el-button> </div> </el-dialog>
在script标签中编写方法进行数据增加修改实现，在data中编写属性:
data() { return { bookname: '', tableData: [], rows: 10, page: 1, total: 0, title: '新增窗体', dialogFormVisible: false, formLabelWidth: '100px', types: [], form: {}, book: { id: '', bookname: '', price: '', booktype: '' }, } },
在script标签中编写方法进行数据增加修改实现，在methods中编写方法:
methods: { del(idx, row) { this.$confirm('此操作将永久删除id为' + row.id + '的数据, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { let url = this.axios.urls.BOOK_DEL; this.axios.post(url, { id: row.id }) .then(r => { console.log(r); this.$message({ type: 'success', message: '删除成功!' }); this.query({}); }) .catch(e => { // 处理错误 }); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); }, dosub() { this.$refs['book'].validate((valid) => { if (valid) { let url = this.axios.urls.BOOK_ADD; if (this.title == '编辑窗体') { url = this.axios.urls.BOOK_UPD; } // 构建请求参数 let params = { id: this.book.id, bookname: this.book.bookname, price: this.book.price, booktype: this.book.booktype }; console.log(params) console.log(url) this.axios.post(url, params) .then(r => { console.log(r); // 编辑/添加操作成功后，再进行查询 this.query({}); this.clear(); }) .catch(e => { // 处理错误 }); } else { console.log('error submit!!'); return false; } }); }, clear() { // 初始化窗体 this.dialogFormVisible = false; this.title = '新增窗体'; // 清空表单 this.book = { id: '', bookname: '', price: '', booktype: '' }; }, // 打开窗体的方法 open(idx, row) { // 打开编辑窗口 this.dialogFormVisible = true; // 初始化标题 this.title = '新增窗体'; if (row != null) { this.title = '编辑窗体'; } // 如果有传入行数据，将其填充到表单字段中 if (row) { this.book.id = row.id; this.book.bookname = row.bookname; this.book.price = row.price; this.book.booktype = row.booktype; } }, query(params) { let url = this.axios.urls.BOOK_LIST; this.axios.get(url, { params: params }).then(r => { console.log(r); this.tableData = r.data.rows; this.total = r.data.total; }).catch(e => { }) }, onSubmit() { let params = { bookname: this.bookname } this.query(params); }, handleSizeChange(r) { //当页大小发生变化 console.log("当前页大小为：" + r); let params = { bookname: this.bookname, rows: r, page: this.page } this.query(params); }, handleCurrentChange(p) { //当前页码发生变化 console.log("当前页页码为：" + p); let params = { bookname: this.bookname, rows: this.rows, page: p } this.query(params); } },
在created中初始化数据，如下：
created() { this.query({}); this.types = [{ id: 1, name: "刘勾八" }, { id: 2, name: "渣渣辉" }, { id: 3, name: "耗子" }, { id: 4, name: "叼毛" }, { id: 5, name: "耗子" } ]; }
实例效果：
二.表单验证
在表单中增加以下两个属性 ：
:rules="rules" ref="book"
在script标签中编写方法进行数据增加修改实现，在data中编写属性:
data() { return { bookname: '', tableData: [], rows: 10, total: 0, page: 1, formLabelWidth: '120px', //弹出窗输入框前的文字宽度 title: '书籍新增', //弹出窗标题 dialogFormVisible: false, //默认关闭 book: { id: '', bookname: '', price: '', booktype: '' }, types: [], //增加表单验证 rules: { bookname: [{ required: true, message: '请输入书籍的名称', trigger: 'blur' }, { min: 2, max: 10, message: '书籍名称长度在 2 到 10 个字符', trigger: 'blur' } ], price: [{ required: true, message: '请填写书籍价格', trigger: 'blur' }], booktype: [{ required: true, message: '请选择书籍类型', trigger: 'blur' }] } } },
在script标签中编写方法，在methods中编写submit()方法:
submit() { //获取值 let params = { id: this.book.id, bookname: this.book.bookname, price: this.book.price, booktype: this.book.booktype } console.log(params); //获取配置的方法请求地址 let url = this.axios.urls.SYSTEM_BookAdd; //如果是书籍编辑就将请求地址修改为书籍修改的请求地址 if (this.title == '书籍编辑') { url = this.axios.urls.SYSTEM_BookEdit; } //请求前必须通过表单验证 this.$refs['book'].validate((valid) => { console.log(valid); if (valid) { //请求后端地址进行书籍的新增或修改 this.axios.post(url, params).then(d => { // console.log(url); // console.log(d); this.close(); this.query({}); }).catch(e => {}); } else { this.$message('有必输入项或者没有按要求输入，请正确填写！！'); return false; } }); }
表单验证的效果 :
前端所有代码：
BookList.vue 所有代码如下 :
<template> <div class="Book" style="padding: 30px;"> <!-- 输入框搜索 --> <el-form :inline="true" class="demo-form-inline"> <el-form-item label="书籍名称 : "> <el-input v-model="bookname" placeholder="书籍名称"></el-input> </el-form-item> <el-form-item> <el-button type="primary" plain @click="onSubmit">查询</el-button> </el-form-item> <el-form-item> <el-button type="primary" plain @click="open">新增</el-button> </el-form-item> </el-form> <!-- 书籍的书籍表格 --> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="id" label="书籍ID"></el-table-column> <el-table-column prop="bookname" label="书籍名称"></el-table-column> <el-table-column prop="price" label="书籍价格"></el-table-column> <el-table-column prop="booktype" label="书籍类型"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="open(scope.$index,scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="Del(scope.row)">删除</el-button> </template> </el-table-column> </el-table> <!-- 分页 --> <div class="block" style="padding: 20px;"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" background :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> <!-- 弹出的编辑及增加弹窗 --> <el-dialog :title="title" :visible.sync="dialogFormVisible" :before-close="close"> <el-form :model="book" :rules="rules" ref="book"> <el-form-item label="书籍编号 :" :label-width="formLabelWidth"> <el-input v-model="book.id" autocomplete="off"></el-input> </el-form-item> <el-form-item label="书籍名称 :" prop="bookname" :label-width="formLabelWidth"> <el-input v-model="book.bookname" autocomplete="off"></el-input> </el-form-item> <el-form-item label="书籍价格 :" prop="price" :label-width="formLabelWidth"> <el-input v-model="book.price" autocomplete="off"></el-input> </el-form-item> <el-form-item label="书籍类型 :" prop="booktype" :label-width="formLabelWidth"> <el-select v-model="book.booktype" placeholder="请选择书籍类型"> <el-option v-for="t in types" :label="t.tname" :value="t.tname" :key="'key'+t.tid"></el-option> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="close">取 消</el-button> <el-button type="primary" @click="submit">确 定</el-button> </div> </el-dialog> </div> </template> <script> export default { data() { return { bookname: '', tableData: [], rows: 10, total: 0, page: 1, formLabelWidth: '120px', //弹出窗输入框前的文字宽度 title: '书籍新增', //弹出窗标题 dialogFormVisible: false, //默认关闭 book: { id: '', bookname: '', price: '', booktype: '' }, types: [], //增加表单验证 rules: { bookname: [{ required: true, message: '请输入书籍的名称', trigger: 'blur' }, { min: 2, max: 10, message: '书籍名称长度在 2 到 10 个字符', trigger: 'blur' } ], price: [{ required: true, message: '请填写书籍价格', trigger: 'blur' }], booktype: [{ required: true, message: '请选择书籍类型', trigger: 'blur' }] } } }, methods: { //书籍删除的方法 Del(r) { this.$confirm('你确定将编号为' + r.id + '的书籍永久删除, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { //获取配置的书籍删除方法请求地址 let url = this.axios.urls.SYSTEM_BookDel; //请求后端地址进行书籍的新增或修改 this.axios.post(url, { id: r.id }).then(d => { this.$message({ type: 'success', message: '书籍删除成功!' }); this.query({}); }).catch(e => {}); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); }, submit() { //获取值 let params = { id: this.book.id, bookname: this.book.bookname, price: this.book.price, booktype: this.book.booktype } console.log(params); //获取配置的方法请求地址 let url = this.axios.urls.SYSTEM_BookAdd; //如果是书籍编辑就将请求地址修改为书籍修改的请求地址 if (this.title == '书籍编辑') { url = this.axios.urls.SYSTEM_BookEdit; } //请求前必须通过表单验证 this.$refs['book'].validate((valid) => { console.log(valid); if (valid) { //请求后端地址进行书籍的新增或修改 this.axios.post(url, params).then(d => { // console.log(url); // console.log(d); this.close(); this.query({}); }).catch(e => {}); } else { this.$message('有必输入项或者没有按要求输入，请正确填写！！'); return false; } }); }, //弹出窗取消，值初始化 close() { this.book = { id: '', bookname: '', price: '', booktype: '' }; this.dialogFormVisible = false; }, //打开弹出窗，进行书籍的编辑 open(index, row) { this.dialogFormVisible = true; if (row) { this.title = '书籍编辑'; this.book.id = row.id; this.book.bookname = row.bookname this.book.price = row.price; this.book.booktype = row.booktype; } }, handleSizeChange(r) { //当页大小发生变化 let params = { bookname: this.bookname, rows: r, page: this.page } // console.log(params) this.query(params); }, handleCurrentChange(p) { //当前页码大小发生变化 let params = { bookname: this.bookname, rows: this.rows, page: p } // console.log(params) this.query(params); }, query(params) { //获取后台请求书籍数据的地址 let url = this.axios.urls.SYSTEM_BookList; this.axios.get(url, { params: params }).then(d => { // console.log(url) this.tableData = d.data.rows; this.total = d.data.total; }).catch(e => {}); }, onSubmit() { let params = { bookname: this.bookname } // console.log(params) this.query(params); this.bookname = '' } }, created() { this.query({}); //初始书籍类型的书籍 this.types = [{ tid: 1, tname: '刘勾八' }, { tid: 2, tname: '渣渣辉' }, { tid: 3, tname: '耗子' }, { tid: 4, tname: '叼毛' }, { tid: 5, tname: '耗子' }]; } } </script> <style> </style>
