nodejs系列（3）Express框架GET、POST、COOKIE、上传、数据库操作

小鱼儿 2021-09-14 15:24 239阅读 0赞

# 搭建服务 #

本篇介绍Express框架的几个基本实现：**GET实现、POST实现、COOKIE实现、文件上传和数据库操作**。要注意，以下所有测试用例都是在上一篇的目录结构基础上创建，在介绍这些实现前，我们首先需要引入必须的包，在index.js下加入源码如下：

（注）在routes目录下需提前新建好一个mysql.js文件，否则在下例子中引入MySQL时会报错找不到文件。

//准备工作
    var fs = require("fs");
    var express = require('express');
    var app = express();
    var MySQL = require("./routes/mysql"); //用于MYSQL测试用例
    var cookieParser = require('cookie-parser'); //用于COOKIE测试用例
    var multiparty = require('multiparty'); //用于上传测试用例
    var bodyParser = require('body-parser'); //用于POST测试用例
    var urlencodedParser = bodyParser.urlencoded({
    	extended: false
    });
    app.use(express.static('public')); //指定静态资源文件夹
    app.use(cookieParser());
    
    /********************搭建服务监听********************/
    var server = app.listen(8081, "127.0.0.1", function() {
    	var host = server.address().address;
    	var port = server.address().port;
    	console.log("应用实例，访问地址为 http://" + host + ":" + port);
    	console.log("-------------------------------------------------");
    });

（注）为了方便构建样式，.html页面例子中都用到了bootstrap框架组件，可以到bootstrap官网下载，如对样式无要求，可自行把相关代码省略即可。

# GET测试用例 #

在index.js下创建get服务接口，代码如下：

/********************GET测试用例********************/
    app.get('/get.html', function(req, res) {
    	res.sendFile(__dirname + "/views/get.html");//或引入path模块，res.sendFile(path.resolve('./views/get.html'));
    });
    
    app.get('/process_get', function(req, res) {
    	var data = {
    		"name": req.query.name,
    	};
    	res.end(JSON.stringify(data));
    });

（注）获取接口或页面的Get传参用req.query.name；获取Post传参用req.body.name。

（注）若需重定向可用redirect，如res.redirect(302, 'http://www.helloui.net'); 301表示永久重定向，302表示临时重定向。

