changed 4 years ago
Linked with GitHub

用 Yeoman 快速產生 API

tags: 技術分享`

Yeoman 介紹

Yeoman是一個可以快速生成一個專案的骨架。官網上有很多大家 已經寫好的骨架,也可以自己寫一個適合自己的,分享給大家。

透過 yo 指令可以快速幫助開發人員快速構建漂亮的Web應用程序的工具和框架。

yeoman 推薦了在開發時的工作流包括三種類型的工具,可在構建Web應用程序時提高您的生產率和滿意度。

  1. Yo 腳手架可以創建出專案的 MVC(Model, View, Controller)
  2. gulp 自動化工具,任務管理工具(Task Runner)
  3. npm 套件管理工具

用以上三個工具來創造出自己的工作流

安裝 yo 跟 generator-rest

npm install -g yo
npm install -g generator-rest //restAPI使用

執行 yo

yo rest #generate a new project 
yo rest:api #generate a new api endpoint inside your project 

yo rest 工作流程

1. What's the project name?(專案的名字)
2. Where to put the source code?(要放到哪邊預設src)
3. Where to put the API code (inside ./src)? (api) 
4. Do you want to force SSL in production mode? (y/N) 
5. Do you want to generate authentication API? (Y/n)(可以直接產生會員認證的API)
<!-- 選擇認證的方法 -->
6. Which types of authentication do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ password
 ◯ facebook
 ◯ github
 ◯ google
 - twitter (Soon - PRs are welcome (see: https://github.com/diegohaz/generator-rest/issues/8))
7. Do you want to sign in user after create? (y/N) 
8. Do you want to generate password reset API (it will need a SendGrid API Key)? (y/N) 
9. What's your SendGrid API Key (you can skip this and update the .env file later)? (key) 
10. Do you want the retrieve methods from users (GET) to have the form { rows, count } ? (y/N) 

API架設完成

問完以上問題後就會在資料夾中建立出API囉!並且我們已經建立好我們的會員的認證系統👍

使用 Postman 測試 API

1. 進到 src/config.js 修改存取的資料庫 URL (這邊是使用MongoDB)

2. 先取得 .env 中的 MASTER_KEY,用來註冊第一位使用者

POST http://0.0.0.0:9000/users 
    "email": "test@example.com",
    "password": "123456",
    "access_token": "MASTER_KEY",
    "role": "admin" // 可以查看 API 中 User 的 model.js,還有什麼可以新增的,或是另外自己加入。
}

3. 使用 Auth API 登入(Postman Authorization 選擇 Basic Auth)

取得 Token

POST http://0.0.0.0:9000/auth
{
    "access_token": "MASTER_KEY"
}

登入後可以拿 Token 去取得更多資訊

4. 取得使用者:使用 Token 查看 Users 資料表(Postman Authorization 選擇 Token)

把剛剛拿到的 Token 放到 Authorizaion 的 Token 中

// 會取得所有使用者列表
GET http://0.0.0.0:9000/users

5. 修改使用者:把剛剛拿到的 User ID 做一個修改的動作(Postman Authorization 選擇 Token)

把剛剛拿到的 Token 放到 Authorizaion 的 Token 中

PUT http://0.0.0.0:9000/users/:id
{
    "name": "已修改名字",
}

6. 刪除使用者(一定要是Admin):把剛剛拿到的 User ID 做一個修改的動作(Postman Authorization 選擇 Token)

把剛剛拿到的 Token 放到 Authorizaion 的 Token 中

DELETE http://0.0.0.0:9000/users/:id

在查看 MongoDB 該使用者已經不存在了。

建立資料表流程

 1. What's the API name? 
 
 //ex: http//0.0.0.0:9000/{users->這個就是 endpoint})
 2. What's the endpoint name?(要打API的時候的URL名稱 
 
 3. Where to put the code?
 
 4. Which methods it will have? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Create (POST)
 ◉ Retrieve list (GET)
 ◉ Retrieve one (GET)
 ◉ Update (PUT)
 ◉ Delete (DELETE)
 
 //哪個方法中需要有 master key 才可以執行
 5. ? Which methods are protected by the master key? 
❯◯ Create (POST)
 ◯ Retrieve list (GET)
 ◯ Retrieve one (GET)
 ◯ Update (PUT)
 ◯ Delete (DELETE)

//哪一個方法中需要是 admin 身份才可以執行
6. Which methods are only accessible by authenticated admin users? 
❯◯ Create (POST)
 ◯ Retrieve list (GET)
 ◯ Retrieve one (GET)
 ◯ Update (PUT)
 ◯ Delete (DELETE)
 
//哪些方法中可以需要登入才可以取得
7. Which methods are only accessible by authenticated users? 
❯◯ Create (POST)
 ◯ Retrieve list (GET)
 ◯ Retrieve one (GET)
 ◯ Update (PUT)
 ◯ Delete (DELETE)

8. Do you want to generate a model? (需不需要直接建立最一開始的 model)

//建立 model ex: name, pic, desc...,但是不要建立 ID
9. Which fields the model will have? (comma separated, do not include id) 

10. Do you want the retrieve methods (GET) to have the form { rows, count } ? (y/N) 

11. Overwrite src/api/index.js? (ynaxdH) 
  y) overwrite
  n) do not overwrite
  a) overwrite this and all others
  x) abort
  d) show the differences between the old and the new
  h) Help, list all options

在專案中API就已經很快的建立出來囉!再來跟上方一樣的方法做CRUD就可以了!

Select a repo