在開始修改之前我們先快速的掃過express產生器建出來的東西,了解概況對於之後開發會更有效率。

myapp
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug
  • app.js用來設定middleware和各個子模組啟始的routing。
  • bin/www是一個執行用的js,在npm start的時候其實就是呼叫node bin/www
  • package.json所有使用的套件都紀錄在這,也就是npm install --save的結果
  • public用來放所有前端要用的東西,例如:HTML/CSS/JS
  • routes跟routing相關的code都放這
  • views用來放pug的模板檔,看不習慣可以刪掉,之後用不到

接著我們攤開app.js來稍微了解一下Node.js的基礎運作。首先是各個使用到的模組宣告,自己寫的routing模組:index和users,也是這邊宣告。

var createError = require('http-errors');
var express = require('express');
var cookieParser = require('cookie-parser');
var path = require('path');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

接著是用app.use定義各種要使用的middleware。express.static定義了哪一個目錄會被使用者存取到,以本例來說就是public這個資料夾,他會落在根目錄下的public內。

var app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

若是要設定routing則是像下面這樣,根目錄使用index.js而根目錄後接著/users開頭的url則是進入user.js

app.use('/', indexRouter);
app.use('/users', usersRouter);

列出來的這幾處都會改動到,在下一節正式進入記帳網站的開發。

results matching ""

    No results matching ""