Json server基本使用

最新推荐文章于 2024-06-12 00:09:02 发布
原创 最新推荐文章于 2024-06-12 00:09:02 发布 · 228 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文介绍了Json server的基本使用步骤，包括检查安装、全局安装、创建文件夹、初始化、编写db.json、配置Package.json以及启动和访问Json server。通过这些步骤，你可以轻松开始使用Json server作为简单的RESTful API后端。

标题Json server

1.查看是否安装

json server –v

如果有版本号就是已经安装了直接进行第三步
如果没有安装就需要全局安装
2全局安装

npm install json-server –g

3安装完成后 创建一个文件夹
cd 进入这个文件夹
进行初始化

npm init –y

4在文件里面创建db.json

5打开Package.json
在其‘scripts’里面添加

"json:server": "json-server --watch db.json",

6启动

npm run json:server

出现类似以下面的图片就是成功在这里插入图片描述
7访问
在这里插入图片描述

------------------------------------------>以上就是json sever的简单使用

JSON Server 详细使用教程
况老师话竞赛&blog
10-30 717
JSON Server 是一个非常实用的工具,可以让你快速搭建一个模拟 REST API。它可以基于一个 JSON 文件快速创建一个全功能的假 REST API,非常适合前端开发时做原型或 mock 数据。本文将详细介绍 JSON Server 的安装和使用方法。JSON Server 是一个强大而灵活的工具,可以快速创建模拟 REST API。它不仅适用于前端开发的原型设计和测试,也可以用于后端开发的 API 设计和文档编写。
json-server 的基本使用
小R.的博客
02-11 2837
  最近在跟着尚硅谷学习axios时，发现了json-server，以前没了解过甚至没听说过这个东西，所以就来做个记录啦。 一、什么是json-server   在平时的项目开发中，当后端还没有提供接口时，我们可能会选择mock数据，这个时候就可以选择json-server，来模拟请求和响应的过程。   可以这么理解，json-server是一个在前端本地运行，可以存储json数据的server。   github地址：https://github.com/typicode/json-server 二、
