详解vue2.0 axios模拟axios-模拟适配器实现登陆

做项目过程中，需要用到后台模拟数据，在机缘巧合下发现了嘲弄，在学习使用的过程中又偶遇了爱可信模拟适配器。现在将实例展示如下：

1、准备

实例是建立在脚手架的基础上实现

需要提前安装的插件有：

axios:npm安装axio -保存

mockjs:npm安装mockjd -保存-开发

axios-模拟适配器：国家预防机制安装axios-模拟适配器-保存-开发

引入

第一种引入方式：按照es6的语法，以进口的方式引入

从“axios”导入axios从" axios-模拟适配器"导入模拟适配器第二种引入方式：以需要方式引入

var axios=require(' axios ')；var mock适配器=require(' axios-mock-adapter ')；代码实例

整个项目的代码结构如下：

首先新建一个login.vue文件，代码如下

模板el型类=' log in-container ' ref=' account form ' : model=' account ' : rules=' loginRules ' label-position=' left ' h3log in/H3 El-form-item prop=' username ' El-input v-model=' account。用户名' type=' text '占位符='账号/El-input/El-form-item El-form-item prop=' password ' El-input v-model='帐户。“密码”类型=“密码”占位符=”密码/El-输入/El-表单-项目埃尔-复选框v-模型='选中'选中记住密码/El-复选框El-表单-项目El-按钮类型='主要'登录/El-button El-button类型='主要'重置/El-按钮/El-表单-项目/El-表单/模板脚本导入{ requseLogin }自'./axios/API '；导出默认{ name: 'login '，data(){ return { account : { username : ' '，password: '' }，login rules 3360 { username : [{ required : true，message: '请输入账号，trigger: 'blur'}]，密码：[{必需： true，消息： '请输入密码，trigger: 'blur'}]，}，checked: true，loging : false }；}，methods: {}/scriptstyle作用域正文{ background: # DFE9FB}。登录容器{宽度：350像素保证金-左侧：35%;border: 1px固体# d3d3d3盒子尺寸：边框盒子；padd : 10px 30pxborder-半径： 5px} .El-button {宽度：100%；盒子尺寸：边框盒子；边距： 10px 0；}/样式由于路由的默认指向是地狱世界，所以修改路由器文件夹下的index.js

从“vue”导入某视频剪辑软件从“Vue-路由器”/导入路由器/懒加载方式，当路由被访问的时候才加载对应组件const log in=resolve=require([' @/components/log in ']，resolve。使用(路由器)导出默认的新路由器({路由：[{路径： '/'，名称： '登录'，组件：登录})此时登录界面样式基本写好，接下来修改main.js，将需要引入的文件引入

如下：

从“vue”导入某视频剪辑软件从“应用程序”导入/App”从导入路由器"。/router '从' element-ui '导入元素ui ' import ' element-ui/lib/theme-粉笔/index。“CSS”从“axios”vue导入axios。原型。$ Ajax=axios//axios不能直接使用使用引入，只能每个需要发送请求的组件中即时引入，两种引入方式//第一种引入方式：引入爱可信后，修改原型链//从axios '/Vue . prototype导入axios，$ axios=axios vue。配置。生产提示=假；vue。使用(ElEMENTui)；/* ESL int-禁用无新*/新Vue({ el: '#app '，路由器，商店，//使用商店组件： { App }，模板： 'App/'})刷新页面

接下来就是对login.vue页面进行改造：增加登录点击事件和重置事件

电子表格-项目电子按钮@点击。本地人。protect=' handlelog in ' : loading=' loging ' type=' primary ' log in/El-button El-button type=' primary ' class=' resetBtn ' @ click。本地人。保护=“重置”重置/El按钮/El表单项目此时的点击事件没有交互功能，使用爱可信和mock.js实现交互，并且使用axios-模拟适配器进行爱可信数据调试

在科学研究委员会下新建一个爱可信文件夹，并建一个api.js

从axios '导入axios的axios。默认值。baseURl=' http://127。0 .0 .1:80 ';export const requseLogin=params={ return axios。post('/user/log in '，params)；}再新建一个index.js

从""导入*作为api ./api '导出默认美国石油学会(American Petroleum Institute)这是像后台发起邮政请求，地址是"用户/登录"

此处的后台数据我们使用mockjs进行拦截，然后模拟后台服务返回的数据

创建模拟的后台模拟数据

在科学研究委员会目录下创建模拟的文件夹，并且新建一个index.js内容如下：

//通过axios-模拟适配器生成代理美国石油学会(美国石油协会)地址从axios '导入爱可信从axios-模拟适配器“/导入{登录用户}从'导入模拟适配器./数据/用户”从导入{用户} ./data/user ' export default { init(){ let mock=new mock适配器(axios)；//模拟成功请求模拟成功请求mock . onget('/成功').回复(200，{ msg : ' success ' })；//模拟错误请求模拟失败请求mock.onGet('/error ').回复(500，{ msg: '失败' }) //登录模拟登录接口mock.onPost('/user/login ').回复（配置={ //解析爱可信传过来的数据让{用户名，密码}=JSON。解析(配置。数据)；返回新的承诺((解决，拒绝)={ //先创建一个用户为空对象让用户=nullsetTimeout(()={ //判断模拟的假数据中是否有和传过来的数据匹配的让hasUser=users.some(person={ //如果存在这样的数据如果(人。用户名===用户名人。password===password){ user=JSON。解析(JSON。瘦长的(人))；user.password=未定义；返回真；}else { //如果没有这个person return false } })；//如果有那么一个人if (hasUser) { resolve([ 200，{code: 200，msg: '登录成功，用户}]);} else { //如果没有这么一个人解析([ 200，{code: 500，msg: '账号错误' }]) } }, 500);}) });//模拟注册接口}}接着在模拟的下建立数据文件夹，里面新建user.js用来存放用户信息

/** 用来存放一些模拟用户的数据* *///从mockjs'const用户中导入Mock=[{ id : 1，username: 'admin '，password: '123456 '，email: '[emailprotected]'，name: '搬砖者}，{ id: 2，username: 'lytton '，password: '123456 '，email: '[emailprotected]'，name: '混子}]导出{用户}为login.vue文件增加登录方法

脚本导入{requseLogin}自./axios/API '；导出默认{ name: 'login '，data(){ return { account : { username : ' '，password: '' }，login rules 3360 { username : [{ required : true，message: '请输入账号，trigger: 'blur'}]，密码：[{必需： true，消息： '请输入密码，trigger: 'blur'}]，}，checked: true，loging : false }；}，方法： { handlelog in(){ this .参考文献AccountForm.validate((有效)={ if(有效){ this.logining=true让loginParams={ username : this。账户。用户名，密码：这个。账户。密码}//调用爱可信登录接口请求登录（登录参数)。然后(res={ //调试器；this . loging=false//根据返回的密码判断是否成功让{ code，msg，user }=res.dataif(代码===200) { //elementui中提示组件这个$ message({ type :“success”，message : msg })；//登陆成功，用户信息就保存在本地存储中sessionStorage.setItem('user '，JSON)。stringify(用户))；//跳转到后台主页面console.log('this '，this) this .$路由器。push({ path : '/home ' })else { this .$message({ type: 'error '，message: msg，})；} }).catch(err={ console。log(err))；});}else { console.log('错误提交！');返回false} }) }，reset () { this .参考文献AccountForm.resetFields() }，} }/script当点击登录按钮后，跳转到/home '页面，在成分文件夹下面新增home.vue文件

模板div h1 { { msg } }/h1/div/templatescriptexport默认值{ name : }后台主界面，data () { return { msg: '后台主界面} } }/脚本接下了修改路由器中的index.js

从“vue”导入某视频剪辑软件从“vue路由器”导入路由器/从" @/组件/你好世界"//从导入家”./components/home '；//懒加载方式，当路由被访问的时候才加载对应组件const log in=resolve=require([' @/components/log in ']，resolve)const Home=resolve=require([' @/components/Home ']，resolve)vue。使用(路由器)常量路由器=新路由器({路由： [{路径： '/'，名称： '登录'，组件： '登录'，{路径3: '访问之前，检查是否登陆了router.beforeEach((to，from，next)={ if(to。路径。以('/log in '){ window }开头。会话存储。删除项目('用户')；next()} else { let token=window。会话存储。getitem(' user ')；if(！token){ next({ path : '/log in ' })} else { next()})；导出默认路由器在main.js中引入模拟的

从“vue”导入某视频剪辑软件从“vue路由器”导入路由器/从" @/组件/你好世界"//从导入家”./components/home '；//懒加载方式，当路由被访问的时候才加载对应组件const log in=resolve=require([' @/components/log in ']，resolve)const Home=resolve=require([' @/components/Home ']，resolve)vue。使用(路由器)常量路由器=新路由器({路由： [{路径： '/'，名称： '登录'，组件： '登录'，{路径3: '访问之前，检查是否登陆了router.beforeEach((to，from，next)={ if(to。路径。以('/log in '){ window }开头。会话存储。删除项目('用户')；next()} else { let token=window。会话存储。getitem(' user ')；if(！token){ next({ path : '/log in ' })} else { next()})；导出默认路由器至此，运行新公共管理运行开发即可

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。