Express 框架的基本使用
express 4.x 文檔: http://www.expressjs.com.cn/4x/api.html#express
安裝
npm install express --save
基本使用
// 引入模塊并實例化對象
const app = require("express")();
// 監聽端口
app.listen(3000);
app.get("/", (request, response) => {
response.end("hello world");
});
托管靜態文件
在設置好后靜態文件托管目錄后, 訪問指定的目錄, 就會自動讀取并且返回
js
// 引入模塊
const express = require("express");
const app = express();
// 設置靜態文件托管目錄
// 第一種方式設置, 不加路由, 按路徑訪問
app.use(express.static(__dirname + "/public"));
// 第二種方式設置, 使用路由, 必須按路由訪問
app.use(express.);
模板中 (index.css 位于 /public 目錄下)
<!-- 1.不加路由的訪問方式,按照路徑 -->
<link rel="stylesheet" href="/index.css">
<!-- 2.使用的方式, 按照路由 -->
<link rel="stylesheet" href="/public/index.css">
路由 (請求)
- GET 請求
const app = require("express")();
// app.get("請求路徑", (req, res)=>{ ... });
app.get("/get", (request, response) => {
response.end("hello world");
});
- POST 請求
const app = require("express")();
// app.get("請求路徑", (req, res)=>{ ... });
app.post("/post", (request, response) => {
response.end("hello world");
});
- 路由參數 路由參數,主要是針對 get 請求, post請求可以使用
formidable這個包
js 中設置和獲取路由參數
// 設置模板引擎
app.set('views', './view');
app.engine('.html', ejs.__express);
app.get("/", (request, response) => {
response.render("test.html");
});
// 設置參數 /:id
app.get("/test/:id/:name", (request, response) => {
// 對象方式,獲取參數 id
let id = request.params.id;
// 數組方式, 獲取參數
let name = request.params["name"];
response.send(name+id);
});
在模板中使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ejs</title>
</head>
<body>
<p> <a href="/test/alex/1">參數</a> </p>
<!-- <p> <a href="/test?id=1">第一種方式</a> </p> -->
</body>
</html>
響應
- 發送字符串/json
// 引入模塊
const ejs = require("ejs");
const express = require("express");
const app = express();
// 監聽端口
app.listen(3000);
// 發送字符串
app.get("/str", (request, response) => {
// 發送json
response.send({ name: 'alex', age: 20 });
});
// 發送json
app.get("/json", (request, response) => {
response.send({ name: 'alex', age: 20 });
});
- 設置狀態碼
// 引入模塊
const ejs = require("ejs");
const express = require("express");
const app = express();
// 監聽端口
app.listen(3000);
app.get("/", (request, response) => {
response.status(404).send("Not Found");
});
- 多次響應
// 引入模塊
const ejs = require("ejs");
const express = require("express");
const app = express();
// 監聽端口
app.listen(3000);
app.get("/", (request, response) => {
response.write("test");
response.write("test");
response.write("test");
response.end("test end");
});
應用生成器
通過應用生成器, express可以快速創建一個應用的骨架
- 安裝
npm install express-generator --save
- 查看幫助
express -h
- 安裝所欲依賴包
npm install
- 設置模板引擎
express --view=ejs
- 啟動
set DEBUG=your-project-name & npm start
- 生成后的目錄結構樹
|--bin 運行目錄
|--node_modules 依賴包存放目錄
|--public 靜態資源存放目錄
|--images
|--javascripts
|--stylesheets
|--routes 路由文件存放目錄
|--index.js
|--user.js
|--views 模板文件存放目錄
|--error.ejs
|--index.ejs
|--app.js 入口文件
|--package.json
|--package-loack.json
app.js
let createError = require('http-errors');
let express = require('express');
let path = require('path');
let cookieParser = require('cookie-parser');
let logger = require('morgan');
// 導入路由文件
let indexRouter = require('./routes/index');
let usersRouter = require('./routes/users');
// 創建express對象
let app = express();
// 模板引擎
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);
// 錯誤頁面
app.use(function (req, res, next) {
next(createError(404));
});
// 錯誤處理
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 || 502);
res.render('error');
});
// 導出app對象
module.exports = app;
