json-server的入门到抢后端饭碗

1.json-server概述

json-server是一个 Node 模块,运行 Express 服务器,你可以指定一个 json 文件作为 api 的数据源。
通俗来说, json-server模拟服务端接口数据,一般用在前端人员可以不依赖后端的API开发,而在本地搭建一个JSON服务,快速生成一个REST API风格的后端服务。

官网地址:https://www.npmjs.com/package/json-server
git地址:https://github.com/typicode/json-server // 建议git访问官网有时候文档加载不出来。

2.下载安装

npm install -g json-server //npm全局安装json-server
json-server -v  //查看版本号,来测试是否安装成功;

3.运行json-server

json-server --watch db.json --port 5000 // port 指定端口,默认端口是3000 ; db.json 指定json文件

运行成功后:

终端:
image.png
浏览器端:
image.png

4.配置静态资源服务器

前面已经可以直接使用json-server了这里是作为更加深度的使用json-server来模拟后端。
通过命令行配置路由、数据文件、监控等会让命令变的很长,而且容易敲错,所以json-server允许我们把所有的配置放到一个配置文件中,这个配置文件一般命名为json-server.json。这里使用npm的配置文件
static->配置静态目录,可以直接访问,route.json则是可以添加其他路由,不是必须的,作为进阶功能使用。
image.png
image.png
json-sever.json

{
  "port": 5000,
  "watch": true,
  "static": "./public", 
  "routes": "./routes.json",
  "read-only": false,
  "no-cors": false,
  "no-gzip": false
}

package.json

{
  "scripts": {
    "start": "json-server -c json-server.json db.json"
  }
}

routes.json -随便配置一下映射测试一下就行,

{
  "/api":"/posts"
}

db.json是json-server运行后自动生成的

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

image.png

配置完成后

npm start //执行命令行
json-server [options] <source>  //options->代表可选,source->指代源数据库一般是生成的db.json

Options:
  --config, -c       Path to config file           [default: "json-server.json"]
  --port, -p         Set port                                    [default: 3000]
  --host, -H         Set host                             [default: "localhost"]
  --watch, -w        Watch file(s)                                     [boolean]
  --routes, -r       Path to routes file
  --middlewares, -m  Paths to middleware files                           [array]
  --static, -s       Set static files directory
  --read-only, --ro  Allow only GET requests                           [boolean]
  --no-cors, --nc    Disable Cross-Origin Resource Sharing             [boolean]
  --no-gzip, --ng    Disable GZIP Content-Encoding                     [boolean]
  --snapshots, -S    Set snapshots directory                      [default: "."]
  --delay, -d        Add delay to responses (ms)
  --id, -i           Set database id property (e.g. _id)         [default: "id"]
  --foreignKeySuffix, --fks  Set foreign key suffix, (e.g. _id as in post_id)
                                                                 [default: "Id"]
  --quiet, -q        Suppress log messages from output                 [boolean]
  --help, -h         Show help                                         [boolean]
  --version, -v      Show version number                               [boolean]

Examples:
  json-server db.json
  json-server file.js
  json-server http://example.com/db.json

https://github.com/typicode/json-server

静态资源服务器BUG问题

如果设置静态文件目录public,Homepage页面会查找public下面的index.html文件不存在则报404,官网本人没有看到对应的配置可以修改。
官网关于首页的描述:
image.png

解决办法

将官网public目录替换到本地就相当于使用默认的首页,不然自个纯手写
image.png

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
这个错误提示"json-server : 无法将“json-server”项识别为 cmdlet、函数、脚本文件或可运行程序的名称"通常出现在安装json-server完成后执行命令时。这个错误表示系统无法识别json-server这个命令。有几种可能的原因和解决方法。 首先,你可能没有正确安装json-server。请确保你按照正确的步骤安装了json-server,并且将其放在正确的环境变量中。你可以尝试重新安装json-server并确保路径和环境变量设置正确。 其次,这个错误可能是由于命令行中输入的命令拼写错误引起的。请仔细检查你输入的命令是否正确拼写,并且确保大小写匹配。 另外,这个错误也可能是由于系统环境变量配置不正确导致的。请检查你的系统环境变量中是否包含了json-server的路径,并且路径设置正确。 最后,如果以上方法都没有解决问题,你可以尝试使用全路径执行json-server命令,即指定json-server的完整路径来执行命令。 综上所述,如果你遇到了"json-server : 无法将“json-server”项识别为 cmdlet、函数、脚本文件或可运行程序的名称"的错误,你可以按照以上的方法逐一排查并解决问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [json-server : 无法将“json-server”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的...](https://blog.csdn.net/weixin_57037336/article/details/124490862)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

竹林海中敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值