使用Mock进行前端接口开发

mock的使用

1 安装mock npm i mockjs --save-dev
2 在src文件夹中创建mock文件夹(里面对应的需要数据列如mock.js)
3 在main引入mock.js
4 然后在页面里面使用

一：安装mock数据

使用命令 npm install mockjs --save-dev

二：在src下创建mock.js文件

在这里插入图片描述

三：mock.js文件内容如下图所示：

// src/mock/mock.js

const Mock = require('mockjs')
const Random = Mock.Random

const getResource = () => {
    
    
    let resources = []
    for (let i = 0; i < 10; i++) {
    
    
        resources.push({
    
    
            id: Random.date() + ' ' + Random.time(),
            label: '一级' + Random.csentence(2, 5),
            children: [{
    
    
                label: '二级 1-1-1'
            }]
        })
    }
    return resources
}
/**
 * 格式： Mock.mock(url, post/get , 返回的数据)；
 * 当post或get请求到路由的时候mock会拦截并返回
 * 注意写全路径
 **/
Mock.mock('http://localhost:8088/getResource', 'get', getResource())

// src/mock/use.js

const Mock = require('mockjs')
const Random = Mock.Random
const getuser = () => {
    
    
    let List = []
    const count = 100
    for (let i = 0; i < count; i++) {
    
    
        List.push(Mock.mock({
    
    
            or:Mock.mock({
    
    "string|1-10": "★"}),
            id: Random.guid(),
            name: Random.cname(),
            addr: Mock.mock('@county(true)'),
            'age|18-60': 1,
            birth: Random.date(),
            sex: Random.integer(0, 1)
        }))
        return List
    }
}
Mock.mock('/regit', 'get', getuser())

PS：像这种使用如何使用
在这里插入图片描述

四：在VUE的主工程main.js里引入mock

import '../src/mock/mock.js'

五：在项目中需要使用mock的地方调用

<script>
import mock from '../../src/mock/mock'
import axios from 'axios'
export default {
    
    
 created(){
    
    
     this.listman()
 },
 methods:{
    
    
    listman(){
    
    
        axios.get('/user').then(res=>{
    
    
        console.log(res)
        })
    } 
 }
}
</script>

mock(登录/增/删/改/查数据)

参考的这个来写的

目录
 api文件夹{
    
    
   api.js
   index.js
 }
 mock文件夹{
    
    
   data文件夹
   user.js
   index.js
   mock.js

在这里插入图片描述

这里面是使用了Axios-Mock-Adapter结合mock使用

安装配置

使用npm安装
npm i axios  // 安装axios
npm i mockjs // 安装mockjs
（通过mock模拟假数据)
npm i axios-mock-adapter --save-dev //安装...你懂的
(axios-mock-adapte 即axios的模拟调试器，通过axios模拟调用后台)

然后在main.js里面配置
import Mock from './mock/mock'

import axios from 'axios';
let base = '';
export const requestLogin = params => {
    
    
  return axios.post(`${
      
      base}/login`, params).then(res => res.data);
};
// 获取用户(分页)
export const getUserListPage = params => {
    
    
  return axios.get(`${
      
      base}/user/listpage`, {
    
    
    params: params
  });
};
// 删除
export const removeUser = params => {
    
    
  return axios.get(`${
      
      base}/user/remove`, {
    
    
    params: params
  });
};
// 批量删除
export const batchRemoveUser = params => {
    
    
  return axios.get(`${
      
      base}/user/batchremove`, {
    
    
    params: params
  });
};
// 编辑
export const editUser = params => {
    
    
  return axios.get(`${
      
      base}/user/edit`, {
    
    
    params: params
  });
};

// 添加
export const addUser = params => {
    
    
  return axios.get(`${
      
      base}/user/add`, {
    
    
    params: params
  });
};

index.js

import * as api from './api';

export default api;

mock文件夹

index.js文件

import mock from './mock';

export default mock;

