Node.js-Express框架

基本用法

1.Express框架是作为NodeJS的软件包存在的，因此我们需要先下载安装，然后再使用它。

mkdir express-demo && cd express-demo
npm init --yes
npm install express --save-prod

2.创建app.js文件，并在文件引入express

// 引入 express 模块
const express = require('express');

3.express是Express框架中导出的一个函数，供我们创建应用

// 使用 express 函数创建一个应用
const app = express();

4.配置请求路径以及路径被匹配时的处理方法（处理方法的数量可以是任意的）

// 当路径 '/' 被匹配时，至少可以执行一个函数，后面的函数要想执行，前一个函数必须要调用 next() 方法
app.get('/', function (request, response, next) {console.log('fun1')next();
}, function (request, response, next) {console.log('fun2')response.end('end')
});

5.启动服务器，并监听特定的端口

// 指定服务器监听的端口
const port = 3000;app.listen(port, () => {console.log(`Server running at http://localhost:${port}`)
})

6.目前，服务器只能接收一个GET请求，接下来我们来配置一个能够接收POST请求的路径（路由）

// 配置接收 POST 请求的路由
app.post('/doLogin', (request, response, next) => {console.log(request.url, 'fun1')next()
},  (request, response, next) => {console.log(request.url, 'fun2')response.end('post end')
})

路由基础

路由是指应用程序如何响应客户端对特定端点的请求，它是一个URI（路径）和一个特定的http请求方法（GET，POST等等）。

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

定义路由的结构如下：

app.method(path, handler)

app 是express的一个实例
method 表示一个HTTP请求方法，写成小写形式
path 表示服务器上的一个路径
handler 表示匹配路由时执行的函数

web框架、举例说明如何定义简单的路由。

// 在主页上响应 'Hello World!'
app.get('/', (req, res) => {res.send('Hello World!')
})// 响应根路由（/）上的POST请求
app.post('/', (req, res) => {res.send('Got a POST request')
})// '/user' 路由上 PUT 请求的响应
app.put('/user', (req, res) => {res.send('Got a PUT request at /user')
})// '/user' 路由上 DELETE 请求的响应
app.delete('/user', (req, res) => {res.send('Got a DELETE request at /user')
})

有一个特殊的路由方法 app.all(),用于在所有HTTP请求方法的路径上加载中间函数。无论HTTP请求方法是什么，只有你的请求路径匹配’/user’，都会执行对应的处理函数。

app.all('/user', (req, res) => {console.log()res.send('Got all request at /user')
})

路由路径

请求方法与路由路径共同组成了可以向其发出请求的端点（目标），路由的路径可以是字符串、字符串模式或正则表达式。

字符 ？、+、*和() 使用正则表达式对应项的子集。连接符（-）和点（.）有基于字符串的路径逐字解释。

如果你需要在路径字符串中使用美元符号（$），请将转义之后的美元符号放在中括号中[]。例如，位于’/data/$book’路径中$符号将是/data/([$])book”

下面是一些基于字符串的路由示例：

// 这个路由路径将会匹配根路由 /
app.get('/', function (req, res) {res.send('root')
})// 这个路由路径将会匹配根路由 /about.
app.get('/about', function (req, res) {res.send('about')
})// 这个路由路径将会匹配根路由 /random.text，路由路径中的点（.）会被作为路径的一部分，没有什么特殊的意义.
app.get('/random.text', function (req, res) {res.send('random.text')
})

前端框架有哪些。下面是一些基于字符串模式的路由路径示例：

// 这个路由路径将会匹配 /acd 和 /abcd，问号表示 0 个或 1 个字符
app.get('/ab?cd', (req, res) => {res.send('ab?cd')
})// 这个路由路径将会匹配 /abcd, /abbcd，以此类推。加号表示 1 个或多个个字符
app.get('/ab+cd', (req, res) => {res.send('ab?cd')
})// 星号表示 ab 和 cd 之间可以有任意数量的任意字符，包括 0 个字符
app.get('/ab*cd', (req, res) => {res.send('ab?cd')
})//这个路由路径将会匹配 /abe 和 /abcde
app.get('/ab(cd)?e', (req, res) => {res.send('ab?cd')
})

下面是一些基于正则表达式的路由路径示例：

