获取后端图书记录，基于node.js的前后端通信

最新推荐文章于 2024-07-04 16:37:43 发布

羊飘

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量317

点赞数 1

分类专栏： node.js 文章标签：前端 node.js ajax通信

本文链接：https://blog.csdn.net/justBeHerHero/article/details/89894022

版权

node.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前后端通信

node.js

在node.js官网安装对应版本的node.js,安装路径随意。
创建项目文件夹，我的是命名为 ‘ test2 ’, 路径在c盘下
在test2中安装express，cmd中test2目录安装，cd test2 -> npm install express
文件目录如图
在cmd中运行命令：node start.js
目录结构

前端代码

head设置title、meta、style

<head>
	<title>Index</title>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html" />
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		table{
			margin: 0 auto;
			border: 1px solid grey;
			text-align: center;
		}
		td{
			border: 1px solid grey;
			height: 32px;
		}
		#getRecord,#continueGet{
			width: 100px;
		}
		input{
			color:blue;
		}
		input:disabled{
			border:1px solid lightgray;
			background-color: lightgrey;
		}
	</style>
</head>

用table布局总体代码

<table id="myTable" >
	<tr>
		<td style="width: 100px;">书号</td>
		<td style="width: 500px;">
			<input type="text" name="bookNo" id="bookNo" style="width: 98%;height: 100%;font-size: 16px;text-indent: 6px;" />
		</td>
		<td style="width: 300px;">
			<input type="button" name="getRecord" value="获取记录" id="getRecord" />
			<input type="button" name="continueGet" value="继续检索" id="continueGet" disabled="disabled" />
		</td>
	</tr>
	<tr>
		<td>书名</td>
		<td>
			<input type="text" name="bookName" id="bookName" style="width: 98%;height: 100%;font-size: 16px;text-indent: 6px;" disabled="true" />
		</td>
		<td>1-1000字符，不能包括单双引号</td>
	</tr>
	<tr>
		<td>价格</td>
		<td>
			<input type="text" name="bookPrice" id="bookPrice" style="width: 98%;height: 100%;font-size: 16px;text-indent: 6px;" disabled="true" />
		</td>
		<td>计算单位：人民币元</td>
	</tr>
	<tr>
		<td colspan="3" style="text-align: left;">提示：返回结果为0表示图书不存在</td>
	</tr>
</table>

3.引入jQuery的包

//这个路径特别注意，因为express安装在test2中，test2变成了根目录为 / ，为什么没有路径没有public？后端代码有解释。
<script src="/javaScript/jquery.1.12.4.min.js"></script>

4.js逻辑代码

<script type="text/javascript">
	$(document).ready(function(){
		
		function Ajax(bookNo,getOrPost){   //自己写的一个Ajax方法，bookNo是输入，getOrPost参数是字符串，‘get’/‘post’请求
	 		$.ajax({
				url:  "/getBookInf",
				type: getOrPost,
				data: {bookNo: bookNo},
				dataType: "json", 			//服务器端发回的字符串被自动解析成json对象，不需要转换
				error: function(xhr, status, error){
					alert("xhr: " + xhr.status + ", status: " + status +  ", error: " + error)
				},
				success: function(data){					//data.ok 是我从后端带回来的数据，为1表示有记录，为0表示没有记录
					if(data.ok==1){
						alert('成功获取该记录');
						setFalse('#bookName','#bookPrice');		//禁用
						$('#bookName').val(data.name);					//设置值
						$('#bookPrice').val(data.price);
					}
					else{
						console.log(data.ok);
						alert('没有这样的记录');
					}
				} 
			}); 
		}
		//	事件绑定
		$('#getRecord').on('click',getRecord); 

		$('#continueGet').on('click',continueGet);
		
		// 内容置空
		function setEmpty(){
			for(var i=0;i<arguments.length;i++){
				$(arguments[i]).val('');
			}
		}
		
		// 设置disabled为true
		function setTrue(){
			for(var i=0;i<arguments.length;i++){
				$(arguments[i]).prop('disabled',true);
			}
		}
		
		// 设置disabled为false
		function setFalse(){
			for(var i=0;i<arguments.length;i++){
				$(arguments[i]).prop('disabled',false);
			}
		}
		
		//得到记录
		function getRecord(){
			var bookNo = parseInt($.trim($("#bookNo").val()));
			if(bookNo<=1000&&bookNo>=1){
				Ajax(bookNo,'post');
			}
			else{
				alert('请输入1-1000的整数');
				return false;
			}
			setTrue('#bookNo','#getRecord');
			setFalse('#continueGet');
		}
		
		// 继续检索
		function continueGet(){
			setFalse('#getRecord','#bookNo')
			setTrue('#continueGet','#bookName','#bookPrice');
			setEmpty('#bookNo','#bookName','#bookPrice');
		}
	});
</script>

后端代码

巴啦巴啦吧啦的设置属性，copy就行

var fs = require("fs");
var express = require("express");
var app = express();

var bodyParser = require('body-parser');  // 表单元素解析器
app.use(bodyParser.urlencoded({extended: true}));  // 解析网页body中表单元素的中间件

 //设置成静态的文件目录，express 会在静态资源目录下查找文件，所以不需要把静态目录public作为url的一部分
 app.use(express.static(__dirname + "/public"));

进入网页的index界面

//得到当前的根目录下的首页
app.get("/", function (req, res){
	fs.readFile("views/index201716080413.html","utf-8",function(e,data){
		outPut(data,res);
	});
});

监听前端的请求

//  /getBookInf 是前端过来的
// 接收post响应
app.post("/getBookInf", function (req, res){
	var books=getBookInfs();
	postBack(books,req.body.bookNo,res);
});

// 接收get响应
app.get("/getBookInf", function (req, res){
	var books=getBookInfs();
	goBack(books,req.query.bookNo,res);
});

显示成功，监听2413端口，这可以随便设置，到时 localhost：端口号即可

app.listen(2413, function(){ console.log("网站：http://localhost:2413");});

各个函数

// 得到数据，book.json中的数据
function getBookInfs(){
	var data = fs.readFileSync("views/book201716080413.json","utf-8");
	var str = data.toString();	  // 将二进制文件转为字符串，然后转为json
	var books=JSON.parse(str);   // 数组也算一个json对象	
	return books;
}

// 返回数据
function goBack(books,bookNo,res){
	for(var i=0;i<books.length;i++){
		if(books[i].no==bookNo){
			var mydata = {ok: 1,no: books[i].no, name: books[i].name, price: books[i].price};
			outPut(mydata,res);
			return;				//退出
		}
	}
	var mydata = {ok: 0};
	outPut(mydata,res);
}

//返回到前端的数据
function outPut(mydata，res){
	res.write(JSON.stringify(mydata));
	res.end();
}

json文件

book.json

[{
	"no":1,
	"name":"图书一",
	"price":11
},{
	"no":2,
	"name":"图书二",
	"price":22
},{
	"no":3,
	"name":"图书三",
	"price":33
},{
	"no":4,
	"name":"图书四",
	"price":44
}]

用node.js 做的前后端通信不难，后端模块框架直接copy即可。菜鸟记录…

羊飘

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
获取后端图书记录，基于node.js的前后端通信

前后端通信node.js在node.js官网安装对应版本的node.js,安装路径随意，我这是v11.12.0版。创建项目文件夹，我的是命名为 ‘ test2 ’, 路径在c盘下在test2中安装express，cmd中test2目录安装，设置根目录/为 test2，命令为 npm install express文件目录如图在cmd中运行命令：node start.js前端代...
复制链接

扫一扫