mock.js文件

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import {
    
    
  LoginUsers,
  Users
} from './data/user';
let _Users = Users;
export default {
    
    
  bootstrap() {
    
    
    let mock = new MockAdapter(axios);

    // mock success request
    mock.onGet('/success').reply(200, {
    
    
      msg: 'success'
    });

    // mock error request
    mock.onGet('/error').reply(500, {
    
    
      msg: 'failure'
    });

    //登录
    mock.onPost('/login').reply(config => {
    
    
      let {
    
    
        username,
        password
      } = JSON.parse(config.data);
      return new Promise((resolve, reject) => {
    
    
        let user = null;
        setTimeout(() => {
    
    
          let hasUser = LoginUsers.some(u => {
    
    
            if (u.username === username && u.password === password) {
    
    
              user = JSON.parse(JSON.stringify(u));
              user.password = undefined;
              return true;
            }
          });
          if (hasUser) {
    
    
            resolve([200, {
    
    
              code: 200,
              msg: '请求成功',
              user
            }]);
          } else {
    
    
            resolve([200, {
    
    
              code: 500,
              msg: '账号或密码错误'
            }]);
          }
        }, 500);
      });
    });

    
    //获取用户列表（分页）
    mock.onGet('/user/listpage').reply(config => {
    
    
      let {
    
    
        page,
        name
      } = config.params;
      let mockUsers = _Users.filter(user => {
    
    
        if (name && user.name.indexOf(name) == -1) return false;
        return true;
      });
      let total = mockUsers.length;
      mockUsers = mockUsers.filter((u, index) =>
        index < 20 * page && index >= 20 * (page - 1)
      );
      return new Promise((resolve, reject) => {
    
    
        setTimeout(() => {
    
    
          resolve([200, {
    
    
            total: total,
            users: mockUsers
          }]);
        }, 500);
      });
    });

    // 删除用户
    mock.onGet('/user/remove').reply(config => {
    
    
      let {
    
    
        id
      } = config.params;
      _Users = _Users.filter(u => u.id !== id);
      return new Promise((resolve, reject) => {
    
    
        setTimeout(() => {
    
    
          resolve([200, {
    
    
            code: 200,
            msg: '删除成功'
          }]);
        }, 500);
      });
    });

    // 批量删除用户
    mock.onGet('/user/batchremove').reply(config => {
    
    
      let {
    
    
        ids
      } = config.params;
      ids = ids.split(',');
      _Users = _Users.filter(u => !ids.includes(u.id));
      return new Promise((resolve, reject) => {
    
    
        setTimeout(() => {
    
    
          resolve([200, {
    
    
            code: 200,
            msg: '删除成功'
          }]);
        }, 500);
      });
    });

    //编辑用户
    mock.onGet('/user/edit').reply(config => {
    
    
      let {
    
    
        id,
        name,
        addr,
        age,
        birth,
        sex
      } = config.params;
      _Users.some(u => {
    
    
        if (u.id === id) {
    
    
          u.name = name;
          u.addr = addr;
          u.age = age;
          u.birth = birth;
          u.sex = sex;
          return true;
        }
      });
      return new Promise((resolve, reject) => {
    
    
        setTimeout(() => {
    
    
          resolve([200, {
    
    
            code: 200,
            msg: '编辑成功'
          }]);
        }, 500);
      });
    });

    //新增用户
    mock.onGet('/user/add').reply(config => {
    
    
      let {
    
    
        id,
        name,
        addr,
        age,
        birth,
        sex
      } = config.params;
      _Users.push({
    
    
        id: id,
        name: name,
        addr: addr,
        age: age,
        birth: birth,
        sex: sex
      });
      return new Promise((resolve, reject) => {
    
    
        setTimeout(() => {
    
    
          resolve([200, {
    
    
            code: 200,
            msg: '新增成功'
          }]);
        }, 500);
      });
    });

  }
}

data文件夹
{ user.js}

import Mock from 'mockjs';
const LoginUsers = [{
    
    
  id: 1,
  username: 'admin',
  password: '123456',
  name: '张某某'
}];
const Users = [];
for (let i = 0; i < 100; i++) {
    
    
  Users.push(Mock.mock({
    
    
    id: Mock.Random.guid(),
    name: Mock.Random.cname(),
    sex: Mock.Random.integer(0, 1),
    'age|18-60': 1,
    birth: Mock.Random.date(),
    addr: Mock.mock('@county(true)'),
  }));
}

