Node.js Express框架

langtianya 阅读:54 2022-08-18 12:00:20 评论:0

Node.js Express框架

参考https://www.runoob.com/nodejs/nodejs-express-framework.html
Express核心特性

  • 可以设置中间件来响应HTTP请求
  • 定义了路由表用于执行不同的HTTP请求动作
  • 可以通过模板传递参数来动态渲染HTML页面

第一个Express框架实例

使用Express框架输出“Hello World”

var express = require('express') 
var app = express(); 
     
    // GET请求 
app.get('/', (req, res)=>{ 
	res.send('Hello World'); 
}); 
 
var server = app.listen(8081, ()=>{ 
	var host = server.address().address; 
	var port = server.address().port; 
	console.log(host); 
	console.log("应用实例,访问地址为:http://%s:%s", host, port); 
}); 

打开浏览器输入

  127.0.0.1:8081 

结果:

请求和响应

Express应用使用回调函数的参数:requestresponse对象来处理请求和响应的数据。

  // GET请求 
  app.get(routerpath, function(request, response){}); 

routerpath可以是字符串或正则表达式。

路由

路由决定了由谁(指定脚本)去响应客户端请求。
app.get(routerpath, function(request, response){});:GET请求的响应,routerpath可以是正则或字符串
app.post(routerpath, function(request, response){});:POST请求的响应,routerpath可以是正则或字符串。

var express = require('express') 
var app = express(); 
 
// GET请求 
app.get('/', (req, res)=>{ 
	console.log("主页GET请求"); 
	res.send('Hello GET'); 
}); 
 
// POST请求 
app.post('/', (req, res)=>{ 
	console.log('主页POST请求'); 
	res.send('Hello POST'); 
}); 
 
// /list_user页面GET请求 
app.get('/list_user', (req, res)=>{ 
	console.log("/list_user GET请求"); 
	res.send('用户列表界面'); 
}); 
 
// /del_user页面GET请求 
app.get('/del_user', (req, res)=>{ 
	console.log("/del_user GET请求"); 
	res.send('删除页面'); 
}); 
// 对页面abcd,abxcd,ab123cd等GET请求 
app.get('/ab*cd', (req, res)=>{ 
	console.log('/ab*cd GET请求'); 
	res.send("正则匹配"); 
}); 
 
var server = app.listen(8081, ()=>{ 
	var host = server.address().address; 
	var port = server.address().port; 
	console.log("应用实例,访问地址为:http://%s:%s", host, port); 
}); 

在浏览器中输入:

  127.0.0.1:8081 
  // 或者 
  127.0.0.1:8081/list_user 
  // 或者 
  127.0.0.1:8081/del_user 
  // 或者 
  127.0.0.1:8081/ab任意字符cd 

可以得到对象的页面响应。

静态文件

Express提供了内置的中间件express.static来设置静态资源(图片,CSS,JavaScript等)。
使用express.static中间件设置静态文件的路径:

  app.use('routerpath', express.static('path')); 

routerpath是虚拟路径,path为真实路径,通过routerpath来访问path中的资源。

var express = require('express') 
var app = express(); 
 
app.use('/resources', express.static('public')); 
// GET请求 
app.get('/', (req, res)=>{ 
	console.log("主页GET请求"); 
	res.send('Hello GET'); 
}); 
 
var server = app.listen(8081, ()=>{ 
	var host = server.address().address; 
	var port = server.address().port; 
	console.log("应用实例,访问地址为:http://%s:%s", host, port); 
}); 

我的目录结构:

结果:

GET方法

通过GET方法提交两个参数,使用“/process_get”路由来处理输入:
index.html

<!DOCTYPE html> 
<html> 
	<head> 
		<meta charset="utf-8"> 
		<title></title> 
	</head> 
	<body> 
		<form action="http://127.0.0.1:8081/process_get" method="get"> 
			First Name:<input type="text" name="first_name" /><br /> 
			Last Name:<input type="text" name="last_name" /><br /> 
			<input type="submit" value="Submit"/> 
		</form> 
	</body> 
</html> 

main.js

var express = require('express') 
var app = express(); 
 
app.use('/resources', express.static('public')); 
// GET请求 
app.get('/index.html', (req, res)=>{ 
	res.sendFile(__dirname+'/'+'index.html'); 
}); 
 
app.get('/process_get', (req, res)=>{ 
	// 输出为JSON格式 
	var response = { 
		"first_name":req.query.first_name, 
		"last_name":req.query.last_name 
	}; 
	console.log(response); 
	res.end(JSON.stringify(response)); 
}); 
 
