From eaeabff105cd610a7482509f5f70d8a4a2239f1e Mon Sep 17 00:00:00 2001 From: jaywcjlove Date: Tue, 18 Oct 2022 09:12:24 +0000 Subject: [PATCH] feat: add `expressjs.md`. cb5f7426083ad64a29351d375b23a0df775e8e94 --- docs/css.html | 1 + docs/expressjs.html | 696 ++++++++++++++++++++++++++++++++++++++++++++ docs/git.html | 2 +- index.html | 5 + style/style.css | 5 +- 5 files changed, 706 insertions(+), 3 deletions(-) create mode 100644 docs/expressjs.html diff --git a/docs/css.html b/docs/css.html index 15309f3c..c152ec2f 100644 --- a/docs/css.html +++ b/docs/css.html @@ -590,6 +590,7 @@ color: tan; color: rebeccapurple; +

更多标准颜色名称

十六进制颜色

color: #090;
 color: #009900;
diff --git a/docs/expressjs.html b/docs/expressjs.html
new file mode 100644
index 00000000..3c56e3ed
--- /dev/null
+++ b/docs/expressjs.html
@@ -0,0 +1,696 @@
+
+
+
+
+Express 备忘清单
+ &  expressjs cheatsheet &  Quick Reference
+
+
+
+
+
+
+

+  
+Express 备忘清单

+
这是用于 Node.js 的快速、不拘一格、极简主义的 Web 框架，包含 Express.js 的 API 参考列表和一些示例。

+
入门

+
Hello World

+
+
    
+
  • 安装依赖
+
    $ mkdir myapp # 创建目录
+$ cd myapp    # 进入目录
+$ npm init -y # 初始化一个配置
+$ npm install express # 安装依赖
+
    
+
    • 
+
  • 入口文件 index.js 添加代码：
+
    const express = require('express')
+const app = express()
+const port = 3000
+
+app.get('/', (req, res) => {
+  res.send('Hello World!')
+})
+
+app.listen(port, () => {
+  console.log(`监听端口${port}示例应用`)
+})
+
    
+
    • 
+
  • 使用以下命令运行应用程序
+
    $ node index.js
+
    
+
    • 
+

+
+
express -h

+
+
Usage: express [options] [dir]
+Options:
+  -h, --help          输出使用信息
+      --version       输出版本号
+  -e, --ejs           添加 ejs 引擎支持
+      --hbs           添加 hbs 引擎支持
+      --pug           添加 pug 引擎支持
+  -H, --hogan         添加 hogan.js 引擎支持
+      --no-view       无视图引擎生成
+  -v, --view <engine> 添加视图 <engine> 支持 (ejs|hbs|hjs|jade|pug|twig|vash) (默认jade) 
+  -c, --css <engine>  添加样式表 <engine> 支持 (less|stylus|compass|sass) (默认css)
+      --git           添加 .gitignore
+  -f, --force         强制非空目录
+

+
+
创建一个 myapp 的项目

+
$ express --view=pug myapp
+# 运行应用程序
+$ DEBUG=myapp:* npm start
+

+
express()

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
:-:-
express.json()#
express.raw()#
express.Router()#
express.static()#
express.text()#
express.urlencoded()#

+
Router

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
:-:-
router.all()#
router.METHOD()#
router.param()#
router.route()#
router.use()#

+
Application

+
var express = require('express')
+var app = express()
+
+console.dir(app.locals.title)
+// => 'My App'
+console.dir(app.locals.email)
+// => 'me@myapp.com'
+

+
属性

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
:-:-
app.locals应用程序中的局部变量 #
app.mountpath安装子应用程序的路径模式 #

+
Events

+
+
+
+
+
+
+
+
+
+
+
+
+
+
:-:-
mount子应用挂载到父应用上，子应用上触发事件 #

+
方法

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
:-:-
app.all()#
app.delete()#
app.disable()#
app.disabled()#
app.enable()#
app.enabled()#
app.engine()#
app.get(name)#
app.get(path, callback)#
app.listen()#
app.METHOD()#
app.param()#
app.path()#
app.post()#
app.put()#
app.render()#
app.route()#
app.set()#
app.use()#

+
Request

+
属性

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
:-:-
req.app#
req.baseUrl#
req.body#
req.cookies#
req.fresh#
req.hostname#
req.ip#
req.ips#
req.method#
req.originalUrl#
req.params#
req.path#
req.protocol#
req.query#
req.route#
req.secure#
req.signedCookies#
req.stale#
req.subdomains#
req.xhr#

+
方法

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
:-:-
req.accepts()#
req.acceptsCharsets()#
req.acceptsEncodings()#
req.acceptsLanguages()#
req.get()获取HTTP 请求头字段 #
req.is()#
req.param()#
req.range()#

+
Response

+
app.get('/', function (req, res) {
+  console.dir(res.headersSent) // false
+  res.send('OK')
+  console.dir(res.headersSent) // true
+})
+

+
属性

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
:-:-
res.app #
res.headersSent#
res.locals#

