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

box-sizing: border-box;
margin: 10px 0;
}
</style>

由于路由的默认指向是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: '<App/>'
})

刷新页面

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

 <el-form-item>
   <el-button @click.native.prevent="handleLogin" :loading="logining" type="primary">login</el-button>
   <el-button
    type="primary"
    class="resetBtn"
    @click.native.prevent="reset">
    reset
   </el-button>
  </el-form-item>

此时的点击事件没有交互功能，使用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地址								 
 2/5   首页 上一页 1 2 3 4 5 下一页 尾页