datapip使用之（4）——典型应用：为vue项目提供数据接口实现登录验证

最新推荐文章于 2022-08-14 17:04:01 发布

way_hj

最新推荐文章于 2022-08-14 17:04:01 发布

阅读量361

点赞数

分类专栏： datapip 文章标签： vue.js 前端 javascript elementui 后端

本文链接：https://blog.csdn.net/way_hj/article/details/122510338

版权

datapip 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

关键字：datapip，vue，前后端分离，真实接口，Mock.js

前言：本文以登录验证为例，介绍利用datapip为web项目的开发提供真实的数据交互服务，体验开发web项目几乎无需后端工作的高效性。

后端无代码工具datapip是一个独立的、最小化的项目，既可以作为项目起始框架（在其基础上根据业务需求主要进行前端开发即可）也可以作为后端数据服务工具，为web应用提供真实的数据服务。例如，在前后端分离的项目中，前端开发人员可利用datapip替代Mock.js而使用真实的接口和数据。因此，整个项目从开发到部署也许不需要后端开发人员。

一、准备工作

1. 搭建vue开发环境

本例用到一个基于vue+ElementUI的前端项目，因此请先搭建好该类项目的开发、运行环境。如何搭建此类环境的技术贴非常多，本文不再赘述。

本例环境：win7 + nodejs10.0.0 + npm5.6.0

2.下载vue项目

本例所用的vue项目是通过互联网随意搜索得到，感谢原作者，如有侵权请告知本博主删除更换。

下载地址：vue-elementUI后台管理系统: vue-elementUI本项目的定位是后台管理系统，已经完成模块有用户管理、菜单管理、角色管理、公司管理、权限管理、支付配置https://gitee.com/nmgwap/vueproject?_from=gitee_search

3. 测试vue项目

以上地址中有详细的项目测试步骤，请保证该项目能够在您本地正常运行。

4.部署datapip

本例使用两个项目独立运行、跨域访问的模式进行开发，即这个vue项目和datapip项目部署在不同的目录和端口下，vue项目通过跨域的方式访问datapip项目。

部署datapip项目的具体过程请参考：datapip使用之（1）https://mp.csdn.net/mp_blog/creation/editor/121529402

注意：本例使用的datapip部署路径为D:\xampp\tomcat\webapps\datapip

二、修改代码

1. 修改vue项目的main.js代码

修改此文件代码的主要目的实现跨域。

假如文件路径为：E:\vuepro\vueproject-master\src\main.js，打开该文件添加代码，如下图红框内所示：

代码文本：

/// step1：引入 axios
import Axios from 'axios';
/// step2：把axios挂载到vue的原型中，在vue中每个组件都可以使用axios发送请求,
/// 不需要每次都import一下Axios了，直接使用 $axios 即可
Vue.prototype.$axios = Axios;
/// step3：关键代码，设置baseURL
Axios.defaults.baseURL = '/api'

2.修改vue项目的index.js代码

修改此文件代码的主要目的实现跨域。

假如文件路径为：E:\vuepro\vueproject-master\config\index.js，将target修改为datapip所在服务器的ip地址及端口号，如下图第16行所示。

3. 修改login.vue代码

修改此文件代码的主要目的向datapip发送异步请求获取登录数据，进行登录验证、路由跳转等。

假如文件路径为：E:\vuepro\vueproject-master\src\views\login.vue，首先将原来的函数submitForm代码屏蔽掉，删除或改名为submitForm2（见下图第156行），然后编写函数submitForm的代码（见下图第125行至154行）

代码文本：

submitForm() {
      let _this = this;
      if (this.ruleForm.username === "" || this.ruleForm.password === "") {
        alert("账号或密码不能为空");
      } else {
        this.$axios({
          method: "post",
          url:"/datapip/GTransfer", ///关键代码，请求地址
          params: { ///登录参数
            operateid: "alogin",///关键代码，datapip验证登录信息时必须设置的operateid
            userid: _this.ruleForm.username, ///从页面表单控件中获取的帐号
            password: _this.ruleForm.password ///从页面表单控件中获取的密码
          }
        }).then((res) => {
            ///注意：为了代码健壮起见，在下面的判断语句的表达式中，利用函数toUpperCase将返回的字符串转换为全大写
            if(res.data.OperateStatus.toUpperCase() == "OK" && res.data.Session.toUpperCase() == "OK"){
              localStorage.setItem("loginedid",res.data.MesContent.ID);///将登录者的ID写入本地存储，便于共享给其他页面使用
              localStorage.setItem("loginedname",res.data.MesContent.Name);///将登录者的名称写入本地存储，便于共享给其他页面使用
              this.logining = false;
              this.$store.commit("login", "true");
              this.$router.push({ path: "/goods/Goods" });
            }else{
              alert("账号或密码错误!");
            }
          }).catch((error) => {
            alert("登录失败，请重试!");
            console.log(error);
        });
      }
    }

4. 修改navcon.vue代码

修改此文件的目的是项目运行后，在页面右上角显示登录者的姓名或昵称。

假如文件路径为：E:\vuepro\vueproject-master\src\components\navcon.vue，修改及添加的代码如下图中标数字处所示：