vue中使用mock.js（一）基础使用

vue中使用mock.js

• 官网：http://mockjs.com/

• 安装：npm install mockjs -D (–save-dev)

  使用

  • 做一个分页表格

• main.js

  import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  import store from './store'
  
  Vue.config.productionTip = false
  if (process.env.NODE_ENV !== 'production') {
   require('@/mock');
  }
  Vue.use(ElementUI);
  new Vue({
   router,
   store,
   render: h => h(App)
  }).$mount('#app')
  

  • src\mock\index.js

  import Mock from "mockjs";
  import userInfoApi from "./data/userInfo.js";
  
  Mock.setup({
    timeout:"200 - 2000"
  })
  Mock.mock(RegExp('/api/test/tableData'  + '.*'), 'get', userInfoApi.getUserInfoList);
  export default Mock;
  

  • src\mock\data\userInfo.js

  import Mock from 'mockjs';
  const code = 200;
  const status = 'success';
  const message = '操作成功';
  const userInfoList = Mock.mock({
      'rows|50': [
       {
         id: '@guid()',
          username: '@cname',
         departmentId: '@guid()',
          mobile: /^1[385][1-9]\d{8}/,
          'departmentName|1': ['总裁办', '行政部', '人事部', '财务部', '技术部', '运营部'],
          'workNumber|1001-1999': + 1,
          address: '@county(true)'
       }
      ],
    })
  export default {
    getUserInfoList: parmas => {
      const pageSize = getQueryVariable(parmas.url,'pageSize');
      const currentPage = getQueryVariable(parmas.url,'currentPage');
      const userList = userInfoList.rows.filter(
       (item, index) => index < pageSize * currentPage && index >= pageSize * (currentPage - 1)
      );
     return {
       code: code,
        message: message,
        success: status,
        data: {
         total: userInfoList.rows.length,
          userList: userList
        }
      };
    }
  }
  function getQueryVariable(url,variable) {
    var query = url.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) { return pair[1]; }
    }
    return (false);
  }
  

  • src\utils\axios.js

  import axios from 'axios';
  const service = axios.create({
      baseURL: process.env.BASE_API, // api的base_url
      timeout: 5000 // 请求超时时间
  });
  service.interceptors.request.use(
      config => {
          return config;
      },
      err => {
          Promise.reject(err);
      }
  );
  service.interceptors.response.use(
      response => {
          return response
      },
      error => {
          console.log(error);
          return Promise.reject(error);
      }
  );
  export default service;
  

  • src\api\table.js

  import axios from "@/utils/axios.js";
  class TestService {
      getTableData(data){
          return axios({
              url: `/api/test/tableData`,
              method: "get",
              params: data
          })
      }
  }
  export default new TestService();
  

  • src\views\table-test.vue

  <template>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="username" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="mobile" label="手机"> </el-table-column>
        <el-table-column prop="address" label="工号"> </el-table-column>
        <el-table-column prop="address" label="部门"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
      <el-pagination
        background
        :hide-on-single-page="false"
        layout="total, prev, pager, next"
        :total="pageInfo.total"
        :current-page.sync="pageInfo.currentPage"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </template>
  <script>
  import Service from "@/api/table.js";
  export default {
    name: "TableTest",
    data() {
      return {
        tableData: [],
        pageInfo: {
          total: 0,
          pageSize: 10,
          currentPage: 1,
          pagerCount: 5,
        },
      };
    },
    created() {
      this.getTableData(this.pageInfo);
    },
    methods: {
      getTableData(pageInfo) {
        Service.getTableData(pageInfo).then((res) => {
          this.pageInfo.total = res.data.data.total;
          this.tableData = res.data.data.userList;
        });
      },
      handleCurrentChange() {
        this.getTableData(this.pageInfo);
      },
    },
  };
  </script>