详解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');

代码实例

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

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

<template>
 <el-form
  class="login-container"
  ref="AccountForm"
  :model="account"
  :rules="loginRules"
  label-position="left">
  <h3>Login</h3>
  <el-form-item prop="username">
   <el-input
     v-model="account.username"
     type="text"
     placeholder="账号">
   </el-input>
  </el-form-item>
  <el-form-item prop="password">
   <el-input v-model="account.password" type="password" placeholder="密码"></el-input>
  </el-form-item>
  <el-checkbox v-model="checked" checked>记住密码</el-checkbox>
  <el-form-item>
   <el-button type="primary">login</el-button>
   <el-button type="primary">reset</el-button>
  </el-form-item>
 </el-form>
</template>
<script>
 import {requseLogin} from "../axios/api";
 export default {
  name: "login",
  data () {
   return {
    account: {
     username: '',
     password: ''
    },
    loginRules: {
     username: [{required: true, message: '请输入账号', trigger: 'blur'}],
     password: [{required: true,message: '请输入密码', trigger: 'blur'}],
    },
    checked: true,
    logining: false
   };
  },
  methods: {}
</script>
<style scoped>
 body{
  background: #DFE9FB;
 }
.login-container {
 width:350px;
 margin-left:35%;
 border: 1px solid #d3d3d3;
 box-sizing: border-box;
 padding: 10px 30px;
 border-radius: 5px;
}
 .el-button {
  width:100%;								 
 1/5    1 2 3 4 5 下一页 尾页