export {
    
    
  LoginUsers,
  Users
};

PS // 这个是模拟的登录增删改查带分页的 // 内部的查mock定义好的可以直接用

vue中Mock及Axios-Mock-Adapter模拟调试器的使用

对应的页面效果

如果看更仔细的前往我的码云

直达本人码云地址

!<template>
  <div class="main">
    <div style="display: flex; justify-content:space-between;">
      <div style="width:100px !important; margin:30px 130px">
        <el-button type="primary" @click="btnreturn">增加</el-button>
      </div>
      <!-- 添加==编辑 页面 -->
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="btnAdd">
        <el-form ref="editForm" :model="userform" :rules="editFormRules">
          <!-- 定义验证的时候必填prop的值 -->
          <!-- 
             表单验证数字
          onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"-->
          <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
            <el-input v-model="userform.name" maxlength="6" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input
              v-model="userform.age"
              @input="e => userform.age = validForbid(e)"
              maxlength="3"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-input v-model="userform.sex" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input v-model="userform.addr" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="生日" :label-width="formLabelWidth">
            <el-input v-model="userform.birth" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="btnAdd = false">取 消</el-button>
          <el-button type="primary" v-if="dialogStatus=='create'" @click="btnagree">添加</el-button>
          <el-button type="primary" v-else @click="updateData">修改</el-button>
        </div>
      </el-dialog>
      <div style="margin: 30px">
        <el-input
          clearable
          style="width:200px; margin-right:30px;"
          v-model="name"
          placeholder="请输入内容"
        ></el-input>
        <el-button type="warning" @click="getList">查询</el-button>
      </div>
    </div>
    <!-- right -->
    <div class="table-right">
      <div class="right-one"></div>
      <!-- 使用elem的table -->
      <div class="right-two">
        <span class="footer-sp">总数{
    
    {
    
    total}}个</span>
        <el-table
          ref="multipleTable"
          v-loading="loading"
          class="elTable"
          :data="tableList"
          stripe
          style="width: 100%"
          @selection-change="selschange"
        >
          <el-table-column type="selection" width="130" prop="id" label="ID"></el-table-column>
          <el-table-column width="130" prop="name" label="姓名"></el-table-column>
          <el-table-column width="130" prop="age" label="年龄"></el-table-column>
          <el-table-column width="130" prop="addr" label="地址"></el-table-column>
          <el-table-column width="130" prop="sex" label="性别"></el-table-column>
          <el-table-column width="130" prop="birth" label="生日"></el-table-column>
          <el-table-column class="editD" width="130" label="编辑">
            <template slot-scope="scope">
              <el-button type="success" @click="handleEdit(scope.$index,scope.row)" size="mini">编辑</el-button>
              <el-button type="info" @click="handleDel(scope.$index,scope.row)" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <div>
      <!-- :disabled 禁用 -->
      <el-button
        class="batch"
        type="danger"
        @click="batchRemove"
        :disabled="this.sels.length===0"
      >批量删除</el-button>
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="200"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import FileSaver from "file-saver";
import {
    
    
  getUserListPage, //列表
  removeUser, //删除
  batchRemoveUser, //批量删除
  editUser, //更新
  addUser //添加
} from "../api/api";
import XLSX from "xlsx";
export default {
    
    
  data() {
    
    
    return {
    
    
      sels: [], //列表选中列
      name: "", //查询的input 这个查询过滤咋回事是mock那边写好了这边直接这样来写就可
      editFormRules: {
    
    
        name: [{
    
     required: true, message: "请输入姓名", trigger: "blur" }]
      },
      dialogStatus: "",
      textMap: {
    
    
        update: "编辑",
        create: "新增"
      },
      loading: false,
      input: "",
      oldtime: 3,
      total: "", //定义总数
      page: 1, //页码
      limit: "", //页数 因为mock这定义好了 这边定义空
      disable: false,
      btnAdd: false,
      userform: {
    
    
        name: "",
        age: "",
        sex: "",
        addr: "",
        birth: ""
      },
      formLabelWidth: "120px",
      guide: null,
      tableList: []
      // 验证必填提示
    };
  },
  created() {
    
    
    this.getList(this.page);
  },
  methods: {
    
    
    // 点击批量删除
    batchRemove() {
    
    
      let ids = this.sels.map(item => item.id).toString();
      this.$confirm("确认删除选中记录吗？", "提示", {
    
    
        type: "warning"
      }).then(res => {
    
    
        let params = {
    
     ids: ids };
        batchRemoveUser(params).then(res => {
    
    
          this.$message({
    
    
            message: "删除成功",
            type: "success"
          });
           this.getList(); 
        });
      });
    },
    // 点击对应的勾选
    selschange(sels) {
    
    
      this.sels = sels;
      // 这里的勾选直接打印的是对应的对象信息
      console.log(sels, "12121");
    },
    // 删除
    handleDel(index, row) {
    
    
      // 删除是对应的id为参
      this.$confirm("确认删除该记录吗?", "提示", {
    
    
        type: "warning"
      }).then(() => {
    
    
        let params = {
    
     id: row.id };
        removeUser(params).then(res => {
    
    
          this.$message({
    
    
            message: "删除成功",
            type: "success"
          });
          this.getList();
        });
      });
    },
    // 新增
    btnreturn(e) {
    
    
      this.dialogStatus = "create";
      this.btnAdd = true;
      this.userform = {
    
    
        //添加绑定值
        id: "",
        name: "",
        age: "",
        sex: "",
        addr: "",
        birth: ""
      };
    },
    //新增确定按钮
    btnagree() {
    
    
      //这个refs的后缀与ref相对应
      this.$refs.editForm.validate(valid => {
    
    
        //表单验证
        if (valid) {
    
    
          this.$confirm("确认提交吗？", "提示", {
    
    }).then(() => {
    
    
            let params = Object.assign({
    
    }, this.userform);
            addUser(params).then(res => {
    
    
              this.$message({
    
    
                message: "提交成功",
                type: "success"
              });
              this.btnAdd = false;
              this.getList();
            });
          });
        }
      });
    },
    // 点击编辑
    handleEdit(index, row) {
    
    
      this.btnAdd = true;
      this.dialogStatus = "update";
      this.userform = Object.assign({
    
    }, row);
    },
    // 点击修改
    updateData() {
    
    
      this.$refs.editForm.validate(valid => {
    
    
        if (valid) {
    
    
          this.$confirm("确认提交吗?", "提示", {
    
    }).then(() => {
    
    
            let params = Object.assign({
    
    }, this.userform);
            editUser(params).then(res => {
    
    
              this.$message({
    
    
                message: "提交成功",
                type: "success"
              });
              this.btnAdd = false;
              this.getList();
            });
          });
        }
      });
    },
    // 分页
    handleCurrentChange(page) {
    
    
      this.page = page;
      this.getList(this.page, this.limit);
    },
    // 列表
    getList() {
    
    
      this.loading = true;
      let params = {
    
    
        page: this.page,
        name: this.name
      };
      getUserListPage(params).then(res => {
    
    
        this.total = res.data.total;
        this.tableList = res.data.users;
        this.newListData = res.data.users;
        this.loading = false;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
    
    
  cursor: pointer;
  .batch {
    
    
    margin-left: 110px;
  }
  /deep/.el-input {
    
    
    width: 80%;
  }
  .el-form {
    
    
    padding: 20px 20px 10px;
  }
  /deep/.el-dialog__body {
    
    
    padding: 0 !important;
  }
}
/deep/.el-table td.el-table__cell div {
    
    
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
}
/deep/.el-pagination {
    
    
  text-align: center !important;
  margin-top: 30px !important;
}
.table-right {
    
    
  display: flex;
  justify-content: space-between;
  .right-one {
    
    
    flex: 1;
  }
  .right-two {
    
    
    flex: 9;
  }
}
.elTable {
    
    
  /deep/.el-table__cell {
    
    
    text-align: center;
    padding: 0 !important;
  }
  /deep/tr {
    
    
    height: 30px !important;
  }
}
</style>