一.使用Apache本地服务器
1.开启：$ sudo /usr/sbin/apachectl start
在浏览器中输入：https://localhost 页面显示： it works!
2.其实本地apachec指向一个文件下/Library/WebServer/Documents
localhost 访问的是该目录下的index.html 说到这里大家应该都知道接下来怎么办了
我们只要把json数据放到该目录下即可,我这里找一段简单的json做个例子:
{"data":[{"title":"标题1","picUrl":"图片1"},{"title":"标题2","picUrl":"图片2"}]}
3.https://localhost/xxx.json
页面会出现json文本的内容
这里可以通过本机ip来让你的同事也访问你的假数据192.168.x.x/xxx.json.
关闭：$ sudo /usr/sbin/apachectl stop
关闭：$ sudo /usr/sbin/apachectl stop
二.用JSON-server模拟数据
1.安装
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.json
json-server file.js
json-server http://example.com/db.json
https://github.com/typicode/json-server
2.运行
安装完成后，可以在任一目录下建立一个 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": "抄写党章势在必行！" } ]
}]
}
3.操作数据
使用【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 }
]
网友评论