用 Express & Sequelize 做一個餐廳網站


Posted by Christy on 2022-02-17

本文為使用後端框架實作一個餐廳網站的實作過程，主要改寫 Lidemy 程式導師計畫 W6 - W8 做的餐廳網站，並有個後台管理頁面，可以管理菜單品項以及抽獎獎項，有新增、刪除、修改等功能。

零、內容摘要

0. 實作前的想法

參考筆記 用後端好朋友們 express & sequelize 實作部落格、利用後端框架 express 實作抽獎網站的 API、常見重點整理

如果不計入挑戰題的話，就是上一週的作業再練習一次

我把網站改成全英文的，風格的部份之後自己做專案就可以自己決定了。

CSS 跟 bootstrap 混在一起寫，不是太好，之後專案改進。

本來要把這份作業當作新的專案來做，可是想想我應該把這個作業當作「想要學習實作功能」，之後自己的專案再自行規劃版面，這樣好像會比較順利。

1. 思考產品全貌，規劃功能與路由

2. 規劃資料庫結構

3. 設置環境

4. 開始實作

a. 用了後端好朋友以後，models 裡面的東西就不用管了

b. 先把畫面實作出來

c. index.js 路由

d. 實作 controllers

5. 遇到的困難

6. 心得

一、思考餐廳網站全貌

1. 需要的功能

應該要思考整個網站的大方向，一次一併思考完，而不是一個個作業分開思考，一次想完會比較省事。

a. 前台的頁面

  • 左上角 Just A Bite 首頁

  • 抽個大獎

    • 改成跟 W17 一樣的方法

  • 我要點餐

    • 前台新增「我要點餐」那頁，包含以下：

      1. 名稱

      2. 價格

      3. 圖片

  • 查詢訂單

    • 我要點餐設計稿：身為一個顧客，我希望登入後，點擊首頁商品的「加入購物車」，可以新增品項至購物車。

    • 購物清單設計稿：身為一個顧客，我希望在查詢訂單的頁面，點擊訂單編號，可以顯示購物清單，能夠刪除單獨品項，以及填寫帳單資訊。

    • 我的訂單設計稿：身為一個顧客，我希望在查詢訂單的頁面，可以顯示「我的訂單」，裡面有訂單編號、訂單日期、數量、金額、狀態等訂單狀況。

    • 訂單明細設計稿：身為一個顧客，我希望點擊訂單編號，可以顯示訂單明細，裡面有縮圖、商品名稱、價格、數量、小計，並且有帳單資訊。

    • 身為一個顧客，我希望可以在結帳頁面結帳。（串接金流）

    • 身為一個顧客，我希望訂單成立後，網站會寄一封信給我，裡面提供訂單資訊以及連結，點了連結之後可以查看訂單資訊。

  • 常見問題

b. 後台的頁面

  • 左上角 Just A Bite 首頁

  • CMS

  • 登出

    • 抽獎管理

      • 有一個後台，可以在後台新增抽獎品項並且設定機率。

        詳細需求如下：

        1. 身為一個管理員，我希望有一個抽獎頁面讓我管理獎項

        2. 身為一個管理員，我希望可以在後台新增抽獎的品項（名字、圖片網址以及說明）以及機率

        3. 身為一個管理員，我希望可以在後台編輯抽獎的品項（名字、圖片網址以及說明）以及機率

        4. 身為一個管理員，我希望可以在後台刪除抽獎的品項

        5. 身為一個管理員，我希望在前台能夠抽出我在後台所設定的獎項

        由於 API 的規則會跟第八週的 API 長不一樣，所以第八週的東西可能會有小幅調整。

    • 餐點管理

      • 新增品項

      • 刪除品項

      • 編輯品項

      上傳圖片的部分請參考 week17 的延伸挑戰題，如果上傳圖片不好做的話，也可以改成填入圖片網址就好。

    • 訂單管理

    • 問題管理

      • 做個後台可以管理常見問題列表，然後在前台的部分動態載入這些資料。

        1. 身為一個管理員，我希望常見問題的內容可以儲存在資料庫，這樣我才能方便修改

        2. 身為一個管理員，我希望管理後台可以管理常見問題，這樣我才能方便修改

        3. 身為一個管理員，我希望在後台可以新增常見問題，會有標題跟內容以及順序

        4. 身為一個管理員，我希望在後台可以編輯常見問題，包括標題跟內容以及順序

        5. 身為一個管理員，我希望在後台可以刪除常見問題

        6. 身為一個管理員，我希望前端頁面的資料是從後端拿的，這樣才能跟後台連動

