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

其他 2018-10-27 10:31:35 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/79169117

搭建服务

本篇介绍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，效果图如下：



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，效果图如下：


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，效果图如下：



上传测试用例

本上传测试用例前端数据用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" onclick="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，效果图如下：


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


MYSQL测试用例

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


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


在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文件，用于处理有关数据库交互的逻辑业务。 
function MySQL() {
	var url = require('url');
	var mysql = require('mysql');
	var connection = mysql.createConnection({
		host: 'localhost',
		user: 'root',
		password: '123456',
		database: 'test'
	});

	var content = new Object();
	content.queryAction = function(request, response) {
		var sql = 'SELECT * FROM websites';
		connection.query(sql, function(err, result) {
			var data = {};
			if(err) {
				data.code = "404";
				data.msg = err.message;
				response.end(JSON.stringify(data));
				connection.end();
				return;
			}
			//返回参数,为JSON字符串
			data.code = "200";
			data.msg = "操作成功";
			data.data = result;
			response.end(JSON.stringify(data));
			connection.end();
		});
	}

	content.addAction = function(request, response) {
		var addSql = 'INSERT INTO websites(Id,name,url,alexa,country) VALUES(6,?,?,?,?)';
		var addSqlParams = ['百度', 'http://www.baidu.com', '1', 'CN'];
		connection.query(addSql, addSqlParams, function(err, result) {
			var data = new Object();
			if(err) {
				data.code = '404';
				data.msg = err.message;
			} else {
				data.code = '200';
				data.msg = "操作成功";
				var temp = {};
				temp.id = result.insertId;
				data.data = temp;
			}
			response.end(JSON.stringify(data));
			connection.end();
		});
	}

	content.updateAction = function(request, response) {
		var modSql = 'UPDATE websites SET name = ?,url = ? WHERE Id = ?';
		var modSqlParams = ['门户', 'http://www.hao123.com', 6];
		connection.query(modSql, modSqlParams, function(err, result) {
			var data = new Object();
			if(err) {
				data.code = '404';
				data.msg = err.message;
			} else {
				data.code = '200';
				data.msg = "操作成功";
			}
			response.end(JSON.stringify(data));
			connection.end();
		});
	}

	content.delectAction = function(request, response) {
		var delSql = 'DELETE FROM websites where id=6';
		connection.query(delSql, function(err, result) {
			var data = new Object();
			if(err) {
				data.code = '404';
				data.msg = err.message;
			} else {
				data.code = '200';
				data.msg = "操作成功";
			}
			response.end(JSON.stringify(data));
			connection.end();
		});
	}

	return content;
}

module.exports = MySQL;
在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，效果图如下：



服务器主动向页面传参

服务器在打开页面时，可通过往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

猜你喜欢

转载自blog.csdn.net/zeping891103/article/details/79169117
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022