使用本地json-server服务,创建简单的本地api数据

前言

近期在学习 vue 框架,在学习过程中,发现了一个和 mockjs 类似的第三方库: json-server。它不仅可以模拟出完美的接口数据,还可以修改请求的类型来修改本地的数据,是一个非常不错的库,所以分享记录一下使用心得。

快速上手

一.新建存储数F 8 o Z据的文件

在电脑上创建一个专属于 json-C ~ ^server 的文件夹,文件夹主要是= g 2 4 m用于创建和存储 json 数据。例如: “test-json”

二.初始化 package.json

VsCode 编辑器打开 test-jsQ k m M H ^ 9 xon 文件夹,打开终端输入命令行npm init初始化 package.json 文件,输入命令行后一直回车就可以了。

命令:

npm init

三.创建 db.json 数据文件

在 package.json 同级目录下创建一个 db.json,用于设计我们需要的 api 数据。如下所示,我们创建了一个的简简单单接口数据:

{
"users": [
{
"name": "joker",
"age": 22,
"sex": "男"
},
{
"n& v a s ^ame": "tom~ K 6",
"age": 24,
"sS t @ yex": "男"
},
{
"n7 + , Wame": "jerry",
"age": 18,
"sex": "男"
}
]
}

四.安装 json-server

打开 IDE 终端,输入命令行npm install json-server –save-dev安装本地的 json-server。

命令:

npm install json-server --save-dev

五.配置 jso: A 0 2 . b _ `n-server 运行脚本

安装好* Y b 3 2 4 m c P json-server 后,我们需要在 package.json 中配置运行启动 jso, x ~ %n 服务的 script。

1.json-server –watch db.json: 运行 json-server 服务,运行启动本地 api 数据。

2.json-server –watch db.{ P = u } $json2 - ? x e R @ x 5 –port 8888: 运行启动 json-server 服务* u | A I y v _在本地其他端口(默认端口 3000)。

3.json-server http:/Q L p l L 6 4 z !/jsonplaceholder.typicode.com/db: 运行启动配置远~ b u ] ` { 8 O o程模式 json-server 服务。

"scrv Y . K b $ ` .ipts": {
"json-server": "jG 5 $ C Vson-server --watch db.jsoN n ) H G i un --p7 - # 5ort 8888",
"json-server:remote": "json-server http://jsonplaceholder.typicode` 7 $.com/db",
},

六.运行启动服务,获取数据

运行启动服务命令后,打开postman获取本地的api数据,检测本地数据是否运行成功。

来自:https://www.cnblogs.com/BlueBerD L 8 | ~ } ( 2 1ryCode/p/13808693.htx V n e + l aml

站长推荐

1.云服务推荐: 国内主O P . a z K U E流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云B # c n _ Y 1 [腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

s H 6接: http:0 _ y 8 8 j//www.fly63.com// . I varticle/detial/9F A L a (721