关于json-server包的使用
Me无羡的博客
10-27 632
作者原文 1、关于什么是json-server？ 1、json-server 是一个属于npm管理的一个包，它是可以为前端提供mock的功能的，所以安装需要用npm进行全局安装。 2、json-server很好的结合了mock + express，也是非常的方便的。 2、安装命令 npm install -g json-server 或者 yarn global add json-s...
json-server安装、使用以及遇到json-server不是内部或外部命令，也不是可运行的程序或批处理文件；json-server 无法加载文件C:\XXXXX\json-server.ps1，
weixin_51696862的博客
01-08 4992
json-server的安装前提条件：已经安装了nodejs和npm包管理器没有的请去这个网址自行下载安装，傻瓜式安装，下载自己电脑系统对应的安装包后一直点下一步就行。
json-server详解
李宥的博客
07-30 1万+
- Json-server 是一个`零代码快速搭建本地 RESTful API 的工具`。它使用 `JSON 文件作为数据源`，并提供了一组简单的路由和端点，可以模拟后端服务器的行为。
json-server
m0_62956518的博客
04-23 1万+
jsonserver,前端非常实用的一个技术，vue3可以对json中的数据进行操作
Vue-cli 使用json server在本地模拟请求数据的示例代码
10-19
json server的基本使用方法如下： 1. 首先需要在项目中安装json server和axios，json server用于搭建本地模拟API服务，axios用于发送HTTP请求。 ``` npm install json-server --save npm install axios --save ...
jsonserverrouter是jsonserver中间件其作用是提供一个简明的方式构建出各种路由接口
08-11
const jsonServer = require('json-server'); const server = jsonServer.create(); const router = require('./routes'); // 引入你的路由配置 server.use(jsonServer.defaults()); server.use(router); ...
Vue请求JSON Server服务器数据的实现方法
10-17
知识点一：Vue.js与JSON Server的结合使用 Vue.js是一个流行的前端JavaScript框架，用于构建用户界面和单页应用程序（SPA）。它允许开发者通过组件化的方式开发界面，并且支持数据的双向绑定。而JSON Server则提供了...
json-server的基本配置及简单使用.pdf
12-16
### json-server的基本配置及简单使用 #### 一、json-server简介 json-server 是一款轻量级的 Node.js 命令行工具，用于快速搭建基于 JSON 文件的 RESTful API 服务器。它为前端开发者提供了便利的数据模拟服务，...
json-server 详解
瓜皮伦的博客
06-11 2077
这几天在写react的前端项目,想着后端接口没有,在网上也找不到比较合适的接口,所以在github和npm上翻了许久关于前端简单生成后端接口的工具,终于被找到了这个神仙工具。
Nodejs的安装及环境配置
liufeifeinanfeng的博客
10-10 2975
1、下载安装包 下载地址：https://nodejs.org/zh-cn/download/ 根据自己电脑系统及位数选择，我这里选择windows64位.msi格式安装包 msi和.zip格式区别： 1、.msi是Windows installer开发出来的程序安装文件，它可以让你安装，修改，卸载你所安装的程序。说白了.msi就是Windowsinstaller的数据包，把所有和安装文件相关的内容封装在一个包里。 2、.zip是一个压缩包，解压之后即可，不需要安装 下载完成后，双击安装包，开
json-server全攻略-前端必备技能
张培跃的个人博客
09-03 6296
在项目的初始阶段，后端提供的接口或数据可能是不完整的，作为一名前端开发工程师，不可避免的要使用mock的数据。如果此时的你不想使用简单的静态数据，而是想自己在本地启动一个server来模拟请求相关的操作，那么json-server是一个不错的选择。 json-serve可以帮助我们快速搭建一个mock-server本地服务，可以根据不同的后缀获取到不同的数据。 一、准备工作 1、安装Node 由于json-server需要通过Node对其进行启动，所以首先要安装Node。Node可自行安装，在此不再进行.
JSONServer
weixin_43951015的博客
04-07 299
jsonserver就是一个json形式的服务器，能够快速搭建一个服务器，练习接口的调用。npm init -y 生成项目包管理文件package.json。总之基本用法这样，就是一个简单快速生成的服务器。但是不灵活，局限性很大，做不到整体的增删改查。用vscode打开终端，或者Shift+右键。此时服务器也说明跑起来了。
Json-server 的使用教程
xhmico的博客
06-12 8097
可以让前端人员不用去编写后端的代码，就能在本地搭建一个json服务，可用于测试一些业务逻辑，便于调试调用。在前后端分离的开发模式下前端使用模拟数据接口, 这时候 后端接口还没有开发出来, 前端又需要数据进行开发，这种情况下就需要前端先行模拟数据, 等后端接口写好进行targetUrl进行替换。github 地址npm 地址是一个零代码快速搭建本地使用JSON文件作为数据源，通过提供一组简单的路由和端点来模拟后端服务器的行为它允许前端开发人员在不依赖后端API的情况下进行开发，通过本地搭建一个JSON。
JsonServer使用详解
热门推荐
冰雪为融的博客
08-07 4万+
JsonServer主要的作用就是搭建本地的数据接口，创建json文件，便于调试调用 如果我们只是get一些数据，只用借助jsonplaceholder（http://jsonplaceholder.typicode.com）就可以很好的实现，但是如果我们想要post一些数据，使用jsonplaceholder就有些力不从心了，所以我们今天就来聊聊怎么借助于json-server来搭建我们的本地...
json-server的安装和简单使用
grand_brol的博客
08-21 2279
json-server的作用 快速创建一个接口，以供ajax请求 json-server的安装 安装 cnpm i json-server -g 检查版本号，查看是否安装成功 json-server -v json-server的使用 1、创建一个db.json文件 { "a": [{ "id": 1, "name": "zhangsan1" }], "b": [{ "id": 1, "name": "zhang
json-server搭建虚拟后台服务器
管他熙熙攘攘阳关道，我偏要一条独木桥走到黑
08-19 853
    最近从头学习vue，学到vue-resource 实现 get, post, jsonp请求部分（后面会整理出来），需要虚拟服务器来模拟前后台联调数据，于是才了解到json-server这一工具，下面是最基本的获取数据操作（增删改操作后面会完善） 一、安装工具json-server（这里我用全局安装） 使用npm安装（前提是安装了node和npm） npm install -g json-...
Json-server的安装与使用
Muchen灬
07-27 1万+
搭建本地的数据接口 Json-server 地址：https://github.com/typicode/json-server 1、全局安装json-server 首先我们来到终端，在根目录下安装我们全局的json-server， 输入指令：npm install -g json-server 接着创建一个文件夹存放json文件，终端中切换到创建的文件目录 初始化packjson...
json-server使用详解
最新发布
05-08
### Json-server 详细使用指南 #### 一、Json-server 简介 `json-server` 是一种轻量级的工具，用于快速构建 RESTful API 接口。其核心特点是基于 JSON 数据文件自动生成接口，并支持 CRUD 操作[^3]。 --- #### 二、安装与验证 为了能够在任何目录下运行 `json-server` 命令，需通过 `-g` 参数将其安装到全局环境中。以下是具体命令： ```bash npm install -g json-server ``` 完成安装后，可通过以下命令确认版本号以验证安装是否成功： ```bash json-server --version ``` 如果返回类似如下信息，则表示安装成功： ``` 0.14.0 ``` 此过程确保了环境配置无误[^1]。 --- #### 三、创建数据库文件 (db.json) `json-server` 使用名为 `db.json` 的文件作为数据存储的核心部分。该文件是一个标准的 JSON 对象结构，其中键代表资源名称，而值则为数组形式的数据集合。例如： ```json { "posts": [ { "id": 1, "title": "foo", "author": "bar" }, { "id": 2, "title": "baz", "author": "qux" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ] } ``` 上述示例定义了一个包含两篇文章 (`posts`) 和一条评论 (`comments`) 的简单数据库模型[^2]。 --- #### 四、启动服务 在项目根目录（即放置有 `db.json` 文件的位置），执行以下命令即可启动服务： ```bash json-server db.json ``` 默认情况下，服务会监听于 `http://localhost:3000` 地址，并自动根据 `db.json` 中的内容生成对应的 RESTful 路由规则。例如，访问 `/posts` 将返回所有文章列表；访问 `/posts/:id` 则可获取指定 ID 的单条记录[^3]。 --- #### 五、高级功能扩展 除了基本的功能外，`json-server` 还提供了多种增强选项供开发者灵活定制需求： 1. **修改端口号** 如果希望更改默认端口（3000），可以借助 `--port` 参数实现： ```bash json-server db.json --port 8080 ``` 2. **启用延迟模式** 开发过程中可能需要模拟网络请求耗时情况，此时可用 `--delay` 设置响应延时时间（单位毫秒）： ```bash json-server db.json --delay 1000 ``` 3. **静态页面托管** 支持额外加载 HTML 或其他静态资产文件夹路径设置： ```bash json-server db.json --static ./public ``` 4. **路由重写** 自定义 URL 映射关系满足特定业务场景下的特殊命名约定： ```javascript const router = require('express').Router(); router.get('/custom-endpoint', function(req, res) { res.json({ customKey: 'customValue' }); }); module.exports = router; ``` 并通过参数引入外部脚本逻辑控制流程走向[^2]。 --- #### 六、总结 综上所述，`json-server` 提供了一种便捷高效的解决方案帮助前端工程师独立开展工作而不必等待完整的后台架构就绪之前先行测试交互效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值