+
方法

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
:-:-
res.append()#
res.attachment()#
res.cookie()#
res.clearCookie()#
res.download()提示要下载的文件 #
res.end()结束响应过程 #
res.format()#
res.get()#
res.json()发送 JSON 响应 #
res.jsonp()发送带有 JSONP 支持的响应 #
res.links()#
res.location()#
res.redirect()重定向请求 #
res.render()渲染视图模板 #
res.send()发送各种类型的响应 #
res.sendFile()将文件作为八位字节流发送 #
res.sendStatus()#
res.set()#
res.status()#
res.type()#
res.vary()#

+
示例

+
Router

+
+
为传递给此路由器的任何请求调用

+
router.use(function (req, res, next) {
+  // .. 这里有一些逻辑 .. 像任何其他中间件一样
+  next()
+})
+

+
将处理任何以 /events 结尾的请求

+
// 取决于路由器在哪里 "use()"
+router.get('/events', (req, res, next) => {
+  // ..
+})
+

+
Response

+
res 对象表示 Express 应用程序在收到 HTTP 请求时发送的 HTTP 响应

+
app.get('/user/:id', (req, res) => {
+  res.send('user ' + req.params.id)
+})
+

+
Request

+
req 对象表示 HTTP 请求，并具有请求查询字符串、参数、正文、HTTP 标头等的属性

+
app.get('/user/:id', (req, res) => {
+  res.send('user ' + req.params.id)
+})
+

+
res.end()

+
res.end()
+res.status(404).end()
+

+
结束响应过程。这个方法其实来自 Node 核心，具体是 http.ServerResponse 的 response.end() 方法

+
res.json([body])

+
res.json(null)
+res.json({ user: 'tobi' })
+res.status(500).json({ error: 'message' })
+

+
app.all

+
app.all('/secret', function (req, res, next) {
+  console.log('访问秘密部分...')
+  next() // 将控制权传递给下一个处理程序
+})
+

+
app.delete

+
app.delete('/', function (req, res) {
+  res.send('DELETE request to homepage')
+})
+

+
app.disable(name)

+
app.disable('trust proxy')
+app.get('trust proxy')
+// => false
+

+
app.disabled(name)

+
app.disabled('trust proxy')
+// => true
+
+app.enable('trust proxy')
+app.disabled('trust proxy')
+// => false
+

+
app.engine(ext, callback)

+
var engines = require('consolidate')
+
+app.engine('haml', engines.haml)
+app.engine('html', engines.hogan)
+

+
app.listen([port[, host[, backlog]]][, callback])

+
var express = require('express')
+
+var app = express()
+app.listen(3000)
+

+
路由

+
const express = require('express')
+const app = express()
+
+// 向主页发出 GET 请求时响应“hello world”
+app.get('/', (req, res) => {
+  res.send('hello world')
+})
+

+
// GET 方法路由
+app.get('/', (req, res) => {
+  res.send('GET request to the homepage')
+})
+
+// POST 方法路由
+app.post('/', (req, res) => {
+  res.send('POST request to the homepage')
+})
+

+
中间件

+
function logOriginalUrl (req, res, next) {
+  console.log('ReqURL:', req.originalUrl)
+  next()
+}
+
+function logMethod (req, res, next) {
+  console.log('Request Type:', req.method)
+  next()
+}
+
+const log = [logOriginalUrl, logMethod]
+
+app.get('/user/:id', log,
+  (req, res, next)=>{
+    res.send('User Info')
+  }
+)
+

+
使用模版

+
app.set('view engine', 'pug')
+

+
在 views 目录下创建一个名为 index.pug 的 Pug 模板文件，内容如下

+
html
+  head
+    title= title
+  body
+    h1= message
+

+
创建一个路由来渲染 index.pug 文件。如果未设置视图引擎属性，则必须指定视图文件的扩展名

+
app.get('/', (req, res) => {
+  res.render('index', {
+    title: 'Hey', message: 'Hello there!'
+  })
+})
+

+
© 2022 Kenny Wang, All rights reserved.

+
diff --git a/docs/git.html b/docs/git.html
index ad5c1fcd..6d86f8b7 100644
--- a/docs/git.html
+++ b/docs/git.html
@@ -266,7 +266,7 @@
 $ git config --global alias.ci commit
 $ git config --global alias.st status
-

也可以看看：More Aliases

+

也可以看看：更多别名

设置大小写敏感

# 查看git 的设置
 $ git config --get core.ignorecase
diff --git a/index.html b/index.html
index b9844f41..3be4fb41 100644
--- a/index.html
+++ b/index.html
@@ -141,6 +141,11 @@
 
 Vue 2

 
+

Nodejs

+

+ +Express.js

+

工具

diff --git a/style/style.css b/style/style.css index e675e3de..656f04ac 100644 --- a/style/style.css +++ b/style/style.css @@ -653,14 +653,15 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { left: -14px; } .h2wrap-body ul.style-timeline li:last-child { - border-image: linear-gradient(to bottom,#228e6c,rgba(0,0,0,0)) 1 100%; + border-image: linear-gradient(to bottom,#46c69e96,rgba(0,0,0,0)) 1 100%; } .h2wrap-body ul.style-timeline li { border-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 25px !important; - border-left: 2px solid #228e6c; + border-left: 2px solid #46c69e96; margin-left: 30px; + border-left-color: #46c69e96; } .h2wrap-body ul.style-timeline li > pre { padding: 0 !important;