Node.js|Express框架请求与响应、Express页面
上一篇有关Express框架的内容：Node.js – Express框架、路由、中间件
欢迎学习交流！！！
持续更新中…
文章目录
- 1. Express请求处理
-
- 1.1 构建路由模块化
- 1.2 GET参数的获取
- 1.3 POST请求参数的获取
- 1.4 Express路由参数
- 1.5 静态资源的处理
- 2. Express页面
-
- 2.1 express-art-template模板引擎
- 2.2 app.locals对象
- 总结：请求和响应对象
- 总结：Express页面
1. Express请求处理 1.1 构建路由模块化 为了解决在一个项目中路由众多，不方便管理这个问题，就提出了将路由进行分类，将不同类别的路由放置在不同的模块中，方便管理。
创建模块化路由的基础代码：
const express = require('express');
// 创建网站服务器
const app = express();
// 创建路由对象
const home = express.Router();
//Router()为express下的一个方法，作用是用来创建路由的，返回值是一个路由对象
// 为路由对象进行匹配路径，当客户端访问什么样的路径时才使用什么样的路由来处理这个请求
app.use('/home',home);
//第一个参数是请求路径，第二个参数要传递路由对象
// 以上为一级路由，具体请求处理函数要在二级路由下进行处理
// 同时一级路由也有get和post方式，通过此方式创建二级路由
// 在home路由下继续创建二级路由
home.get('/index',(req,res) => {// 路径为/home/index
res.send('欢迎来到二级路由页面')
})
构建模块化路由：
home.js文件中：
// 构建模块化路由
const express = require('express');
const home = express.Router();
home.get('/index',(req,res) => {res.send('欢迎来到首页')
});
module.export = home;
//对当前路由模块进行导出
admin.js文件中：
// 构建模块化路由
const express = require('express');
const admin = express.Router();
admin.get('/index',(req,res) => {res.send('欢迎来到管理页面')
});
module.export = admin;
//对当前路由模块进行导出
【Node.js|Express框架请求与响应、Express页面】在app.js文件中：
// 引入express框架
const express = require('express');
// 创建网站服务器
const app = express();
const home = require('./router/home');
//.js这个后缀可以省略
const admin = require('./router/admin')
// 使用app.use方法进行路径的匹配
app.use('/home',home);
//如果客户端访问的是/home这个路径，就用home这个模块进行处理
app.use('/admin',admin);
// 端口监听
app.listen(3000)
1.2 GET参数的获取 Express框架中使用了req.query即可获取GET参数，框架内部会将GET参数转换为对象并返回
// 引入express框架
const express = require('express');
// 创建网站服务器
const app = express();
// 接收地址栏中问号后面的参数
// 例如：http://localhost:3000/?name=zhangsan&age=30
app.get('/index',(req,res) => {
//创建路由来获取get 请求参数
res.send(req.query);
//{"name":"zhangsan","age":"30"}
})
// 端口监听
app.listen(3000)
文章图片
1.3 POST请求参数的获取 Express中接收post请求参数需要借助第三方包 body-parser。（使用命令行工具下载：
npm install body-parser）// 引入express框架
const express = require('express');
const bodyParser = require('body-parser');
// 创建网站服务器
const app = express();
// 拦截所有请求--用app.use()//{extended: false}参数的意思是在方法内部使用系统方法querystring来处理请求参数的格式
// {extended: true}：方法内部使用第三方模块qs处理请求参数的格式
app.use(bodyParser.urlencoded({
extended: false}))
app.post('/add', (req,res) => {res.send(req.body)//该body属性为bodyParser在req对象中添加的一个属性，属性的值就是post请求参数
})// 端口监听
app.listen(3000)
html页面：
在表单中输入内容，点击“提交”按钮即可获得
文章图片
1.4 Express路由参数 在express框架中，传递和接收get请求参数还有另外一种方式，被称作为路由参数，这种方式可以让请求地址看起来非常美观，也可以让路由代码更加易于阅读，开发者一眼就可以看出来请求当前地址需要传递哪些参数
// 引入express框架
const express = require('express');
const bodyParser = require('body-parser');
// 创建网站服务器
const app = express();
// :id就是一个占位符，表示当前路由要接收一个id作为参数
// 传递多个参数则需要/index/:id/:name/:age
app.get('/index/:id', (req, res) => {// 接收post请求参数
res.send(req.params)//把请求参数响应回客户端，需要通过req.params来获取
})
// 端口监听
app.listen(3000)
注意：只有在地址栏中传递了参数才能匹配到这个路由
文章图片
文章图片
传递多个参数：
文章图片
1.5 静态资源的处理 通过express内置的express.static可以方便地托管静态文件，例如img、CSS、JavaScript文件等。
app.use(express.static('public'));
//public为该方法接收的参数，静态资源绝对路径
const express = require('express');
const path = require('path');
//因为需要使用路径
const app = express();
// 实现静态资源访问功能
app.use(express.static(path.join(__dirname, 'public')))//首先通过__dirname来获取当前文件所在的绝对路径
//若在前面加上第一个参数'/static'，则在例2中访问就要使用localhost:3000/static/images/1.jpg
app.use('/static',express.static(path.join(__dirname, 'public'))) app.listen(3000)
使用：在public文件夹中，有什么就可以在地址栏中直接访问什么
文章图片
访问images文件夹下面的1.jpg：
文章图片
2. Express页面 2.1 express-art-template模板引擎
- 为了使art-template模板引擎能够更好的和Express框架配合，模板引擎官方在原art-template模板引擎的基础上封装了express-art-template（需要安装两个模块）
- 使用
npm install art-template express-art-template命令进行安装
或者：npm install -S art-templatenpm install -S express-art-template - 修改app.js文件
app.engine(‘.html’,requare(‘express-art-template’)
app.set(‘view engine’,’html’) - 渲染数据到页面
在开发网页的时候，网页上的内容往往不是一成不变的，而是根据服务端内容变换的，这就需要将数据渲染到页面上。即调用response的render方法向页面传递数据，在页面中使用{ { 变量名 }}接收服务端的数据
例：
router.get('/post',function(req,res){res.render('post',{title:'中华上下五千年经典人物',
name:'张三',
age:31,
happy:true
})
})
html页面：
姓名：{
{name}}
年龄：{
{age}}
模板案例：
const express = require('express');
const path = require('path');
const app = express();
// 1. 告诉express框架使用什么模板引擎渲染什么后缀的模板文件
//当渲染后缀为art的模板时使用express-art-template
app.engine('art', require('express-art-template'))//第一个参数模板后缀，第二个参数使用的模板引擎
// 2. 告诉express框架模板存放的位置是什么
//设置模板存放目录
app.set('views',path.join(__dirname, 'views'))//'views'为存放模板的文件夹
// 3. 告诉express框架模板的默认后缀是什么
//渲染模板时不写后缀，默认拼接art后缀
app.set('view engine','art');
app.get('/index',(req,res) => {// res.render帮助我们拼接了模板路径、拼接了模板后缀、告诉模板引擎哪一个模板要和哪一个数据进行拼接、把拼接的结果响应给客户端
// 渲染模板
res.render('index', {msg: 'message'
})
});
app.get('/list',(req,res) => {res.render('list', {msg: 'list page'
})
})app.listen(3000);
2.2 app.locals对象 res.render() 渲染模板的方法第二个参数是为模板提供的数据，关于模板渲染的数据，在不同的页面中，公共区域所要展示的数据都是一样的
而在app服务器对象下面有一个local对象，可以将公共数据作为local对象下面的属性，将变量设置到app.local对象下面，这个数据在所有的模板中都可以获取到
app.locals.user = [{ name: '张三',
age: 20
},{ name: '李四',
age: 20
}]
总结：请求和响应对象 请求对象：request，客户端向服务器发送的请求信息，在服务器端通过该对象来获取用户的请求信息
- request.url：获取客户端的请求地址
- request.params：获取路由参数
例如：
前端客户端页面：params参数测试
后台服务器的接口地址：
router.get('/test/:no/:userNo',(req,res)=>{
res.send(req.params); //将用户的请求参数响应回去
})
no接收的是12，userNo接收的是15
- request.query：获取get请求的查询字符串参数
url传值：
url?参数名1=参数值1&参数名2=参数2 '?' 是url地址和参数之间的分隔符 '&' 是参数之间的分隔符 http://localhost:8089/login_datauserName=%E9%BB%84%E7%9B%96&password=789456331
- request.body：获取以post方式请求的请求体内容
- response.render（视图名，[数据]）：页面的文件名(不带扩展名),“数据”是向页面发送的数据。对视图（即网页）进行渲染，渲染完成后将视图发送给客户端
- response.send(数据)：向客户端发送响应数据，可以是一个对象 (key-value)，在发送数据的同时会给客户端渲染一个虚拟的页面（同步）
- response.redirect([status,url])：重定向浏览器，默认状态码：302
- response.json(数据)：向客户端发送json格式的数据（异步）
- response.end([数据])：将信息响应给客户端（响应结束）之后欧断开与客户端的连接
- 请求转发：请求对象只有一个。在服务器端进行的(render进行了请求转发)
- 页面重定向：发生两次请求，产生两个请求对象。在客户端进行的（redirect页面重定向）
- 更改Express的默认页面引擎为art-template
安装模块
npm install -S art-template
npm install -S express-art-template
在app.js文件中设置页面引擎
- 渲染页面
在服务器端通过response对象的render方法将数据渲染到页面 在页面中使用{ { 变量名 }}来得到服务器端的数据
- art-template页面引擎中页面的渲染方式：（了解就好，用于同源项目，前后端不分离）
A、条件渲染
{
{
if 条件 }}
html代码
{
{
/if }}B、嵌套的条件渲染
{
{
if 条件 }}
{
{
if 条件 }}
html代码
{
{
/if }}
{
{
/if }}C、循环渲染
{
{
each 集合名 as 变量}}
html代码
{
{
/each}}
例：
- 条件渲染：根据不同的情况展示不同的页面
{
{title}}{
{ if age<30 }}
大家好，我是{
{name}},我今年{
{age}}岁，很高兴认识大家!
{
{ /if }}{
{ if age>30 }}
大家好，我是{
{name}},很高兴认识大家!
{
{ /if }}
- 嵌套条件渲染
{
{title}}{
{ if age<30 }}
大家好，我是{
{name}},我今年{
{age}}岁，很高兴认识大家!
{
{ /if }}{
{ if age>30 }}
大家好，我是{
{name}}{
{ if happy }}
>很高兴认识大家!
{
{ /if }}
{
{ /if }}
- 循环渲染
router.get('/post',function(req,res){res.render('post',{title:'以后的我',
list:[{id:1,
content:'今天天气不错'
},{id:2,
content:'昨天几点睡觉的?'
},{id:3,
content:'工作好累'
}],
});
});
{
{title}}
{
{ each list as item}}
id:{
{item.id}},内容:{
{item.content}}
{
{ /each }}
- 循环渲染结合条件渲染
router.get('/post',function(req,res){res.render('post',{title:'以后的我',
list:[{id:1,
content:'今天天气不错'
},{id:2,
content:'昨天几点睡觉的?'
},{id:3,
content:'工作好累'
}],
targetId:2
});
});
{
{title}}
{
{ each list as item}}
{
{ if item.id === targetId}}
id:{
{item.id}},内容:{
{item.content}}
{
{ else }}
id:{
{item.id}},内容:{
{item.content}}
{
{ /if }}
{
{ /each }}
推荐阅读
- android第三方框架（五）ButterKnife
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- Node.js中readline模块实现终端输入
- Spring|Spring 框架之 AOP 原理剖析已经出炉！！！预定的童鞋可以识别下发二维码去看了
- 构建App（一）（框架与结构）
- laravel框架泛解
- spring事务管理_01:事务管理框架+声明式事务
- Promise|Promise 异步控制流
- Java集合框架|Java集合框架 数据结构
- 集合框架(集合嵌套存储和遍历元素的案例代码实现)