关键字CRUDdatapipvueelementUI前后端分离前 言本文举例介绍利用datapip为vue项目提供数据服务实现CRUD的基本方法和实现过程。利用datapip无需编写后端代码即可实现前端与数据库的交互提高项目开发的效率。一、获取全部商品数据并显示1. 小修正统一名称本文仍以 “datapip使用之4”一文中使用的vue项目为例使用其“基础管理”模块下的“商品管理”功能但原项目中有些名词不一致因此先打开文件E:\vuepro\vueproject-master\src\views\goods\Goods.vue将其中的“部门”均改为“商品”。顺便增加“创建时间”和“创建人”两个字段。运行效果如下2.准备数据在datapip项目使用的数据库datapip中创建库表goods字段情况如下其中id为主键整型自增然后添加一些数据。3. 配置datapip项目以便获取商品数据说明本例datapip项目部署路径为D:\xampp\tomcat\webapps1添加数据库操作配置文件的索引打开文件D:\xampp\tomcat\webapps\datapip\Config\OperateAction.json添加数据库操作配置文件的索引内容如下图红框内所示2创建数据库操作配置文件新建文件D:\xampp\tomcat\webapps\datapip\SqlCommand\goods_sel_all.json配置数据库操作文件内容如下3取消datapip的登录验证此设置非常重要。如果将datapip作为一个独立的web项目则必须经过登录验证才能访问数据库本例将datapip仅作为数据服务工具所以可以将datapip登录验证的功能关闭以便在vue项目的开发阶段便捷地获取数据。具体操作如下打开D:\xampp\tomcat\webapps\datapip\WEB-INF\Resource\StructStatus.properties文件将IDValidate的值改为off如下图特别注意完成以上配置后必须重启tomcat4. vue项目中编写异步请求代码1编写数据格式转换函数resToGrid为节省带宽datapip将数据库记录查询结果以数组的格式返回因此需要编写一个将该格式转换为elementui框架table组件需要的格式。打开E:\vuepro\vueproject-master\src\views\goods\Goods.vue文件添加函数代码如下图第135行至157所示代码文本///将后端数据格式转换为elementui table组件数据格式 ///fetchData - 后端返回的数据 ///gridFieldNames - grid控件列名称 ///fetchFieldNames - 后端返回记录的字段名 resToGrid(fetchData, gridFieldNames, fetchFieldNames) { // var standFormatData [];//符合datagrid组件标准的数据 var keyName [];//后端返回数据的字段名作为键名记录的字段名 for (var key in fetchData) {//此循环用于获得后端数据所有的键名即字段名 var index fetchFieldNames.indexOf(key);//后端返回的字段名在fetchFieldName里也是在gridTitle里对应的下标 if (index ! -1) { keyName.push(key); } } var rowsCnt fetchData[keyName[0]].length;//获取记录条数即keyName数组任意一个元素的长度 for (var i 0; i rowsCnt; i) {//此循环用于生成各条记录 var currRecord {};//当前记录 for (var j 0; j keyName.length; j) {// currRecord[gridFieldNames[j]] fetchData[keyName[j]][i];//当前记录的具体数据即当前记录第j个键名的值为返回数据中第j个键名的第i个元素值 } standFormatData.push(currRecord);//将当前记录放入标准格式数组 } return standFormatData; }2编写异步请求代码代码如下图红框内所示代码文本this.$axios({ method: post, url:/datapip/GTransfer, ///关键代码请求地址 params: { ///参数 operateid: goods_sel_all ///关键代码获取所有商品记录 } }).then((res) { ///注意为了代码健壮起见在下面的判断语句的表达式中利用函数toUpperCase将返回的字符串转换为全大写 if(res.data.OperateStatus.toUpperCase() OK res.data.Token.toUpperCase() OK){ const fetchFieldNames [goodname, goodcode, edittime, edituser];///后端返回数据中的字段名列表 const gridFieldNames [deptName, deptNo, editTime, editUser];///table组件字段名列表 this.listData this.resToGrid(res.data.DataSet[0].Results, gridFieldNames,fetchFieldNames);///数据格式转换并赋值给listData this.pageparm.total res.data.DataSet[0].RecordNum;///将记录总数赋值给pageparm.total }else{ alert(获取数据失败!); } }).catch((error) { console.log(error); });注意将模拟数据删除或注释掉如下图或者将异步请求代码放到“模拟数据结束”之后3保存所有代码项目运行效果如下以上是访问商品管理页面时默认显示goods表中的所有记录下面分别介绍针对goods表CRUD的实现。二、CRUD操作之——添加1. datapip项目端的配置1修改D:\xampp\tomcat\webapps\datapip\Config\OperateAction.json文件添加数据库表操作配置文件的索引内容如下红框内所示2新建D:\xampp\tomcat\webapps\datapip\SqlCommand\goods_add.json文件内容及说明如下3配置完成后重启datapip项目所使用的tomcat。2.vue项目端的代码修改1编写新函数异步添加新记录打开文件E:\vuepro\vueproject-master\src\views\goods\Goods.vue在methods里添加函数goodsAdd参数为要添加的新记录数据。注意该函数使用了stringify方法见下图第321行所以记得先引入qsimport qs from qs;函数代码文本///添加事件 ///newData - 新数据 goodsAdd(newData){ var ajaxData qs.stringify({ ///参数 operateid: goods_add, ///关键代码添加新记录 goodName: newData.deptName, goodNo: newData.deptNo, /// editTime: new Date(), ///注意前端不用提供修改时间通过goods_add的配置使用服务器时间 ///注意这里从本地存储中获取登录名 /// 如果在datapip项目中登录可以通过goods_add的配置使用其session中的登录名 editUser: localStorage.getItem(loginedname) }); this.$axios({ method: post, url:/datapip/GTransfer, ///关键代码请求地址 data: ajaxData }).then((res) { //注意为了代码健壮起见在下面的判断语句的表达式中利用函数toUpperCase将返回的字符串转换为全大写 if(res.data.OperateStatus.toUpperCase() OK res.data.Token.toUpperCase() OK){ if(res.data.DataSet[0].EffectRecordNum 1){///判断数据库是否成功添加了1条记录 newData.editTime new Date();///为newData添加时间数据这里使用前端时间用于在table中显示其与服务器时间不一定相同 newData.editUser localStorage.getItem(loginedname);///为newData添加修改人数据这里使用本地存储 this.listData this.listData.concat(newData); ///将前端的新数据并入table组件的数据列表其实应该用库表内的新数据 this.pageparm.total this.pageparm.total 1;///将记录总数加1 this.editFormVisible false this.loading false this.$message({ type: success, message: 添加成功 }) }else{ alert(添加数据失败!); } }else{ alert(访问服务器失败!); } }).catch((error) { alert(error); }); }2删除或注释原来对deptSave函数的调用改为调用goodsAdd函数如下图3.运行vue项目测试添加功能。三、CRUD操作之——搜索1.datapip项目端的配置1修改D:\xampp\tomcat\webapps\datapip\Config\OperateAction.json文件添加数据库表操作配置文件的索引内容如下红框内所示2新建D:\xampp\tomcat\webapps\datapip\SqlCommand\goods_search.json文件内容及说明如下3 配置完成后重启datapip项目所使用的tomcat。2.vue项目端的代码修改1修改E:\vuepro\vueproject-master\src\views\goods\Goods.vue文件中的search函数代码如下// 搜索事件 search() { var ajaxData qs.stringify({ ///参数 operateid: goods_search, ///关键代码搜索记录 goodName: this.formInline.deptName, goodNo: this.formInline.deptNo }); this.$axios({ method: post, url:/datapip/GTransfer, ///关键代码请求地址 data: ajaxData }).then((res) { //注意为了代码健壮起见在下面的判断语句的表达式中利用函数toUpperCase将返回的字符串转换为全大写 if(res.data.OperateStatus.toUpperCase() OK res.data.Token.toUpperCase() OK){ if(res.data.DataSet[0].RecordNum 1){///判断数据库是否成功添加了1条记录 const fetchFieldNames [goodname, goodcode, edittime, edituser];///后端返回数据中的字段名列表 const gridFieldNames [deptName, deptNo, editTime, editUser];///table组件字段名列表 this.listData this.resToGrid(res.data.DataSet[0].Results, gridFieldNames,fetchFieldNames);///数据格式转换并赋值给listData this.pageparm.total res.data.DataSet[0].RecordNum;///修正记录总数 }else{ this.$message({ type: warning, message: 没有满足条件的记录 }) this.listData []; ///清空table组件数据 this.pageparm.total 0; ///将记录总数置0 } }else{ alert(访问服务器失败!); } }).catch((error) { alert(error); }); this.loading false; this.pageparm.currentPage this.formInline.page; this.pageparm.pageSize this.formInline.limit; }3. 运行vue项目测试搜索功能。四、CRUD操作之——编辑1.datapip项目端的配置1修改D:\xampp\tomcat\webapps\datapip\Config\OperateAction.json文件添加数据库表操作配置文件的索引内容如下红框内所示2新建D:\xampp\tomcat\webapps\datapip\SqlCommand\goods_mod.json文件内容如下3 配置完成后重启datapip项目所使用的tomcat。2.vue项目端的代码修改1修改E:\vuepro\vueproject-master\src\views\goods\Goods.vue文件为了唯一识别记录table组件内添加一个隐藏列用于存放库表中id字段的值模版代码如下修正js代码有两处一个位于getdata函数内一个位于search函数内分别在两个数组内添加库表字段名和table组件字段名即可如下两图2 在E:\vuepro\vueproject-master\src\views\goods\Goods.vue文件的method方法内添加goodsAdd函数代码截图代码文本///修改事件 goodsMod(formData){ var ajaxData qs.stringify({ ///参数 operateid: goods_mod, ///关键代码修改记录 goodId: formData.deptId, goodName: formData.deptName, goodNo: formData.deptNo, /// editTime: new Date(), ///注意前端不用提供修改时间通过goods_add的配置使用服务器时间 ///注意这里从本地存储中获取登录名 /// 如果在datapip项目中登录可以通过goods_add的配置使用其session中的登录名 editUser: localStorage.getItem(loginedname) }); this.$axios({ method: post, url:/datapip/GTransfer, ///关键代码请求地址 data: ajaxData }).then((res) { //注意为了代码健壮起见在下面的判断语句的表达式中利用函数toUpperCase将返回的字符串转换为全大写 if(res.data.OperateStatus.toUpperCase() OK res.data.Token.toUpperCase() OK){ if(res.data.DataSet[0].EffectRecordNum 1){///判断数据库是否成功修改了1条记录 this.listData[formData.rowIndex].deptName formData.deptName; ///更新table组件的数据 this.listData[formData.rowIndex].deptNo formData.deptNo; ///更新table组件的数据 this.editFormVisible false this.loading false this.$message({ type: success, message: 修改成功 }) }else{ alert(修改数据失败!); } }else{ alert(访问服务器失败!); } }).catch((error) { alert(error); }); }3在函数handleEdit中添加代码添加的代码及注释如下图this.editForm.rowIndex index ///保存被编辑记录在table组件中的索引以便更新数据4修正submitForm函数代码截图如下代码文本// 编辑、增加页面保存方法 submitForm(editData) { this.$refs[editData].validate(valid { if (valid) { if(this.editForm.deptId ){ ///depId为空表示添加 this.goodsAdd(this.editForm); }else{ this.goodsMod(this.editForm); ///depId不为空表示修改 } } else { return false } }) }3. 运行vue项目测试修改功能。五、CRUD操作之——删除1.datapip项目端的配置1修改D:\xampp\tomcat\webapps\datapip\Config\OperateAction.json文件添加数据库表操作配置文件的索引内容如下红框内所示2新建D:\xampp\tomcat\webapps\datapip\SqlCommand\goods_del.json文件内容及说明如下3 配置完成后重启datapip项目所使用的tomcat。2.vue项目端的代码修改1修改E:\vuepro\vueproject-master\src\views\goods\Goods.vue文件内的deleteUser函数截图如下代码文本// 删除商品 deleteUser(index, row) { this.$confirm(确定要删除吗?, 信息, { confirmButtonText: 确定, cancelButtonText: 取消, type: warning }) .then(() { var ajaxData qs.stringify({ ///参数 operateid: goods_del, ///关键代码删除记录 goodId: row.goodId }); this.$axios({ method: post, url:/datapip/GTransfer, ///关键代码请求地址 data: ajaxData }).then((res) { //注意为了代码健壮起见在下面的判断语句的表达式中利用函数toUpperCase将返回的字符串转换为全大写 if(res.data.OperateStatus.toUpperCase() OK res.data.Token.toUpperCase() OK){ if(res.data.DataSet[0].EffectRecordNum 1){///判断数据库是否成功删除了1条记录 this.listData.splice(index, 1);///删除table组件内的数据 this.pageparm.total this.pageparm.total - 1;///将记录总数减1 this.editFormVisible false this.loading false this.$message({ type: success, message: 删除成功 }) }else{ alert(删除失败!); } }else{ alert(访问服务器失败!); } }).catch((error) { alert(error); }); }) .catch(() { this.$message({ type: info, message: 已取消删除 }) }) }3. 运行vue项目测试删除功能。以上就是如何在开发阶段利用datapip为vue项目提供数据服务实现CRUD的基本方法和实现过程完整代码下载地址vuedatapip(CRUD).rar-Web开发文档类资源-CSDN下载datapip使用之45的完整代码。包括datapip端和vue端两个独立的项目。更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/way_hj/76477294下一篇datapip支持vue项目典型场景数据管理中的分页https://blog.csdn.net/way_hj/article/details/122647119