2. 思考路由設計

a. 登入、登出功能

開放註冊及登入、登出

a.1 登入：

get: /login

post: /login → /

a.2 登出：get: /logout

a.3 註冊：get: /signup

b. CRUD 夥伴們

b.1 抽獎：

  • b.1.1 新增：post: /create_draw/id → /

  • b.1.2 刪除：get: /delete_draw/id → /

  • b.1.3 編輯：

    • get /edit_draw/id → form

    • post /edit_draw/id → /

b.2 菜單：

  • b.2.1 新增：post: /create_menu/id → /

  • b.2.2 刪除：get: /delete_menu/id → /

  • b.2.3 編輯：

    • get /edit_menu/id → form

    • post /edit_menu/id → /

b.3 訂單：

  • b.3.1 新增：post: /create_order/id → /

  • b.3.2 刪除：get: /delete_order/id → /

  • b.3.3 編輯：

    • get /edit_order/id → form

    • post /edit_order/id → /

b.4 問答：

  • b.4.1 新增：post: /create_question/id → /

  • b.4.2 刪除：get: /delete_question/id → /

  • b.4.3 編輯：

    • get /edit_question/id → form

    • post /edit_question/id → /

二、規劃資料庫結構

Sequelize 沒有 number，用了會報錯；另外 enum 的用法我還不熟悉，不知道為什麼無法用 Sequelize.ENUM('value 1', 'value 2')，Datatypes。

1. 抽獎：item, content, url, ratio

$ npx sequelize-cli model:generate --name Prize --attributes item:text,content:text,url:text,ratio:integer

2. 使用者：id, username, password, createdAt, updatedAt

$ npx sequelize-cli model:generate --name User --attributes username:string,password:string

3. 菜單：item, price, photo

$ npx sequelize-cli model:generate --name Menu --attributes item:string,price:integer,photo:string

4. 訂單：po, item, quantity, price, amount, freight, status

$ npx sequelize-cli model:generate --name Order --attributes po:string,item:string,quantity:integer,price:integer,amount:integer,freight:integer,status:string

5. 問答：sequence, title, content

$ npx sequelize-cli model:generate --name Question --attributes sequence:integer,title:string,content:text

三、設置環境

註：安裝 eslint 那些的部分，參考 EsLint 我們重頭來過吧，如果已經 init 過了，就不需要再一次了，因此我從步驟三開始。

1. $ npm init -y

2. $ npm install eslint prettier prettier-eslint，接著再 eslint --init

3. $ npm install express，接著再 $ npm install ejs body-parser express-session connect-flash bcrypt

4. $ npm install --save sequelize mysql2

5. $ npm install --save-dev sequelize-cli

6. $ npx sequelize-cli init

7. 改 config 檔案 development

8. 建立四個 models，參考上面寫好的資料庫結構

註：別忘記要連進 Xampp，建立 3306 port 的連線，並且建立好資料庫

9. Running Migrations $ npx sequelize-cli db:migrate

註：到這裡後，資料庫裡面應該會有剛剛建的五個表格了

四、開始實作

1. 建立 MVC 資料夾、index.js 引入基本設置、先把首頁做好、連結 css 檔案

2. 獎項 view & controller 之間調整

3. Q&A view & controller 之間調整

顯示 FAQ 頁面，原本估計兩小時，只花了 30 分鐘，主要就是不熟悉轉移檔案的方式。

到目前為止，表訂的作業一大致上完成了 🎉

4. 菜單頁面：全部

作業二完成了，但是欠缺上傳圖片這個功能。

5. 註冊、登入頁面

重複註冊：未解決

6. 後台：FAQ、draw & menu

終於把後台的問答跟抽獎頁面做好了，然後也把程式碼都重構成 async await 了，開心。

