关键字datapipvue前后端分离真实接口Mock.js前 言本文以登录验证为例介绍利用datapip为web项目的开发提供真实的数据交互服务体验开发web项目几乎无需后端工作的高效性。后端无代码工具datapip是一个独立的、最小化的项目既可以作为项目起始框架在其基础上根据业务需求主要进行前端开发即可也可以作为后端数据服务工具为web应用提供真实的数据服务。例如在前后端分离的项目中前端开发人员可利用datapip替代Mock.js而使用真实的接口和数据。因此整个项目从开发到部署也许不需要后端开发人员。一、准备工作1. 搭建vue开发环境本例用到一个基于vueElementUI的前端项目因此请先搭建好该类项目的开发、运行环境。如何搭建此类环境的技术贴非常多本文不再赘述。本例环境win7 nodejs10.0.0 npm5.6.02.下载vue项目本例所用的vue项目是通过互联网随意搜索得到感谢原作者如有侵权请告知本博主删除更换。下载地址vue-elementUI后台管理系统: vue-elementUI本项目的定位是后台管理系统已经完成模块有用户管理、菜单管理、角色管理、公司管理、权限管理、支付配置https://gitee.com/nmgwap/vueproject?_fromgitee_search3. 测试vue项目以上地址中有详细的项目测试步骤请保证该项目能够在您本地正常运行。4.部署datapip本例使用两个项目独立运行、跨域访问的模式进行开发即这个vue项目和datapip项目部署在不同的目录和端口下vue项目通过跨域的方式访问datapip项目。部署datapip项目的具体过程请参考datapip使用之1https://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 /api2.修改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修改及添加的代码如下图中标数字处所示三、运行两个项目检验结果1. 运行datapip按照datapip使用之1部署datapip不再赘述。2. 运行vue项目命令窗口下切换到vue项目所在目录使用npm run dev运行vue项目如下图输入帐号和密码点击登录即可。最后几点注意1. 本例中使用的vue项目在node10.0.0下运行正常在nodejs13.0.0下会出错其他版本未测试。2. 数据库帐号superadmin的密码为7个字符a库表中的值是经过MD5加密之后的。3. 本例使用的vue项目设计的登录机制将上次正确登录状态写入本地存储下次会自动登录。如果调试中需要再次手动登录请使用该项目的“退出”功能见右上角二级菜单。datapip支持vue项目示例基础业务系统https://blog.csdn.net/way_hj/article/details/122522930