// 这个路径将匹配任何带有 'abc' 的路由
app.get(/abc/, (req, res) => {res.send('abc')
})// . 表示任意字符
// * 表示 0 个或多个字符
// $ 表示以 fly 结尾
// 匹配任何一 fly 结尾的路径
app.get(/.*fly$/, (req, res) => {res.send('/.*fly$/')
})

路由参数

路由参数是路由路径中的片段，用于捕获请求路径中特定位置的值。捕获的值位于req.params对象中，路由中指定的路由参数的名称作为它们各自的键名。例如，路由路径中具有2个路由参数，名称分别是:user_id和:book_id。

路由参数会被作为req.params对象的属性存在，路由参数是属性名，前台传入的数据是对应的属性值。

// 获取指定用户写某一本书
app.get('/users/:user_id/books/:book_id', (req, res) => {res.send('获取用户ID为：' + req.params.user_id + 
'写的ID为：' + req.params.book_id + '的书。')
})

浏览器地址栏中的URL为http://localhost:3000/users/123/books/01，123会被传递给user_id,01会被传递给book_id。

查询参数

URL的组成部分：

vue+nodejs？http://www.example.com/myweb/users?name=zhangsan&gender=male#heading

http:协议
www.example.com 域名
/myweb/ 虚拟目录
users 目标资源
name=zhangsan&gender=male 查询参数
#heading 锚点

app.get('/myweb/users', (req, res) => {// 前台传入的查询参数都位于 req.query 对象中console.log(req.query.name, req.query.age)res.send('请求成功')
})

POST请求提交的数据

POST 表单提交过来数据都位于 req.body 对象中，默认情况下，request对象中是没有body属性的。我们需要先对POST请求的请求体进行解码，然后才能访问req.body对象中的数据。

//1. 对使用 application/x-www-form-urlencoded 编码数据进行解析
app.use('/', express.urlencoded({ extended: true }))// 2. 登录
app.post('/admin/doLogin', (req, res) => {// POST 表单提交过来数据都位于 req.body 对象中// 但是，在获取数据之前，必须要告诉服务怎样进行解码// req 对象没有 body 属性console.log(req.body.username)console.log(req.body.password)res.send('登录成功')
})

使用模板引擎

1、安装EJS模板引擎

npm install ejs --save-prod

2、配置模板引擎

// 告诉 Express我们要使用的模板引擎为 EJS
app.set('view engine', 'ejs');// 告诉 Express 模板文件在 views 目录下
app.set('views', './views');

3、配置路由，当路由被匹配时，要渲染的模板文件

app.get('/', (req, res) => {res.render('index', { title: 'Home Page' })
})app.get('/about', (req, res) => {res.render('about', { title: 'About Page' })
})

托管静态资源

react框架，在项目的根目录下，创建一个用于存放静态资源的目录，例如，public目录，并让Express帮我们托管目录中静态资源。

// 让Express帮我们托管目录中静态资源。
app.use(express.static('./public'))

在public目录下创建css目录，然后在css/目录下创建style.css文件

h1 {color: red;
}

接下来，我们就可以在模板文件中使用这些静态资源

    // 引入css文件
<link rel="stylesheet" href="/css/style.css">
<%# / 就代表 http://localhost:3000/public/ %>
// 引入图片文件<img src="/images/photo.png" alt="沙滩">

拆分路由

随着项目的开发，app.js文件中的内容变得越来越多，逻辑越来越复杂，不利己后期调试和维护。为了解决这个问题，我们可以将业务相关的内容拆分到单独的文件中。

1、新建routes/文件夹，然后在文件夹中创建user-auth.js文件。

const express = require('express');// 创建一个路由器对象
const router = express.Router();// 在路由器对象中配置路由
router.get('/doLogin', (req, res) => {res.render('login', { title: '欢迎登陆' })
})router.get('/doLogout', (req, res) => {res.render('logout', { title: 'About Page' })
})router.get('/doRegister', (req, res) => {res.render('register', { title: 'About Page' })
})// 将路由器对象导出
exports = module.exports = router

2、在app.js文件导入user-auth.js文件

// 导入用户身份校验的模块
const userAuthRouter = require('./routes/users-auth.js');

nodejs三大框架。3、使用app.use()启用userAuthRouter对象中配置的路由

app.use('/users', userAuthRouter)

4、在浏览器中访问时，完整的请求路径是由两部分拼接而成的。例如，访问登陆页面时，完整的路径为：

http://localhost:3000/users/doLogin

/users 位于 app.js 文件中
/doLogin 位于 user-auth.js 文件中