Complete steps to use mock.js in Vue project

Using mock.js in Vue project

Development tool selection: Vscode

1. Create a vue project using the command line (manually select Babel, Router, Vuex)

2. Import element-ui (for better display effect), enter in the command line

npm i element-ui -S

3. In main. Reference in js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'; //Style files must be introduced into Vue.use(ElementUI)

4. Create a new src/views/main/List.vue to use the custom column template in elememnt-ui

<template>
<div>
  <el-table
  :data="tableData"
  style="width: 100%">
  <el-table-column
   label="Date"
   width="180">
   <template slot-scope="scope">
    <i class="el-icon-time"></i>
    <span style="margin-left: 10px">{{ scope.row.date }}</span>
   </template>
  </el-table-column>
  <el-table-column
   label="Name"
   width="180">
   <template slot-scope="scope">
    <el-popover trigger="hover" placement="top">
     <p>Name: {{ scope.row.name }}</p>
     <p>Address: {{ scope.row.address }}</p>
     <div slot="reference" class="name-wrapper">
      <el-tag size="medium">{{ scope.row.name }}</el-tag>
     </div>
    </el-popover>
   </template>
  </el-table-column>
  <el-table-column label="operation">
   <template slot-scope="scope">
    <el-button
     size="mini"
     @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
    <el-button
     size="mini"
     type="danger"
     @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
   </template>
  </el-table-column>
 </el-table>
</div>
</template>

<script>
 export default {
  data() {
   return {
    tableData: [{
     date: '2016-05-02',
     name: 'Wang Xiaohu',
     address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
    }, {
     date: '2016-05-04',
     name: 'Wang Xiaohu',
     address: 'No. 1517, Jinshajiang Road, Putuo District, Shanghai'
    }, {
     date: '2016-05-01',
     name: 'Wang Xiaohu',
     address: 'No. 1519, Jinshajiang Road, Putuo District, Shanghai'
    }, {
     date: '2016-05-03',
     name: 'Wang Xiaohu',
     address: 'No. 1516, Jinshajiang Road, Putuo District, Shanghai'
    }]
   }
  },
  methods: {
   handleEdit(index, row) {
    console.log(index, row);
   },
   handleDelete(index, row) {
    console.log(index, row);
   }
  }
 }
</script>

5.router/index.js is configured as follows

import Vue from 'vue'
import VueRouter from 'vue-router'
//Import componentsimport List from '../views/main/List.vue'

Vue.use(VueRouter)

const routes = [
 {
  path: '/',
  name: 'List',
  component: List
 },

]

const router = new VueRouter({
 routes
})

export default router

The current web page display effect is as follows

5. Install mockjs and axios

npm install --save-dev mockjs
npm install --save axios

6. Create api/getData.js and request.js

request.js

import axios from 'axios'
const service = axios.create({
  baseURL : "http://localhost:8080",
})
export default service

getData.js

import axios from '../request'
//Data list interface export const getList = () => axios.get("/list")

7.Create mock/mockServer.js under src

import Mock from 'mockjs'
//import data from './data.json'

Mock.mock('http://localhost:8080/list', {
  code: 0, data:
  {
    'data|1000': [
      {  
        id: '@id', //random id
        name: '@name', //Random name nickName: '@last', //Random nickname phone: /^1[34578]\d{9}$/, //Random phone number 'age|11-99': 1, //Age address: '@county(true)', //Random address email: '@email', //Random email isMale: '@boolean', //Random gender createTime: '@datetime', //Creation time avatar() {
          //User avatar return Mock.Random.image('100×100', Mock.Random.color(), '#757575', 'png', this.nickName)
        }
      }
    ]
  }

})

8. Import mockServer in main.js

import './mock/mockServer'

9. Modify src/views/main/List.vue (data acquisition and binding, set the table to the center)

<template>
 <div>
  <el-table :data="tableData" style="width: 600px;margin: 0 auto">
   <el-table-column label="Random ID" width="200">
    <template slot-scope="scope">
     <i class="el-icon-time"></i>
     <span style="margin-left: 10px">{{ scope.row.id }}</span>
    </template>
   </el-table-column>
   <el-table-column label="Name" width="180">
    <template slot-scope="scope">
     <el-popover trigger="hover" placement="top">
      <p>Name: {{ scope.row.name }}</p>
      <p>Address: {{ scope.row.address }}</p>
      <div slot="reference" class="name-wrapper">
       <el-tag size="medium">{{ scope.row.name }}</el-tag>
      </div>
      <p>Email: {{ scope.row.email }}</p>
      <p>Gender: {{ scope.row.isMale }}</p>
      <p>Nickname: {{ scope.row.nickName }}</p>
      <p>Phone number: {{ scope.row.phone }}</p>
      <p>Avatar:</p>
     </el-popover>
    </template>
   </el-table-column>
   <el-table-column label="operation">
    <template slot-scope="scope">
     <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
      >Edit</el-button
     >
     <el-button
      size="mini"
      type="danger"
      @click="handleDelete(scope.$index, scope.row)"
      >Delete</el-button
     >
    </template>
   </el-table-column>
  </el-table>
 </div>
</template>

<script>
import { getList } from "../../api/getData";
export default {
 data() {
  return {
   tableData: [
    // {
    // date: "2016-05-02",
    // name: "Wang Xiaohu",
    // address: "1518 Jinshajiang Road, Putuo District, Shanghai",
    // },
    // {
    // date: "2016-05-04",
    // name: "Wang Xiaohu",
    // address: "1517 Jinshajiang Road, Putuo District, Shanghai",
    // },
    // {
    // date: "2016-05-01",
    // name: "Wang Xiaohu",
    // address: "1519 Jinshajiang Road, Putuo District, Shanghai",
    // },
    // {
    // date: "2016-05-03",
    // name: "Wang Xiaohu",
    // address: "1516 Jinshajiang Road, Putuo District, Shanghai",
    // },
   ],
  };
 },
 methods: {
  handleEdit(index, row) {
   console.log(index, row);
  },
  handleDelete(index, row) {
   console.log(index, row);
  },

  async getMockList() {
   try {
    const result = await getList();
    //console.log(result);
    if (result.data.code == 0) {
     this.tableData = result.data.data.data;
    }
    //console.log(result.data.data.data);
   } catch (error) {
    console.log(error);
   }
  },
 },

 mounted() {
  this.getMockList();
 },

};
</script>

10. Run again

If you hover the mouse over a name, more information will be displayed.

Display 1000 test data

I'm too lazy to do paging. . . .

Summarize

This is the end of this article about using mock.js in Vue projects. For more related projects using mock.js, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

The use and basic usage of mock.js in vue project
Do you know how to use mock in vue project?
Detailed explanation of how to use mock data in local development of vue-cli
How to control mock in development environment and disable it in production environment in Vue

<<: How to implement vue page jump

>>: Detailed steps for developing WeChat mini-programs using Typescript