在views目录下新建get.html，代码如下：

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>GET请求测试</title>
    		<script>
    			var tmp_html = '<link rel="stylesheet" href="../js/libs/bootstrap/3.3.7/css/bootstrap.css"/>';
    			tmp_html += '<script src="../js/libs/jquery/3.2.1/jquery.js"><\/script>';
    			tmp_html += '<script src="../js/libs/bootstrap/3.3.7/bootstrap.js"><\/script>';
    			document.write(tmp_html);
    			document.close();
    		</script>
    		<style>
    			.form {
    				width: 244px;
    				margin-left: 10px;
    				margin-top: 10px;
    			}
    			
    			.form .f-option {
    				height: 40px;
    			}
    			
    			.form .f-option label {
    				float: left;
    				line-height: 34px;
    			}
    			
    			.form .f-option input {
    				float: left;
    				margin-left: 10px;
    				width: 200px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="form">
    			<div class="f-option">
    				<label for="name">姓名:</label>
    				<input id="name" type="text" class="form-control" />
    			</div>
    			<div style="clear: both; float: right;">
    				<button id="submit" class="btn btn-primary">提交</button>
    			</div>
    		</div>
    	</body>
    
    	<script>
    		$("#submit").unbind("click").bind("click", function() {
    			var name = $("#name").val();
    			var requrl = "http://127.0.0.1:8081/process_get"
    			var params = "?name=" + name;
    			$.ajax({
    				url: requrl + params,
    				type: "GET",
    				timeout: 30000,
    				dataType: "json",
    				error: function(response) {
    					console.log("error:", response);
    				},
    				success: function(response) {
    					console.log("success:", response);
    				}
    			});
    		});
    	</script>
    
    </html>

打开浏览器访问：http://127.0.0.1:8081/get.html，效果图如下：

![SouthEast][]

# POST测试用例 #

在index.js下创建post服务接口：

/********************POST测试用例********************/
    app.get('/post.html', function(req, res) {
    	res.sendFile(__dirname + "/views/post.html");
    });
    
    app.post('/process_post', urlencodedParser, function(req, res) {
    	var data = {
    		"name": req.body.name,
    	};
    	res.end(JSON.stringify(data));
    });

在views目录下新建post.html，代码如下：

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>POST请求测试</title>
    		<script>
    			var tmp_html = '<link rel="stylesheet" href="../js/libs/bootstrap/3.3.7/css/bootstrap.css"/>';
    			tmp_html += '<script src="../js/libs/jquery/3.2.1/jquery.js"><\/script>';
    			tmp_html += '<script src="../js/libs/bootstrap/3.3.7/bootstrap.js"><\/script>';
    			document.write(tmp_html);
    			document.close();
    		</script>
    		<style>
    			.form {
    				width: 244px;
    				margin-left: 10px;
    				margin-top: 10px;
    			}
    			
    			.form .f-option {
    				height: 40px;
    			}
    			
    			.form .f-option label {
    				float: left;
    				line-height: 34px;
    			}
    			
    			.form .f-option input {
    				float: left;
    				margin-left: 10px;
    				width: 200px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="form">
    			<div class="f-option">
    				<label for="name">姓名:</label>
    				<input id="name" type="text" class="form-control" />
    			</div>
    			<div style="clear: both; float: right;">
    				<button id="submit" class="btn btn-primary">提交</button>
    			</div>
    		</div>
    	</body>
    
    	<script>
    		$("#submit").unbind("click").bind("click", function() {
    			var name = $("#name").val();
    			var requrl = "http://127.0.0.1:8081/process_post"
    			var params = "";
    			var data = {
    				name: name
    			}
    			$.ajax({
    				url: requrl + params,
    				data: data,
    				type: "POST",
    				timeout: 30000,
    				dataType: "json",
    				error: function(response) {
    					console.log("error:", response);
    				},
    				success: function(response) {
    					console.log("success:", response);
    				}
    			});
    		});
    	</script>
    
    </html>

打开浏览器访问： http://127.0.0.1:8081/post.html，效果图如下：  
![SouthEast 1][]

# COOKIE测试用例 #

COOKIE的目的在于实现记录用户的登录状态，在index.js下创建cookie服务接口：

/********************COOKIE测试用例********************/
    app.get('/cookie.html', function(req, res) {
    	res.sendFile(__dirname + "/views/cookie.html");
    });
    
    app.post('/process_login', urlencodedParser, function(req, res) {
    	var data = {
    		"name": req.body.name,
    	};
    	if(req.cookies.isVisit && req.cookies.isVisit == "1") {
    		data.msg = "再次欢迎访问";
    	} else {
    		res.cookie('isVisit', 1, {
    			maxAge: 60 * 1000
    		});
    		data.msg = "欢迎第一次访问";
    	}
    	res.end(JSON.stringify(data));
    });
    
    app.post('/process_logout', urlencodedParser, function(req, res) {
    	var data = {};
    	if(req.cookies.isVisit) {
    		res.cookie('isVisit', 0, {
    			maxAge: 60 * 1000
    		});
    	}
    	data.msg = "登出成功";
    	res.end(JSON.stringify(data));
    });

在views目录下新建cookie.html，代码如下：

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>COOKIE请求测试</title>
    		<script>
    			var tmp_html = '<link rel="stylesheet" href="../js/libs/bootstrap/3.3.7/css/bootstrap.css"/>';
    			tmp_html += '<script src="../js/libs/jquery/3.2.1/jquery.js"><\/script>';
    			tmp_html += '<script src="../js/libs/bootstrap/3.3.7/bootstrap.js"><\/script>';
    			document.write(tmp_html);
    			document.close();
    		</script>
    		<style>
    			.form {
    				width: 244px;
    				margin-left: 10px;
    				margin-top: 10px;
    			}
    			
    			.form .f-option {
    				height: 40px;
    			}
    			
    			.form .f-option label {
    				float: left;
    				line-height: 34px;
    			}
    			
    			.form .f-option input {
    				float: left;
    				margin-left: 10px;
    				width: 200px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="form">
    			<div class="f-option">
    				<label for="name">姓名:</label>
    				<input id="name" type="text" class="form-control" />
    			</div>
    			<div style="clear: both; float: right;">
    				<button id="login" class="btn btn-primary">登录</button>
    				<button id="logout" class="btn btn-primary">登出</button>
    			</div>
    		</div>
    	</body>
    
    	<script>
    		$("#login").unbind("click").bind("click", function() {
    			var name = $("#name").val();
    			var requrl = "http://127.0.0.1:8081/process_login"
    			var params = "";
    			var data = {
    				name: name
    			}
    			$.ajax({
    				url: requrl + params,
    				data: data,
    				type: "POST",
    				timeout: 30000,
    				dataType: "json",
    				error: function(response) {
    					console.log("error:", response);
    				},
    				success: function(response) {
    					console.log("success:", response);
    				}
    			});
    		});
    
    		$("#logout").unbind("click").bind("click", function() {
    			var name = $("#name").val();
    			var requrl = "http://127.0.0.1:8081/process_logout"
    			var params = "";
    			var data = {
    				name: name
    			}
    			$.ajax({
    				url: requrl + params,
    				data: data,
    				type: "POST",
    				timeout: 30000,
    				dataType: "json",
    				error: function(response) {
    					console.log("error:", response);
    				},
    				success: function(response) {
    					console.log("success:", response);
    				}
    			});
    		});
    	</script>
    
    </html>

打开浏览器访问： http://127.0.0.1:8081/cookie.html，效果图如下：

![SouthEast 2][]

# 上传测试用例 #

本上传测试用例前端数据用FormData格式打包，可以上传常用的任何格式文件，在index.js下加入上传服务接口：

/********************上传测试用例********************/
    app.get('/upload.html', function(req, res) {
    	res.sendFile(__dirname + "/views/upload.html");
    });
    
    //上传(支持批量)
    app.post('/file_upload', function(req, res) {
    	var form = new multiparty.Form();
    	form.encoding = "utf-8";
    	form.uploadDir = "./public/temp"; //此路径不会自动创建，要注意
    	form.maxFilesSize = 500 * 1024 * 1024;
    	//fields：键值参数  ； files：上传文件
    	form.parse(req, function(err, fields, files) {
    		var data = {};
    		var count = 0;
    		for(var i = 0; i < files.file.length; i++) {
    			var inputFile = files.file[i];
    			var uploadedPath = __dirname + "/" + inputFile.path; //缓存路径
    			var desPath = __dirname + '/public/temp/' + inputFile.originalFilename; //存储路径
    			if(err) {
    				data.code = "404";
    				data.msg = err.toString();
    				res.end(JSON.stringify(data));
    				break;
    			} else {
    				fs.rename(uploadedPath, desPath, function(err, e) {
    					count++;
    					if(err) {
    						data.code = "404";
    						data.msg = err.toString();
    						res.end(JSON.stringify(data));
    					}
    					if(count == (files.file.length)) {
    						data.code = "200";
    						data.msg = "上传成功";
    						res.end(JSON.stringify(data));
    					}
    				});
    			}
    		}
    	});
    });

在views目录下新建 upload.html ，代码如下：

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>上传请求测试</title>
    		<script>
    			var tmp_html = '<link rel="stylesheet" href="../js/libs/bootstrap/3.3.7/css/bootstrap.css"/>';
    			tmp_html += '<script src="../js/libs/jquery/3.2.1/jquery.js"><\/script>';
    			tmp_html += '<script src="../js/libs/bootstrap/3.3.7/bootstrap.js"><\/script>';
    			document.write(tmp_html);
    			document.close();
    		</script>
    	</head>
    
    	<body>
    		<input id="uploadInput" type="file" multiple="multiple" style="display: none;" />
    		<button id="uploadBtn" class="btn btn-primary" οnclick="uploadClick();">上传文件</button>
    	</body>
    
    	<script>
    		var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
    
    		function uploadClick() {
    			var chooser = $('#uploadInput');
    			$('#uploadInput').val("");
    			chooser.unbind("change");
    			chooser.bind("change", function(evt) {
    				fileChange(evt.target);
    			});
    			$('#uploadInput').trigger("click");
    		}
    
    		function fileChange(target) {
    			var fileSize = 0;
    			if(isIE && !target.files) {
    				var filePath = target.value;
    				var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
    				var file = fileSystem.GetFile(filePath);
    				fileSize = file.Size;
    			} else {
    				fileSize = target.files[0].size;
    			}
    			var size = fileSize / 1024;
    			if(size > 50000) {
    				alert("附件不能大于50M");
    				target.value = "";
    				return
    			}
    
    			var formData = new FormData();
    			formData.append('name', "泽泽秋");
    			for(var i = 0; i < target.files.length; i++) {
    				formData.append('file', target.files[i]);
    			}
    			var requrl = "http://127.0.0.1:8081/file_upload"
    			$.ajax({
    				type: "POST", //必须用post  
    				url: requrl,
    				data: formData,
    				timeout: 30000,
    				dataType: "json",
    				crossDomain: true,
    				contentType: false,
    				processData: false,
    				error: function(response, state) {
    					console.log(response);
    				},
    				success: function(response, state) {
    					console.log(response);
    				}
    			});
    		}
    	</script>
    
    </html>

打开浏览器访问： http://127.0.0.1:8081/upload.html，效果图如下：

![SouthEast 3][]

（注）文件将被上传到/public/temp目录下，该上传API不会自动创建该目录，故需提前创建好。

# MYSQL测试用例 #

数据库链接信息如图所示，用户为root，密码为123456：

![SouthEast 4][]

建立mysql数据库test，并建立一个表websites，表内容如图所示：

![SouthEast 5][]

在index.js下加入mysql服务接口：

/********************MYSQL测试用例********************/
    app.get('/mysql.html', function(req, res) {
    	res.sendFile(__dirname + "/views/mysql.html");
    });
    
    //查询
    app.post('/mysql_query', function(req, res) {
    	MySQL().queryAction(req, res);
    });
    
    //增加
    app.post('/mysql_add', function(req, res) {
    	MySQL().addAction(req, res);
    });
    
    //更新
    app.post('/mysql_update', function(req, res) {
    	MySQL().updateAction(req, res);
    });
    
    //删除
    app.post('/mysql_delect', function(req, res) {
    	MySQL().delectAction(req, res);
    });

在routes目录下创建mysql.js文件，用于处理有关数据库交互的逻辑业务。

在views目录下新建 mysql.html ，代码如下：

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>数据库操作测试</title>
    		<script>
    			var tmp_html = '<link rel="stylesheet" href="../js/libs/bootstrap/3.3.7/css/bootstrap.css"/>';
    			tmp_html += '<script src="../js/libs/jquery/3.2.1/jquery.js"><\/script>';
    			tmp_html += '<script src="../js/libs/bootstrap/3.3.7/bootstrap.js"><\/script>';
    			document.write(tmp_html);
    			document.close();
    		</script>
    	</head>
    	<style>
    		button {
    			margin-left: 10px;
    			margin-top: 10px;
    		}
    	</style>
    
    	<body>
    		<button id="queryBtn" class="btn btn-primary">查询</button>
    		<br />
    		<button id="addBtn" class="btn btn-primary">增加（ID为6的记录）</button>
    		<br />
    		<button id="updateBtn" class="btn btn-primary">更新（ID为6的记录）</button>
    		<br />
    		<button id="delectBtn" class="btn btn-primary">删除（ID为6的记录）</button>
    	</body>
    
    	<script>
    		$("#queryBtn").unbind("click").bind("click", function() {
    			var requrl = "http://127.0.0.1:8081/mysql_query";
    			request(requrl);
    		});
    
    		$("#addBtn").unbind("click").bind("click", function() {
    			var requrl = "http://127.0.0.1:8081/mysql_add";
    			request(requrl);
    		});
    
    		$("#updateBtn").unbind("click").bind("click", function() {
    			var requrl = "http://127.0.0.1:8081/mysql_update";
    			request(requrl);
    		});
    
    		$("#delectBtn").unbind("click").bind("click", function() {
    			var requrl = "http://127.0.0.1:8081/mysql_delect";
    			request(requrl);
    		});
    
    		function request(requrl) {
    			$.ajax({
    				type: "POST",
    				url: requrl,
    				timeout: 30000,
    				dataType: "json",
    				error: function(response, state) {
    					console.log(response);
    				},
    				success: function(response, state) {
    					console.log(response);
    				}
    			});
    		}
    	</script>
    
    </html>

打开浏览器访问： http://127.0.0.1:8081/mysql.html，效果图如下：

![SouthEast 6][]

# 服务器主动向页面传参 #

服务器在打开页面时，可通过往Headers中塞值的方式向页面传参，服务端代码如下：

app.get('/get.html', function(req, res) {
    	var options = {
    		headers: {
    			"Domain": "http://www.helloui.net/"
    		}
    	};
    	res.sendFile(__dirname + "/views/get.html", options);
    });

页面获取Headers值：

$.ajax({
    	type: 'HEAD',
    	url: window.location.href,
    	complete: function(xhr, data) {
    		var domain = xhr.getResponseHeader('Domain');
    		console.log(domain);
    	}
    });

Demo完成下载地址：http://download.csdn.net/download/zeping891103/10225262

[SouthEast]: /images/20210813/016efba864524d91a7ea1c960899900b.png
[SouthEast 1]: /images/20210813/9c4ff30ba16d4876b7674d87f11be0f9.png
[SouthEast 2]: /images/20210813/b9cd30c74deb48929df349a572e9d969.png
[SouthEast 3]: /images/20210813/46c87a8485ba47abbc0a94b3a872e9a2.png
[SouthEast 4]: /images/20210813/d0e705b8696f4c8196abba5e2e5daf6c.png
[SouthEast 5]: /images/20210813/25f7e91976aa43229ef3f15e497a9652.png
[SouthEast 6]: /images/20210813/2251b6a31ebf4451b21c4492c5d32bc7.png