网站优化的监测评价,阿里云网站备案多久,莒县做网站的公司,建设网站技术公司电话号码用JSON-server模拟REST API(一) 安装运行 在开发过程中#xff0c;前后端不论是否分离#xff0c;接口多半是滞后于页面开发的。所以建立一个REST风格的API接口#xff0c;给前端页面提供虚拟的数据#xff0c;是非常有必要的。 对比过多种mock工具后#xff0c;我最终选择…用JSON-server模拟REST API(一) 安装运行 在开发过程中前后端不论是否分离接口多半是滞后于页面开发的。所以建立一个REST风格的API接口给前端页面提供虚拟的数据是非常有必要的。 对比过多种mock工具后我最终选择了使用 json server 作为工具因为它足够简单写下少量数据即可使用。也因为它足够强大支持CORS和JSONP跨域请求支持GET, POST, PUT, PATCH 和 DELETE 方法更提供了一系列的查询方法如limitorder等。下面我将详细介绍 json server 的使用。 目录 安装 运行 通过命令行 使用package.json 操作数据 get post put 用JSON-server模拟REST API(二) 动态数据 用JSON-server模拟REST API(三) 进阶使用 安装 首先你的电脑中需要安装nodejs建议使用最新版本。然后全局安装json server npm install json-server -g 使用linux和macOS的电脑需要加上sudo sudo npm install json-server -g 安装完成后可以用 json-server -h 命令检查是否安装成功成功后会出现 json-server [options] source选项--config, -c Path to config file [默认值: json-server.json]--port, -p Set port [默认值: 3000]--host, -H Set host [默认值: 0.0.0.0]--watch, -w Watch file(s) [布尔]--routes, -r Path to routes file--static, -s Set static files directory--read-only, --ro Allow only GET requests [布尔]--no-cors, --nc Disable Cross-Origin Resource Sharing [布尔]--no-gzip, --ng Disable GZIP Content-Encoding [布尔]--snapshots, -S Set snapshots directory [默认值: .]--delay, -d Add delay to responses (ms)--id, -i Set database id property (e.g. _id) [默认值: id]--quiet, -q Suppress log messages from output [布尔]--help, -h 显示帮助信息 [布尔]--version, -v 显示版本号 [布尔]示例json-server db.jsonjson-server file.jsjson-server http://example.com/db.jsonhttps://github.com/typicode/json-server 运行 安装完成后可以在任一目录下建立一个 xxx.json 文件,例如在 mock/ 文件夹下建立一个 db.json 文件并写入以下内容并在 mock/ 文件夹下执行 json-server db.json -p 3003 。 {news:[{id: 1,title: 曹县宣布昨日晚间登日成功,date: 2016-08-12,likes: 55,views: 100086},{id: 2,title: 长江流域首次发现海豚,date: 2016-08-12,likes: 505,views: 9800}],comments:[{id: 1,news_id: 1,data: [{id: 1,content: 支持党中央决定},{id: 2,content: 抄写党章势在必行}]}]
} 为了方便再创建一个 package.json 文件写入 {scripts: {mock: json-server db.json --port 3003}
}然后使用到 /mock 目录下执行 npm run mock 命令如果成功会出现 mock /你的电脑中mock文件夹所在目录的路径/mockjson-server db.json -p 3003\{^_^}/ hi!Loading db.jsonDoneResourceshttp://localhost:3003/newshttp://localhost:3003/commentsHomehttp://localhost:3003如果不成功请检查 db.json 文件的格式是否正确。 操作数据 使用【GET 接口】查询数据 这个时候访问 http://localhost:3003/db 可以查看 db.json 文件中所定义的全部数据。 使用浏览器地址栏jQuery.get 或 fecth({method: get}) 访问 http://localhost:3003/news 则可以看到 news 对象下的数据,以Array格式返回: [{id: 1,title: 曹县宣布昨日晚间登日成功,date: 2016-08-12,likes: 55,views: 100086},{id: 2,title: 长江流域首次发现海豚,date: 2016-08-12,likes: 505,views: 9800}
] 使用【POST 接口】增加数据 以jquery的 $.ajax 方法举例,以下代码会实时的向 db.json 中的 news 对象push一条新的数据再次用 get 方式访问 http://localhost:3003/news , 就可以看到它了 $.ajax({type: post,url: http://localhost:3003/news,data: {id: 3,title: 我是新加入的新闻,date: 2016-08-12,likes: 0,views: 0}}
) 使用【PUT 接口】修改数据 同样以jquery的 $.ajax 方法举例,以下代码会实时的对 db.json 中的 news 对象中 id1 数据进行修改 $.ajax({type: put,url: http://localhost:3003/news/1,data: {title: 曹县宣布昨日晚间登日失败,date: 2016-08-12,likes: 55,views: 100086}}
)// 结果[{id: 1,title: 曹县宣布昨日晚间登日失败,date: 2016-08-12,likes: 55,views: 100086}
] PATCH 和 DELETE 使用方式同上就不做演示了。 json-server 仓库地址 转载于:https://www.cnblogs.com/lewo/p/mock-json-server-install.html
