Express框架请求与响应、Express页面

远离我我有病

上一篇有闭Express框架的内乱容：Node.js – 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
})
})

复造代码

html页里：

<p>
姓名：{{name}}
<br><br>
年齿：{{age}}
</p

复造代码

pstrong模板案例/strong：/p

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传值：
1. url?参数名1=参数值1&参数名2=参数2
2. '?' 是url地点战参数之间的分开符
3. '&' 是参数之间的分开符
4. http://localhost:8089/login_datauserName=%E9%BB%84%E7%9B%96&password=789456331
复造代码
request.body：获得以post方法恳求的恳求体内乱容

响应工具：response，效劳器经由过程该工具背客户端收收响应疑息

response.render（视图名，[数据]）：页里的文件名(没有带扩大名),“数据”是背页里收收的数据。对视图（即网页）停止衬着，衬着完成后将视图收收给客户端
response.send(数据)：背客户端收收响应数据，能够是一个工具 (key-value)，正在收收数据的同时会给客户端衬着一个假造的页里（同步）
response.redirect([status,url])：重定背阅读器，默许形态码：302
response.json(数据)：背客户端收收json格局的数据（同步）
response.end([数据])：将疑息响应给客户端（响应结束）以后欧断开取客户真个毗连

页里跳转的方法:

恳求转收：恳求工具只要一个。正在效劳器端停止的(render停止了恳求转收)
页里重定背：发作两次恳求，发生两个恳求工具。正在客户端停止的（redirect页里重定背）

总结：Express页里

变动Express的默许页里引擎为art-template
装置模块
npm install -S art-template
npm install -S express-art-template
正在app.js文件中设置页里引擎
衬着页里
1. 正在效劳器端经由过程response工具的render办法将数据衬着到页里
2. 正在页里中利用{{ 变量名 }}去获得效劳器真个数据
复造代码
art-template页里引擎中页里的衬着方法：（理解便好，用于同源项目，前后端没有别离）

A、前提衬着
{{ if 前提 }}
html代码
{{ /if }}
B、嵌套的前提衬着
{{ if 前提 }}
{{ if 前提 }}
html代码
{{ /if }}
{{ /if }}
C、轮回衬着
{{ each 汇合名 as 变量}}
html代码
{{ /each}}

复造代码

例：

前提衬着：按照差别的状况展现差别的页里

<h2>{{title}}</h2>
{{ if age<30 }}
<p>各人好，我是{{name}},我本年{{age}}岁，很快乐熟悉各人!</p>
{{ /if }}
{{ if age>30 }}
<p>各人好，我是{{name}},很快乐熟悉各人!</p>
{{ /if }}

复造代码

轮回衬着

<h2>{{title}}</h2>
{{ if age<30 }}
<p>各人好，我是{{name}},我本年{{age}}岁，很快乐熟悉各人!</p>
{{ /if }}
{{ if age>30 }}
<p>各人好，我是{{name}}
{{ if happy }}
<span>很快乐熟悉各人!</span>
{{ /if }}
</p>
{{ /if }}

复造代码

router.get('/post',function(req,res){
res.render('post',{
title:'当前的我',
list:[{
id:1,
content:'明天气候没有错'
},{
id:2,
content:'今天几面睡觉的?'
},{
id:3,
content:'事情好乏'
}],
});
});

复造代码

轮回衬着分离前提衬着

<h2>{{title}}</h2>
{{ each list as item}}
<p>id:{{item.id}},内乱容:{{item.content}}</p>
{{ /each }}

复造代码

router.get('/post',function(req,res){
res.render('post',{
title:'当前的我',
list:[{
id:1,
content:'明天气候没有错'
},{
id:2,
content:'今天几面睡觉的?'
},{
id:3,
content:'事情好乏'
}],
targetId:2
});
});

复造代码

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！

Express框架请求与响应、Express页面

浏览过的版块