json server的简单使用（附：使用nodejs快速搭建本地服务器）

做为前端开发人员，常常须要模拟后台数据，咱们称之为mock。一般的方式为本身搭建一个服务器，返回咱们想要的数据。json server 做为工具，由于它足够简单，写少许数据，便可使用。

安装

首先须要安装nodejs，建议使用最新版本。而后全局安装json server.

npm install json-server -g

 安装完成后能够用

json-server -h 

 命令检查是否安装成功，成功后会出现json-server相关的参数选项。

运行

安装完成后，能够在任一目录下创建一个 xxx.json 文件,例如在 mock/ 文件夹下，创建一个 db.json 文件，并写入如下内容，

{
    "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": "抄写党章势在必行！"
                }
            ]
        }
    ]
}

 

并在 mock/ 文件夹下执行：

 json-server -w db.json -p 3003 

操做数据

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 } } 

 

 使用动态数据

使用 db.json 做为数据载体，虽然方便，可是若是须要大量的数据，则显得力不从心。

幸亏 json server 能够经过js动态生成json格式数据，官方例子为生成1000组user数据：

# /mock/db.js

module.exports = function() {
    var data = {
        users: []
    }
    for (var i = 0; i < 1000; i++) {
        data.users.push({
            id: i,
            name: 'user' + i
        })
    }
    return data
}

/mock 目录下运行

json-server db.js -p 3003

咱们访问 http://localhost:3003/news/ 看到的数据是

[
    {
        "id": 0,
        "name": "user0"
    },
    {
        "id": 1,
        "name": "user1"
    },
    {
        "id": 2,
        "name": "user2"
    },
    {
        "id": 3,
        "name": "user3"
    },
    ...
    {
        "id": 999,
        "name": "user999"
    }
]

以上内容大部分来自于网上其余网友的总结，此处只是方便往后本身查看。

附：

做为前端开发人员，有些时候须要搭建一个本地服务器！传统搭建服务器的操做比较繁杂，好比须要安装apache软件等。在此给你们介绍一种比较简单的的搭建本地服务器的方法。

一、安装最新版的nodejs。

二、安装好nodejs以后，打开cmd窗口， 输入

npm install anywhere -g 

全局安装anywhere依赖包。

三、在cmd中进入到须要搭建服务器的目录中（目录最好不要有中文），输入

anywhere 8080

此处的端口号能够根据本身的实际状况来指定，命令执行成功以后浏览器就会自动打开本地服务器目录，一个简单的node服务器就这样搭建好啦！是否是很简单啊~

赶快动手搭建一个本身的本地服务器吧~~~