当前位置: 首页 > news >正文

vue + axios + mock

参考来源:Vue mock.js模拟数据实现首页导航与左侧菜单功能_vue.js_AB教程网

记录步骤:在参考资料来源添加axios步骤

1、安装mock依赖
npm install mock -D //只在开发环境使用

下载完成后,项目文件package.json中的devDependencies就会加上一个mock依赖;

2、添加开发环境及生产环境的配置

我们在config文件夹下的dev.env.js、prod.env.js两个文件里添加配置;

dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {NODE_ENV: '"development"',MOCK: 'true'
})

prod.env.js

'use strict'
module.exports = {NODE_ENV: '"production"',MOCK: 'false'
}
3、引入到main.js(这里引用是本地的地址)

import Mock from "./mock/index";
mock/index.js (两种写法都可以,选择一种)
//index.js
// 引入: mockjs 模块;
import Mock from 'mockjs'// 设置拦截Ajax请求的响应时间,模拟网络延迟Mock.setup({timeout: '200-600'})// 写法一
// Mock.mock('/parameter/query', '', (opts) => {
//   debugger
//   opts['data'] = opts.body ? JSON.parse(opts.body) : null
//   delete opts.body
//   return opts
// })
// 写法二
// Mock.mock('/parameter/query', {
//   name: "@name()",
//   city: "@city()"
// })// 数据必须输出
export default Mock
4、开始使用 axios

配置 request.js  ,在每个接口文件前引用这个文件


