diff --git a/README.md b/README.md index db93522..38fe622 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,11 @@ Quick Reference [Vue 2](./docs/vue2.md) +## Nodejs + +[Express.js](./docs/expressjs.md) + + ## 工具 [nginx](./docs/nginx.md) diff --git a/docs/css.md b/docs/css.md index 6bc0c83..60d7409 100644 --- a/docs/css.md +++ b/docs/css.md @@ -1,10 +1,8 @@ CSS 备忘清单 === - 这是一份关于 CSS 优点的快速参考备忘单,列出了选择器语法、属性、单位和其他有用的信息 - 入门 ------------ @@ -406,6 +404,8 @@ color: tan; color: rebeccapurple; ``` +更多标准[颜色名称](./colors-named.md) + ### 十六进制颜色 ```css diff --git a/docs/expressjs.md b/docs/expressjs.md new file mode 100644 index 0000000..648897b --- /dev/null +++ b/docs/expressjs.md @@ -0,0 +1,406 @@ +Express 备忘清单 +=== + +这是用于 Node.js 的快速、不拘一格、极简主义的 Web 框架,包含 [Express.js](http://expressjs.com/) 的 API 参考列表和一些示例。 + +入门 +--- + +### Hello World + + +- 安装依赖 + ```bash + $ mkdir myapp # 创建目录 + $ cd myapp # 进入目录 + $ npm init -y # 初始化一个配置 + $ npm install express # 安装依赖 + ``` +- 入口文件 `index.js` 添加代码: + ```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}示例应用`) + }) + ``` +- 使用以下命令运行应用程序 + ```bash + $ node index.js + ``` + + +### express -h + + +```bash +Usage: express [options] [dir] +Options: + -h, --help 输出使用信息 + --version 输出版本号 + -e, --ejs 添加 ejs 引擎支持 + --hbs 添加 hbs 引擎支持 + --pug 添加 pug 引擎支持 + -H, --hogan 添加 hogan.js 引擎支持 + --no-view 无视图引擎生成 + -v, --view 添加视图 支持 (ejs|hbs|hjs|jade|pug|twig|vash) (默认jade) + -c, --css 添加样式表 支持 (less|stylus|compass|sass) (默认css) + --git 添加 .gitignore + -f, --force 强制非空目录 +``` + + +创建一个 `myapp` 的项目 + +```bash +$ express --view=pug myapp +# 运行应用程序 +$ DEBUG=myapp:* npm start +``` + +### express() + +:- | :- +:- | :- +`express.json()` | [#](http://expressjs.com/en/4x/api.html#express.json) +`express.raw()` | [#](http://expressjs.com/en/4x/api.html#express.raw) +`express.Router()` | [#](http://expressjs.com/en/4x/api.html#express.router) +`express.static()` | [#](http://expressjs.com/en/4x/api.html#express.static) +`express.text()` | [#](http://expressjs.com/en/4x/api.html#express.text) +`express.urlencoded()` | [#](http://expressjs.com/en/4x/api.html#express.urlencoded) + +### Router + +:- | :- +:- | :- +`router.all()` | [#](http://expressjs.com/en/4x/api.html#router.all) +`router.METHOD()` | [#](http://expressjs.com/en/4x/api.html#router.METHOD) +`router.param()` | [#](http://expressjs.com/en/4x/api.html#router.param) +`router.route()` | [#](http://expressjs.com/en/4x/api.html#router.route) +`router.use()` | [#](http://expressjs.com/en/4x/api.html#router.use) + +### Application + +```js +var express = require('express') +var app = express() + +console.dir(app.locals.title) +// => 'My App' +console.dir(app.locals.email) +// => 'me@myapp.com' +``` + +#### **属性** + +:- | :- +:- | :- +`app.locals` | 应用程序中的局部变量 [#](http://expressjs.com/en/4x/api.html#app.locals) +`app.mountpath` | 安装子应用程序的路径模式 [#](http://expressjs.com/en/4x/api.html#app.mountpath) + +#### **Events** + +:- | :- +:- | :- +`mount` | 子应用挂载到父应用上,子应用上触发事件 [#](http://expressjs.com/en/4x/api.html#app.onmount) + +#### **方法** + +:- | :- +:- | :- +`app.all()` | [#](http://expressjs.com/en/4x/api.html#app.all) +`app.delete()` | [#](http://expressjs.com/en/4x/api.html#app.delete.method) +`app.disable()` | [#](http://expressjs.com/en/4x/api.html#app.disable) +`app.disabled()` | [#](http://expressjs.com/en/4x/api.html#app.disabled) +`app.enable()` | [#](http://expressjs.com/en/4x/api.html#app.enable) +`app.enabled()` | [#](http://expressjs.com/en/4x/api.html#app.enabled) +`app.engine()` | [#](http://expressjs.com/en/4x/api.html#app.engine) +`app.get(name)` | [#](http://expressjs.com/en/4x/api.html#app.get) +`app.get(path, callback)` | [#](http://expressjs.com/en/4x/api.html#app.get.method) +`app.listen()` | [#](http://expressjs.com/en/4x/api.html#app.listen) +`app.METHOD()` | [#](http://expressjs.com/en/4x/api.html#app.METHOD) +`app.param()` | [#](http://expressjs.com/en/4x/api.html#app.param) +`app.path()` | [#](http://expressjs.com/en/4x/api.html#app.path) +`app.post()` | [#](http://expressjs.com/en/4x/api.html#app.post.method) +`app.put()` | [#](http://expressjs.com/en/4x/api.html#app.put.method) +`app.render()` | [#](http://expressjs.com/en/4x/api.html#app.render) +`app.route()` | [#](http://expressjs.com/en/4x/api.html#app.route) +`app.set()` | [#](http://expressjs.com/en/4x/api.html#app.set) +`app.use()` | [#](http://expressjs.com/en/4x/api.html#app.use) + +### Request + +#### 属性 + +:- | :- +:- | :- +`req.app` | [#](http://expressjs.com/en/4x/api.html#req.app) +`req.baseUrl` | [#](http://expressjs.com/en/4x/api.html#req.baseUrl) +`req.body` | [#](http://expressjs.com/en/4x/api.html#req.body) +`req.cookies` | [#](http://expressjs.com/en/4x/api.html#req.cookies) +`req.fresh` | [#](http://expressjs.com/en/4x/api.html#req.fresh) +`req.hostname` | [#](http://expressjs.com/en/4x/api.html#req.hostname) +`req.ip` | [#](http://expressjs.com/en/4x/api.html#req.ip) +`req.ips` | [#](http://expressjs.com/en/4x/api.html#req.ips) +`req.method` | [#](http://expressjs.com/en/4x/api.html#req.method) +`req.originalUrl` | [#](http://expressjs.com/en/4x/api.html#req.originalUrl) +`req.params` | [#](http://expressjs.com/en/4x/api.html#req.params) +`req.path` | [#](http://expressjs.com/en/4x/api.html#req.path) +`req.protocol` | [#](http://expressjs.com/en/4x/api.html#req.protocol) +`req.query` | [#](http://expressjs.com/en/4x/api.html#req.query) +`req.route` | [#](http://expressjs.com/en/4x/api.html#req.route) +`req.secure` | [#](http://expressjs.com/en/4x/api.html#req.secure) +`req.signedCookies` | [#](http://expressjs.com/en/4x/api.html#req.signedCookies) +`req.stale` | [#](http://expressjs.com/en/4x/api.html#req.stale) +`req.subdomains` | [#](http://expressjs.com/en/4x/api.html#req.subdomains) +`req.xhr` | [#](http://expressjs.com/en/4x/api.html#req.xhr) + +#### 方法 + +:- | :- +:- | :- +`req.accepts()` | [#](http://expressjs.com/en/4x/api.html#req.accepts) +`req.acceptsCharsets()` | [#](http://expressjs.com/en/4x/api.html#req.acceptsCharsets) +`req.acceptsEncodings()` | [#](http://expressjs.com/en/4x/api.html#req.acceptsEncodings) +`req.acceptsLanguages()` | [#](http://expressjs.com/en/4x/api.html#req.acceptsLanguages) +`req.get()` | 获取HTTP 请求头字段 [#](http://expressjs.com/en/4x/api.html#req.get) +`req.is()` | [#](http://expressjs.com/en/4x/api.html#req.is) +`req.param()` | [#](http://expressjs.com/en/4x/api.html#req.param) +`req.range()` | [#](http://expressjs.com/en/4x/api.html#req.range) + +### Response + +```js +app.get('/', function (req, res) { + console.dir(res.headersSent) // false + res.send('OK') + console.dir(res.headersSent) // true +}) +``` + +#### 属性 + +:- | :- +:- | :- +`res.app ` | [#](http://expressjs.com/en/4x/api.html#res.app) +`res.headersSent` | [#](http://expressjs.com/en/4x/api.html#res.headersSent) +`res.locals` | [#](http://expressjs.com/en/4x/api.html#res.locals) + +#### 方法 + +:- | :- +:- | :- +`res.append()` | [#](http://expressjs.com/en/4x/api.html#res.append) +`res.attachment()` | [#](http://expressjs.com/en/4x/api.html#res.attachment) +`res.cookie()` | [#](http://expressjs.com/en/4x/api.html#res.cookie) +`res.clearCookie()` | [#](http://expressjs.com/en/4x/api.html#res.clearCookie) +`res.download()` | 提示要下载的文件 [#](http://expressjs.com/en/4x/api.html#res.download) +`res.end()` | 结束响应过程 [#](http://expressjs.com/en/4x/api.html#res.end) +`res.format()` | [#](http://expressjs.com/en/4x/api.html#res.format) +`res.get()` | [#](http://expressjs.com/en/4x/api.html#res.get) +`res.json()` | 发送 JSON 响应 [#](http://expressjs.com/en/4x/api.html#res.json) +`res.jsonp()` | 发送带有 JSONP 支持的响应 [#](http://expressjs.com/en/4x/api.html#res.jsonp) +`res.links()` | [#](http://expressjs.com/en/4x/api.html#res.links) +`res.location()` | [#](http://expressjs.com/en/4x/api.html#res.location) +`res.redirect()` | 重定向请求 [#](http://expressjs.com/en/4x/api.html#res.redirect) +`res.render()` | 渲染视图模板 [#](http://expressjs.com/en/4x/api.html#res.render) +`res.send()` | 发送各种类型的响应 [#](http://expressjs.com/en/4x/api.html#res.send) +`res.sendFile()` | 将文件作为八位字节流发送 [#](http://expressjs.com/en/4x/api.html#res.sendFile) +`res.sendStatus()` | [#](http://expressjs.com/en/4x/api.html#res.sendStatus) +`res.set()` | [#](http://expressjs.com/en/4x/api.html#res.set) +`res.status()` | [#](http://expressjs.com/en/4x/api.html#res.status) +`res.type()` | [#](http://expressjs.com/en/4x/api.html#res.type) +`res.vary()` | [#](http://expressjs.com/en/4x/api.html#res.vary) + +示例 +---- + +### Router + + +为传递给此路由器的任何请求调用 + +```js +router.use(function (req, res, next) { + // .. 这里有一些逻辑 .. 像任何其他中间件一样 + next() +}) +``` + +将处理任何以 `/events` 结尾的请求 + +```js +// 取决于路由器在哪里 "use()" +router.get('/events', (req, res, next) => { + // .. +}) +``` + +### Response + +`res` 对象表示 `Express` 应用程序在收到 HTTP 请求时发送的 HTTP 响应 + +```js +app.get('/user/:id', (req, res) => { + res.send('user ' + req.params.id) +}) +``` + +### Request + +`req` 对象表示 `HTTP` 请求,并具有请求查询字符串、参数、正文、HTTP 标头等的属性 + +```js +app.get('/user/:id', (req, res) => { + res.send('user ' + req.params.id) +}) +``` + +### res.end() + +```js +res.end() +res.status(404).end() +``` + +结束响应过程。这个方法其实来自 Node 核心,具体是 `http.ServerResponse` 的 `response.end()` 方法 + +### res.json([body]) + +```js +res.json(null) +res.json({ user: 'tobi' }) +res.status(500).json({ error: 'message' }) +``` + +### app.all + +```js +app.all('/secret', function (req, res, next) { + console.log('访问秘密部分...') + next() // 将控制权传递给下一个处理程序 +}) +``` + +### app.delete + +```js +app.delete('/', function (req, res) { + res.send('DELETE request to homepage') +}) +``` + +### app.disable(name) + +```js +app.disable('trust proxy') +app.get('trust proxy') +// => false +``` + +### app.disabled(name) + +```js +app.disabled('trust proxy') +// => true + +app.enable('trust proxy') +app.disabled('trust proxy') +// => false +``` + +### app.engine(ext, callback) + +```js +var engines = require('consolidate') + +app.engine('haml', engines.haml) +app.engine('html', engines.hogan) +``` + +### app.listen([port[, host[, backlog]]][, callback]) + +```js +var express = require('express') + +var app = express() +app.listen(3000) +``` + +### 路由 + +```js +const express = require('express') +const app = express() + +// 向主页发出 GET 请求时响应“hello world” +app.get('/', (req, res) => { + res.send('hello world') +}) +``` + +```js +// GET 方法路由 +app.get('/', (req, res) => { + res.send('GET request to the homepage') +}) + +// POST 方法路由 +app.post('/', (req, res) => { + res.send('POST request to the homepage') +}) +``` + +### 中间件 + +```js +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') + } +) +``` + +### 使用模版 + +```js +app.set('view engine', 'pug') +``` + +在 `views` 目录下创建一个名为 `index.pug` 的 `Pug` 模板文件,内容如下 + +```pug +html + head + title= title + body + h1= message +``` + +创建一个路由来渲染 `index.pug` 文件。如果未设置视图引擎属性,则必须指定视图文件的扩展名 + +```js +app.get('/', (req, res) => { + res.render('index', { + title: 'Hey', message: 'Hello there!' + }) +}) +``` \ No newline at end of file diff --git a/docs/git.md b/docs/git.md index 86d7cc7..adee548 100644 --- a/docs/git.md +++ b/docs/git.md @@ -423,7 +423,7 @@ $ git config --global alias.ci commit $ git config --global alias.st status ``` -也可以看看:[More Aliases](https://gist.github.com/johnpolacek/69604a1f6861129ef088) +也可以看看:[更多别名](https://gist.github.com/johnpolacek/69604a1f6861129ef088) ### 设置大小写敏感 diff --git a/scripts/style.css b/scripts/style.css index e675e3d..656f04a 100644 --- a/scripts/style.css +++ b/scripts/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;