原先在 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/:放 cssimages 的資料夾。
  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. 把 HTMLCSS 改成 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 命名上,就將命名開頭以功能部分分開來,像是 `newPosttitlearticletitlebtnedit`,這樣在建立巢狀結構,也比較簡潔、容易找到修改。

  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.

#Express #CSS 預處理器 #MVC







Related Posts

Vite 怎麼能那麼快?從 ES modules 開始談起

Vite 怎麼能那麼快?從 ES modules 開始談起

Alibaba Cloud Learning Path

Alibaba Cloud Learning Path

N1_CSS 預處理器

N1_CSS 預處理器






Comments