最近公司开发新版本app,但是服务端工作排期已经排到了一个月以后,我们移动端工作还是要先提前做好。我们可以通过服务端提供好的接口文档,自己模拟假数据接口进行开发,测试通过后,等服务端接口弄好,立马就可以调用。
现在我们使用JsonServer
来模拟服务端的api
搭建环境(mac)
一、JsonServer
环境需要使用Node.js
推荐使用Homebrew
安装,有了Homebrew
安装软件真是太方便了
1、Homebrew
,使用Terminal
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2、Node.js
brew install node
3、JsonServer
npm install -g json-server
数据准备
1、先来看下JsonServer
提供的json格式文档
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
2、根据服务端提供的接口文档,JsonServer
和制作一份json文件。这里只需将JsonServer
提供的格式,对posts
里面的数据进行修改就可以了,如下
{
"posts":
{
"code": 0,
"msg": "请求成功",
"result": {
"events": [
{
"title": "新家里快放假啦手指南,教你玩转APP",
"time": "2016.10.20-2016.12.1",
"type": "服务",
"img_url": "http://img.xxxx.cn/Uploads/housephoto/247/246228/56daa00c24a6f.jpg",
"web_url": "xxx/xxx/xxx.html"
},
{
"title": "放假了咖啡法拉第减肥接入起哦里卡多减肥新手指南,教你玩转APP",
"time": "2016.10.20-2016.12.1",
"type": "服务",
"img_url": "http://xxx/Uploads/housephoto/247/246231/56da9e8460f3b.jpg",
"web_url": "xx/xxx/xxx.html"
},
{
"title": "新人家去诶节日手指南,教你玩转APP",
"time": "2016.10.20-2016.12.1",
"type": "知识",
"img_url": "http://xxxx/Uploads/housephoto/253/252256/56dc035c55359.JPG",
"web_url": "xxx/xxx/xxx.html"
}
],
"page_total": "3"
}
}
,
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
],
"profile": {
"name": "typicode"
}
}
3、json在线生成网站,网上一搜大把,这里是我随便用的一个,Safiri浏览器貌似是不行的,请使用Chrome或者Firfox浏览器,将生成json文件保存到本地,这里文件保存到桌面Desktop
命名为data.json
http://www.qqe2.com
启动JsonServer
1、使用Terminal
cd到data.json所在的文件夹
Last login: Sat Apr 16 20:27:29 on ttys003
LIUYONGs-MacBook-Pro:~ liuyong$ ls
77.json Documents Movies Public import
Applications Downloads Music bin untitled
Desktop Library Pictures db.json
LIUYONGs-MacBook-Pro:~ liuyong$ cd Desktop/
2、使用Terminal
输入json-server --watch data.json
,当出现以下内容的时候,表示JsonServer
启动,请保证json文件格式正确
LIUYONGs-MacBook-Pro:Desktop liuyong$ json-server --watch db.json
\{^_^}/ hi!
Loading data.json
Done
Resources
http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile
Home
http://localhost:3000
Type s + enter at any time to create a snapshot of the database
Watching...
查看Json数据(不要关闭Terminal)
1、在浏览器中输入http://localhost:3000/posts
2、在代码中调用
http://localhost:3000/posts
- (void)loadActivityListData {
[self.dataArray removeAllObjects];
NSString *url = @"http://localhost:3000/posts";
AFHTTPSessionManager *manager = [AFHTTPSessionManager manager];
manager.responseSerializer.acceptableContentTypes = [NSSet setWithObjects:@"application/json",@"text/json", nil];
manager.responseSerializer = [AFJSONResponseSerializer serializer];
[manager GET:url parameters:nil progress:^(NSProgress * _Nonnull uploadProgress) {
} success:^(NSURLSessionDataTask * _Nonnull task, id _Nullable responseObject) {
NSLog(@"%@",responseObject);
NSDictionary *dict = responseObject[@"result"];
NSArray *array = dict[@"events"];
for (NSDictionary *dict in array) {
ActivityModel *model = [ActivityModel modelWithDict:dict];
[self.dataArray addObject:model];
}
[self.tableView reloadData];
} failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {
}];
}
更多JsonServer使用方法
请登录github查看更多JsonServer的使用方法