原來常見問題管理後台是作業三，那這樣我也把作業三寫好囉，耶。

五、遇到的困難 Errors

Error log 1:

ERROR: You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near ' `photo` TEXT, `createdAt` DATETIME NOT NULL, `updatedAt` DATETIME NOT NULL, ...' at line 1

問題描述：在使用 Sequelize 建立資料庫時，出現上述錯誤訊息

Try 1:

把原本的版本：

$ npx sequelize-cli model:generate --name Menu --attributes item:text,price:number,photo:text

改成：

$ npx sequelize-cli model:generate --name Menu --attributes item:string,price:number,photo:string

然後記得要去 migrations 裡面手動把有更動的地方改掉。

結論：沒有效果，還是一直有錯

Try 2:

全部刪掉重裝，這次資料庫建好了，不知道為什麼。

最後 status:enum 沒有預設值，所以先改成 string，之後再改吧。

終於可以開始了。

小結：Sequelize 不可以用 number，參考 Datatypes

Bugs:

1. 抽獎的獎項不該是 hard code，應是動態產生

<div class="draw__prize-content">
  <% prizes.forEach(function(prize) { %>
    <div>❤ <%= `${prize.item}: ${prize.content}`%></div>
  <% }) %>
</div>

2. 抽獎完獎項的圖片沒有取代原本的背景圖片

3. 獎品敘述應該為標題、內文、再抽一次的按鈕

用 bootstrap inline style 的方式，把背景圖片寫進去了

<div class="prize__result bg-image" style="background-image:url(${result.url})">
  <div class="text-center prize__result-content">
    <div class="card-body">
      <h1 class="card-text">${result.item}</h1>
      <h4 class="card-text">${result.content}</h4>
      <button class="draw__btn"><a href="/draw">Draw again!</a></button>
    </div>
  </div>
</div>

4. menu 頁面三個小圖無法置中，用了 bootstrap 的 class= "w-75"

5. 原來往下箭頭可以這樣寫：

// html
<div class="arrow">
  <h1>Find Us</h1>
</div>

// css
.arrow {
  font-size: 18px;
  color: #414141;
  margin: 1rem auto 6rem;
  display: flex;
  justify-content: center;
  align-items: inherit;
  position: relative;
}

.arrow::after {
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
  position: absolute;
  top: 180%;
}

.arrow::before {
  content: "";
  width: 15px;
  height: 15px;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
  position: absolute;
  top: 150%;
}

6. 密碼用 bcrypt 加密，還有這種寫法

const hashPassword = bcrypt.hashSync(password, saltRounds);

7. 後台除了畫面以外，也要記得做權限管理

<% if (username === 'admin') { %>
  ...
<% } %>

註：後端必須一定要做，可以參考下面的第十一個 bug 紀錄。

8. menu 圖片動態顯示問題

menu 的圖片顯示，暫時用 http://localhost:5001/images/menu/menu-4.png + <img src="<%= menu.photo %>"> 偽裝成動態顯示，再來想想怎麼解決。

註：後來發現寫成 http://images/menu/menu-4.png 就可以了。

9. menu 頁面的圖片間距、售完字樣

<div class="wrapper">
  <section class="section">
    <title>Hot sale NOW!</title>
    <div class="menu__dishes">
      <div class="menu__dish"><img src="images/menu/menu-1.png"/></div>
      <div class="menu__dish"><img src="images/menu/menu-2.png"/></div>
      <div class="menu__dish"><img src="images/menu/menu-3.png"/></div>
    </div>
  </section>
</div>

.menu__dishes {
  display: flex;
  justify-content: center;  
}

.menu__dish {
  width: 100%;
  position: relative;
}

.menu__dish > img {
  max-width: 420px;
  width: 100%;
  filter: brightness(105%) opacity(0.5);
}

.menu__dish::before {
  content: "Sold Out";
  position: absolute;
  display: block;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 80%;
  background-color: rgb(49, 45, 45);
  color: #fefefe;
}

10. 重複註冊問題

結論就是，我必須搞清楚，設定資料庫時，哪些欄位的相對應設定，這樣才能治本。

