jQuery、React、Vue集成mockjs

最新推荐文章于 2022-08-23 09:55:29 发布

qq_37511464

最新推荐文章于 2022-08-23 09:55:29 发布

阅读量126

点赞数

分类专栏：集成开发环境文章标签： js vue jquery react

本文链接：https://blog.csdn.net/qq_37511464/article/details/112820098

版权

集成开发环境专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery集成mockjs

使用script引入mock、jquery依赖，运行如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://mockjs.com/dist/mock.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <title>Document</title>
</head>
<body>
    <button id="click">点击</button>
    <script>
        $('#click').click(function(){
            $.ajax({
                url: "http://www.baiduxx.com",
                dataType: "json",
                type: "get"
            }).done(function(data, status, xhr){
                console.log(data, null, 2);
            })
        })
        Mock.mock("http://www.baiduxx.com",{
            "user|1-3":[ //随机1-3个用户
                {
                    "id|+1":0, // id自增长1
                    "name":"@cname",  // 随机中文名
                    "birthDay":"@date('yyyy-MM-dd')", // 随机时间
                    "address":"@province @city @county", // 时间地址
                    "email":"@email",  // 随机email
                }
            ]
        })
    </script>
</body>
</html>

点击按钮，打开控制台，出现如下效果，在network中也没有网络请求，说明mock拦截请求成功

在这里插入图片描述

React集成mockjs

安装react、vue需要先安装nodejs环境

npx create-react-app my-app
cd my-app #切换到my-app文件夹下
yarn add axios mockjs
npm start

// App.js文件
import './App.css';
import React from "react";
import axios from "axios";

class App extends React.Component {
  click(){
    axios.get('http://www.baiduxxx.com').then(({data})=>{
      console.log(data);
    })
  }
  render(){
    return (
      <div>
        <button onClick={()=>this.click()}>点击</button>
      </div>
    )
  }
}
export default App;

// main.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Mock from "mockjs";
Mock.mock("http://www.baiduxxx.com",{
    "user|1-3":[ //随机1-3个用户
        {
            "id|+1":0, // id自增长1
            "name":"@cname",  // 随机中文名
            "birthDay":"@date('yyyy-MM-dd')", // 随机时间
            "address":"@province @city @county", // 时间地址
            "email":"@email",  // 随机email
        }
    ]
})

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

点击按钮出现如下效果说明mock拦截成功

Vue集成mockjs

npm install -g @vue/cli
vue create my-project
切换到my-project目录下
npm install -S axios mockjs # 安装依赖

// App.vue
<template>
  <div id="app">
    <button @click="click">点击</button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'App',
  methods:{
    click(){
      axios.get('http://www.baiduxxx.com').then((data)=>{
        console.log(data);
      })
    }
  }
}
</script>

<style>
xxx
</style>

// main.js
import Vue from 'vue'
import App from './App.vue'
import Mock from "mockjs";
Mock.mock("http://www.baiduxxx.com",{
    "user|1-3":[ //随机1-3个用户
        {
            "id|+1":0, // id自增长1
            "name":"@cname",  // 随机中文名
            "birthDay":"@date('yyyy-MM-dd')", // 随机时间
            "address":"@province @city @county", // 时间地址
            "email":"@email",  // 随机email
        }
    ]
})

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

点击按钮出现如下效果说明拦截成功

在这里插入图片描述

qq_37511464

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery、React、Vue集成mockjs

jQuery集成mockjs使用script引入mock、jquery依赖，运行如下代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://mockjs.co
复制链接

扫一扫