nodejs之Express框架

nodejs
学习笔记
发布日期:   2021-08-05
更新日期:   2021-08-06
文章字数:   1.8k
阅读时长:   8 分
阅读次数:  

一、Express简介

  • 是什么：基于nodejs开发的一个框架

  • 好 处：加快项目开发，便于团队协作

二、使用（初体验）

  • 步骤1：创建day24_express开发目录

  • 步骤2：安装express框架

    1
    2
    3
    npm init -y

    npm install express

    img

  • 步骤3：使用

img 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//1.引入express框架模块

var express = require('express')

//2.创建框架核心app对象

var app = express()

//3.路由

app.get('/',  function(req, res) {

 

​	//Express响应数据方法

​	//end   - 响应字符串

​	//send  - 响应字符串（自动识别数据类型）

​	//render - 响应字符串（可以获取指定文件字符串并响应，缺点：得自己声明模板引擎）

​	

​	//res.end("哥哥来抓我呀，<a href='http://nn.com'>点击进入我的世界</a>")

​	res.send("哥哥来抓我呀，<a href='http://nn.com'>点击进入我的世界</a>")

​	

})

//4.启动服务

app.listen(8080, function(){

​	console.log('Running...')

})

三、使用（配置模板引擎）

  • 说 明：默认通过公end或send渲染，无法加载视图，所以得自己配置默认模板引擎官方以前推荐用jade现在升级为pug也有用ejs个人推荐art模板引擎。

  • 文 档：http://aui.github.io/art-template/zh-cn/express/

  • 步骤1：安装art-template模板引擎

    1
    2
    3
    npm install art-template

    npm install express-art-template

    img

  • 步骤2：创建views目录（注：调用render方法默认会到views目录中找）

  • 步骤3：创建test1.html文件（注：里面使用art-template模板语法）

img

  • 步骤4：创建app2.js文件 -> 启动并测试

img 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//1.引入express框架模块

var express = require('express')

//2.创建框架核心app对象

var app = express()

//###声明所使用的模板引擎（ps. 使用render方法必须）

app.engine('html', require('express-art-template'))

//3.路由

app.get('/',  function(req, res) {

 

​	//语法：res.render(模板文件, {数组})

​	//练习

​	res.render('test1.html', {

​		username: '传智播客',

​		age: 5,

​		orders: [

​			{id:1, title: '标题1', price: 30},

​			{id:2, title: '标题2', price: 33},

​			{id:3, title: '标题3', price: 12},

​		], 

​	})

 

})

//4.启动服务

app.listen(8080, function(){

​	console.log('Running...')

})

四、路由

1、简介

  • 什么是路由：就是网址

  • 什么是路由参数：就是网址参数

  • 在 PHP中作用：声明交给哪个控制器的哪个方法处理

  • 在NodeJS中作用：交给指定匿名函数处理

2、语法

  • 明 确：HTTP请求类型有get、post、put、delete等
  1. 普通语法：app.HTTP请求类型（请求路径，回调函数）

  • 发送 GET请求：app.get（请求路径，回调函数）

  • 发送POST请求：app.post（请求路径，回调函数）

  • 发送 任意请求：app.all（请求路径，回调函数）

  • ….

  1. 特殊语法：app.use（请求路径，回调函数）

  • 区别1：use匹配任意类型请求

  • 区别2：use非完全匹配（ps. 只需要url前面匹配请求路径即可匹配）

  1. 路由参数：app.HTTP请求类型（请求路径/:参数1/…/:参数n，回调函数）

img

3、练习（普通语法）

  • 步骤1：创建app3.js文件，输入下述代码 （ps. 直接复制关键理解作用）

img 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
//1.引入express框架模块

var express = require('express')

//2.创建框架核心app对象

var app = express()

//3.路由

app.get('/',  function(req, res) {

 

​	//注：修改method=get 或者 method=post查看结果

​	var formHtml = `

​		<form action="/test" method="post">

​			<input type="text" name="uname" />

​			<input type="text" name="age" />

​			<input type="submit"  />

​		</form>

​	`

​	res.send(formHtml)

})

 

app.get('/test', function(req, res){

​	res.send('this is get submit')

})

 

app.post('/test', function(req, res){

​	res.send('this is post submit')

})

 

//4.启动服务

app.listen(8080, function(){

​	console.log('Running...')

})
  • 步骤2：测试

4、练习（特殊语法）

  • 步骤1：创建app4.js文件，输入下述代码 （ps. 直接复制关键理解作用）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    //1.引入express框架模块

    var express = require('express')

    //2.创建框架核心app对象

    var app = express()

    //3.路由

    app.get('/',  function(req, res) {

     

    ​	var formHtml = `

    ​		<form action="/test/a/b/c" method="post">

    ​			<input type="text" name="uname" />

    ​			<input type="text" name="age" />

    ​			<input type="submit"  />

    ​		</form>

    ​	`

    ​	res.send(formHtml)

    })

     

    app.use('/test', function(req, res){

    ​	res.send('this is /test')

    })

     

    //4.启动服务

    app.listen(8080, function(){

    ​	console.log('Running...')

    })
  • 步骤2：测试

