mockjs使用

1.mockjs是什么？

　　生成随机数据，拦截 Ajax 请求。

　　通过随机数据，模拟各种场景；不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据；

　　支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等；

　　支持支持扩展更多数据类型，支持自定义函数和正则。

　　优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.

2.使用

 1）安装 npm install mockjs

  2）新建mock文件，引入mock模块：import Mock from 'mockjs'

 3）在main.js中已引入mock文件（项目上线的时候注释掉）

具体如下，模拟一个表格数据：

mock文件：

import Mock from 'mockjs'
const {userList} = Mock.mock({
    'userList|56':[
        {
            "id":"@increment()",//自增
            "name":"@cname(2,4)",
            "age|18-25":18,//年龄为18-28之间的随机数字
            "sex|1":["男","女"],    //性别是数组中的一个，随机的
            "address":"@city(true)"
        }
    ]
})
//获取get请求url参数 
const getQuery = (url,name)=>{
    const index = url.indexOf("?");
    if(index!=-1){
        const queryStrArr = url.substr(index+1).split("&");
        for(var i =0;i){
            const itemArr = queryStrArr[i].split("=");
            if(itemArr[0]==name){
                return itemArr[1];
            }
        }
    }
    return null;
}

//定义获取用户列表的数据 /api/user/getList?pageNum=1&pageSize=10
Mock.mock(/\/api\/user\/getList/,'get',(options)=>{
    const pageNum = getQuery(options.url,"pageNum");
    const pageSize = getQuery(options.url,"pageSize");
    //数据起始位置  （pageNum-1）*pageSize  结束位置：pageNum*pageSize
    const totalPage = Math.ceil(userList.length/pageSize);//向上取整
    const list = pageNum>totalPage?[]:userList.slice((pageNum-1)*pageSize,pageNum*pageSize);
    return {
        status:200,
        msg:'获取数据成功',
        list:list,
        total:userList.length
    }
})
//删除用户
Mock.mock(/\/api\/user\/delete/,'delete',(options)=>{
    const body = JSON.parse(options.body);
    const index = userList.findIndex(item=>item.id==body.id);
    userList.splice(index,1);//从数组中删除
    return {
        status:200,
        msg:'删除数据成功',
        list:userList,
        total:userList.length
    }
})

userList组件（展示数据，使用了element-ui）：

<template>
    <div>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
            <span>确定删除该用户吗？span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消el-button>
                <el-button type="primary" @click="handleClose()">确 定el-button>
            span>
        el-dialog>
        <el-table :data="userlist" stripe>
             <el-table-column
                prop="id"
                label="ID">
            el-table-column>
            <el-table-column
                prop="name"
                label="姓名">
            el-table-column>
             <el-table-column
                prop="sex"
                label="性别">
            el-table-column>
            <el-table-column
                prop="address"
                label="地址">
            el-table-column>
            <el-table-column
                prop="age"
                label="年龄">
            el-table-column>
            <el-table-column
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="openDialog(scope.row)" type="text" size="small">删除el-button>
                template>
            el-table-column>
        el-table>

         <el-pagination background
            :page-sizes="[10,30, 50, 100]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total,prev,sizes, pager, next"
            :total="total">
        el-pagination>
    div>
template>

<script>
import axios from "axios"
export default {
    data(){
        return{
            userlist:[],
            pageNum:1,
            pageSize:10,
            dialogVisible:false,
            deleteId:-1,
            total:0,
        }
    },
    created(){
        this.getUserList();
    },
    methods:{
        getUserList(){
            axios.get('/api/user/getList',{
                params:{
                    pageNum:this.pageNum,
                    pageSize:this.pageSize
                }
            }).then(response=>{
                this.userlist = response.data.list;
                this.total = response.data.total;
            })
        },
        //改变每页条数
        handleSizeChange(pageSize){
            this.pageNum  = 1;
            this.pageSize =pageSize;
            this.getUserList();
        },
        //改变当前页码
        handleCurrentChange(pageNum){
            this.pageNum =pageNum;
            this.getUserList();
        },
        openDialog(row){
            this.dialogVisible = true;
            this.deleteId = row.id;
        },
        handleClose(){
          this.deleteUser();
          this.dialogVisible = false;
        },
        deleteUser(){
            axios.delete('/api/user/delete', {    
                data: {    //请求参数放在请求体  如果是params  参数是拼在url后面的
                    id: this.deleteId
                }
                }).then(res => {
                    this.getUserList();
                    console.log(res)
                })
        }
    }
}
script>