使用express-generator快速搭建Web應用程序

一、概述

Express-generator是一個可擴展的應用程序生成器，可以快速創建基於Express Web框架的應用程序骨架。使用Express-generator，可以避免手動創建應用程序骨架所需的重複性工作。這個工具提供了用於生成Express應用程序的標準目錄結構、代碼文件、模板和配置文件，並且可以根據自己的需要進行定製。

二、安裝使用

使用Express-generator前，要先確保在計算機上安裝好了Node.js環境。安裝完成後，可以在命令行中使用以下命令來安裝Express-generator:

npm install -g express-generator

安裝完成後，在命令行中執行下面的命令生成一個Express應用程序骨架:

express --view=ejs myapp

在上述命令中，”–view”參數設置視圖引擎為ejs，”myapp”是應用程序名稱。

三、目錄結構

使用Express-generator生成的應用程序骨架自帶了標準的目錄結構，如下所示:

myapp/
├── bin/
│   └── www
├── public/
│   ├── images/
│   ├── javascripts/
│   └── stylesheets/
│       └── style.css
├── routes/
│   ├── index.js
│   └── users.js
├── views/
│   ├── error.ejs
│   ├── index.ejs
│   └── layout.ejs
├── app.js
├── package.json
└── package-lock.json

其中，bin目錄存放了啟動腳本；public目錄存放了靜態文件；routes目錄存放了路由文件；views目錄存放了模板文件；app.js是應用程序主程序文件。

四、路由

路由用於定義應用程序的請求方式和URL之間的映射關係。在Express中，路由定義通常會被保存在routes目錄的模塊文件中。

下面是一個基本的路由代碼示例:

// routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

在上述代碼中，定義了根URL(/)的處理程序，當GET請求根URL時，將返回index模板並傳遞一個title參數。

五、模板引擎

Express-generator提供了多種模板引擎，如EJS、Jade、Handlebars等。模板引擎負責將數據渲染成HTML頁面，並返回給客戶端。

下面是一個使用EJS模板引擎的代碼示例:

// app.js
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

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

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

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

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

module.exports = app;

在上述代碼中，使用EJS作為視圖引擎，並將應用程序的views目錄設置為存放模板文件的目錄。在路由代碼中，使用res.render()方法將渲染後的模板返回給客戶端。模板文件保存在views目錄下。

六、靜態文件

靜態文件是指應用程序中不會因客戶端請求而發生變化的文件，通常包括CSS、JavaScript和圖像等文件。使用Express-generator生成的應用程序骨架在public目錄中包含了一些靜態文件的示例文件。

例如，在HTML中引用靜態文件：

<link rel="stylesheet" href="/stylesheets/style.css">

在上述代碼中，將會引用public目錄下的style.css文件。

七、錯誤處理

在Express中，可以通過定義錯誤處理中間件來捕捉應用程序在處理請求時拋出的異常。

以下是一個簡單的錯誤處理代碼示例:

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

在上述代碼中，設置了當應用程序在處理請求時拋出異常時的處理函數。可以根據需要將錯誤信息輸出到控制台或返回錯誤信息頁面。

八、總結

使用Express-generator可以快速搭建Web應用程序，並且可以根據需要進行定製。該工具提供了常用的目錄結構、代碼文件、模板和配置文件，在創建應用程序時可以避免繁瑣的手動工作。在應用程序開發過程中，還可以使用Express提供的路由、模板和錯誤處理等功能來增強應用程序的功能和穩定性。