json-server使用总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="full-screen" content="yes">
<style type="text/css">
*{box-sizing: border-box;}
html,body{width:100%;background:#fff;}
.c333{color:#333;}
.container{
width:80%;
margin:0 auto;
font-size:16px;
color:#666;
}
h3{
font-size:35px;
color:#333;
text-align: center;
}
p{
line-height:25px;
margin-left:10px;
}
img{margin-left: 20px;}
.f18{
font-size:18px;
}
.box{
width:95%;
padding:20px;
box-shadow:-1px 6px 5px #d1d1d1, 1px -1px 5px #ddd;
border-radius:5px;
margin:20px auto;
}
.title{
font-size:28px;
color:#333;
line-height:30px;
margin:10px 0;
font-weight:bold;
}
.subtitle{
font-size:16px;
color:#666;
line-height:30px;
font-weight:bold;
margin:5px 0;
}
.code{
width:65%;
padding:10px;
margin:10px 0 10px 40px;
background:rgba(0,0,0,.8);
border-radius:3px;
color:#fff;
}
.tips{color:#999;font-size:15px;}
</style>
}
</head>
<body>
<section class="container">
<h3>json-server 使用总结</h3>
<div class="box"> <b class="f18 c333">WHAT</b>:伪造在线REST API，给前端页面提供虚拟的数据 ，支持CORS和JSONP跨域请求，支持GET, POST, PUT, PATCH 和 DELETE 方法 </div>
<div class="box">
<div class="title">How to use</div>
<div class="subtitle">使用方法一：使用线上地址在线调用</div>
<p>进入线上地址 http://jsonplaceholder.typicode.com/ 后，页面下方提供了多种模拟数据接口，可供我们直接调用</p>
图片1
<p class="tips">如图，接口中字段以及数据结构都是固定的，我们无法更改以适应我们的应用场景，因此，我们可以使用json-server在本地模拟数据，并根据自己的需求编写json文件</p>
<div class="subtitle">使用方法二：使用json-server本地调用 </div>
<p>一、全局安装：在安装nodejs前提下，打开终端,全局安装json-server</p>
<p class="code"> npm install -g json-server</p>
<p>二、初始化：新建文件夹project并cd进入project，初始化package.json文件</p>
<p class="code">npm init</p>
<p>三、确认package信息：回车确认package name,version等等，生成package.json文件</p>
<p>四、安装json-server模块，成功后，package.json中将显示版本号</p>
<p class="code">npm install json-server --save</p>
图片2/
<p>五、在文件夹project中创建data.json,并根据需要编写json数据</p>
图片3
<p>六、监听data.json文件，"my-server"为自定义的名字</p>
图片4
<p>七、启动json:my-server,Resource下方的地址即为生成的本地接口地址</p>
<p class="code">npm run json:my-server</p>
图片5
<p>八、除了自己本地模拟json数据，也可远程引入JSONPlaceholder的数据</p>
<p>九、若接口地址过多，可新建一个readme.txt,将其拷贝以便查阅</p>
<p>十、当接口数据返回过多，不便查阅时，可借助POSTman查阅</p>
</div>
</section>
</body>
</html>