3、练习（路由参数）

  • 步骤1：创建app5.js文件，输入下述代码 （ps. 直接复制关键理解作用）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    //1.引入express框架模块

    var express = require('express')

    //2.创建框架核心app对象

    var app = express()

    //3.路由

    app.get('/stu/:name/:age', function(req, res){

    ​	console.log(req.params);

    ​	res.send('匹配成功，快去看控制台有没有获取数据..')

    })

    //4.启动服务 

    app.listen(8080, function(){

    ​	console.log('Running...')

    })
  • 步骤2：测试

五、利用 Express 托管静态文件

  • 回忆：在第一讲中，让静态资源可以被外部访问

img

  • 说明：在express中设置了固定语法允许指定目录下的文件被外部访问

  • 练习：

img 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

//1.引入express框架模块

var express = require('express')

var fs = require('fs')

//2.创建框架核心app对象

var app = express()

//3.路由

// 指定文件

// app.get('/public/css/test.css', function(req, res){

// 	fs.readFile('./' + req.url, function(err,data){

// 		res.send(data.toString())

// 	})

// })

// 多个文件

// app.use('/public', function(req, res){

// 	fs.readFile('./public' + req.url, function(err,data){

// 		res.send(data.toString())

// 	})

// })

// 在express中

// 作用：允许指定目录下的文件被外访问

// 语法：express.static('目录名')  

// 返回：一个函数，可理解为读取URL需要读取的文件

app.use('/public', express.static('public'))

 

//4.启动服务

app.listen(8080, function(){

​	console.log('Running...')

})

六、案例（留言板）

1、效果图

img img

2、初始化

  • 步骤1：创建如下结构目录

img

  • 步骤2：将静态资源和静态文件复制到对应目录中

img

  • 步骤3：执行下述命令
    1
    2
    3
    4
    5
    6
    7
    npm init -y

    npm install express

    npm install art-template

    npm install express-art-template
    img

img

3、显示静态页面

  • 创建app.js文件

img 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
//1.引入express框架模块

var express = require('express')

var fs = require('fs')

//2.创建框架核心app对象

var app = express()

//3.配置框架

app.use('/public', express.static('public'))

app.engine('html', require('express-art-template'))

//4.路由

app.get('/', function(req, res){

//首页

​	return res.render('index.html')

})

app.get('/post', function(req, res){

//添加页

​	return res.render('post.html')

})

app.get('/dopost', function(req, res){

//添加数据处理

​	

})

//5.启动服务

app.listen(8080, function(){

​	console.log('Running...')

})

4、显示动态页面

  • 步骤1：声明留言数据变量

img 

1
2
3
4
5
6
7
8
9
10
11
//创建留言数据对象

var msgs = [

 {name: '张三', content: "你好我是张三", create_at: '2017-11-14 10:30:32'},

 {name: '李四', content: "你好我是李四", create_at: '2017-11-15 10:11:14'},

 {name: '王五', content: "你好我是王五", create_at: '2017-11-16 10:22:55'}

];
  • 步骤2：传递给视图

img

  • 步骤3：视图遍历 -> 查看效果

img

5、数据处理（get）

  • 步骤1：修改post.html文件

img

  • 步骤2：修改app.js增加逻辑判断

img 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
//创建留言数据对象

var msgs = [

 {name: '张三', content: "你好我是张三", create_at: '2017-11-14 10:30:32'},

 {name: '李四', content: "你好我是李四", create_at: '2017-11-15 10:11:14'},

 {name: '王五', content: "你好我是王五", create_at: '2017-11-16 10:22:55'}

];

 

//1.引入express框架

var url = require('url')

var moment = require('moment');

var express = require('express')

//2.创建app对象

var app = express()

//3.配置

app.engine('html', require('express-art-template'))

app.use('/public', express.static('public'))

//4.路由

//#留言列表

app.get('/', function(req, res){

​	res.render('index.html', {

​		msgs: msgs

​	})

})

//#留言添加

app.get('/add', function(req, res){

​	res.render('add.html')

})

//#留言添加处理

app.get('/doadd', function(req, res){

​	//数据处理

​	//1.接受参数

​	var paramObj = url.parse(req.url, true).query

​	//2.入库（压入）

​	var date = moment().format("YYYY-MM-D h:mm:ss");

​	var msg = {name:paramObj.name, content: paramObj.content, create_at: date}

​	msgs.push(msg)

​	//3.跳转

​	res.redirect('/')

})

//5.启动服务

app.listen(8080, function(){

​	console.log('启动成功，访问：http://localhost')

})
  • 步骤3：测试
文章作者: 哈雅布撒
文章链接: https://akirahayabusa.github.io/2021/08/05/nodejs-zhi-express-kuang-jia/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 哈雅布撒 !
nodejs
赏
  目录