• vue使用axios，mock请求假数据，脱离后端的限制！！！这一篇就够了

    vue使用axios请求本地json文件

    vue使用axios+mock请求本地json文件（axios封装）

     先讲讲思路原理吧 

     （0） 安装mock-js axios  这一步是必然的

    （1）api下的axios是对请求和相应的简单封装

    1. import axios from 'axios';
    2. const service =axios.create({
    3.     timeout:3000
    4. })
    5. //拦截器：
    6. service.interceptors.request.use(
    7.     config=>{
    8.         return config
    9.     },
    10.     err=>{
    11.         console.log(err);
    12.         return Promise.reject(err);
    13.     }
    14. )
    15. //z相应拦截器：
    16. service.interceptors.response.use(
    17.     response=>{
    18.         return response
    19.     },
    20.     err=>{
    21.         console.log(err);
    22.         return Promise.reject(err);
    23.     }
    24. )
    25. export default service;

    2 request1  request12 request3 就是我们的请求接口文件，对应不同的模块，会有不同的接口

    比如   request1，是业务单元接口

    1.  
    2. import axios from './axios'
    3.  
    4. // 业务单元接口
    5. // get请求
    6. export function getListAPI() {
    7.     return axios.get(`/home/getData`)
    8. }
    9. // post请求
    10. export function postListAPI(params) {
    11.     return axios.post(`/login/promise/getMenu`, 
    12.     params)
    13. }

    3先建mock文件夹 以及下面建moke1（对应上面的request1）业务数据，moke2（对应上面的request2）业务数据，moke3（对应上面的request3）业务数据，

    mock1.js如下

    1. import Mock from 'mockjs';
    2. export default{
    3.     getHomeData:()=>{
    4.         return {
    5.             code:2000,
    6.             data:{
    7.                 videoData:[
    8.                     {name:"SpringBoot",value:Mock.Random.float(1000,10000,0,2)},
    9.                     {name:"vue",value:Mock.Random.float(1000,10000,0,2)},
    10.                     {name:"java",value:Mock.Random.float(1000,10000,0,2)},
    11.                     {name:"php",value:Mock.Random.float(1000,10000,0,2)},
    12.                     {name:"node",value:Mock.Random.float(1000,10000,0,2)},
    13.                     {name:"c++",value:Mock.Random.float(1000,10000,0,2)}
    14.                 ]
    15.             }
    16.         }
    17.     },
    18.     gettableData:()=>{
    19.         return {
    20.             code:2000,
    21.             data:{
    22.             Data:[
    23.                 {name:"SpringBoot",buy:Mock.Random.float(1000,10000,0,2),today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    24.                 {name:"vue",buy:Mock.Random.float(1000,10000,0,2),today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    25.                 {name:"java",buy:Mock.Random.float(1000,10000,0,2),today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    26.                 {name:"php",buy:Mock.Random.float(1000,10000,0,2),today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    27.                 {name:"node",buy:Mock.Random.float(1000,10000,0,2),today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    28.                 {name:"c++",buy:Mock.Random.float(1000,10000,0,2),today:Mock.Random.float(1000,10000,0,2),al:Mock.Random.float(1000,10000,0,2)}
    29.                 
    30.                 ]
    31.             }
    32.         }
    33.     },
    34.     gettableDataLine:()=>{
    35.         return {
    36.             code:2000,
    37.             data:{
    38.             Data:[
    39.                 {vue:Mock.Random.float(1000,10000,0,2),java:Mock.Random.float(1000,10000,0,2),php:Mock.Random.float(1000,10000,0,2),node:Mock.Random.float(1000,10000,0,2)},
    40.                 {vue:Mock.Random.float(1000,10000,0,2),java:Mock.Random.float(1000,10000,0,2),php:Mock.Random.float(1000,10000,0,2),node:Mock.Random.float(1000,10000,0,2)},
    41.                 {vue:Mock.Random.float(1000,10000,0,2),java:Mock.Random.float(1000,10000,0,2),php:Mock.Random.float(1000,10000,0,2),node:Mock.Random.float(1000,10000,0,2)},
    42.                 {vue:Mock.Random.float(1000,10000,0,2),java:Mock.Random.float(1000,10000,0,2),php:Mock.Random.float(1000,10000,0,2),node:Mock.Random.float(1000,10000,0,2)},
    43.                 {vue:Mock.Random.float(1000,10000,0,2),java:Mock.Random.float(1000,10000,0,2),php:Mock.Random.float(1000,10000,0,2),node:Mock.Random.float(1000,10000,0,2)},
    44.                 {vue:Mock.Random.float(1000,10000,0,2),java:Mock.Random.float(1000,10000,0,2),php:Mock.Random.float(1000,10000,0,2),node:Mock.Random.float(1000,10000,0,2)}
    45.                 ]
    46.             }
    47.         }
    48.     },
    49.     gettableDataBar:()=>{
    50.         return {
    51.             code:2000,
    52.             data:{
    53.             Data:[
    54.                 {name:"SpringBoot",today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    55.                 {name:"vue",today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    56.                 {name:"java",today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    57.                 {name:"php",today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    58.                 {name:"node",today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    59.                 {name:"c++",today:Mock.Random.float(1000,10000,0,2),al:Mock.Random.float(1000,10000,0,2)}
    60.                 
    61.                 ]
    62.             }
    63.         }
    64.     },
    65.     gettableDataPie:()=>{
    66.         return {
    67.             code:2000,
    68.             data:{
    69.             Data:[
    70.                 {name:"SpringBoot",all:Mock.Random.float(1000,10000,0,2)},
    71.                 {name:"vue",all:Mock.Random.float(1000,10000,0,2)},
    72.                 {name:"java",all:Mock.Random.float(1000,10000,0,2)},
    73.                 {name:"php",all:Mock.Random.float(1000,10000,0,2)},
    74.                 {name:"node",all:Mock.Random.float(1000,10000,0,2)},
    75.                 {name:"c++",al:Mock.Random.float(1000,10000,0,2)}
    76.                 
    77.                 ]
    78.             }
    79.         }
    80.     }
    81. }

    mock2.js如下

    1. import Mock from 'mockjs';
    2. export default{
    3.     getUserData:()=>{
    4.         return {
    5.             code:2000,
    6.             data:{
    7.                 videoData:[
    8.                     {name:"SpringBoot",value:Mock.Random.float(1000,10000,0,2)},
    9.                     {name:"vue",value:Mock.Random.float(1000,10000,0,2)},
    10.                     {name:"java",value:Mock.Random.float(1000,10000,0,2)},
    11.                     {name:"php",value:Mock.Random.float(1000,10000,0,2)},
    12.                     {name:"node",value:Mock.Random.float(1000,10000,0,2)},
    13.                     {name:"c++",value:Mock.Random.float(1000,10000,0,2)}
    14.                 ]
    15.             }
    16.         }
    17.     },
    18.     delData:()=>{
    19.         return {
    20.             code:2000,
    21.             data:{
    22.             Data:[
    23.                 {name:"SpringBoot",buy:Mock.Random.float(1000,10000,0,2),today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    24.                 {name:"vue",buy:Mock.Random.float(1000,10000,0,2),today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    25.                 {name:"java",buy:Mock.Random.float(1000,10000,0,2),today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    26.                 {name:"php",buy:Mock.Random.float(1000,10000,0,2),today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    27.                 {name:"node",buy:Mock.Random.float(1000,10000,0,2),today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    28.                 {name:"c++",buy:Mock.Random.float(1000,10000,0,2),today:Mock.Random.float(1000,10000,0,2),al:Mock.Random.float(1000,10000,0,2)}
    29.                 
    30.                 ]
    31.             }
    32.         }
    33.     },
    34.     addData:()=>{
    35.         return {
    36.             code:2000,
    37.             data:{
    38.             Data:[
    39.                 {vue:Mock.Random.float(1000,10000,0,2),java:Mock.Random.float(1000,10000,0,2),php:Mock.Random.float(1000,10000,0,2),node:Mock.Random.float(1000,10000,0,2)},
    40.                 {vue:Mock.Random.float(1000,10000,0,2),java:Mock.Random.float(1000,10000,0,2),php:Mock.Random.float(1000,10000,0,2),node:Mock.Random.float(1000,10000,0,2)},
    41.                 {vue:Mock.Random.float(1000,10000,0,2),java:Mock.Random.float(1000,10000,0,2),php:Mock.Random.float(1000,10000,0,2),node:Mock.Random.float(1000,10000,0,2)},
    42.                 {vue:Mock.Random.float(1000,10000,0,2),java:Mock.Random.float(1000,10000,0,2),php:Mock.Random.float(1000,10000,0,2),node:Mock.Random.float(1000,10000,0,2)},
    43.                 {vue:Mock.Random.float(1000,10000,0,2),java:Mock.Random.float(1000,10000,0,2),php:Mock.Random.float(1000,10000,0,2),node:Mock.Random.float(1000,10000,0,2)},
    44.                 {vue:Mock.Random.float(1000,10000,0,2),java:Mock.Random.float(1000,10000,0,2),php:Mock.Random.float(1000,10000,0,2),node:Mock.Random.float(1000,10000,0,2)}
    45.                 ]
    46.             }
    47.         }
    48.     },
    49.     editData:()=>{
    50.         return {
    51.             code:2000,
    52.             data:{
    53.             Data:[
    54.                 {name:"SpringBoot",today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    55.                 {name:"vue",today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    56.                 {name:"java",today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    57.                 {name:"php",today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    58.                 {name:"node",today:Mock.Random.float(1000,10000,0,2),all:Mock.Random.float(1000,10000,0,2)},
    59.                 {name:"c++",today:Mock.Random.float(1000,10000,0,2),al:Mock.Random.float(1000,10000,0,2)}
    60.                 
    61.                 ]
    62.             }
    63.         }
    64.     },
    65.     removeData:()=>{
    66.         return {
    67.             code:2000,
    68.             data:{
    69.             Data:[
    70.                 {name:"SpringBoot",all:Mock.Random.float(1000,10000,0,2)},
    71.                 {name:"vue",all:Mock.Random.float(1000,10000,0,2)},
    72.                 {name:"java",all:Mock.Random.float(1000,10000,0,2)},
    73.                 {name:"php",all:Mock.Random.float(1000,10000,0,2)},
    74.                 {name:"node",all:Mock.Random.float(1000,10000,0,2)},
    75.                 {name:"c++",al:Mock.Random.float(1000,10000,0,2)}
    76.                 
    77.                 ]
    78.             }
    79.         }
    80.     }
    81. }

    mock3.js如下

    1.  
    2. export default{
    3.     getMenu:(config)=>{
    4.         const {username,password}=JSON.parse(config.body);
    5.         if(username==='admin'&&password==="123456"){
    6.             return {
    7.                 code:2000,
    8.                 data:{
    9.                     menu:[
    10.                         {
    11.                         path:"/",
    12.                         name:'home',
    13.                         label:"首页",
    14.                         icon:'s-home',
    15.                         url:'Home/Home'
    16.                         },
    17.                         {
    18.                         path:"/video",
    19.                         name:'video',
    20.                         label:"视频管理",
    21.                         icon:'s-home',
    22.                         url:'VideoManager/VideoManager'
    23.                         },
    24.                         {
    25.                         path:"/user",
    26.                         name:'user',
    27.                         label:"用户管理",
    28.                         icon:'s-home',
    29.                         url:'User/User'
    30.                     }
    31.                     ]
    32.                 }
    33.             }
    34.         }
    35.         if(username==='admin1'&&password==="123456"){
    36.             return {
    37.                 code:2000,
    38.                 data:{
    39.                     menu:[
    40.                         {
    41.                         path:"/",
    42.                         name:'home',
    43.                         label:"首页",
    44.                         icon:'s-home',
    45.                         url:'Home/Home'
    46.                         },
    47.                         {
    48.                         path:"/video",
    49.                         name:'video',
    50.                         label:"视频管理",
    51.                         icon:'s-home',
    52.                         url:'VideoManager/VideoManager'
    53.                         },
    54.                         {
    55.                         path:"/user",
    56.                         name:'user',
    57.                         label:"用户管理",
    58.                         icon:'s-home',
    59.                         url:'User/User'
    60.                     },
    61.                     {
    62.                         label:"页面",
    63.                         children:[
    64.                             {
    65.                                 path:"/page1",
    66.                                 label:"页面1",
    67.                                 name:"page1",
    68.                                 url:'Other/OtherOne'
    69.                             },
    70.                             {
    71.                                 path:"/page2",
    72.                                 label:"页面2",
    73.                                 name:"page2",
    74.                                 url:'Other/OtherTwo'
    75.                             }
    76.                         ]
    77.                         }
    78.                     ]
    79.                 }
    80.             }
    81.         }
    82.     },
    83. }

    然后 mock1 mock2  mock3 统一导入到mock.js

    1. import Mock from 'mockjs';
    2. import HomeApi from './mock1';
    3. import UserApi from './mock2';
    4. import loginApi from './mock3';
    5. //设置岩石200-2000ms
    6. Mock.setup({
    7.     timeout:"200-2000",
    8.     //timeout:400
    9. })
    10.  
    11. //拦截的是home/getData
    12. //Mock.mock(/\/home\/getData/,'get',HomeApi.getHomeData);
    13. Mock.mock('/home/getData','get',HomeApi.getHomeData);
    14. Mock.mock('/home/gettableData','get',HomeApi.gettableData);
    15. Mock.mock('/home/echart/line','get',HomeApi.gettableDataLine);
    16. Mock.mock('/home/echart/bar','get',HomeApi.gettableDataBar);
    17. Mock.mock('/home/echart/pie','get',HomeApi.gettableDataPie);
    18.  
    19. //user
    20. Mock.mock('/user/getUserData','get',UserApi.getUserData);
    21. Mock.mock('/user/echart/bar','get',UserApi.delData);
    22. Mock.mock('/user/echart/pie','get',UserApi.removeData);
    23. Mock.mock('/user/gettableData','post',UserApi.editData);
    24. Mock.mock('/user/echart/line','post',UserApi.addData);
    25.  
    26. //login
    27. Mock.mock('/login/promise/getMenu','post',loginApi.getMenu);

    4 main.js 引入mock

    require("./mock/mock")

    5 页面使用

    1. /* eslint-disable vue/no-async-in-computed-properties */
    2. <template>
    3.   <div class="home">
    4.     <div class="content">
    5.       <el-button @click=clickLogin>login post接口el-button>
    6.       
    7.     div>
    8.   div>
    9. template>
    10. <script>
    11. import {getListAPI,postListAPI} from '../api/request1'
    12. export default {
    13.   components:{},
    14.   data() {
    15.     return {
    16.       ruleForm1: {
    17.         phone: "",
    18.         code: "",
    19.       },
    20.       
    21.     };
    22.   },
    23.   computed: {
    24.     
    25.   },
    26.   mounted() {
    27.   this.getData()
    28.   },
    29.   methods: {
    30.     clickLogin(){
    31.       const params ={
    32.         username:'admin',password:"123456"
    33.       }
    34.       postListAPI(params)
    35.       .then((res)=>{console.log(res)})
    36.       .catch((res)=>{console.log(res)})
    37.     },
    38.     getData(){
    39.       getListAPI()
    40.       .then((res)=>{console.log(res)})
    41.       .catch((res)=>{console.log(res)})
    42.     }
    43.   },
    44. };
    45. script>
    46. <style lang="scss" scoped>
    47. @import "./object.scss";
    48. style>

    核心关键  就是mock会劫持axios的请求路径，如果匹配，就会返回mock的数据

    核心关键  就是mock会劫持axios的请求路径，如果匹配，就会返回mock的数据

    核心关键  就是mock会劫持axios的请求路径，如果匹配，就会返回mock的数据

     

    小编不易，大侠们点点关注吧 抱拳！

  • 相关阅读:
    Kotlin编程实战——类与对象(05)
    酷开科技丨大屏购物买买买，酷开系统助力网购模式再升级
    ElasticSearch - ​开启搜索的新境界
    力扣(LeetCode)775. 全局倒置与局部倒置(C++)
    Python filter 用法
    论文解析[4] UNET 3+: A FULL-SCALE CONNECTED UNET FOR MEDICAL IMAGE SEGMENTATION
    Positive Technologies 在迪拜宣布与地区网络安全解决方案提供商开展合作
    每日练习------实现双色球的彩票功能。规则：从36个红球中随机选择不重复的6个数，从15个篮球中随机选择1个组成一注彩票。可以选择买多注。
    CSS3笔记
    网络安全项目简介
  • 原文地址：https://blog.csdn.net/jieweiwujie/article/details/126061564