怎样做才能提升自己的网站,定制网站建设推广服务,域名备案查询站长之家,我爱深圳网站设计⭐⭐本文章收录与ElementUI原创专栏#xff1a;ElementUI专栏 ⭐⭐ ElementUI的官网#xff1a;ElementUI官网
目录
一.前言
二.使用ElementUI完成增删改 2.1 后台代码 2.2 前端代码
三.使用ElementUI完成表单验证 一.前言 本章是继上一篇的基础之上在做完善#xff0… ⭐⭐本文章收录与ElementUI原创专栏ElementUI专栏 ⭐⭐ ElementUI的官网ElementUI官网
目录
一.前言
二.使用ElementUI完成增删改 2.1 后台代码 2.2 前端代码
三.使用ElementUI完成表单验证 一.前言 本章是继上一篇的基础之上在做完善上一篇是教大家如何使用ElementUI制作动态菜单栏以及表格的分页查询本章就是继续上篇完成剩下的增删改功能采用的是前后端分离大家如果有不懂的可以点击上方的ElementUI的专栏进去查看哟~
二.使用ElementUI完成增删改 2.1 后台代码 增删改的后端代码 RequestMapping(/addBook)ResponseBodypublic JsonResponseBody? addBook(Book book){try {bookService.insert(book);return new JsonResponseBody(新增书本成功,true,0,null);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody(新增书本失败,false,0,null);}}RequestMapping(/editBook)ResponseBodypublic JsonResponseBody? editBook(Book book){try {bookService.updateByPrimaryKey(book);return new JsonResponseBody(编辑书本成功,true,0,null);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody(编辑书本失败,false,0,null);}}RequestMapping(/delBook)ResponseBodypublic JsonResponseBody? delBook(Book book){try {bookService.deleteByPrimaryKey(book.getId());return new JsonResponseBody(删除书本成功,true,0,null);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody(删除书本失败,false,0,null);}}RequestMapping(/queryBookPager)ResponseBodypublic JsonResponseBodyListBook queryBookPager(Book book, HttpServletRequest req){try {PageBean pageBeannew PageBean();pageBean.setRequest(req);ListBook books bookService.queryBookPager(book, pageBean);return new JsonResponseBody(OK,true,pageBean.getTotal(),books);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody(分页查询书本失败,false,0,null);}} 2.2 前端代码 定义接口 数据样式格式都是去ElementUI官网copy的然后根据自己的情况进行修改即可
templatediv classbooks stylepadding: 20px;!-- 1.搜索框 --el-form :inlinetrue classdemo-form-inlineel-form-item label书籍名称el-input v-modelbookname placeholder书籍名称/el-input/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-buttonel-button typeprimary clickopen新增/el-button/el-form-item/el-form!-- 2.表格 --el-table :datatableData stylewidth: 100%el-table-column propid label书籍ID width180/el-table-columnel-table-column propbookname label书籍名称 width180/el-table-columnel-table-column propprice label书籍价格 width180/el-table-columnel-table-column propbooktype label书籍类型 width180/el-table-columnel-table-column label操作template slot-scopescopeel-button sizemini clickopen(scope.row)编辑/el-buttonel-button sizemini typedanger clickdel(scope.row)删除/el-button/template/el-table-column/el-table!-- 3.分页条 --div classblockel-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagepage:page-sizes[10, 20, 30, 40] :page-size100 layouttotal, sizes, prev, pager, next, jumper :totaltotal/el-pagination/div!-- 4.多功能弹出框 --el-dialog :titletitle :visible.syncdialogFormVisible closeclearel-form :modelbookel-form-item label书籍ID :label-widthformLabelWidthel-input v-modelbook.id autocompleteoff/el-input/el-form-itemel-form-item label书籍名称 :label-widthformLabelWidthel-input v-modelbook.bookname autocompleteoff/el-input/el-form-itemel-form-item label书籍价格 :label-widthformLabelWidthel-input v-modelbook.price autocompleteoff/el-input/el-form-itemel-form-item label书籍类别 :label-widthformLabelWidthel-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/div
/template 逻辑代码新增和修改是共用一个弹框然后用 if 判断改变窗口的标题接着根据窗体的标题来判断调用新增的方法还是修改的方法删除的弹框的话也是在ElementUI官网中找的获取id进行删除整条数据。
scriptexport default {data() {return {bookname: ,tableData: [],rows: 10,page: 1,total: 0,title: 新增界面,// 默认不展示窗口dialogFormVisible: false,formLabelWidth: 100px, //宽度types: [],book: {id: ,bookname: ,price: ,booktype: }}},methods: {//删除del(row) {this.$confirm(你确定要删除该数据嘛~亲?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {let url this.axios.urls.BOOK_DEL;this.axios.post(url, {id:row.id}).then(r {console.info(r);//弹出框this.$message({type: success,message: 删除成功!});this.query({});}).catch(e {})}).catch(() {this.$message({type: info,message: 已取消删除});});},dosub() {//新增//路由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.info(params);this.axios.post(url, params).then(r {console.info(r);this.clear();this.query({});}).catch(e {})},clear() {//初始化窗体this.dialogFormVisible false;this.title 新增界面;this.book {id: ,bookname: ,pric: ,booktype: }},open(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;}},query(params) {//路由let url this.axios.urls.BOOK_LIST;this.axios.get(url, {params: params}).then(r {console.info(r);this.tableData r.data.rows;this.total r.data.total;}).catch(e {})},onSubmit() {//模糊查询的字段let params {bookname: this.bookname}this.query(params);},handleSizeChange(r) {// 当页大小发生变化let params {bookname: this.bookname,rows: r,page: this.page}this.query(params);},handleCurrentChange(p) {// 当前页码发生变化let params {bookname: this.bookname,rows: this.rows,page: p}this.query(params);}},created() {this.query({});//需要发ajax请求后台数据在这里我给它定死了this.types [{id: 1,name: 短文}, {id: 2,name: 爱情}, {id: 3,name: 爽文}]}}
/script看一下效果吧 三.使用ElementUI完成表单验证 第一步:去ElementUI官网搜索表单验证会发现需要添加 第二步指定需要验证的属性字段添加 第三步写验证规则
rules: {bookname: [{required: true,message: 请输入书籍名称,trigger: blur}],price: [{required: true,message: 请输入书籍价格,trigger: blur}],booktype: [{required: true,message: 请输入书籍类型,trigger: blur}]}
最后一步使用验证规则 代码 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.info(params);this.axios.post(url, params).then(r {console.info(r);this.clear();this.query({});}).catch(e {})} else {console.log(error submit!!);return false;}});} 好啦看看效果吧
