vue项目使用mockjs具体步骤

最新推荐文章于 2024-03-05 20:53:18 发布

最冷一天.

最新推荐文章于 2024-03-05 20:53:18 发布

阅读量329

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_61603704/article/details/131530843

版权

vue项目使用mockjs具体步骤

在项目中安装 mockjs 和 axios

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

在 api 目录下新建 request.js 和需要用到的 getMockData.js 文件

request.js

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

getMockData.js

import axios from '../request'
//数据列表接口
export const getList = () => axios.get("/list")

在 src 目录下，配置接口详情，新建 mock 文件夹，创建 mockServer.js 文件

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

Mock.mock('http://localhost:8080/list', {
  code: 0, data:
  {
    'data|1000': [
      {  
        id: '@id',//随机id
        name: '@name',//随机名称
        nickName: '@last',//随机昵称
        phone: /^1[34578]\d{9}$/,//随机电话号码
        'age|11-99': 1,//年龄
        address: '@county(true)',//随机地址
        email: '@email',//随机邮箱
        isMale: '@boolean',//随机性别
        createTime: '@datetime',//创建时间
        avatar() {
          //用户头像
          return Mock.Random.image('100×100', Mock.Random.color(), '#757575', 'png', this.nickName)
        }
      }
    ]
  }

})

在 main.js 中导入 mockServer

import './mock/mockServer'

预览页面获取数据后的效果

<template>
 <div>
  <el-table :data="tableData" style="width: 600px;margin: 0 auto">
   <el-table-column label="随机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="姓名" width="180">
    <template slot-scope="scope">
     <el-popover trigger="hover" placement="top">
      <p>姓名: {{ scope.row.name }}</p>
      <p>住址: {{ scope.row.address }}</p>
      <div slot="reference" class="name-wrapper">
       <el-tag size="medium">{{ scope.row.name }}</el-tag>
      </div>
      <p>邮箱: {{ scope.row.email }}</p>
      <p>性别: {{ scope.row.isMale }}</p>
      <p>昵称: {{ scope.row.nickName }}</p>
      <p>手机号: {{ scope.row.phone }}</p>
      <p>头像：</p>
     </el-popover>
    </template>
   </el-table-column>
   <el-table-column label="操作">
    <template slot-scope="scope">
     <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
      >编辑</el-button
     >
     <el-button
      size="mini"
      type="danger"
      @click="handleDelete(scope.$index, scope.row)"
      >删除</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: "王小虎",
    //   address: "上海市普陀区金沙江路 1518 弄",
    //  },
    //  {
    //   date: "2016-05-04",
    //   name: "王小虎",
    //   address: "上海市普陀区金沙江路 1517 弄",
    //  },
    //  {
    //   date: "2016-05-01",
    //   name: "王小虎",
    //   address: "上海市普陀区金沙江路 1519 弄",
    //  },
    //  {
    //   date: "2016-05-03",
    //   name: "王小虎",
    //   address: "上海市普陀区金沙江路 1516 弄",
    //  },
   ],
  };
 },
 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>

在这里插入图片描述

特别注意

需要将接口返回的数据 console.log 打印后，才能从控制台看见数据，直接在 network 是看不到请求的接口的
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZBJD0iPq-1688439771975)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230704093956265.png)]$