vue搭建本地数据接口（jsonserver）

最新推荐文章于 2025-02-19 20:27:34 发布
最新推荐文章于 2025-02-19 20:27:34 发布
阅读量611 收藏 2
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_47664976/article/details/116331068
版权
这篇博客详细介绍了如何使用json-server为Vue项目搭建本地数据接口。首先全局安装json-server，然后创建项目文件夹并初始化package.json。接着在项目中安装json-server作为开发依赖，配置启动命令，并创建如user.json的数据文件。最后通过npm运行json-server启动服务，为Vue应用提供模拟数据。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

全局安装jsonseerver

打开终端在根路径下 npm install -g json-server

2、创建文件夹（名称自定义即可）

在随意位置创建文件夹 jsonserver ，然后cd jsonserver 目录下

3、初始化package.json

在cd jsonserver 目录下 执行 npm init ,然后填写配置信息
在这里插入图片描述
完成后在该文件夹下生成package.json文件

4、在文件夹下cmd中执行npm install json-server --save-dev 安装依赖在这里插入图片描述

5、配置启动方式（命令）

在这里插入图片描述

6、在当前目录下创建user.json文件（名字自定义）

最低0.47元/天 解锁文章
Vue前端开发必备工具——json-server模拟后端服务器
bjzhang75的博客
08-30 1062
Json-server 是一个零代码快速搭建本地 RESTful API 的工具。它使用 JSON 文件作为数据源，并提供了一组简单的路由和端点，可以模拟后端服务器的行为。github地址：https://github.com/typicode/json-servernpm地址：https://www.npmjs.com/package/json-server。
【vue.js】vue中的Ajax——json-server
qq_52499703的博客
09-01 473
一个在前端本地运行，可以存储json数据的server，当后端api未搭建好，前端开发人员可以自行搭建server服务器。
vue json-server
a662852186的博客
06-10 145
安装： npm install json-server --save 　　 配置 D:\workspace\xxx\build\dev-server.js var jsonServer = require('json-server') var jsonServer = new jsonServer() const jsonApiServer = json...
vue中json-server及mockjs后端接口模拟
最新发布
GIS开发
02-19 418
vue中json-server及mockjs后端接口模拟，使用axios请求数据。
vue中使用json-server
hyqhyqhyqq的博客
03-05 1493
1.安装json-server的两个依赖 npm -g i json-servernpm install -g json-server2.安装axios依赖 npm i axios3.全局导入axios使用src目录下main.js文件内 import axios from ‘axios’;4.配置全局默认地址：src目录下main.js文件内 axios.defaults.baseURL = ‘http://localhost:8081’5.创建一个json文件夹，json文件夹内新创一个data.jso
vue使用json-server 模拟数据
qq_45387575的博客
11-09 1682
在package.json文件中，scripts中配置一个mock，该端口号作为访问虚拟数据的端口号。该端口作为脚手架的端口号。
Vue-cli 使用json server在本地模拟请求数据的示例代码
10-19
1. 首先需要在项目中安装json server和axios，json server用于搭建本地模拟API服务，axios用于发送HTTP请求。 ``` npm install json-server --save npm install axios --save ``` 2. 创建一个json文件，例如db....
vue-resource + json-server模拟数据的方法
10-19
最后，我们会看到如何在Vue项目中整合json-server和vue-resource，从而在开发阶段模拟出一个与真实后端接口相似的环境。 首先，我们需要安装vue-resource和json-server。这可以通过npm命令完成，分别在项目根目录下...
前端vue json-server 配置（mock接口数据）
追逐知识的过程最能使我们意识到自己的无知...
08-09 308
xian。
Vue CLI中利用json-server快速搭建mock数据接口教程
在Vue CLI项目中，使用...通过这些步骤，你在Vue CLI项目中成功地使用json-server搭建了mock服务器，使得前端开发者可以在本地开发过程中快速预览和测试数据接口的效果。这是一种常用的开发模式，便于迭代和团队协作。
Vue 通过json-server搭建本地接口数据
weixin_44560027的博客
06-10 314
一、通过json-server搭建本地数据接口 1、在终端根目录下全局安装json-server依赖包(其实就是Win+R，输入cmd回车)，输入命令：npm install -g json-server 2、创建文件夹,即Hotel，初始化项目： 输入命令：npm init 把json-server存放到项目中，输入命令：npm install json-server --save 调整启动方式，即 json-server --watch db.json 创建 db.json 文件，文件名称可
json-server-vue3：带有JSON服务器“后端”的Vue3项目
02-16
json-server-vue3 项目设置 npm install 编译和热重装以进行开发 npm run serve [注意：在单独的终端上执行此操作]在没有身份验证的情况下启动服务器 npm run server-noauth 使用身份验证启动服务器 npm run server-auth 编译并最小化生产（尚未测试） npm run build 自定义配置 请参阅。
在vue中使用JSON-server
weixin_54003465的博客
05-27 930
json-server可以快速的模拟接口它是一个基于的命令行工具。
vue中json-server（模拟数据）
zh_is_code_world的博客
08-21 2664
  作为前端，在开发的过程，遇到这种调用后端接口调试起来还是很麻烦的，我们要找后端的一个服务器，然后关联起来 ，或者把前端代码放上去，这样都是挺麻烦的，解决的办法就是前端放mock data，主要有两种方式：   （1）json-server模拟数据 使用json-server这个工具，可以虚构出后端接口对应的数据，然后在项目里发送特定的请求，就可以发请求拿到模拟的数据，首先npm安装 ...
