深圳网站建设_请到中投网络!,深圳龙华区招聘网最新招聘信息,网站开发招标任务书,网站排名不可有利就前目录
一.CUD增删改查简述 1.1.增删改功能实现
二.表单验证
前端所有代码#xff1a; 好啦今天就分享到这了#xff0c;希望能帮到你哦#xff01;#xff01;#xff01; 以下的代码基于我博客中的代码进行续写 : 关于ElementUI之动态树数据表格分页实例 一.CUD增删改…目录
一.CUD增删改查简述 1.1.增删改功能实现
二.表单验证
前端所有代码 好啦今天就分享到这了希望能帮到你哦 以下的代码基于我博客中的代码进行续写 : 关于ElementUI之动态树数据表格分页实例 一.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 :titletitle :visible.syncdialogFormVisible closeclearel-form :modelbook :rulesrules refbookel-form-item label书籍编号 :label-widthformLabelWidth propidel-input v-modelbook.id autocompleteoff/el-input/el-form-itemel-form-item label书籍名称 :label-widthformLabelWidth propbooknameel-input v-modelbook.bookname autocompleteoff/el-input/el-form-itemel-form-item label书籍价格 :label-widthformLabelWidth proppriceel-input v-modelbook.price autocompleteoff/el-input/el-form-itemel-form-item label书籍类别 :label-widthformLabelWidth propbooktypeel-select v-modelbook.booktype placeholder请选择活动区域el-option v-fort in types :labelt.name :valuet.name :keykey_t.id/el-option/el-select/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clickdosub确 定/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: 耗子}];}
实例效果 二.表单验证 在表单中增加以下两个属性 :rulesrules refbook 在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 所有代码如下 :
templatediv classBook stylepadding: 30px;!-- 输入框搜索 --el-form :inlinetrue classdemo-form-inlineel-form-item label书籍名称 : el-input v-modelbookname placeholder书籍名称/el-input/el-form-itemel-form-itemel-button typeprimary plain clickonSubmit查询/el-button/el-form-itemel-form-itemel-button typeprimary plain clickopen新增/el-button/el-form-item/el-form!-- 书籍的书籍表格 --el-table :datatableData stylewidth: 100%el-table-column propid label书籍ID/el-table-columnel-table-column propbookname label书籍名称/el-table-columnel-table-column propprice label书籍价格/el-table-columnel-table-column propbooktype label书籍类型/el-table-columnel-table-column label操作template slot-scopescopeel-button sizemini clickopen(scope.$index,scope.row)编辑/el-buttonel-button sizemini typedanger clickDel(scope.row)删除/el-button/template/el-table-column/el-table!-- 分页 --div classblock stylepadding: 20px;el-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagepagebackground :page-sizes[10, 20, 30, 40] :page-sizerows layouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div!-- 弹出的编辑及增加弹窗 --el-dialog :titletitle :visible.syncdialogFormVisible :before-closecloseel-form :modelbook :rulesrules refbookel-form-item label书籍编号 : :label-widthformLabelWidthel-input v-modelbook.id autocompleteoff/el-input/el-form-itemel-form-item label书籍名称 : propbookname :label-widthformLabelWidthel-input v-modelbook.bookname autocompleteoff/el-input/el-form-itemel-form-item label书籍价格 : propprice :label-widthformLabelWidthel-input v-modelbook.price autocompleteoff/el-input/el-form-itemel-form-item label书籍类型 : propbooktype :label-widthformLabelWidthel-select v-modelbook.booktype placeholder请选择书籍类型el-option v-fort in types :labelt.tname :valuet.tname :keykeyt.tid/el-option/el-select/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickclose取 消/el-buttonel-button typeprimary clicksubmit确 定/el-button/div/el-dialog/div/templatescriptexport 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.booknamethis.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: 耗子}];}}
/scriptstyle
/style 好啦今天就分享到这了希望能帮到你哦
