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 显示版本号

相关推荐
惜.己9 分钟前
使用python读取json数据,简单的处理成元组数组
开发语言·python·测试工具·json
stoneSkySpace13 小时前
set、map 比数组,json 对象的性能更好原因分析
json
Rabbb21 小时前
C# JSON 反序列化时,忽略转换失败的属性 JTokenSafeToExtensions
后端·c#·json
代码的余温2 天前
XML vs JSON:核心区别与最佳选择
xml·服务器·json
前端 贾公子2 天前
exports使用 package.json字段控制如何访问你的 npm 包
前端·npm·json
三千花灯2 天前
jmeter提取接口返回值,对比去重
jmeter·json
青柠檬-hxj3 天前
理解 HTTP POST 请求中的 json 和 data 参数
网络协议·http·json
一只小阿乐3 天前
前端vue3 H5实现 静态页面使用本地json 并且需要上下滑动 可以切换tabs 栏
前端·json·vue3·h5开发
Risehuxyc4 天前
前端同学,你能不能别再往后端传一个巨大的JSON了?
前端·json·状态模式