iPad备份软件哪个好？好用的苹果备份软件推荐-CFANZ编程社区

文章目录

- MokeJs使用实例

MokeJs使用实例

介绍

在这里插入图片描述

使用

安装

npm install mockjs --save-dev  
# 或者  
yarn add mockjs --dev

配置文件

在你的项目中创建一个专门用于配置 Mock 的文件，例如 mock/index.js。在这个文件中，你可以定义你的 Mock 数据和请求规则
在这里插入图片描述

// mock/index.js  
import Mock from 'mockjs';  

  
// 定义一个简单的 GET 请求的 Mock，返回一个用户对象  
Mock.mock('/user', 'get', {    
  status: 200, // 通常使用 status 而不是 code，但取决于你的后端 API 约定  
  message: 'success',    
  data: {    
    'username': '@cname', // 使用 Mock.js 的随机数据生成器来生成一个中文名字  
    'age|18-60': 1 // 生成一个 18 到 60 之间的随机年龄  
    // 你可以在这里添加更多的用户属性  
  }    
});

导入配置到main.js

在你的 Vue 3 项目的入口文件（通常是 main.js 或 main.ts）中引入你创建的 Mock 配置文件。
在这里插入图片描述

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from 'axios'
import store from './store'
import './mock'; 

// axios.defaults.baseURL="http://localhost:8088"
const app = createApp(App)

app.config.globalProperties.$http = axios

app.use(store)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

使用 axios 发送网络请求测试（如果不会axios，具体可以见上篇文章axios）

axios教程

在这里插入图片描述

<template>
    <div>
        <h1>{{ title }}</h1>
    </div>
</template>

<script>
import axios from 'axios';
import { onMounted } from 'vue';
export default {
    name:"Movie",
    props:["title"],
    data:function name(params) {
        return {
           
        }
    },
    created:function(){
        console.log("movie is creating")
        axios.get("/user").then(function(res){
            console.log(res)
        })
    }
}


</script>

在这里插入图片描述
这里发送一个向本地 user 的地址，也就是我们的前端服务器

下面的mock也只要接受这样一个user接口的请求就好，其实默认就是我们的前端服务器，在我这里就是

启动项目后

启动示例

在这里插入图片描述
可以看见数据被接受到了

最后值得注意一点，在浏览器的网络请求中，并不会出现。

在这里插入图片描述

所以我们可以看见控制台能够有数据打印，但是浏览器的请求栏是空的
在这里插入图片描述