宜宾网站建设公司

详解vue2.0+axios+mock+axios-mock+adapter实现登陆

做项目过程中，需要用到后台模拟数据，在机缘巧合下发现了mock，在学习使用的过程中又偶遇了axios-mock-adapter。现在将实例展示如下：

在蟠龙等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供网站设计、网站制作 网站设计制作按需网站开发,公司网站建设,企业网站建设,成都品牌网站建设,全网整合营销推广,外贸网站建设,蟠龙网站建设费用合理。

1、准备

实例是建立在vue-cli的基础上实现

需要提前安装的插件有：

axios：npm install axio --save

mockjs：npm install mockjd --save-dev

axios-mock-adapter：npm install axios-mock-adapter --save-dev

引入

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

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

第二种引入方式：以require方式引入

var axios = require('axios');
var MockAdapter = require('axios-mock-adapter');

代码实例

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

详解vue2.0+axios+mock+axios-mock+adapter实现登陆

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

由于路由的默认指向是HelloWorld，所以修改router文件夹下的index.js

import Vue from 'vue'
import Router from 'vue-router'
 
// 懒加载方式，当路由被访问的时候才加载对应组件
const Login = resolve => require(['@/components/Login'], resolve)
 
Vue.use(Router)
 
export default new Router({
  routes: [{
    path: '/',
    name: 'login',
    component: Login
  }]

此时登录界面样式基本写好，接下来修改main.js，将需要引入的文件引入

如下：

import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import axios from 'axios'
Vue.prototype.$ajax = axios
// axios不能直接使用use引入，只能每个需要发送请求的组件中即时引入，两种引入方式
// 第一种引入方式：引入axios后，修改原型链
// import axios from 'axios'
// Vue.prototype.$axios = axios

Vue.config.productionTip = false;
Vue.use(ElementUI);


/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store, // 使用store
 components: { App },
 template: ''
})

刷新页面

详解vue2.0+axios+mock+axios-mock+adapter实现登陆

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

 
   login
   
    reset

此时的点击事件没有交互功能，使用axios和mock.js实现交互，并且使用axios-mock-adapter进行axios数据调试

在src下新建一个axios文件夹，并建一个api.js

import axios from 'axios'

axios.defaults.baseURL = 'http://127.0.0.1:80';

export const requseLogin = params => {
 return axios.post('/user/login', params);
}

再新建一个index.js

import * as api from './api'

export default api

这是像后台发起post请求，地址是‘user/login'

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

创建mock后台模拟数据

在src目录下创建mock文件夹，并且新建一个index.js，index.js内容如下：、

// 通过axios-mock-adapter生成代理api地址
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'

// import { LoginUsers } from './data/user'
import {users} from './data/user'

export default {
 init() {
  let mock = new MockAdapter(axios);

  // mock success request 模拟成功请求
  mock.onGet('/success').reply(200, {
   msg: 'success'
  });
  // mock error request 模拟失败请求
  mock.onGet('/error').reply(500, {
   msg: 'failure'
  })

  // login 模拟登录接口
  mock.onPost('/user/login').reply(config => {
   // 解析axios传过来的数据
   let { username, password } = JSON.parse(config.data);
   return new Promise((resolve, reject) => {
    // 先创建一个用户为空对象
    let user = null;
    setTimeout(() => {
     // 判断模拟的假数据中是否有和传过来的数据匹配的
     let hasUser = users.some(person => {
      // 如果存在这样的数据
      if (person.username === username && person.password === password) {
       user = JSON.parse(JSON.stringify(person));
       user.password = undefined;
       return true;
      }else {
       // 如果没有这个person
       return false
      }
     });
     // 如果有那么一个人
     if (hasUser) {
      resolve([ 200, {code: 200, msg: '登录成功',user} ]);
     } else { // 如果没有这么一个人
      resolve([ 200, {code: 500, msg: '账号错误' }])
     }
    }, 500);
   })
  });
 // 模拟注册接口
 }
}

接着在mock下建立data文件夹，；里面新建user.js用来存放用户信息

/*
* 用来存放一些模拟用户的数据
* */

// import Mock from 'mockjs'
const users = [
 {
  id: 1,
  username: 'admin',
  password: '123456',
  email: '123456@qq.com',
  name: '搬砖者'
 },
 {
  id: 2,
  username: 'lytton',
  password: '123456',
  email: 'yyyyy@163.com',
  name: '混子'
 }
]

export { users }

为login.vue文件增加登录方法

当点击登录按钮后，跳转到‘/home'页面，在components文件夹下面新增home.vue文件

接下了修改router中的index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// import Home from '../components/home';

// 懒加载方式，当路由被访问的时候才加载对应组件
const Login = resolve => require(['@/components/Login'], resolve)
const Home = resolve => require(['@/components/home'], resolve)

Vue.use(Router)

const router = new Router({
 routes: [
  {
   path: '/',
   name: 'login',
   component: Login
  },
  {
   path: '/login',
   name: 'login',
   component: Login
  },
  {
   path: '/home',
   name: 'home',
   component: Home
  }
 ]
})

// 访问之前，检查是否登陆了
router.beforeEach((to, from, next) => {
 if(to.path.startsWith('/login')) {
  window.sessionStorage.removeItem('user');
  next()
 }else {
  let token = window.sessionStorage.getItem('user');
  if (!token) {
   next({path: '/login'})
  }else {
   next()
  }
 }
});
export default router

在main.js中引入mock

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// import Home from '../components/home';

// 懒加载方式，当路由被访问的时候才加载对应组件
const Login = resolve => require(['@/components/Login'], resolve)
const Home = resolve => require(['@/components/home'], resolve)

Vue.use(Router)

const router = new Router({
 routes: [
  {
   path: '/',
   name: 'login',
   component: Login
  },
  {
   path: '/login',
   name: 'login',
   component: Login
  },
  {
   path: '/home',
   name: 'home',
   component: Home
  }
 ]
})

// 访问之前，检查是否登陆了
router.beforeEach((to, from, next) => {
 if(to.path.startsWith('/login')) {
  window.sessionStorage.removeItem('user');
  next()
 }else {
  let token = window.sessionStorage.getItem('user');
  if (!token) {
   next({path: '/login'})
  }else {
   next()
  }
 }
});
export default router

至此，运行npm run dev即可

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


本文标题：详解vue2.0+axios+mock+axios-mock+adapter实现登陆
文章源于：http://hbruida.cn/article/gscojh.html

其他资讯