datapip使用之（5）——典型应用：为vue项目提供数据接口实现CRUD

关键字：CRUD，datapip，vue，elementUI，前后端分离

前 言：本文举例介绍利用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\webapps）

（1）添加数据库操作配置文件的索引

打开文件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，如下图：

（特别注意：完成以上配置后必须重启tomcat！）

4. 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行，所以记得先引入qs，import 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的基本方法和实现过程，完整代码下载地址：vue+datapip(CRUD).rar-Web开发文档类资源-CSDN下载datapip使用之（4）（5）的完整代码。包括datapip端和vue端两个独立的项目。更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/way_hj/76477294