比如說，username 應該是唯一，而且字元長度是多少，也就是說怎麼開資料庫，可以寫一個操作手冊。

如果要在 try… catch… 中拋出錯誤，應該要在 DB 中設定 username 為 unique，這樣才接的到錯誤，就可以寫成下面那樣：

handleRegister: async (req, res, next) => {
    const { username, password } = req.body
    if(!username || !password) {
      req.flash('errMessage', '請輸入帳號及密碼')
      next()
      return
    }
    const hashPassword = await bcrypt.hash(password, saltRounds)
    try {
      await UserDb.create({
        username,
        password: hashPassword
      })
    } catch (err) {
      console.log(err)
      req.flash('errMessage', '發生錯誤, 帳號已存在')
      next()
      return
    }
    req.session.isLogin = true
    res.redirect('/admin-item')
    return
  },

我原本寫的這樣：

handleSignup: async (req, res, next) => {
    const { username, password } = req.body;
    if (!username || !password) {
      req.flash("errorMessage", "Please fill in all the required fields.");
      return next();
    }

    // 這一段雖然可以找到已被註冊的使用者，但是當沒有重複使用者時，會出現這個錯誤
    // TypeError: Cannot read property 'username' of null

    // 師：是因為當沒有重複的 user 的時候，User.findOne 就會回傳 null，因此 user 就是 null，你存取 user.username 時就會出錯，因為 user 不是 object
    try {
      let user = await User.findOne({
        where: {
          username,
        },
      });
      if (user.username === username) {
        req.flash("errorMessage", "user exists");
        return next();
      }
    } catch (err) {
      req.flash("errorMessage", err.toString());
      return next();
    }

    bcrypt.hash(password, saltRounds, async (err, hash) => {
      if (err) {
        req.flash("errorMsg", "please try again");
        return next();
      }

      try {
        const userData = await User.create({
          username,
          password: hash,
        });

        req.session.username = userData.username;
        res.redirect("/");
      } catch (err) {
        if (err.parent.errno === 1062) {
          req.flash("errorMsg", "user exits");
          return next();
        }
        req.flash("errorMsg", "something went wrong");
        return next();
      }
    });
  },

老師說，「所以其實你根本也不用檢查 username，因為你 where 時已經去指定條件了，所以只要 user 有東西，就代表一定重複，只要 if (user) 就好」，改寫成這樣就可以了：

