长沙做网站推荐,wordpress社交媒体优化,注册公司如何提供注册地址,怎么做晒鱼的网站目录
一、CUD
( 1 ) CU讲述
( 2 ) 编写
1. CU
2. 删除
二、验证
前端整合代码 : 一、CUD 以下的代码基于我博客中的代码进行续写 : 使用ElementUI结合Vue导航菜单和后台数据分页查询 ( 1 ) CU讲述 在CRUD操作中#xff0c;CU代表创建#xff08;Create#xff09…目录
一、CUD
( 1 ) CU讲述
( 2 ) 编写
1. CU
2. 删除
二、验证
前端整合代码 : 一、CUD 以下的代码基于我博客中的代码进行续写 : 使用ElementUI结合Vue导航菜单和后台数据分页查询 ( 1 ) CU讲述 在CRUD操作中CU代表创建Create和更新Update。 1. 创建Create创建操作用于在数据库中创建新的数据记录。它通常涉及向数据库中插入新的数据行或文档。例如在关系型数据库中可以使用INSERT语句来创建新的数据行。在文档数据库中可以直接插入新的文档。 2. 更新Update更新操作用于修改数据库中已存在的数据记录。它可以用于更改数据行或文档中的一个或多个属性的值。例如在关系型数据库中可以使用UPDATE语句来更新数据行的值。在文档数据库中可以使用更新操作符来修改文档的属性。 这两个操作通常是CRUD操作中最常用的。创建操作用于添加新的数据记录而更新操作用于修改已存在的数据记录。它们可以在应用程序中用于实现用户注册、添加新的产品、更新用户信息等功能。 ( 2 ) 编写
1. CU 在项目中的src文件下api中找到action.js进行配置数据访问的地址: /*** 对后台请求的地址的封装URL格式如下* 模块名_实体名_操作*/
export default {SERVER: http://localhost:8080/ssm, //服务器地址SYSTEM_USER_DOLOGIN: /user/userLogin, //登陆请求SYSTEM_USER_DOREG: /user/userRegister, //注册请求SYSTEM_MENU: /module/queryRootNode, //左侧菜单导航数据请求SYSTEM_BookList: /book/queryBookPager, //书籍的后端数据请求SYSTEM_BookAdd: /book/addBook, //书籍增加的数据请求SYSTEM_BookEdit: /book/editBook, //书籍修改的数据请求SYSTEM_BookDel: /book/delBook, //书籍删除的数据请求getFullPath: k { //获得请求的完整地址用于mockjs测试时使用return this.SERVER this[k];}
}在BookList.vue组件中进行编写增加修改的代 在ElementUI里面找到弹出窗进行编写增加修改的弹窗 !-- 弹出的编辑及增加弹窗 --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 在script标签中编写方法进行数据增加修改实现在data中编写属性: data() {return {bookname: ,tableData: [],rows: 10,total: 0,page: 1,formLabelWidth: 120px, //弹出窗输入框前的文字宽度title: 书籍新增, //弹出窗标题dialogFormVisible: false, //默认关闭book: {id: ,bookname: ,price: ,booktype: },types: [],}}, 在script标签中编写方法进行数据增加修改实现在methods中编写方法: 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.axios.post(url, params).then(d {// console.log(url);// console.log(d);this.close();this.query({});}).catch(e {});},//弹出窗取消值初始化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;}}, 在created中初始化数据 created() {this.query({});//初始书籍类型的书籍this.types [{tid: 1,tname: 玄幻}, {tid: 2,tname: 爽文}, {tid: 3,tname: 爱情}, {tid: 4,tname: 动作}, {tid: 5,tname: 都市}];} 增加表格操作 el-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 增加效果 : 修改效果 : 2. 删除 在script标签中编写方法进行数据删除实现在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: 已取消删除});});} 删除效果 二、验证 在表单中增加以下两个属性 :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