vue+jsonserver
woochon的博客
11-13 618
使用jsonserver+axios模拟数据 安装(前提是安装有node环境) npm install --save json-server 提供json数据文件 在项目根目录下，新建一个 JSON 文件db.json 配置json-server 在build\webpack.dev.conf.js下配置，如果是用旧版本的手脚架工具初始化的项目，是在build/dev-server.js下配置。 ...
Vue设置本地数据接口(json)
d295968572的博客
06-05 3223
1. 我们知道在2.9.1的版本中没有express。        a) npm install express –D        b) npm install vue-resource -S2. 注意： 这里安装vue-resource后需要在main.js注册并使用下          a)  import VueResource from 'vue-resource'          ...
Vue：json-server搭建本地模拟服务器
Rui012345的博客
03-23 1316
前端项目需要设定好数据接口以及数据的定义，剩下的就可以各自开发，最后集成测试。 利用json-server快速搭建本地服务器模拟后台数据的请求。 1.首先你的电脑中需要安装nodejs，建议使用最新版本，并且利用vue-cli初始化好项目，然后安装json server npm install json-server --save 2.提供json数据文件。 　　在项目static目录下...
vue项目中使用json-server本地模拟json数据
she_jw的博客
03-16 1356
使用vue脚手架：vue-cli搭建项目时，有时脱离后端开发情况下，需要本地自行模拟json服务器进行json请求，vue中的json-server提供了该功能。 1、全局安装： npm install json-server -g 2、项目文件夹中新建mock文件夹（跟src同级文件夹），新建db.json文件。 3、package.json文件中，在"scripts"中写入"mock": “j...
在vue中使用JSON-Server？Mock数据的增删改查
weixin_40381947的博客
06-02 2224
JSON-Server 是用于快速搭建基于 JSON 数据文件的 REST API 的工具。它可以将 JSON 数据文件作为 REST API 的后端服务，通过 HTTP 请求进行数据的增删改查操作。使用 json-server 不需要编写后端代码和数据库，仅需提供一个 JSON 文件即可快速搭建 REST API 服务，方便前端开发人员进行接口测试和模拟数据。 而Mock数据是一种虚拟的数据，用于在前端开发中模拟后端数据。在使用Axios请求Mock数据时，可以对Mock数据进行增删改查操作
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值