iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 21
0
Modern Web

Node JS-Back end見聞錄系列 第 21

Node.js-Backend見聞錄(20):實作-商品系統(三)-訂單列表及訂購商品部分(一)

Node.js-Backend見聞錄(20):實作-商品系統(三)-訂單列表及訂購商品部分(一)

前言

從這篇開始,我們將開始寫商品系統的程式。首先,關於「開發環境生成」可以參考實作-會員系統(一)-會員註冊(一)

訂單列表及訂購商品需求

  • 訂單列表(GET)
  • 取得商品資料(GET)
  • 進行訂購(POST)

資料結構

由於member部分,我們在實作會員系統系列文章已經有提及實作內容,這部分就不講述怎麼開發,也請讀者自行將那部份的程式轉移過來。

.
├── app.js
├── bin
│   └── www
├── config
│   └── development_config.js
├── controllers
│   ├── member
│   │    └── modify_controller.js
│   ├── order
│   ├── product
│   │    └── get_controller.js
├── models
│   ├── member
│   │    ├── encryption_model.js
│   │    ├── login_model.js
│   │    └── register_model.js
│   ├── order
│   ├── product
│   │    └── all_product.js
│   └── connection_db.js
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── member.js
│   ├── order.js
│   └── product.js
├── sevice
│   └── member_check.js
├── views
    ├── error.ejs
    └── index.ejs
├── .env
└── .gitignore

開始實作

在這篇文章中我們先實作取得商品資料(GET)的API。

取得商品資料(GET)

由於shopping_cart資料庫中的product tabel尚未有資料,所以這部分我們先登入到MySQL中來建置資料。這部分預設新增的資料為上篇實作-商品系統(二)-資料庫設計所提到的例子。

id name price quantity img img_name remark create_date update_date
1 逗貓棒 12.00 5 貓愛玩 2018-01-01 00:00:00
2 潔牙骨 5.00 10 狗潔牙用 2018-01-01 00:00:00
3 企鵝玩偶 20.00 3 鵝分身 2018-01-01 00:00:00

資料庫部分

新建指令為:

  • 第一筆
mysql> INSERT INTO product (name, price, quantity, remark, create_date) VALUES ('逗貓棒', 12, 5, '貓愛玩', '2018-01-01');
Query OK, 1 row affected (0.02 sec)
  • 第二筆
mysql> INSERT INTO product (name, price, quantity, remark, create_date) VALUES ('潔牙骨', 5, 10, '狗潔牙用', '2018-01-01');
Query OK, 1 row affected (0.01 sec)
  • 第三筆
mysql> INSERT INTO product (name, price, quantity, remark, create_date) VALUES ('企鵝玩偶', 20, 3, '企鵝分身', '2018-01-01');
Query OK, 1 row affected (0.00 sec)

最後,我們使用SELECT的指令來觀看新增後的結果:

程式部分

models資料夾的getAllProduct_model.js檔案,並寫入:

const db = require('../connection_db');

module.exports = function getProductData(memberData) {
    let result = {};
    return new Promise((resolve, reject) => {
        db.query('SELECT * FROM product', function (err, rows) {
            // 若資料庫部分出現問題,則回傳「伺服器錯誤,請稍後再試!」的結果。
            if (err) {
                console.log(err);
                result.status = "取得全部訂單資料失敗。"
                result.err = "伺服器錯誤,請稍後在試!"
                reject(result);
                return;
            }
            // 若資料庫部分沒問題,則回傳全部產品資料。
            resolve(rows);
        })
    })
}

getAllProduct_model.js檔案匯入controllers > product資料夾的get_controller.js檔案中:

const productData = require('../../models/product/getAllProduct_model');

module.exports = class GetProduct {
    // 取得全部產品資料
    getAllProduct(req, res, next) {
      productData().then(result => {
        res.json({
            result: result
        })
      }, (err) => {
        res.json({
            result: err
        })
      })
    } 
}

接續新增一個HTTP method為GET且API URL/product取得商品資料(GET)用。至routes資料夾的product.js檔案中寫入:

var express = require('express');
var router = express.Router();

const GetProduct = require('../controllers/product/get_controller');

getProduct = new GetProduct();

router.get('/product', getProduct.getAllProduct);

module.exports = router;

最後,再去app.jsroutes資料夾的product.js匯入進去:

const product = require('./routes/product');

app.use('/', product);

測試

這部分我們透過Postman來進行測試:

  • API URL: localhost:3000/product
  • HTTP method: GET

其結果:

小結

在這階段我們已經完成取得商品資料(GET)的API,而下個章節將接續開發訂單列表(GET)進行訂購(POST)部分。


上一篇
Node.js-Backend見聞錄(19):實作-商品系統(二)-資料庫設計
下一篇
Node.js-Backend見聞錄(21):實作-商品系統(四)-訂單列表及訂購商品部分(二)
系列文
Node JS-Back end見聞錄31

尚未有邦友留言

立即登入留言