feat(express): 新增模板项目文档、代码

Author: 142vip.cn

…/node/express/apps/quick-start/Readme.md …/express/apps/quick-start-demo/Readme.mdcode/node/express/apps/quick-start/Readme.md renamed to code/express/apps/quick-start-demo/Readme.md code/node/express/apps/quick-start/Readme.md renamed to code/express/apps/quick-start-demo/Readme.md

@@ -1,9 +1,9 @@
-
 # Express框架快速开始演示Demo
 
 ## 项目初始化
 
 ```bash
+## 初始化
 npm init
 ```
 
@@ -33,6 +33,12 @@ pwd
 node app.js
 ```
 
+或者使用`package.json`中的脚本，启动服务
+
+```bash
+npm run dev
+```
+
 服务运行，监听`3000`端口
 
 ## 调用服务
@@ -42,6 +48,11 @@ node app.js
 curl -i http://127.0.0.1:3000 
 ```
 
-接口返回：Hello World
+接口返回：`Hello World`
 
 ![](./images/hello-world.png)
+
+## 参考
+
+- <https://www.expressjs.com.cn/>
+- <https://www.npmjs.com/package/express>

code/node/express/apps/quick-start/app.js code/express/apps/quick-start-demo/app.jscode/node/express/apps/quick-start/app.js renamed to code/express/apps/quick-start-demo/app.js

@@ -1,12 +1,14 @@
 {
-  "name": "quick-start",
+  "name": "quick-start-demo",
   "version": "0.0.1",
   "description": "express框架快速开始演示demo",
-  "main": "app.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "node app.js"
+  },
+  "author": {
+    "name": "微信公众号：储凡",
+    "email": "fairy_vip@2925.com"
   },
-  "author": "",
   "license": "MIT",
   "dependencies": {
     "express": "^4.18.2"

…/apps/quick-start/images/hello-world.png …/quick-start-demo/images/hello-world.pngcode/node/express/apps/quick-start/images/hello-world.png renamed to code/express/apps/quick-start-demo/images/hello-world.png code/node/express/apps/quick-start/images/hello-world.png renamed to code/express/apps/quick-start-demo/images/hello-world.png

@@ -0,0 +1,81 @@
+# Express框架模板项目演示Demo
+
+`Express`框架提供了应用程序生成器，就是预先约定一些`Express`框架项目的开发规范，例如：`目录约束`、`路由约束`...
+
+通过应用生成器工具 `express-generator`模块 可以快速创建一个应用的结构，可以在此基础上形成基于`Express`框架的模板项目
+
+## 安装依赖
+
+Node版本大于8.2.0或者更高时，可以使用npx命令来运行Express模板生成项目，执行命令：
+
+```bash
+npx express-generator
+```
+
+也可全局安装`express-generator`模块，执行命令：
+
+```bash
+npm install -g express-generator
+```
+
+安装完成后，执行命令：
+
+```bash
+# 列出可用命令参数
+express -h
+```
+
+![可用命令参数](./images/express-cmd.png)
+
+## 创建项目
+
+在了解`express`命令的基本可用参数后，可以直接创建名为`template-demo`模版项目，执行命令：
+
+```bash
+# 创建模板项目，使用ejs模板引擎
+express --view=ejs template-demo
+```
+
+对于纯后端的应用，可以使用`--no-view`参数，创建不带模板渲染引擎的模板项目，执行命令：
+
+```bash
+# 创建模板项目，不试用渲染引擎
+express --no-view template-demo
+```
+
+可以清晰地看见新创建了`template-demo`项目：
+
+![](../images/express-create.png)
+
+## 目录结构
+
+注意下项目中的目录结构：
+
+- public目录： 存放前端静态资源，例如：js代码、css代码
+- view目录：存放前端页面，在前后端混合开发中，该目录可以用渲染引擎来接受后端数据
+- routes目录：后端服务路由，一般用来约定restFul接口
+- app.js：项目的入口文件，Node项目一般以`index.js`、`app.js`作为入口文件，类似与Java开发中的`main.java`文件
+- package.json：项目信息、依赖包管理配置文件，可以在里面声明`项目信息`、`开发脚本`、`依赖版本`等信息
+- bin：这里是框架约定的入口文件，实际开发中可以将该逻辑整合到`app.js`中
+
+## 使用项目
+
+```bash
+## 下载依赖
+npm ci 
+
+## 启动项目
+npm run dev
+
+# 查看端口
+lsof -i:3000
+```
+
+当发现端口3000被监听时，可以在浏览器中打开地址：<http://localhost:3000>，查看Express模板项目的运行情况:
+
+![](./images/express-running.png)
+
+## 参考
+
+- <https://www.npmjs.com/package/express-generator>
+- <https://www.expressjs.com.cn/starter/generator.html>

…ess/apps/quick-start/images/pwd-info.png …pps/quick-start-demo/images/pwd-info.pngcode/node/express/apps/quick-start/images/pwd-info.png renamed to code/express/apps/quick-start-demo/images/pwd-info.png code/node/express/apps/quick-start/images/pwd-info.png renamed to code/express/apps/quick-start-demo/images/pwd-info.png

@@ -0,0 +1,83 @@
+const createError = require('http-errors')
+const express = require('express')
+const path = require('path')
+const cookieParser = require('cookie-parser')
+const logger = require('morgan')
+const http = require('http')
+const indexRouter = require('./routes/index')
+const usersRouter = require('./routes/users')
+const app = express()
+const server = http.createServer(app)
+
+// 配置渲染引擎
+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)
+
+/**
+ * 访问不存在的路由，直接抛出 404 错误
+ */
+app.use(function(req, res, next) {
+  next(createError(404))
+})
+
+/**
+ * 错误处理中间件
+ */
+app.use(function(err, req, res, next) {
+  res.locals.message = err.message
+  res.locals.error = req.app.get('env') === 'development' ? err : {}
+
+  // 渲染异常页面
+  res.status(err.status || 500)
+  res.render('error')
+})
+
+
+// 启动服务，监听端口：3000
+server.listen(3000)
+server.on('error', error => {
+  if (error.syscall !== 'listen') {
+    throw error
+  }
+
+  const addr = server.address()
+  const bind = typeof addr === 'string'
+    ? 'pipe ' + addr
+    : 'port ' + addr.port
+
+
+  // 分类输出错误信息
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges')
+      process.exit(1)
+      break
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use')
+      process.exit(1)
+      break
+    default:
+      throw error
+  }
+})
+
+/**
+ * 监听服务启动
+ */
+server.on('listening', () => {
+  const addr = server.address()
+  const bind = typeof addr === 'string'
+    ? 'pipe ' + addr
+    : 'port ' + addr.port
+
+  console.log('listening on:', bind)
+})