首页 > 其他分享 >利用mockjs模拟后台数据

利用mockjs模拟后台数据

时间:2023-02-04 14:11:35浏览次数:44  
标签:name res json 模拟 后台 mockjs mock 请求

在Vue项目中,有些数据不是后台服务器返回的,所以我们需要在本地建立一个假服务器来存储一些数据

  安装mockjs

    终端输入: npm i mockjs

  准备本地数据

    在src目录下创建一个mock文件夹,文件夹下准备各种json文件,里面存储数据格式
    注意:json文件格式不能有空格,需要格式化。json文件不需要对外暴露

[
{
    "id":"1",
"imgUrl":"/images/banner1.jpg"
},
{
"id":"2",
"imgUrl":"/images/banner2.jpg"
},
]

    因为我们是模拟的后台数据,但是真正的数据还是在要本地,public/images 里面放置真正的图片

    编写服务器

     在src\mock/index.js下编写服务代码

// 引入mock
import Mock from 'mockjs'
// 引入json数据
import name from './name.json'
// mock方法两个参数,第一个:请求地址,第二个:请求的数据
Mock.mock('/mock/name',
    { code:200,
      data:name 
})

    编写发送请求的接口

     src\api\mockRequest.js

// 这个配置的是mock内部的请求
import axios from "axios";
const requests = axios.create({
  // 所有利用这个配置发请求的都会在前面加上'/mock'
  baseURL:'/mock',
  timeout:5000
});
requests.interceptors.request.use((config)=>{
    return config
})
requests.interceptors.response.use(
    (res)=>{
        return res.data
    },
    (err)=>{
      return err
    })
export default  requests

   src\api\index.js

import mockRequests  from "./mockRequest.js";
// 写各种接口请求,分别暴露                                            
export const  reqGetName = () =>mockRequests.get('/name')

  发送请求  

async  GetTNData({commit}){
      let res = await reqGetName();
      if(res.code == 200){
        data = res.data
      }
    },

  

 

标签:name,res,json,模拟,后台,mockjs,mock,请求
From: https://www.cnblogs.com/bjpfee/p/17091334.html

相关文章

  • GPIO模拟串口TX与RX,波特率115200
    使用单片机的GPIO口去模拟串口的TX与RX进行数据的发送和接收处理,里面主要需要关注的和使用的为:GPIO的初始化,时钟频率的设置,引脚中断的设置。模拟串口的TX:首先初始化......
  • CodeForces - 234E Champions' League(模拟)
    Description: Intheautumnofthisyear,twoRussianteamscameintothegroupstageofthemostprestigiousfootballclubcompetitionintheworld—theUEFA......
  • CF - 807B. T-Shirt Hunt (贪心+模拟)
    DescriptionNotsolongagotheCodecraft-17contestwasheldonCodeforces.Thetop25participants,andadditionallyrandom25participantsoutofthosewhogo......
  • ZOJ4113 Calandar (简单模拟)
    Description:Input OutputSampleInput42019512Monday20195142019512Tuesday201912302019512Friday100000000011100000000011Wednesday201951......
  • 模拟实现不受限制的字符串函数--C语言版
    C语言中提供了许多十分好用的库函数,一旦我们掌握了它们,我们使用C语言写代码就会变得更加得心应手。1.strlenstrlen函数就是计算字符串的长度的,它会一直读取到\0,它的返回值就......
  • 省选模拟辞旧迎新3-5
    省选模拟之辞旧迎新5交通发现到了相同路口后的行动一样所以求出在每个路口从$0$时刻出发到学校所需时间即可从n往前倒推可以在模意义下查询对应的红灯时间段内的......
  • CTU Open Contest 2019 B Beer Bill(模拟)
    题意:计算字符串的价格。给多个字符串,每个串占一行。字符串分两种,一种字符串名为只含有个字符,这种字符串的价格定义为。另一种字符串名为,格式是以数字开头......
  • Portfolio View | 信用组合观点模型 Credit Portfolio View | 麦肯锡(Mckinsey) | 蒙
    Portfolioview-搜索https://cn.bing.com/search?q=Portfolio+view&aqs=edge..69i57&FORM=BESBTB&PC=U531信用组合观点模型_百度百科https://baike.baidu.com/item/信......
  • 用数组模拟大数快速幂
    #include<cstdio>#include<cstring>#include<iostream>#include<algorithm>#include<vector>#include<stdlib.h>#include<queue>#include<map>#include<iomanip>#include<ma......
  • 模拟退火
    模拟退火本质就是优化了的猴子排序.引入了物理金属的退火概念.模拟一个温度\(T\),当\(T\)在较大时,他会尝试跳出当前的解,从而避免进入贪心目光短浅的局面.尝试的概率......