前后端通信(后台对json文件中的对象数组的增删查改及登录)

前后端通信(后台对json文件josn对象数组的增删查改)

后台

1. 采用node.js支持的express框架

• 标配

var fs = require('fs');		//文件对象
var ejs = require('ejs'); //ejs模板
var express = require('express');	//express对象
var ses = require('express-session');  // 会话session中间件
var app = express();
var bodyParser = require('body-parser');  // 表单元素解析器
app.use(bodyParser.urlencoded({extended: true}));  // 解析网页body中表单元素的中间件
app.use(express.static(__dirname + "/public"));   //静态中间键

• 设置session会话

app.use(ses({
	resave : true,
    saveUninitialized: false, // 是否保存未初始化的会话
	name: '0123456789AB',   // 对session id 相关的cookie 进行签名
    secret : '20190519',
    cookie : { maxAge : 1000 * 60 * 5} // 设置 session 有效时间，单位毫秒，超时则会话自动清空
}));

• 路由（这里并没有将router单独放入一个文件然后再导出，里可以参考express脚手架）

//登录路由
app.get("/", function (req, res){
	var time=new Date();
	var Time={currentTime:time};
	fs.readFile("views/index201716080427.ejs","utf-8",function(e,data){ 
		res.write(ejs.render(data, {time:Time}));
		res.end();
	});
});

// 路由主页
app.get("/home", function (req, res){
	if(req.session && req.session.no)  /* 该会话有效 */
	{
		fs.readFile("views/index201716080427.html","utf-8",function(e,data){ 
			res.write(data);
			res.end();
		});
	}
	else
	{
		res.redirect('/');  /* 非法访问者，重定向到登录主页 */
		res.end();
	}
});

• ajax请求（由于登录过时问题，因此在响应请求时也需判断session）

  登录

app.get("/login", function (req, res){
	var UserNo = req.query.f;
	var UserPwd=req.query.p;//查询字符串解析出来的对象.
	var row = checkUser(UserNo,UserPwd);
	// 设置会话的用户名，表示已登录
	if(row.ok==1){
		req.session.no=UserNo;
	}else{
		req.session.no='';
	}
	var str = JSON.stringify(row);
	res.write(str);
	res.end();
});

// 检查用户的登录信息
// ok=1 表示成功登录
// ok=-1 表示密码有误
// ok=0 表示账号有误
function checkUser(UserNo,UserPwd){ 
	var Users = getJson("views/User.json");
	for(var k = 0; k < Users.length; k++){
		if(Users[k].no == UserNo){
			if(Users[k].password==UserPwd)
			{
				return {"ok":1,"name":Users[k].name};
			}
			return {"ok":-1};
			}		
	}
	return {"ok":0};
}

• 对json文件的操作

// 读path路径的json文件数据
function getJson(path){
	var data = fs.readFileSync(path,"utf-8"); 
	var str = data.toString();	 
	return JSON.parse(str);  	
}

// 找  ok=0 表示没有记录，1 为有记录
app.get("/search", function (req, res){
	if(req.session && req.session.no)  /* 该会话有效 */
	{
		var person=getJson('views/book.json');
		var result=searchPerson(req.query.perId,person);
		returnJson(res,result);
	}
	else
	{
		res.redirect('/');  /* 过时，重定向到登录主页 */
		res.end();
	}
});


//删   ok=0 表示失败，1 为成功
app.get("/delete", function (req,res){

	if(req.session && req.session.no)  /* 该会话有效 */
	{
		var person=getJson('views/book.json');
		var result=searchPerson(req.query.perId,person);
		if(result.ok==1){
			for(var i=0;i

• 监听端口

app.listen(8080, function(){ console.log("http://localhost:8080");});

2.目录结构

3.总结

主要是完成老师的要求，对于写一个管理系统，对json文件操作并不方便，费力不讨好。我的另一个版本，使用Vue全家桶+iview UI+express脚手架搭的，但是该项目的包导入太多太多，感觉非常大材小用，云数据库firebase不能用，野狗不能注册，Bomb云需要导入bomb的包，不方便，等复习完数据库可以写了，应该不难。