我真的爱敲代码

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;    //对当前路由模块进行导出

在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页面：

 
 
 <form action="http://localhost:3000/add">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" name="提交">
form>

在表单中输入内容，点击“提交”按钮即可获得

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-template npm 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
  })
})