Express
基于 Node.js 平台,快速、开放、极简的 Web 开发框架
Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。
使用 Express 可以快速地搭建一个完整功能的网站。
Express 框架核心特性:
- 可以设置中间件来响应 HTTP 请求。
- 定义了路由表用于执行不同的 HTTP 请求动作。
- 可以通过向模板传递参数来动态渲染 HTML 页面。
- 总结
- 什么是Express.js:是一个基于Node.js的Web开发框架。Express框架并没有覆盖或删除原生的API,而是基于原生的API,做了进一步的封装,提供了更好用的一些API,方便快速进行Web开发!
Node.js是Javascript的服务器端运行环境!express只是在Node基础上,提供了开发Web应用的框架和API,意味着使用express,可以让我们的web开发更高效。
Express的基本使用
npm install express -S;// 先下载安装express框架
使用 (搭建一个最最基本的web服务器)
// 1. 引入框架模块
let express = require('express')
// 2. 创建服务器
let app = express();
// 3. 开启服务器并监听端口
app.listen(3000,()=>{
console.log('express server is running at http://127.0.0.1:3000');
})
// 4.给app对象注册中间件,监听请求
// use是一个中间件,可以用来监听get和post请求
app.use((req,res)=>{
// res.end('express框架的基本使用...');// 直接返回带有中文的内容会有乱码 加响应头后可以解决
res.send('express框架的基本使用...') ;// 可以直接返回中文并解析不会出现乱码
})
中间件的基本概念
**概念
中间件是一个函数,他可以访问请求对象web 应用中处于请求-响应循环流程中的中间件,一般被命名为 next 的变量。
经过中间件的处理之后,express就向 req 和 res ,对象身上,挂在了一些好用的方法和属性,我们在进行开发的时候可以直接调用。中间件的常见功能包括:
- 执行任何代码。
- 修改请求和响应对象。
- 终结请求-响应循环。
- 调用堆栈中的下一个中间件。
- …
- 接收get和post的不同的请求
可以给app注册不同的中间件,来接收不同的请求
这个也可以算是一个基本的路由功能:
路由(Routing)是由一个URL(或者叫做路径)和一个特定的HTTP方法(GET、POST等)组成的,涉及到应用如何响应客户端对某个网站节点的访问。
每一个路由都可以有一个或者多个处理器函数,当匹配到路由时,这(个/些)函数将被执行。
路由的定义由如下结构组成:app.method(routerPath,handler)
其中,app是一个express实例;
method是某个HTTP请求方式中的一个;
routerPath是服务器端的路径;
handler是当路由匹配到时需要执行的函数。
示例如下:
// 1. 引入框架模块
let express = require('express')
// 2. 创建服务器
let app = express();
// 3. 开启服务器并监听端口
app.listen(3000,()=>{
console.log('express server is running at http://127.0.0.1:3000');
})
// 4.给app对象注册中间件,监听请求
// use是一个中间件,可以用来监听get和post请求
//next可以接着进行下一个函数
app.get('/',(req,res,next)=>{
res.send('这是一个index的主页面...')
})
app.get('/movie', (req, res) => {
res.send('这是一个电影的主页面...')
})
app.post('/login', (req, res) => {
res.send('这是一个登陆的主页面...')
})
express-art-template模板引擎介绍(了解)
这里简单的介绍一下express-art-template在express中的使用
不管以后开发时使用那种模板引擎,大致的使用方式都是一样的
使用步骤:
- 下载安装
- 先下载art-template: npm i art-template
- 再下载express-art-template: npm i express-art-template
- 给express框架设置默认的模板引擎
// 注册模板引擎
app.engine('html', require('express-art-template'));
app.set('view options', {
debug: process.env.NODE_ENV !== 'production'
});
设置模板引擎文件的默认路径
// 如果不设置,默认也是views
app.set('views','./views')
示例如下:
// 1. 引入框架模块
let express = require('express')
// 2. 创建服务器
let app = express();
// 注册模板引擎
app.engine('html', require('express-art-template'));
app.set('view options', {
debug: process.env.NODE_ENV !== 'production'
});
// 如果不设置,默认也是views
app.set('views','./views')
// 3. 开启服务器并监听端口
app.listen(3000,()=>{
console.log('http://127.0.0.1:3000')
})
app.get('/',function(req,res){
// 引入express-art-template之前,会在Res上挂载一个render方法,可以实现页面的渲染
res.render('index.html')
})
express.static托管静态资源
利用Express内置的express.static可以方便地托管静态文件,例如图片、CSS、JavaScript文件等。
将静态资源 文件所在的目录作为参数传递给express.static中间件就可以提供静态资源文件的访问了.
例如,假设在public目录放置了图片、CSS和JavaScript文件,你就可以:
app.use(express.static('public'));
现在public目录下面的文件就可以访问了。
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/images/hello.html
//所有文件的路径都是相对于存储目录的,因此存放静态文件的目录名不会出现在URL中.
如果你的静态资源存储在多个目录下面,你可以多次调用express.static中间件:
app.use(express.static('public'));
app.use(express.static('files'));
访问静态资源文件时,express.static中间件会根据目录添加的顺序查找所需的文件.
如果你希望所有通过express.static访问的文件都存放在一个"虚拟(virtual)"目录(即目录根本不存在)下面,可以通过为静态资源目录指定一个挂载路径的方式来实现,如下所示:
app.use('/static'express.static('public'));
现在,你就可以通过带有“/static"前缀的地址来访问public目录下面的文件了.
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/images/hello.html
示例:
// 1. 引入框架模块
let express = require('express')
// 2. 创建服务器
let app = express();
// 注册模板引擎
app.engine('html', require('express-art-template'));
app.set('view options', {
debug: process.env.NODE_ENV !== 'production'
});
// 如果不设置,默认也是views
app.set('views','./views')
// 托管静态资源
app.use('/css', express.static('css'))
app.use('/js', express.static('js'))
// 也可以将所有静态资源放置到指定的目录下,如public,然后添加以下的配置
// app.use(express.static('public'))
// 3. 开启服务器并监听端口
app.listen(3000,()=>{
console.log('http://127.0.0.1:3000')
})
app.get('/',function(req,res){
// 引入express-art-template之前,会在Res上挂载一个render方法,可以实现页面的渲染
res.render('index.html')
})
还有一种常见的静态资源托管方式,能够让我们方便的访问当前服务器中的页面
// 下面这个中间件可以实现当前服务器内部的静态页面的相互访问,我们只需要将前端页面或资源放到服务器的某个目录下,并配置静态资源访问。
// 第一个参数 /:表示用 http://127.0.0.1:3000/ 即可访问到 views 这级目录
// 我们可以将当前网站的页面资源放置到这个views中,方便我们的访问
// 经过下面的配置,我们可以做到,当在地址栏中输入http://127.0.0.1:3000后,就会自动的打开views目录下的index.html文件
app.use('/', express.static(path.join(__dirname, 'views')))
express.Router创建路由
express.Router
可使用express.Router类创建模块化、可挂载的路由句柄。Router实例是一个完整的中间件和路由系统,因此常称其为一个"mini-app"。
下面的实例程序创建了一个路由模块,并加载了一个中间件,定义了一些路由,并且将它们挂载至应用的路径上。
在项目目录下创建名为05-router.js的文件,内容如下:
//这个文件用于封装路由器
//1导入模块
let express=requir("express")
//创建一个路由器
let router=express.Router()
router.get("/",function(req,res,next){
// 引入express-art-template之前,会在Res上挂载一个render方法,可以实现页面的渲染
res.render("index.html")
})
// 配合body-parser所添加的路由
router.post("./addUesr",function(req,res,next){
// 接收post请求方式的参数
obj=req.body
console.log(obj)
res.send("ok")
})
//暴露
moduler.exports=rotuer
}
在app.js中的内容如下:
// 1. 引入框架模块
const express = require('express')
// 引入路由模块
const router = require('./05-router.js')
// 2. 创建服务器
const app = express();
// 注册模板引擎
app.engine('html', require('express-art-template'));
app.set('view options', {
debug: process.env.NODE_ENV !== 'production'
});
// 如果不设置,默认也是views
app.set('views','./views')
// 托管静态资源
app.use('/css', express.static('css'))
app.use('/js', express.static('js'))
// 也可以将所有静态资源放置到指定的目录下,如public,然后添加以下的配置
// app.use(express.static('public'))
// 3. 开启服务器并监听端口
app.listen(3000,()=>{
console.log('http://127.0.0.1:3000')
})
// 路由不在这个位置创建了,而是封装到一个路由模块中
// app.get('/',function(req,res){
// // 引入express-art-template之前,会在Res上挂载一个render方法,可以实现页面的渲染
// res.render('index.html')
// })
// 注册路由
app.use(router)
再说中间件
Express是一个自身功能极简,完全是由路由和中间件构成的一个web开发框架。
从本质上来说,一个Express应用就是在调用各种中间件.
Express应用可使用如下几种中间件:
- 应用级中间件
- 路由级中间件
- 错误处理中间件
- 内置中间件
- 第三方中间件
- 应用级中间件
应用级中间件绑定到app对象,使用app.use()和app.METHOD(),其中,METHOD是需要处理的HTTP请求的方法,例如GET,POST,PUT等,全部小写.例如:
var app = express()
// 没有挂载路径的中间件,应用的每个请求都会执行该中间件
app.use((req,res,next)=>{
console.log('Time:',Date.now());
next();
})
// 挂载至 /user/:id的中间件,任何指向/user/:id的请求都会执行它
app.use('/user/:id',(req,res,next)=>{
console.log('Request Type',req.method);
next()
})
// 路由和句柄函数(中间件系统),处理指向/user/:id的GET请求
app.get('/user/:id',(req,res,next)=>{
res.rend('USER')
})
路由级中间件
路由级中间件和应用级中间件一样,只是它绑定的对象为express.Router()
let rotuer=express.Rotuer
路由级使用router.use()或router.VERB()加载。
上述在应用级创建的中间件系统,可通过如下代码改写为路由级:
let app=express()
let router=express.Router()
// 没有挂载路径的中间件,通过该路由的每个请求都会执行该中间件
router.use((req,res,next)=>{
console.log("Time:",Date.now())
next()
// 一个中间件栈,显示任何指向/user/:id的HTTP请求的信息
router.use('/user/:id',(req,res,next)=>{
console.log('Request URL:',req.originalUrl);
next();
},(req,res,next)=>{
console.log('Request Type',req.method);
next();
})
}
)
错误处理中间件
错误处理中间件有4个参数,定义错误处理中间件时必须使用这4个参数。即使不需要next对象,也必须在签名中声明它,否则中间件会被识别为一个常规中间件,不能处理错误。
错误处理中间件和其他中间件定义类似,只是要使用4个参数,而不是3个,其签名如下:(err,req,res,next)
app.use((err,req,res,next)=>{
console.error(err.stack);
res.status(500).send('404')
})
内置中间件
从4.x版本开始,除了express.static,Express以前内置的中间件现在已经全部单独作为模块安装使用了.
express.static(root,[options])
express.static是Express唯一内置的中间件。它基于server-static,负责在Express应用中托管静态资源。
第三方中间件
通过使用第三方中间件从而为Express应用增加更加功能
安装所需要功能的node模块,并在应用中加载,可以在应用级加载,也可以在路由级加载。
下面的例子安装并加载了一个接收post方式所传递的参数的中间件:body-parser
npm install body-parser
var bodyParser = require('body-parser')
// 添加body-parse解析器
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))