Express Web 服务器
创建 package
执行 npm init 命令为你的应用创建 package.json 文件。
npm init
这个命令会提示你输入一些内容，比如你应用的名称和版本。目前，你可以简单地按 RETURN 键接受大多数默认设置，除了入口点 entry point。
咱们倾向于使用 app.js 而不是 index.js。
其结果大致如下：
package name: (lr_event_driven_node)
version: (1.0.0)
description: Example project: building event driven microservices in Node.js.
entry point: (index.js) app.js
test command:
git repository: https://github.com/Literank/lr_event_driven_node.git
keywords: event-driven,kafka,express
author: literank.com
license: (ISC) MIT
About to write to /Users/netdong/workspace/2023/projects/lr_event_driven_node/package.json:
{
"name": "lr_event_driven_node",
"version": "1.0.0",
"description": "Example project: building event driven microservices in Node.js.",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Literank/lr_event_driven_node.git"
},
"keywords": [
"event-driven",
"kafka",
"express"
],
"author": "literank.com",
"license": "MIT",
"bugs": {
"url": "https://github.com/Literank/lr_event_driven_node/issues"
},
"homepage": "https://github.com/Literank/lr_event_driven_node#readme"
}
该命令会创建一个 package.json 文件，其用于查看管理项目依赖。
安装 Express
npm install express
该命令会更新 package.json 文件并在项目中自动创建一个 package-lock.json 文件。
创建模板目录
创建一个名为 templates 的目录，将 index.html 移进去。文件名改为 index.handlebars。
调整页面标题：
- <title>LiteRank Book Store</title>
+ <title>{{ title }}</title>
...
- <h1 class="text-4xl font-bold">LiteRank Book Store</h1>
+ <h1 class="text-4xl font-bold">{{ title }}</h1>
{{ title }} 是 Handlebars 模板引擎的语法。
你可以为 Express 选择任意模板引擎。
安装 Handlebars
npm install express-handlebars
express-handlebars 是 Express 的 Handlebars 视图渲染引擎。
调整 package.json
确认你的 package.json 有 "type": "module" 设置以使用 ES 模块机制。
{
"type": "module",
"dependencies": {
"express": "^4.19.2",
"express-handlebars": "^7.1.2"
}
}
创建 app.js:
import express from "express";
import { engine } from "express-handlebars";
const app = express();
const port = 3000;
// Set Handlebars as the template engine
app.engine("handlebars", engine());
app.set("view engine", "handlebars");
// Set the directory for template files
app.set("views", "./templates");
// Define a route to render the template
app.get("/", (req, res) => {
// Render the 'index.handlebars' template, passing data to it
res.render("index", { layout: false, title: "LiteRank Book Store" });
});
// Start the server
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
了解更多关于
layout属性的内容：https://www.npmjs.com/package/express-handlebars#layouts
如下运行程序：
node app.js
将得到如下一行内容：
Server is running on http://localhost:3000
你的 web 服务器已经在 3000 端口跑起来了。
尝试在浏览器中访问 http://localhost:3000/ 。它应该展示一个如之前章节设计的网页给你。
使用 TypeScript
在 Node.js 项目中使用 TypeScript 有许多好处：
- 静态类型检查：TypeScript 允许你为变量、参数和返回值定义类型。这有助于在开发过程中捕获与类型相关的错误，而不是在运行时，从而使代码更加健壮和可预测。
- 提高代码可读性：通过类型注解，代码变得更加自解释，这使得开发人员更容易理解代码库并有效地进行协作。对于大型项目而言，类型信息可当作额外的文档。
- 增强的 IDE 支持：TypeScript 在像 Visual Studio Code 这样的 IDE 中可提供更好的工具支持，比如提供代码导航、自动完成和内联文档等功能，这可以大大提高生产力和代码质量。
好的，让我们来进行转型。
执行如下命令来安装 typescript 相关依赖：
npm install typescript ts-node @types/node @types/express --save-dev
--save-dev 标记表示这些依赖都是开发依赖 devDependencies，只在开发阶段被使用。
在根目录创建 tsconfig.json：
{
"compilerOptions": {
"target": "ESNext",
"module": "CommonJS",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules"]
}
移动 app.js 到 src/app.ts。
更新 package.json:
@@ -1,11 +1,11 @@
{
"name": "lr_event_driven_node",
"version": "1.0.0",
- "type": "module",
"description": "Example project: building event driven microservices in Node.js.",
"main": "app.js",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "dev": "ts-node src/app.ts",
+ "build": "tsc"
},
"repository": {
"type": "git",
@@ -25,5 +25,11 @@
"dependencies": {
"express": "^4.19.2",
"express-handlebars": "^7.1.2"
+ },
+ "devDependencies": {
+ "@types/express": "^4.17.21",
+ "@types/node": "^20.12.7",
+ "ts-node": "^10.9.2",
+ "typescript": "^5.4.5"
}
}
运行新版的程序：
npm run dev
再次在浏览器中访问 http://localhost:3000/ 。
如果网页一切正常，那就表示 TypeScript 版本的 web 服务运行正常。