w17 hw2 餐廳網頁改寫

原先在 week 6 ~ week 8 使用 HTML、JavaScript、CSS 製作了餐廳首頁、串抽獎的 API、常見問題的頁面，現在要使用 Express 及 Sequelize 將餐廳網頁改寫。

改寫步驟

1. 安裝 Express 並建立路由、MVC 架構

|-- project
      |-- index.js
      |-- .env
      |-- .sequelizerc
      |-- config
            |-- config.json -> config.js：require 引用 dotenv（在下載 sequelize-cli npm 自動產生）
      |-- migrations
      |-- seeders
      |-- models
            |-- index.js：修改 .json -> .js
      |-- views
      |-- public

1.1 新增檔案及資料夾

先把檔案架構設好，就可以一步一步從靜態頁面、資料庫建立、功能製作做起。所以現在先來建立起專案資料夾的架構。

1.1.1 index.js：建立路由

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

1. views/：放 .ejs 靜態檔案的資料夾。
2. public/：放 css、images 的資料夾。
3. models/：放 database 相關的資料夾。
4. controllers/：處理 data 及渲染頁面的資料夾。

2. 安裝 Sequelize-CLI，會自動產生 config/

思考一下，餐廳頁面需要登入及抽獎，所以需要建立兩個 models —— User, Prize。但目前想說先從熟悉的做起，也就是登入及註冊，所以只要先使用 Sequelize-CLI 建立 User dataBase Table。

$ npm install --save sequelize-cli # installing CLI
$ npx sequelize-cli init # create folders, like config, models, migrations, seeders

3. 安裝 dotenv modules，設定環境變數

參考 dotenv，並建立 .env、.sequelizerc 的檔案。

3.1 建立放置環境變數的檔案

// .env
DB_HOST=localhost
DB_USERNAME=root
DB_PASSWORD=root
DB_PORT=8080
SESSSION_SECRET=xxxx

3.2 修改 MVC 檔案的路徑

//.sequelizerc
'use strict';

require('dotenv').config();    // don't forget to require dotenv
const path = require('path');

module.exports = {
  // 將 config.json 改成 config.js
  'config': path.resolve('config', 'config.js'),
  'models-path': path.resolve('models'),
  'seeders-path': path.resolve('seeders'),
  'migrations-path': path.resolve('migrations'),
};

3.3 修改 /config/config.json

改成 module 的形式，並修改副檔名為 config.js

module.exports = {
  development: {
    username: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
    host: process.env.DB_HOST,
    dialect: 'postgres',
    logging: false,
  },
  test: {
  // 略
  },
  production: {
  // 略
  }
};

4. 把 HTML、CSS 改成 EJS 及 CSS 預處理器

|-- project
...略
      |-- views：靜態頁面
            |-- index.ejs
            |-- template
                  |-- head.ejs
                  |-- navbar.ejs
                  |-- footer.ejs
      |-- public：CSS 與圖片相關
            |-- images
            |-- css
                  |-- main.scss
                  |-- _component.scss
                  |-- _layout.scss
                  |-- style.css

4.1 這個部分算是複習，我發現了一些之前的問題：

1. CSS 在 class 的命名上，有待改進，像是留言的部分（sectionQ&A、sectionQuestion）、搶先看菜單（sectionmenu）等等，比較難將其使用巢狀分類分開，在之前的部落格 class 命名上，就將命名開頭以功能部分分開來，像是 `newPosttitle、articletitle、btnedit`，這樣在建立巢狀結構，也比較簡潔、容易找到修改。

2. CSS 路徑：
   (1) 靜態頁面在 ./index.js 要引入，才能使用 CSS 的部分。

    a. `app.use('/static', express.static('public'));`
   

   (2) CSS 圖片在 MVC 架構裡的路徑。

    a. 圖片在 server 連接後的 URL：`localhost:<port>/public/images/p-3.png`
    b. 在 HTML 標籤：`<img src='/public/images/p-3.png'>`
   

3. SCSS 要怎麼改寫 @media
   這部分只有稍微查了一下資料，得知 @media RWD 的部分可以寫在 _mixin.scss 裡面，但詳細要怎麼寫，還沒做研究，這部分屬於小支線，所以想說等主要的部分做完，心有餘力再來研究。

5.