json-server 的使用

json-server 的使用

功能

json-server可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。

简单说:node启动服务,使用本地一个json文件,快速形成一个具备CRUD的接口服务。方面前台临时调试使用。

Json-server 是一个零代码快速搭建本地 RESTful API 的工具。它使用 JSON 文件作为数据源,并提供了一组简单的路由和端点,可以模拟后端服务器的行为。

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

npm地址:https://www.npmjs.com/package/json-server

环境准备

电脑已安装node ,配置环境变量。

创建工程

  1. 创建工程目录(不要叫json-server),如D:\workspace\json-server-demo,在工程目录下执行npm init,输入项目名、描述、作者(如果不输入就是默认的,直接回车)
  2. 执行成功后,工程目录下会出现一个package.json文件
  3. 继续执行npm install json-server --save安装json-server模块。--save就是将模块存储到package.json文件中

4.修改package.json 添加scripts指令

复制代码
"json:server": "json-server --watch db.json"

5.输入指令npm run json:server运行项目,命令中的"json:server"就是在package.json的scripts中配置的命令。

访问http://localhost:3000

CRUD

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除数据</title>
    <script src="./jquery.min.js"></script>
</head>

<body>
    <button id="delete">删除数据</button>
    <script>

        //查询数据
        // $("#delete").click(function() {
        //     $.ajax({
        //         type: 'get',
        //         url: 'http://localhost:3000/articles',
        //         dataType: "json",
        //         success: function(data) {
        //             console.log("success",data)
        //         },
        //         error: function() {
        //             alert("delete error")
        //         }
        //     })
        // })
		//删除数据
		// $("#delete").click(function() {
		//     $.ajax({
		//         type: 'delete',
		//         url: 'http://localhost:3000/articles/2',
		//         dataType: "json",
		//         success: function(data) {
		//             console.log("delete success")
		//         },
		//         error: function() {
		//             alert("delete error")
		//         }
		//     })
		// })
		
	//添加数据
	// $("#delete").click(function() {
	//     $.ajax({
	//         type: 'post',
	//         url: 'http://localhost:3000/articles',
	//         dataType: "json",
	// 		data:{
	// 			userId: 6,
	// 			id: 52,
	// 			title: '添加数据',
	// 			body: '添加数据'
	// 		},
	//         success: function(data) {
	//             console.log("delete success",data)
	//         },
	//         error: function() {
	//             alert("delete error")
	//         }
	//     })
	// })
	//修改数据
	$("#delete").click(function() {
	    $.ajax({
	        type: 'put',
	        url: 'http://localhost:3000/articles/52',
	        dataType: "json",
			data:{
				userId: 6,
				// id: 52,
				title: '添加数据-修改了内容',
				body: '添加数据'
			},
	        success: function(data) {
	            console.log("delete success",data)
	        },
	        error: function() {
	            alert("delete error")
	        }
	    })
	})
    </script>
</body>

</html>

参数说明

语法:json-server [options]

参数 简写 说明 默认值

--config -c 指定配置文件路径 json-server.json

--port -p 指定端口 3000

--host -H 指定主机名 localhost

--watch -w 监控文件变化

--routes -r 指定路由文件路径

--middlewares -m 指定中间件文件路径

--static -s 指定静态文件文件夹路径

--read-only --ro 指定只允许get请求

--no-cors --nc 禁止跨域共享

--no-gzip --ng 禁止gzip压缩

--snapshots -S 指定快照目录 .

--delay -d 指定延迟返回时长(ms)

--id -i 指定数据库的ID属性 id

--foreignKeySuffix --fks 指定外键前缀 Id

--quiet -q 抑制来自输出的日志消息

--help -h 显示帮助

--version -v 显示版本号

相关推荐
勉灬之6 小时前
通过npm run XXX命令生成uniapp的pages.json文件
npm·uni-app·json
码农葫芦侠1 天前
Qt如何翻译JSON内容
qt·json
小丫头呀1 天前
.NET8 通过自定义类映射appsettings.json 文件某个节点的配置
json·.net·.net8
饺子大魔王的男人1 天前
JSON可视化工具JSONCrack全解析:使用cpolar从本地到云端的协作升级
json
组合缺一1 天前
全球首个支持 IETF JSONPath (RFC 9535) 标准的 Java 框架,Snack4-Jsonpath v4.0.0 发布
java·开发语言·json·jsonpath
sakoba2 天前
MySQL的json处理相关方法
android·学习·mysql·json
njsgcs5 天前
json转excel python pd
python·json·excel·pd
代码搬运媛5 天前
【架构相关】tsconfig.json 与 tsconfig.node.json、tsconfig.app.json 的关系和作用
node.js·json
aerror6 天前
json转excel xlsx文件
开发语言·python·json
掉鱼的猫7 天前
全球首个支持 IETF JSONPath (RFC 9535) 标准的 Java 框架,Snack4-Jsonpath v4.0.0 发布
java·json