handleSignup: async (req, res, next) => {
  const { username, password } = req.body;
  if (!username || !password) {
    req.flash("errorMessage", "Please fill in all the required fields.");
    return next();
  }

  try {
    let user = await User.findOne({
      where: {
        username,
      },
    });
    if (user) {
      req.flash("errorMessage", "user exists");
      return next();
    }
  } catch (err) {
    req.flash("errorMessage", err.toString());
    return next();
  }

  bcrypt.hash(password, saltRounds, async (err, hash) => {
    if (err) {
      req.flash("errorMsg", "please try again");
      return next();
    }

    try {
      const userData = await User.create({
        username,
        password: hash,
      });

      req.session.username = userData.username;
      res.redirect("/");
    } catch (err) {
      if (err.parent.errno === 1062) {
        req.flash("errorMsg", "user exits");
        return next();
      }
      req.flash("errorMsg", "something went wrong");
      return next();
    }
  });

bugs 紀錄：

bug 1: TypeError: Cannot read property 'username' of null

描述：無法新增一個使用者

嘗試 1: 加入 let username = [];

let username = [];
if (user.username === username) {
  req.flash("errorMessage", "user exists");
  return next();
}

bug 2: ReferenceError: Cannot access 'username' before initialization

描述：無法新增一個使用者

嘗試 2: var username = [];

bug 3: Error: WHERE parameter "username" has invalid "undefined" value

描述：無法新增一個使用者

嘗試 3:

註冊流程：

輸入帳密 → 檢查使用者是否已存在 → 是：return；否：註冊成功

handleSignup: async (req, res, next) => {
    const { username, password } = req.body;
    if (!username || !password) {
      req.flash("errorMessage", "Please fill in all the required fields.");
      return next();
    }
    const hashPassword = await bcrypt.hash(password, saltRounds);
    try {
      await User.create({
        username,
        password: hashPassword,
      });
      req.session.username = username;
      return res.redirect("/");
    } catch (err) {
      req.flash("errorMessage", err.toString());
      return next();
    }
  },

11. 權限檢查

因為這個網站有後台的關係，因此應該檢查使用者是否為 admin，如果不是的話，要將其他使用者轉到首頁。

方法就是寫一個權限檢查的函式，要記得加在路由上面

我原本的方式是放在畫面上，這樣不太好，應該要由後端檢查。

// index.js

app.use((req, res, next) => {
  res.locals.username = req.session.username;
  // 我後來用了 username 來判斷是否為 admin，沒有用 role
  // res.locals.role = req.session.role;
  res.locals.errorMessage = req.flash("errorMessage");
  next();
});

function isAdmin(req, res, next) {
  // if (req.session.role !== "admin") {
  if (req.session.username !== "admin") {
    return res.redirect("/");
  }
  return next();
}

// 記得要寫在 controller 前面
app.get("/cms", isAdmin, userController.cms);
app.get("/cms/prize", isAdmin, prizeController.managePrize);
app.get("/cms/faq", isAdmin, faqController.manageFaq);
app.get("/cms/menu", isAdmin, menuController.manageMenu);
app.get("/cms/order", isAdmin, orderController.manageOrder);

app.get("/cms/add-prize", isAdmin, prizeController.add);
app.post("/cms/add-prize", isAdmin, prizeController.handleNewPrize);
app.get("/cms/delete-prize/:id", isAdmin, prizeController.delete);
app.get("/cms/edit-prize/:id", isAdmin, prizeController.edit);
app.post("/cms/edit-prize/:id", isAdmin, prizeController.handleEdit);

app.get("/cms/add-faq", isAdmin, faqController.add);
app.post("/cms/add-faq", isAdmin, faqController.handleNewFaq);
app.get("/cms/delete-faq/:id", isAdmin, faqController.delete);
app.get("/cms/edit-faq/:id", isAdmin, faqController.edit);
app.post("/cms/edit-faq/:id", isAdmin, faqController.handleEdit);

app.get("/cms/add-menu", isAdmin, menuController.add);
app.post("/cms/add-menu", isAdmin, menuController.handleNewMenu);
app.get("/cms/delete-menu/:id", isAdmin, menuController.delete);
app.get("/cms/edit-menu/:id", isAdmin, menuController.edit);
app.post("/cms/edit-menu/:id", isAdmin, menuController.handleEdit);

12. 要記得所有的「可以輸入的地方」都必須防止 xss 攻擊

What is the HtmlSpecialChars equivalent in JavaScript?

// public/script/api.js

function escapeHtml(text) {
  return text
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

async function drawResult() {
  const result = await getDrawAPI();
  try {
    mainHTML.innerHTML = `
      <div class="prize__result bg-image" style="background-image:url(${result.url})">
        <div class="text-center prize__result-content">
          <div class="card-body">
            <h1 class="card-text">${escapeHtml(result.item)}</h1>
            <h4 class="card-text">${escapeHtml(result.content)}</h4>
            <button class="draw__btn"><a href="/draw">Draw again!</a></button>
          </div>
        </div>
      </div>
    `;
  } catch (err) {
    return console.log(`Error: ${result.error} & ${result.message}`);
  }
}

六、心得

本來想要把挑戰題全部做出來，可是後來還是覺得「以練習必要功能為主」，畢竟要走後端的話，要學的東西可多的呢，就先放著，有機會再回頭看吧。

部署到 AWS 失敗讓人好灰心，不過該來的總是會來的，今天遇到的坑遇過了，下次再遇一次也不陌生了…

總算交出最後一個作業，好感動，內心百感交集，很感謝老師開啟這個計畫，也很榮幸可以加入。



Christy
Web Developer
Coding on the way




Related Posts

[ CSS 05 ] 遮罩裁切相關

[ CSS 05 ] 遮罩裁切相關

 tzutzu858
[git] Checkout A new remote branch

[git] Checkout A new remote branch

 adrianwudev
Command Line 筆記

Command Line 筆記

 krebikshaw

Comments