十分钟入门Express(react-express-starter)

一时失言乱红尘 2022-01-06 00:21 332阅读 0赞

## 什么是 Express? ##

[Node 本身并不支持其它常见的 web 开发任务][Node _ web]。如果需要进行一些具体的处理，比如运行其它 HTTP 动词（比如 GET、POST、DELETE 等）、分别处理不同 URL 路径的请求（“路由”）、托管静态文件，或用模板来动态创建响应，那么可能就要自己编写代码了，亦或使用 web 框架，以避免重新发明轮子。

Express 是`最流行`的 `Node 框架`，是许多其它流行 Node 框架 的底层库。它提供了以下机制：

*  为不同 URL 路径中使用不同 HTTP 动词的请求（路由）编写处理程序。  
    集成了“视图”渲染引擎，以便通过将数据插入模板来生成响应。
 *  设置常见 web 应用设置，比如用于连接的端口，以及渲染响应模板的位置。
 *  在请求处理管道的任何位置添加额外的请求处理“中间件”。

虽然 Express 本身是`极简风格`的，但是开发人员通过创建各类兼容的`中间件`包解决了几乎所有的 web 开发问题。这些库可以实现 cookie、会话、用户登录、URL 参数、POST 数据、安全头等功能。可在 Express 中间件 网页中找到由 Express 团队维护的[中间件软件包列表][Link 1]（还有一张流行的第三方软件包列表）。

## Express 应用程序生成器 ##

通过`应用生成器工具` [express-generator][] 可以快速创建一个应用的骨架。

express-generator 包含了 express 命令行工具。通过如下命令即可安装：

$ npm install express-generator -g

如下命令`express --view=pug react-express-starter`创建了一个名称为 `react-express-starter` 的 Express 应用。此应用将在当前目录下的 `react-express-starter` 目录中创建，并且设置为使用 Pug 模板引擎（view engine）：

$ express --view=pug react-express-starter
    
       create : react-express-starter\
       create : react-express-starter\public\
       create : react-express-starter\public\javascripts\
       create : react-express-starter\public\images\
       create : react-express-starter\public\stylesheets\
       create : react-express-starter\public\stylesheets\style.css
       create : react-express-starter\routes\
       create : react-express-starter\routes\index.js
       create : react-express-starter\routes\users.js
       create : react-express-starter\views\
       create : react-express-starter\views\error.pug
       create : react-express-starter\views\index.pug
       create : react-express-starter\views\layout.pug
       create : react-express-starter\app.js
       create : react-express-starter\package.json
       create : react-express-starter\bin\
       create : react-express-starter\bin\www
    
       change directory:
         > cd react-express-starter
    
       install dependencies:
         > npm install
    
       run the app:
         > SET DEBUG=react-express-starter:* & npm start

`-h` 参数可以列出所有可用的命令行参数：

$ express -h
    
      Usage: express [options] [dir]
    
      Options:
    
        -h, --help          输出使用方法
            --version       输出版本号
        -e, --ejs           添加对 ejs 模板引擎的支持
            --hbs           添加对 handlebars 模板引擎的支持
            --pug           添加对 pug 模板引擎的支持
        -H, --hogan         添加对 hogan.js 模板引擎的支持
            --no-view       创建不带视图引擎的项目
        -v, --view <engine> 添加对视图引擎（view） <engine> 的支持 (ejs|hbs|hjs|jade|pug|twig|vash) （默认是 jade 模板引擎）
        -c, --css <engine>  添加样式表引擎 <engine> 的支持 (less|stylus|compass|sass) （默认是普通的 css 文件）
            --git           添加 .gitignore
        -f, --force         强制在非空目录下创建

然后安装所有`依赖`包：

> $ cd myapp  
> $ npm install

然后运行项目,在浏览器中打开 [http://localhost:3000/][http_localhost_3000] 网址就可以看到这个应用了。

> npm start

\*.通过生成器创建的应用一般都有如下目录结构：

├── app.js
    ├── bin
    │   └── www
    ├── package.json
    ├── public
    │   ├── images
    │   ├── javascripts
    │   └── stylesheets
    │       └── style.css
    ├── routes
    │   ├── index.js
    │   └── users.js
    └── views
        ├── error.pug
        ├── index.pug
        └── layout.pug

## app.js ##

这里作为一个`总控台`,控制着nodejs/react/express等的内容,请简单阅读一下,并`留意`中文备注部分.

## 一些修改 ##

`照搬demo`?不存在的,打开`index.pug`文件,开始你的`self-helloworld`

extends layout
    
    block content
      h1= title
      p Welcome to #{ title} World
      p #{ blog} and you are learning #{ title}

从`res.render('index', { title: 'Express' });`这句话就可以看出奥秘了把,

*  第一个参数`'index'`是URL地址,因为配置了view的path所以这里只要render出去就对应`index.pug`页面.
 *  页面里的`#{blog}`和`#{title}`对应render的第二个参数`{ title: 'Express',blog:'zhengkai.blog.csdn.net' }`的值.

var express = require('express');
    var router = express.Router();
    
    /* GET home page. */
    router.get('/', function(req, res, next) { 
      res.render('index', {  title: 'Express',blog:'zhengkai.blog.csdn.net' });
    });
    
    module.exports = router;

## 基本路由baseRouter ##

路由用于确定应用程序如何响应对特定端点的客户机请求，包含一个 URI（或路径）和一个特定的 HTTP 请求方法（GET、POST 等）。

每个路由可以具有一个或多个处理程序函数，这些函数在路由匹配时执行。

路由定义采用以下结构：

> app.`METHOD`(`PATH`, `HANDLER`)

*  app 是 express 的实例(express.Router)。
 *  METHOD 是 HTTP 请求方法,请注意是小写的。
 *  PATH 是服务器上的路径,就是访问URL。
 *  HANDLER 是在路由匹配时执行的函数。

## ShowTime ##

*  [http://localhost:3000/][http_localhost_3000] 可以看到刚才修改的页面
 *  [http://localhost:3000/users][http_localhost_3000_users] 可以看到返回的简单string
 *  [http://localhost:3000/404][http_localhost_3000_404] 或者其他不存在的页面,可以看到返回统一的404页面  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][2019062410103738.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]

[Node _ web]: https://developer.mozilla.org/zh-CN/docs/learn/Server-side/Express_Nodejs/Introduction
[Link 1]: http://www.expressjs.com.cn/resources/middleware.html
[express-generator]: http://www.expressjs.com.cn/en/starter/generator.html
[http_localhost_3000]: http://localhost:3000/
[http_localhost_3000_users]: http://localhost:3000/users
[http_localhost_3000_404]: http://localhost:3000/404
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: /images/20211228/7dc6e0b20f7a43bda0e6e1f58982a719.png
[2019062410103738.png]: /images/20211228/11819f64b41b4f11b319f60fa992db36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: /images/20211228/f922bc242f174126aa0ee465135f0394.png