Vue请求本地数据的方法 json-server

已于 2022-07-25 20:23:31 修改
阅读量623 收藏 4
点赞数
分类专栏： Vue
于 2022-07-11 20:24:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ms_Wqh/article/details/125729008
版权

json vue vue.js 前端 javascript

第一步：讲json文件放到根目录下

8c421ba26ec24220a1019717e6a5d933.png

 第二：安装json-server

npm install -g json-server

安装完成后 json-server -v 检查是否安装成功

f1c559966bad400ebc7aa89426e76f49.png

第三步运行：json-server .\data.json   data是自己起的json文件名称

json-server .\data.json

运行成功后我们用浏览器访问  红色框内地址

aff6cd68f8b7409cb2a97789cc9e7a10.png

显示出json数据结果 成功

ac54c721c31b44368b836c9b40a87d6e.png

 

这时候我们可以使用 axios来请求数据

npm i axios

19ff9bd8fd744baf8a4c3b234645fd1f.png

 控制台打印打印到数据极为成功

287f27c09c9545b59d7ccd6594706a34.png

 

 

程序Ms_Wqh
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue请求本地自己编写的json文件的方法
10-17
主要介绍了vue请求本地自己编写的json文件，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue项目利用axios请求本地文件（tsv、json）
weixin_49021347的博客
12-10 1489
1、vue3以下版本，将本地文件放到static文件夹下 this.$axios.get('static/XXX.json').then((res) =>{}) 2、vue3及以上版本，取消了static文件夹，静态文件改存到public文件夹下了。 this.$axios.get('/data/XXX.json').then((res){}) 注意路径不能写成'public/data/XXX.json'，会报404错误 转发api路径代理设置：新版本需手动创建vue.config.js
json-server(利用数据自动生成后端接口)的安装和使用、Vue3中axios的安装、封装和使用
最新发布
qq_63064285的博客
06-11 1030
很容易想到，有时候多个页面需要用到同一个请求地址，仍然有很多重复的代码，并且在渲染页面写请求数据占据了很多空间，不利于维护。为了解决这种问题，我们可以将不同的请求地址封装为一个方法，这样我们只有时只需要调用方法传参就可以获得请求数据了，这里仅提供一个想法，不做具体的介绍。
vue请求本地json文件
03-01 1623
1、在dev-server.js里加入代码： var goodsData = require('../data.json') var router = express.Router() router.get('/goods',function(req,res){ res.json(goodsData) }) app.use(router) 2...
vue发布到云服务器后，访问使用者的电脑上的本地服务
SanOrintea的博客
08-03 764
首先，接口中直接写localhost。发布以后，谁打开localhost就是谁的电脑的ip。因为js文件是下载到个人电脑的浏览器中运行的。，回车，到谷歌浏览器的设置页面。把其中的Block insecure private network requests改为disable。其次，谷歌浏览器有一项服务名为：Block insecure private network requests.发布以后，小A打开这个网页，小A的个人电脑中启动了个服务，如何让网页调取小A的服务？百度这个，是这个引起的。...
vue中的请求
m0_64344470的博客
05-11 115
在修改数据之后立即使用这个方法，获取更新后的 DOM。第一个参数是请求的地址，第二参数的是post要发送的数据对象，第三个是post指定提交的标头。1、v-rescouce是基于vue的，所以先引入vue才能使用resource。三、Vue.nextTick( [callback, context] )方法。2、要修改标头的话再重新new一个实例化，将参数放入这个实例化当中。1、用法：axios.get/post。2、用法：this.$http。二、axios的使用。
Vue-cli 使用json server在本地模拟请求数据的示例代码
10-19
通过在本地创建一个json文件作为数据库，并使用json server来运行一个本地服务器，开发者可以模拟后端API，进行数据请求。 json server的基本使用方法如下： 1. 首先需要在项目中安装json server和axios，json ...
Vue请求JSON Server服务器数据的实现方法
10-17
本文主要介绍了在Vue.js框架中如何请求和获取JSON Server服务器中托管的数据。JSON Server是一个简单的REST API服务器，允许你通过一个JSON文件来模拟数据库，非常适合前端开发者用来学习或者测试前端功能而不需要...
vue-resource + json-server模拟数据的方法
10-19
在Vue项目中通常需要配置代理，以解决前端开发时的跨域问题，json-server运行在本地的另一个端口，此时可以通过webpack配置代理，将所有/api路径的请求代理到json-server运行的地址。这通常在config/index.js中配置...
Vue使用json-server进行后端数据模拟功能
10-18
在开发基于Vue的Web应用时，模拟后端数据是一个常见的需求，尤其是在前后端分离的开发模式下。传统的做法是搭建一个完整的后端服务来提供数据，但这种方法耗时且可能影响开发效率。为了解决这个问题，可以使用json-...
详解vue-cli项目中用json-sever搭建mock服务器
10-19
在`config/index.js`文件中，找到proxyTable配置项，添加一个新的条目，将请求路由到本地json-server。例如，将所有以`/api`开头的请求代理到`http://localhost:8081`。 5. **运行和测试**： 修改`package.json`...
vue2、vue3中使用axios请求本地json数据的详细过程
热门推荐
Jeasu_0908的博客
07-09 1万+
研究背景 在我们平常写demo的时候难免需要自己模拟一些数据去调用，那么如何请求本地的json数据呢，下面将要从0开始，讲一下请求本地json数据的详细过程，途中遇到的问题及解决方法 技术选型 我们选择那种方式来请求数据呢，是要根据当前项目环境来选择，一般来说常用的是jquery的$.getJSON( ) 方法 和 ajax/axios ,由于当前vue工程是由vue-cli搭建的，我们 选用axios去请求 步骤： 1、安装axios npm install axios --save 2、在main.j
前端简单实现分页功能，无后端静态官网，请求本地json列表
guochangheng的博客
06-16 454
最近在做公司静态官网，无后端支持，新闻列表使用本地json数据形式获取，以下是简单的分页功能实现，写的比较仓促，后续再优化。
vue请求本地路径GET http://localhost:8080/.... 404 (Not Found)
weixin_48203270的博客
12-17 6496
vue请求本地路径GET http://localhost:8080/.... 404 (Not Found)
vue3 访问数据库中的数据
m0_52411807的博客
06-20 4401
在VsCode新建名为code的文件夹 (4)编写模块 路由模块 引入express use_router.js 数据库模块 引入mysql index.js 数据控制模块 user_ctrl.js app.js 5.数据库表 ##（5）测试
vue获取本地IP地址 自动配置本地请求地址
代码小疯子
06-28 3018
这个背景是这样的，就是我运行这个 Vue 代码，然后再每次本机运行的时候,我的服务器是也是本地启动的，然后我每换一个环境环境，然后咱们这个IP就变了，所以我希望在我的配置文件中我启动的是调试模式的时候，他自动给我获取获取这个本机的这个地址。...
本地模拟请求json数据
weixin_44862325的博客
03-03 1370
1.新建一个json的文件 用来写json数据 json数据格式如下： [ { "name": "A", "id": 1, "info": "我是一个信息" }, { "name": "B", "id": 2, "info": "我是一个信息" } ] 2.发送请求 (请求本地的json数据) $.ajax({ ur...
vue架构的前端如何访问本地的接口
small_33的博客
07-17 6533
额。。。。这个算不算跨域问题珊妹儿也不清楚，有经验的大佬可以指导一下！ 首先在项目目录下的config/index.js文件中的proxyTable{ }中加入这段代码： '/api': { //使用"/api"来代替"http://f.apiplus.c" target: 'http://shanshan.com', //源地址，这个是本地接口配置的域名 c...
VUE项目中使用node.js搭建server连接本地mysql数据库
LLDD2014425程序猿
02-29 1万+
最近在研究vue项目中使用node.js搭建server服务器，链接本地mysql数据库，进行数据操作。 准备工作： 1.vue 2.node.js 3:mysql 前面两项对于入行前端的小伙伴应该不是问题了吧， 如果有的话，可以参考vue安装项目。 我选用的vue-cli构建项目，我好久没有用vue了，才发现快落伍了，现在3.0版本使用的vue create < project-name&...
vue3 + typescript +json-server +axios 写一个登录功能
05-16
npm install vue@next vue-router@next vuex@next axios json-server --save npm install --save-dev typescript @types/node @types/vue @types/vue-router @types/vuex ``` 接下来，我们先创建一个 `api.ts` 文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值