Vue项目开发实战之使用Vue Cli4.3.1脚手架开发模式下实现axios请求本地json数据

最新推荐文章于 2024-04-25 19:27:19 发布
最新推荐文章于 2024-04-25 19:27:19 发布
阅读量296 收藏 1
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46115723/article/details/106162999
版权

相信大家在开发项目的时候一定会遇到后端接口还未写好,但是一些数据又需要使用后端的数据来渲染页面的情况,这时候我们可以选择使用RAP2随机假数据或者是自己写本地json数据来模拟数据的请求,但是这时候却又不知道如何来请求本地json数据

首先安装axios依赖

npm install axios --save

然后在public文件夹下创建data文件夹用于存放本地json数据

在这里插入图片描述

最后在需要请求数据的地方引入axios模块,并使用get请求路径 /data/****.json 下的数据,注意路径一定要是 /data下的json文件

在这里插入图片描述
在这里插入图片描述

阿兵呐
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-cli 使用json server在本地模拟请求数据的示例代码
10-19
本篇文章主要介绍了Vue-cli 使用json server在本地模拟请求数据的示例代码，非常具有实用价值，需要的朋友可以参考下
使用Vue Cli4.3.1脚手架实现vue移动端开发中的设定闹铃向用户提示时分的分析
01-08
实现思路,先获取到当前时间以及需要设定的时间,然后计算出来总分钟数,然后将其除以60取整后得到的就是小时,模60得到的就是除了小时外的剩余的不足60的分钟数 请注意:此篇文档只是实现了设定好闹铃后向用户提示还有多...
Vue-cli(四) 项目中引入Axios
weixin_34320724的博客
04-20 1508
为什么80%的码农都做不了架构师？>>> ...
脚手架开发基础
JackChan
06-16 189
脚手架开发基础
简明扼要的axios使用指南
最新发布
2301_79843263的博客
04-25 796
axios是什么？①axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。②axios是 vue 官方推荐使用的 http 库。ajax是什么？①Ajax 并非编程语言。②Ajax 通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。axios和ajax有什么关系?①“实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。
脚手架（一）——脚手架开发入门
lime2019的博客
04-17 2598
脚手架1. 脚手架是什么2. 为什么要开发脚手架3. 脚手架实现原理4. 脚手架开发 1. 脚手架是什么 脚手架本质是一个操作系统的客户端，其通过命令行执行。如： vue create my-vue-app --force 此条命令组成： 主命令 ：vue； command ：create； command的param ：my-vue-app； option ：--force； 2. 为什么要开发脚手架 脚手架核心价值： 自动化：项目重复代码拷贝/Git操作/发布上线操作； 标准化：项目创建/Git
Vue+axios请求本地json
盏茶作酒的博客
04-23 726
axios请求本地json,相关依赖安装 1：npm安装 npm install axios --save 2.在main.js下引用axios import axios from 'axios' //其他vue组件中就可以this.$axios调用使用 Vue.prototype.$axios = axios 一切环境依赖搭建好之后,下面来写个例子：axios请求本地json 1：在static文件夹底下新建json文件，（ 本地JSON文件一定要...
如何开发一个项目脚手架
吴就业
06-14 994
创建一个项目通常需要依赖很多的二/三方组件，我们很难记住每个组件的maven坐标，并且有些组件的初始化工作很繁琐，一堆配置项很难记住。如果没有脚手架，每当需要创建一个新的project，我们通常会选择基于现有的project复制一份，然后修改修改。如果是纯粹的只使用spring的三方组件就能创建一个project，那么我们完全可以使用start.spring.io提供脚手...
在vue-cli3中使用axios获取本地json操作
11-19
在vue-cli3中，公共文件夹由static变成了public 先把要访问的json放到public文件夹下 使用axios的get方法获取，不能用post，不然会报404 axios.get(`./china-main-city/100000.json`) .then((data) => { console...
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
08-27
接下来，我们将讨论如何在 Vue CLI 项目中使用 axios 来请求后台接口。首先安装 axios： ```bash npm install axios ``` 在 `main.js` 文件中引入 axios 并挂载到 Vue 原型上： ```javascript import axios from ...
vue 使用axios请求和vue-cli这种脚手架工具实现跨域传输
Q_MingTao
06-21 542
Vue遇到stylus的坑 作者：秋名 撰写时间：2020 年 6 月 21 日 技术：前端vue使用Axios请求数据，vue 前端服务器代理，使用vue-cli这种脚手架工具实现跨越传输 Axios是什么？用在什么场景？如何使用？：http://www.imooc.com/article/287900 Axios特性 1、可以在浏览器中发送 XMLHttpRequests 2、可以在 node.js 发送 http 请求 3、支持 Promise API 4、拦截请求和响应 5、转换请求数据和响应数据
axios请求本地json
weixin_33985507的博客
10-24 285
在vux的项目中 1，首先，json文件的位置： 原因： 访问服务器文件，应该把json文件放在最外层的static文件夹，这个文件夹是vue-cli内置服务器向外暴露的静态文件夹 2，一定要用get的请求方式，post就会404，亲测 3，请求路径 转载于:https://www.cnblogs.com/wang715100018066/p/7724...
Axios 使用详解
qq_34185872的博客
02-16 3378
拦截器，类似于中间件的概念，是 axios 的核心功能之一，主要是分为两种：请求拦截器和响应拦截器。表示服务器响应的数据类型，可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’使用 axios 暴露出来的 get,post,delete,put 等请求方法，参数设置同第 2 种 axios(url[, config])一般用于对一个目标方法的前置或后置切片操作，可以将一些额外的脏逻辑写到其他的文件中管理，提高目标方法的简洁性。
Axios使用详解
m0_67942533的博客
10-06 5404
Axios使用详解
【vue】在vue-cli2下用axios模拟请求本地数据
Liz's blog hut.
10-24 2753
前请提要： 在未与后台进行交互时，前端先自行对接口进行测试是很有必要的。那么，要如何来模拟数据请求呢？如何请求本地的json文件呢？接下来将会详细说明。 创建一个json文件（存放未知自行选择，这里我选择放在全局目录下）——db.json。 { "student":[ { "name": "Liz&a
axios的基本使用
qq_47701945的博客
09-07 3764
axios的基本使用
[Vue项目实战]登录功能实现
热门推荐
あなたの可愛い41
09-20 1万+
登录功能实现登录概述登录业务流程登录业务的相关技术点登录---token原理分析登录功能实现登录页面的布局 登录概述 登录业务流程 1.在登录页面输入用户名和密码 2.调用后台接口进行验证 3.通过验证之后，根据后台得响应状态跳转到项目主页 登录业务的相关技术点 http是无状态的 通过cookie在客户端记录状态 通过session在服务器端记录状态 通过token方式维持状态 登录—token原理分析 1.登录页面输入用户名和密码进行登录 2.服务器验证通过之后生成该用户的token并返回 3
vue+axios 使用总结教程
123木头人的博客
10-23 2756
1 下载 引用。 npm install axios --save-dev import axios from "axios" 2 这个时候 在组件中使用axios是需要每个组件都引一下axios的，比较麻烦，所以我们这样配置： Vue.prototype.$myAxios = axios; //把axios挂载到vue上，$myAxios这个名称可以自定义 或者你也可以这样： ...
vuecli项目封装使用axios请求并使用
05-28
在 Vue 项目中使用 Axios，一般可以先在项目中安装 Axios： ``` npm install axios --save ``` 然后在需要使用 Axios 的组件中，可以这样引入和使用： ```javascript import axios from 'axios' // 发送 GET ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值