/****   request.js   ****/
import axios from 'axios'
//1. 创建新的axios实例
const request = axios.create({// baseURL: '/api', // 公共接口-本地  所有接口地址前面加apitimeout: 30 * 1000, // 超时时间单位是msheaders: {"Content-Type": "application/json",},
})// 2.请求拦截器
request.interceptors.request.use(config => {// config.headers.Authorization = ''; //如果要求携带在请求头中return config;
}, error => {console.log(error)return Promise.reject(error);
})
// 3.响应拦截器
request.interceptors.response.use(response => {return response;}, error => {// console.log(error)return Promise.reject(error);}
)//4.导出文件
export default request

import request from '@/http/request'//第一步文件的地址//自己写的mock地址,后文顺带记录一下mock使用方法
export function mocktest(params) {return request({type: "get",url: '/parameter/query',data: params});
}

到这里就可以在页面直接使用了,想要进一步完善,或者全局引用接口,可以自己封装

<template><el-container><el-header><HeaderBar></HeaderBar></el-header><el-main><MainBar></MainBar></el-main></el-container>
</template><script>
import HeaderBar from "./Header.vue"
import MainBar from "./Main.vue"
//引用一下api文件中写好的方法,要用哪个就写哪个
import { mocktest } from "@/http/api";
// 可以按需引入,可以全局引用
// import api from '@/http'
export default {name: "index",components:{MainBar,HeaderBar},data(){return{}},methods:{},mounted() {//调用封装好的接口mocktest().then(res=>{console.log('res',res)})this.ce()},
}
</script><style scoped></style>

相关文章:

vue + axios + mock

参考来源&#xff1a;Vue mock.js模拟数据实现首页导航与左侧菜单功能_vue.js_AB教程网 记录步骤&#xff1a;在参考资料来源添加axios步骤 1、安装mock依赖 npm install mock -D //只在开发环境使用 下载完成后&#xff0c;项目文件package.json中的devDependencies就会加…...

Mongoose 开源库--json 使用笔记

一、 json相关API mongoose 开源库可以使用json进行数据处理。 ①创建json字符串 // A helper macro for printing JSON: mg_snprintf(buf, len, "%m", MG_ESC("hi")) #define MG_ESC(str) mg_print_esc, 0, (str) char *mg_mprintf(const char *fmt, ...)…...

linux中复制文件如何排除一个目录

误区&#xff1a; 首先使用cp命令的 --exclude参数实不可取的&#xff0c;会造成以下的报错&#xff0c;因为cp命令中压根就没有--exclude这个参数的配置 cp: unrecognized option --exclude‘****’ 问题解决&#xff1a; 我们可以使用rsync工具来完成目录排除的功能&#x…...

时空智友企业信息管理系统任意文件读取漏洞复现

简介 时空智友企业信息管理系统是一个用于企业流程管理和控制的软件系统。它旨在帮助企业实现流程的规范化、自动化和优化&#xff0c;从而提高工作效率、降低成本并提升管理水平。 时空智友企业信息管理系统存在任意文件读取漏洞&#xff0c;攻击者可以在未授权的情况下读取…...

YOLOv8优化:block系列篇 | Neck系列篇 |可重参化EfficientRepBiPAN优化Neck

🚀🚀🚀本文改进: 可重参化EfficientRepBiPAN优化Neck 如何在YOLOv8下使用:1)结合neck; 🚀🚀🚀EfficientRepBiPAN在各个领域都有ying 🚀🚀🚀YOLOv8改进专栏:http://t.csdnimg.cn/hGhVK 学姐带你学习YOLOv8,从入门到创新,轻轻松松搞定科研; 1.原理…...

零代码编程:用ChatGPT批量提取flash动画swf文件中的mp3

文件夹&#xff1a;C:\迅雷下载\有声绘本_flash[淘宝-珍奥下载]\有声绘本 flash&#xff0c;里面有多个flash文件&#xff0c;怎么转换成mp3文件呢? 可以使用swfextract工具从Flash动画中提取音频&#xff0c;下载地址是http://www.swftools.org/download.html&#xff0c;也…...

2023数学建模国赛C题赛后总结

今天国赛的成绩终于出来了&#xff0c;盼星星盼月亮的。之前面试的时候已经把我给推到国奖评委那里去了&#xff0c;可是好可惜&#xff0c;最终以很微小的劣势错失国二。只拿到了广西区的省一。我心里还是很遗憾的&#xff0c;我真的为此准备了很久&#xff0c;虽然当中也有着…...

hiveSQL语法及练习题整理(mysql)

目录 hiveSQL练习题整理&#xff1a; 第一题 第二题 第三题 第四题 第五题 第六题 第七题 第八题 第九题 第十题 第十一题 第十二题 hivesql常用函数&#xff1a; hiveSQL常用操作语句&#xff08;mysql&#xff09; hiveSQL练习题整理&#xff1a; 第一题 我…...

【UE4】UE编辑器乱码问题

环境&#xff1a;UE4.27、vs2019 如何解决 问题原因&#xff0c;UE的编码默认是UTF-8&#xff0c;VS的默认编码是GBK 通过"高级保存选项" 直接修改VS的 .h头文件 的 编码 为 UTF-8 步骤1. 步骤2. 修改编码后&#xff0c;从新编译&#xff0c;然后就可以解决编辑器…...

2 创建svelte项目(应用程序)

官网方式搭建&#xff1a; npm create sveltelatest my-app cd my-app npm install npm run dev 官网中介绍&#xff1a; 如果您使用的是 VS Code&#xff0c;安装 Svelte for VS Code 就可以了&#xff0c;以便语法高亮显示。 然后&#xff0c;一旦您的项目设置好了&#…...

手机怎么打包?三个方法随心选!

有的时候&#xff0c;电脑不在身边&#xff0c;只有随身携带的手机&#xff0c;这个时候又急需把文件打包发送给同事或者同学&#xff0c;如何利用手机操作呢&#xff1f;下面介绍了具体的操作步骤。 一、通过手机文件管理自带压缩功能打包 1、如果是iOS系统&#xff0c;就在手…...

SecureFX如何用Public key 連接sftp

點擊connection 右鍵點開站點的properties 點選SSH2--Authentication---Pulickey 先選擇Putty Key Generator save出來的public key(.pub)文件&#xff08;Putty Key Generator 保存時可能沒加.pub後綴保存&#xff0c;可自行對public key加上後綴.pub&#xff09; 同時注意要…...

BUUCTF 隐藏的钥匙 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 路飞一行人千辛万苦来到了伟大航道的终点&#xff0c;找到了传说中的One piece&#xff0c;但是需要钥匙才能打开One Piece大门&#xff0c;钥匙就隐藏在下面的图片中&#xff0c;聪明的你能帮路飞拿到钥匙&#xff…...

idea使用gradle教程 (idea gradle springboot)2024

这里白眉大叔&#xff0c;写一下我工作时候idea怎么使用gradle的实战步骤吧 ----windows 环境----------- 1-本机安装gradle 环境 &#xff08;1&#xff09;下载gradle Gradle需要JDK的支持&#xff0c;安装Gradle之前需要提前安装JDK8及以上版本 https://downloads.gra…...

本地部署 lama-cleaner

本地部署 lama-cleaner 什么是 lama-cleanerGithub 地址部署 lama-cleaner启动 lama-cleaner 什么是 lama-cleaner lama-cleaner 是一款由 SOTA AI 模型提供支持的免费开源修复工具。 从照片中删除任何不需要的物体、缺陷、人物&#xff0c;或擦除并替换&#xff08;由稳定扩…...

供应链云仓系统:实现采购、销售、收银、路线规划一体化,高效协同,再创商业价值!

供应链云仓系统是一款集合采购、销售、收银、路线规划等多项功能的软件系统&#xff0c;旨在帮助企业实现业务流程的全面自动化和协同化。通过该系统&#xff0c;企业可以轻松管理供应链的各个环节&#xff0c;提高运营效率&#xff0c;降低成本&#xff0c;实现商业价值的最大…...

如何用devtools快速开发一个R语言包?

如何用devtools快速开发一个R语言包&#xff1f; 1. 准备工作2. 如何完整开发一个R包3. 初始化新包4. 启用Git仓库5. 按照目标实现一个函数6. 在.R文件夹下创建文件并保存代码7. 函数测试8. 阶段性总结9. 时不时地检查完整工作状态10. 编辑DESCRIPTION文件11. 配置许可证12. 配…...

1、Sentinel基本应用限流规则(1)

Sentinel基本应用&限流规则 1.1 概述与作用 随着微服务的流行&#xff0c;服务和服务之间的稳定性变得越来越重要。缓存、降级和限流是保护微服务系统运行稳定性的三大利器。 缓存&#xff1a;提升系统访问速度和增大系统能处理的容量 降级&#xff1a;当服务出问题或者影…...

BitBucket 进行代码管理

目的&原因 小团队代码管理&#xff0c;BitBucket 提供免费代码仓库。 创建代码仓库&邀请团队 注册&创建 group&#xff08;workspace&#xff09; 可创建私有通过邮箱 invite 团队成员 创建仓库 要选择所属的 workspace 和 project&#xff08;没有可同时创建&…...

惊艳!拓世法宝AI智能数字人一体机解锁数字文博的全民体验

在数字化的潮流中&#xff0c;我们见证了历史与现代技术的完美融合。在今年的“国际古迹遗址日”&#xff0c;世界首个超时空参与式博物馆“数字藏经洞”正式与公众见面&#xff0c;在这里开启了一场前所未有的文化探索之旅。 时间和空间被艺术化的数字技术巧妙地折叠&#xf…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

c++第七天 继承与派生2

这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分&#xff1a;派生类构造函数与析构函数 当创建一个派生类对象时&#xff0c;基类成员是如何初始化的&#xff1f; 1.当派生类对象创建的时候&#xff0c;基类成员的初始化顺序 …...