DAY15 服务室--JSON Server自己开

前言

我们现在有了 Nuxt.js 建立的环境、有了 Vuex 来做资料的处理，现在就差资料要从哪里来了。
身为一个只会前端的小菜鸡，要自己架一个後端资料库，我觉得是很有困难的。
可是前端没有学习完整，就跑去学後端的东西，我觉得这样太贪心了，所以这次就想尝试用 JSON Server 快速建立一个虚拟的资料库，不会後端也可以开一个 REST API 罗！

如何安装JSON Server

安装非常简单，使用npm全域安装即可

npm install -g json-server

建立资料库

在专案资料夹中，新增 db.json 档案
接着可以在里面放入基本的 data 范例，以供测试。

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

我简单解说 data 资料内容，db.json 必须是个物件，我们目前物件中有三组资料，分别叫做 "posts"、"comments"、"profile"。

• "posts"：是一个阵列，阵列中目前只存放一个物件
• "comments"：是一个阵列，阵列中只存放一个物件
• "profile"：是一个物件

可以看到阵列中的物件都有id，这个是不可变更且自动产生的唷。

启动服务器

套件也安装好了，资料也准备好了，接着就可以启动服务器看看到底里面是什麽东西罗！

json-server --watch db.json

输入完就会看到这段

\{^_^}/ hi!

  Loading db.json
  Oops, db.json doesn't seem to exist
  Creating db.json with some default data

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

这段就是说，我们创了一个虚拟资料库在 http://localhost:3000，我们可以直接在网址列输入 http://localhost:3000 看看到底内容是什麽？
连进去後可以看到：

这就是说，我们的资料库中含有：

• /posts
• /comments
• /profile

我们可以对他们使用这些方法：
GET、POST、PUT、PATCH、DELETE、OPTIONS

结语

经过今天的研究，我们创造了自己的第一个虚拟资料库罗，可喜可贺！
明天我们接着来深入研究吧～