网站建设详细描述产品的是什么意思,沈阳seo关键字优化,长沙市建设网站,电子工程网络课程目录
1. 准备工作
2. 弹出窗口
3. 新增更新功能
5.表单验证
5. 接口文档 1. 准备工作
后台服务接口#xff0c;对书本的增删改查操作
2. 弹出窗口
进入ElementUi官网#xff0c; 找到Dialog对话框#xff0c;可以参考“嵌套表单的dialog”实现。 该步骤先实现弹出窗…目录
1. 准备工作
2. 弹出窗口
3. 新增更新功能
5.表单验证
5. 接口文档 1. 准备工作
后台服务接口对书本的增删改查操作
2. 弹出窗口
进入ElementUi官网 找到Dialog对话框可以参考“嵌套表单的dialog”实现。 该步骤先实现弹出窗口的前端逻辑并不会调用后台接口服务进行实际的业务操作。 BookList.vue
!--
弹出窗口增加和修改书本信息共用一个弹出窗口需要根据用户的选择动态的设置弹出窗口的标题
:tile 通过绑定值的方式设置dialog的标题
:visible.sync 控制弹出窗口的显示或隐藏.sync同步修饰符
closecloseBookForm设置窗口关闭时调用的处理函数可用于清空表单
:modelbookForm用于定义表单对应的model具体model的定义可见data部分。
v-showoptiontype update 通过操作类型控制是否显示书本编号字段如果当前操作类型为新增则不用显示书本编号在数据表中是自增的。
:label-widthformLabelWidth 统一定义标签的宽度。
:style{width: formEleWidth} 统一定义form元素的宽度。
--
el-dialog :titledialogName :visible.syncdialogFormVisible closecloseBookForm width500pxel-form :modelbookFormel-form-item v-showoptiontype update label编号 :label-widthformLabelWidthel-input v-modelbookForm.id autocompleteoff :style{width: formEleWidth}/el-input/el-form-itemel-form-item label书名 :label-widthformLabelWidthel-input v-modelbookForm.bookname autocompleteoff :style{width: formEleWidth}/el-input/el-form-itemel-form-item label价格 :label-widthformLabelWidthel-input v-modelbookForm.price autocompleteoff :style{width: formEleWidth}/el-input/el-form-itemel-form-item label类型 :label-widthformLabelWidthel-select v-modelbookForm.booktype placeholder选择类型 :style{width:formEleWidth}el-option label名著 valuemz/el-optionel-option label小说 valuexs/el-option/el-select/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clickdialogFormVisible false确 定/el-button/div
/el-dialog
在数据表格中添加“编辑”“删除”功能连接。在element-ui官方demo - table组件中有如何加入删除编辑等按钮的示例 !--表格--el-table :databooks stylewidth: 100%; :bordertrue max-height530el-table-column propid label编号 min-width40 aligncenter/el-table-columnel-table-column propbookname label名称 min-width100 aligncenter/el-table-columnel-table-column propprice label价格 min-width70 aligncenter/el-table-columnel-table-column propbooktype label类型 min-width70 aligncenter/el-table-column!-- “编辑”“删除”功能连接 --el-table-column label操作!--在template上使用特殊的slot-scope 特性可以接收传递给插槽的propslot-scope:类似将每一行的row对象封装到槽中之后直接从scope中获取row对象信息和行索引index信息即可--template slot-scopescopeel-button sizemini clickhandleEdit(scope.row)编辑/el-buttonel-button sizemini typedanger clickhandleDelete(scope.row)删除/el-button/template/el-table-column/el-table
script部分
export default {
name: BookList,data: function() {return {bookname: ,books: [],total: 0,rows: 10,page: 1,//控制对话框是否显示默认是隐藏状态dialogFormVisible: false,//统一控制标签的宽度formLabelWidth: 40px,//统一控制表单元素的宽度formEleWidth: 400px,//对话框标题默认为新增如果是点击修改按钮打开对话框则标题应为修改。dialogName:新增书本,//操作类型默认为添加如果是点击修改打开对话框则操作类类型应变为修改//该变量用于控制是否显示书本编号字段当操作类型为新增时不需显示书本编号数据表字段为自增//当操作类型为修改时需要显示。optiontype: add,//定义表单对应的modelbookForm: {id: ,bookname: ,price:null,booktype: }}
},methods: {qry: function() {let url this.axios.urls.BOOKMSG_BOOKINFO_REQ;this.axios.post(url, {bookname: this.bookname,page: this.page,rows: this.rows}).then(resp {console.log(resp);this.books resp.data.data;this.total resp.data.total;}).catch(error {console.log(error);});},//当每页显示的记录数发生变化时设置当前页码为1执行查询。handleSizeChange: function(rows) {this.rows rows;this.page 1;this.qry();},//当前页码发生变化时执行查询handleCurrentChange: function(page) {this.page page;this.qry();},//当关闭对话框时该方法用于清空表单closeBookForm: function() {this.bookForm.idnull;this.bookForm.bookname null;this.bookForm.booktype null;this.bookForm.price null;},//打开对话框将对话框标题设置为新增操作类型设置为addaddBook: function() {this.dialogName 新增书本信息;this.dialogFormVisible true;this.optiontype add;},//打开对话框将对话框标题设置为修改操作类型设置为update//并使用获取的待修改的记录的值设置对应的表单元素handleEdit: function(row) {this.dialogName 编辑书本信息;this.dialogFormVisible true;this.bookForm.idrow.id;this.bookForm.bookname row.bookname;this.bookForm.booktype row.booktype;this.bookForm.price row.price;this.optiontype update;},//删除书本记录handleDelete: function(row) {console.log(dele row);}}
}
3. 新增更新功能
1 在action.js中加入后台接口配置。配置时按照自己的项目实际进行 //获取书本信息BOOKMSG_BOOKINFO_REQ:/bookMsg/bookAction!getBooks.action,//增加书本信息BOOKMSG_BOOKINFO_ADD : /bookMsg/bookAction!addBook.action,//修改书本信息BOOKMSG_BOOKINFO_UPDATE: /bookMsg/bookAction!updateBook.action,//删除书本信息BOOKMSG_BOOKINFO_DEL: /bookMsg/bookAction!delBook.action,//VUEX 异步请求后台数据VUE_ASYN_REQ:/userMsg/vueAsynAction!asynAction.action,
2 在前端调用接口 注意在调用前请确认后台接口可正常使用 //保存书本信息saveBook: function() {let url this.axios.urls.BOOKMSG_BOOKINFO_ADD;//如果当前操作类型为update则需要调用更新接口if (this.optiontype update) {url this.axios.urls.BOOKMSG_BOOKINFO_UPDATE;}this.axios.post(url, this.bookForm).then(resp {//操作成功关闭弹出框执行查询以便于显示最新数据//操作失败提示失败关闭弹出框if (resp.data.success) {this.$message({message: resp.data.msg,type: success});this.dialogFormVisible false;this.qry();} else {this.$message({message: resp.data.msg,type: error});this.dialogFormVisible false;}}).catch(error {})},
4. 删除功能 //删除书本记录handleDelete: function(row) {let url this.axios.urls.BOOKMSG_BOOKINFO_DEL?idrow.id;this.axios.delete(url).then(resp {if(resp.data.success) {this.$message({message: resp.data.msg,type:success});this.qry();} else {this.$message({message: resp.data.msg,type: error});}}).catch(error {console.log(error);})}
5. 表单验证
查看Element-ui官方文档Form部分 //定义表单验证规则validatePrice为自定义验证函数在下文有具体定义rules: {bookname: [{required: true, message: 请输入书本名, trigger: blur}],price: [{required: true, validator: validatePrice, trigger: blur }],booktype: [{required: true, message: 请输入书本类型, trigger: blur}]}
validatePrice函数的定义 //用于验证订单金额var validatePrice (rule, value, callback) {if(!value){callback(new Error(请输入订单金额));} else if (isNaN(value)) {callback(new Error(请输入数字值));} else {callback();}}
表单验证 //保存书本信息saveBook: function(formName) {let url this.axios.urls.BOOKMSG_BOOKINFO_ADD;//调用表单验证this.$refs[formName].validate((valid) {//如果当前操作类型为update则需要调用更新接口if (this.optiontype update) {url this.axios.urls.BOOKMSG_BOOKINFO_UPDATE;}this.axios.post(url, this.bookForm).then(resp {//操作成功关闭弹出框执行查询以便于显示最新数据//操作失败提示失败关闭弹出框if (resp.data.success) {this.$message({message: resp.data.msg,type: success});this.dialogFormVisible false;this.qry();} else {this.$message({message: resp.data.msg,type: error});this.dialogFormVisible false;}}).catch(error {})});},
定义验证规则及rule
5. 接口文档
接口文档需要包含的基本要素
接口地址 请求方式get/post/put/delete等 请求示例举例说明如何调用 请求参数说明请求参数及存放的位置如urlform-data, body raw等等。 返回参数 正确说明返回的json数据 错误指明不同错误的代码及含义