var server = app.listen(8081, ()=>{ 
	var host = server.address().address; 
	var port = server.address().port; 
	console.log("应用实例,访问地址为:http://%s:%s", host, port); 
}); 

浏览器中访问

  127.0.0.1:8081/index.html 

填写并提交表单后,会跳转到

  127.0.0.1:8081/process_get?firt_name=xxx&last_name=xxx 

观察到

和控制台的输出

  { first_name: 'admin', last_name: '123456' } 

POST方法

index.html: 和GET方法类似,改为

,其他不变;
main.js

var express = require('express') 
var app = express(); 
var bodyParser = require('body-parser'); 
 
// 创建 application/x-www-form-urlencoded编码解析 
var urlencodedParser = bodyParser.urlencoded({extended: false}); 
 
app.use('/resources', express.static('public')); 
// GET请求 
app.get('/index.html', (req, res)=>{ 
	res.sendFile(__dirname+'/'+'index.html'); 
}); 
 
app.post('/process_post', urlencodedParser, (req, res)=>{ 
	// 输出为JSON格式 
	var response = { 
		"first_name":req.body.first_name, 
		"last_name":req.body.last_name 
	}; 
	console.log(response); 
	res.end(JSON.stringify(response)); 
}); 
 
var server = app.listen(8081, ()=>{ 
	var host = server.address().address; 
	var port = server.address().port; 
	console.log("应用实例,访问地址为:http://%s:%s", host, port); 
}); 

结果:
浏览器端:

控制台:

  { first_name: 'admin', last_name: '123456' } 

文件上传

使用POST方法和一个form表单,同时将表单的enctype属性设置为multipart/form-data。
index.html

<!DOCTYPE html> 
<html> 
	<head> 
		<meta charset="utf-8"> 
		<title></title> 
	</head> 
	<body> 
		<h3>文件上传</h3> 
		选择一个文件上传<br /> 
		<form action="/file_upload" method="post" enctype="multipart/form-data"> 
			<input type="file" name="image" size="50" /><br /> 
			<input type="submit" value="Submit"/> 
		</form> 
	</body> 
</html> 

main.js

var express = require('express'); 
var app = express(); 
var fs = require('fs'); 
 
var bodyParser = require('body-parser'); 
var multer = require('multer'); 
 
app.use('/public', express.static('public')); 
app.use(bodyParser.urlencoded({extended: false})); 
app.use(multer({dest: '/tmp/'}).array('image')); 
 
app.get('/index.html', (req, res)=>{ 
	res.sendFile(__dirname+'/'+"index.html"); 
}); 
 
app.post('/file_upload', (req, res)=>{ 
	var file = req.files[0];//上传的第一个文件 
	console.log(file);//上传的文件信息 
	 
	var des_file = __dirname+'/'+file.originalname; 
	fs.readFile(file.path, (err, data)=>{ 
		fs.writeFile(des_file, data, (err)=>{ 
			var response = {message:'',filename:file.originalname}; 
			if(err){ 
				console.log(err); 
				response.message = 'File upload failed'; 
			} 
			else{ 
				response.message = 'File uploaded successfully'; 
			} 
			console.log(response); 
			res.end(JSON.stringify(response)); 
		}); 
	}); 
}); 
 
var server = app.listen(8081, ()=>{ 
	var host = server.address().address; 
	var port = server.address().port; 
	 
	console.log("应用实例,访问地址:http://%s%s", host, port); 
}); 

结果:

选择文件后:

点击上传后:

控制台输出:

  { 
    fieldname: 'image', 
    originalname: 'smile.jpg', 
    encoding: '7bit', 
    mimetype: 'image/jpeg', 
    destination: '/tmp/', 
    filename: 'aec0dc0dbfbdaedc56325e246a61cbe3', 
    path: '\\tmp\\aec0dc0dbfbdaedc56325e246a61cbe3', 
    size: 12281 
  } 
  { message: 'File uploaded successfully', filename: 'smile.jpg' } 

并发现当前目录多了一个刚刚上传的文件-smile.jpg。

Cookie管理

使用中间件向Node.js服务器发送cookie信息:

var express = require('express'); 
var cookieParser = require('cookie-parser'); 
var util = require('util'); 
 
var app = express(); 
app.use(cookieParser()); 
 
app.get('/', (req, res)=>{ 
	console.log("Cookies: "+util.inspect(req.cookies)); 
	res.send("Cookies: "+util.inspect(req.cookies)); 
}); 
 
app.listen(8081); 

结果:
浏览器输入

  127.0.0.1:8081 

观察浏览器和控制台的输出。


本文参考链接:https://www.cnblogs.com/pangqianjin/p/14206771.html
标签:NodeJs
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

搜索
关注我们

一个IT知识分享的公众号