云驹博客
0%

Express 入门教程

发表于 分类于
基于NodeJs平台，快速、开放、极简的 Web 开发框架

Node.js开始

新建项目

初始化package.json文件

1
npm init -y

安装开发环境所需包

1
npm install 包名 --save

node.js

声明常量

1
const NAME = value

引包

1
const packageName = require('packageName')

Express

Express介绍

基于 Node.js 平台，快速、开放、极简的 Web 开发框架

安装

1
npm install express --save

使用

1
2
3
4
5
6
const express = require('express')
const app = express()

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(3000, () => console.log('Example app listening on port 3000!'))

该应用程序启动服务器，并在端口3000上侦听连接。该应用会以“ Hello World！”响应，以请求根URL（/）或route。对于其他所有路径，它将以404 Not Found响应。

express使用post方法

express有get、post和在路由后面跟参数，这三种接参方式，这篇文章我主要记录post使用方法

  1. 安装express中间件（body-parser）
1
cnpm install body-parser -D
  1. 在app.js里面引入并添加解析
1
2
3
var bodyParser = require('body-parser');/*post方法*/
app.use(bodyParser.json());// 添加json解析
app.use(bodyParser.urlencoded({extended: false}));
  1. 使用post请求
1
2
3
$.post('/admin/login', data, function (res) {
	console.log(res)
}s
  1. js文件接受post数据
1
2
3
4
5
6
7
var express = require('express');
var router = express.Router();

router.post('/login', function(req, res, next) {
    var username=req.body.username;//post专用
    var pwd=req.body.pwd;
      res.json({name:username,pwd:pwd});//数据返回前端

路由

router目的是中间件和路由的分离的实例。您可以将其视为“微型应用程序”，仅能够执行中间件和路由功能。每个Express应用程序都有一个内置的应用路由。

路由的行为类似于中间件本身，因此您可以将其用作 app.use（）的参数或用作另一台路由的 use（）方法的参数。

顶级express对象具有一个创建新对象的Router（）方法router。

一旦你创建了一个路由的对象，你可以添加中间件和HTTP方法路由（如get，put，post，等），以它就像一个应用程序。例如：

1
2
3
4
5
6
7
8
9
10
11
// 为传递到此路由的任何请求调用该方法
router.use(function(req, res, next) {
  // . .这里有些逻辑。和其他中间件一样
  next();
});

// 将处理以/events结尾的任何请求
// 取决于路由的“use()”位置
router.get('/events', function(req, res, next) {
  // ..
});

然后，您可以将路由用于特定的根URL，以这种方式将路由分为文件或是微型应用程序。

1
2
// 仅对/ calendar / *的请求将发送到您的“路由”
app.use('/calendar', router);

模板

安装

1
2
npm install --save art-template
npm install --save express-art-template

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var express = require('express');
var app = express();

// 模板设置
app.engine('art', require('express-art-template'));

// strat  此部分容易报错，注释即可解决
app.set('view', {
    ebug: process.env.NODE_ENV !== 'production'
});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'art');
// end

// 路由
app.get('/', function (req, res) {
    res.render('index.art', {
        user: {
            name: 'aui',
            tags: ['art', 'template', 'nodejs']
        }
    });
});

利用 Express 托管静态文件

为了提供诸如图像、CSS 文件和 JavaScript 文件之类的静态文件，请使用 Express 中的 express.static 内置中间件函数。

此函数特征如下：

1
express.static(root, [options])

该root参数指定要从其提供静态资产的根目录。有关自options变量的更多信息，请参见express.static。

例如，通过如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了：

1
app.use(express.static('public'))

现在，你就可以访问 public 目录中的所有文件了：

1
2
3
4
5
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

Express 在静态目录查找文件，因此，存放静态文件的目录名不会出现在 URL 中。

如果要使用多个静态资源目录，请多次调用 express.static 中间件函数：

1
2
app.use(express.static('public'))
app.use(express.static('files'))

访问静态资源文件时，express.static 中间件函数会根据目录的添加顺序查找所需的文件。

注意：为了获得最佳结果，请使用反向代理缓存来提高服务静态资产的性能。

要为该express.static功能所服务的文件创建虚拟路径前缀（文件系统中实际上不存在该路径），请为静态目录指定安装路径，如下所示：

1
app.use('/static', express.static('public'))

现在，你就可以通过带有 /static 前缀地址来访问 public 目录中的文件了。

1
2
3
4
5
http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

然而，但是，您提供给express.static函数的路径是相对于您启动node过程的目录的。如果从另一个目录运行express app，则使用要提供服务的目录的绝对路径更为安全：

1
app.use('/static', express.static(path.join(__dirname, 'public')))

欲了解更多关于 serve-static 函数及其参数的知识，请参考 serve-static.

Express 常见问题及解答

如何组织我的应用程序？

这个问题没有明确的答案。答案取决于您的应用程序规模和所涉及的团队。为了尽可能灵活，Express不对结构进行任何假设。

路由和其他特定于应用程序的逻辑可以根据需要存储在任意目录结构中的任意数量的文件中。查看以下示例以获取灵感：

  • 路线清单
  • 路线地图
  • MVC样式控制器

此外，还有Express的第三方扩展，可以简化其中的一些模式：

  • 足智多谋的路由

如何定义模型（model）？

Express没有数据库的概念。该概念由第三方节点模块决定，使您可以与几乎所有数据库进行接口。

有关以模型为中心的基于Express的框架，请参见LoopBack。

如何验证用户？

身份验证是Express不会涉足的另一个有争议的领域。您可以使用所需的任何身份验证方案。有关简单的用户名/密码方案，请参见以下示例。

Express 支持哪些模板引擎？

Express支持任何符合(path, locals, callback)签名的模板引擎。要规范化模板引擎接口和缓存，请参阅 consolidate.js 项目以获得支持。未列出的模板引擎可能仍支持Express签名。

有关更多信息，请参阅将模板引擎与Express结合使用。

如何处理 404 响应？

在Express中，404响应不是错误的结果，因此错误处理程序中间件将不会捕获它们。此行为是因为404响应只是表明没有其他工作要做；换句话说，Express已执行了所有中间件功能和路由，但发现它们均未响应。您需要做的就是在堆栈的最底部添加一个中间件功能（在所有其他功能下方）以处理404响应：

1
2
3
app.use(function (req, res, next) {
  res.status(404).send("Sorry can't find that!")
})

如何设置一个错误处理器？

错误处理器中间件的定义和其他中间件一样，唯一的区别是 4 个而不是 3 个参数，即 (err, req, res, next)：

1
2
3
4
app.use(function (err, req, res, next) {
  console.error(err.stack)
  res.status(500).send('Something broke!')
})

请参考 错误处理 章节以了解更多信息。

如何渲染纯 HTML 文件？

不需要！无需通过 res.render() 渲染 HTML。 你可以通过 res.sendFile() 直接对外输出 HTML 文件。 如果你需要对外提供的资源文件很多，可以使用 express.static() 中间件。

Express 应用程序生成器

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

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

1
npm install express-generator -g

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$ 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         强制在非空目录下创建

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$ express --view=pug myapp

   create : myapp
   create : myapp/package.json
   create : myapp/app.js
   create : myapp/public
   create : myapp/public/javascripts
   create : myapp/public/images
   create : myapp/routes
   create : myapp/routes/index.js
   create : myapp/routes/users.js
   create : myapp/public/stylesheets
   create : myapp/public/stylesheets/style.css
   create : myapp/views
   create : myapp/views/index.pug
   create : myapp/views/layout.pug
   create : myapp/views/error.pug
   create : myapp/bin
   create : myapp/bin/www

然后安装所有依赖包： 

1
2
$ cd myapp
$ npm install

在 MacOS 或 Linux 中，通过如下命令启动此应用：

1
$ DEBUG=myapp:* npm start

在 Windows 中，通过如下命令启动此应用：

1
> set DEBUG=myapp:* & npm start

然后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

7 directories, 9 files
-------------本文结束，感谢您的阅读-------------
最近打算存点钱，吃点高端的像沙县小吃这样的餐厅