【mockjs】数据模拟 | mockjs用法 | mock与axios使用

mockjs简介

• mockjs用处

  • 前端开发必备神器，无需后端，自动生成数据，例如图片，文本，时间等等

• mockjs地址

• https://github.com/nuysoft/Mock/wiki/Mock.Random

• 备用： https://github.com/nuysoft/Mock/wiki/Mock.Random

mockjs安装

cnpm install  mockjs

附axios

npm install axios

---

---

---

mockjs使用

mockjs配置

src/mock/mock.js

import Mock from 'mockjs' 

const Random = Mock.Random

// 延时
Mock.setup({
    timeout: '200-3000'
})

// 请求地址
const home = Mock.mock('/apis/homes', 'get', {
    loginState: {
        code: '@boolean',//是否登录
        touUrl: '@image(75x75, @color)',//头像
        toUrl: '/user/@id'
    },

    // 轮播
    'slide|1-15': [
        {
            toUrl: '/user/@id',
            imgUrl: '@image(, @color)',
        }
    ],

    // 公告
    'notice|0-5': [
        {
            toUrl: '/user/@id',
            txt: '@cword(5,100)',
        }
    ],

})

export { 
    home
}

axios+mockjs 发送网络请求

src/views/HomeView.vue

<template>
 
template>
<script setup>
import axios from 'axios'

axios('/apis/homes')
  .then(res => console.log(res))

script>

效果