nodej+expess搭建简单的展示页和后台信息管理页_node.js书写基本信息展示页

近日学习nodejs，就写了个简单的前端页面和后台管理页面，先来看看成果
首先，前端展示页

然后，后台管理页

进入修改页

就是这些，最主要这三个页面，接下来说一下我的思路（这里欢迎各位大神批评指正）

1. 利用json文件来存储页面上所展示的信息（文字，图片等），当然也可以用数据库来存储（像用户信息等就用数据库存储，在这里用来展示的我就简单用json来存储），然后前端利用ajax发送get请求到nodejs后台，nodejs将json文件的信息发送回给前端。
2. 后台管理页方面，用HTML做个页面出来，里面的信息也是像展示页那样用ajax读取json文件，修改的时候用nodejs读文件操作读出整个信息片段并转化为对象格式方便修改，修改完后再用nodejs写文件操作将新的数据保存，这样json文件里面的信息就可以被修改了，再次刷新展示页后上面的信息页随之被修改。

先来看一下文件夹结构



这里最主要的是app.js、index.js这两个js文件，app.js用来配置一些最基本的声明，如变量声明什么的，index.js则配置页面链接的跳转和后台功能的实现

---

详细过程：

1. html+bootstrap写个简单的页面结构出来，代码如下：

<div class="container">
  <div class="row">
  	  <div class="col-sm-4">
  	  	<div class="row">
	  	  	<div class="col-sm-12"><h1 class="name">名字</h1></div>
	  	  	<div class="col-sm-12">
	  	  		<img class="img-responsive pic" src="" alt="">
	  	  	</div>
	  	  	<div class="col-sm-12">
	  	  		<div class="row">
	  	  			<div class="col-xs-5"><h4>国家 : </h4></div>
	  	  			<div class="col-xs-7"><h4 class="country"></h4></div>
	  	  		</div>
	  	  		<div class="row">
	  	  			<div class="col-xs-5"><h4>俱乐部 : </h4></div>
	  	  			<div class="col-xs-7"><h4 class="club"></h4></div>
	  	  		</div>
	  	  	</div>	
  	  	</div>
  	  </div>
  	  <div class="col-sm-4">
		<div class="row">
			<div class="col-sm-12"><h1 class="name">名字</h1></div>
  	  		<div class="col-sm-12">
  	  			<img class="img-responsive pic" src="" alt="">
  	  		</div>
  	  		<div class="col-sm-12">
  	  			<div class="row">
	  	  			<div class="col-xs-5"><h4>国家 : </h4></div>
	  	  			<div class="col-xs-7"><h4 class="country"></h4></div>
	  	  		</div>
	  	  		<div class="row">
	  	  			<div class="col-xs-5"><h4>俱乐部 : </h4></div>
	  	  			<div class="col-xs-7"><h4 class="club"></h4></div>
	  	  		</div>
  	  		</div>
		</div>	  	  	
  	  </div>
  	  <div class="col-sm-4">
  	  	<div class="row">
	  	  	<div class="col-sm-12"><h1 class="name">名字</h1></div>
	  	  	<div class="col-sm-12">
	  	  		<img class="img-responsive pic" src="" alt="">
	  	  	</div>
	  	  	<div class="col-sm-12">
	  	  		<div class="row">
	  	  			<div class="col-xs-5"><h4>国家 : </h4></div>
	  	  			<div class="col-xs-7"><h4 class="country"></h4></div>
	  	  		</div>
	  	  		<div class="row">
	  	  			<div class="col-xs-5"><h4>俱乐部 : </h4></div>
	  	  			<div class="col-xs-7"><h4 class="club"></h4></div>
	  	  		</div>
	  	  	</div>	  	  		
  	  	</div>
  	  </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

javascript代码（用的jquery）：
这里发送get请求 /getinfo 这个路由信息到nodejs。

$(function(){
	$.get("/getinfo", function(data){
		$.each(data, function(index, info){
			$(".name:eq(" + index + ")").text(info.name);
			$(".country:eq(" + index + ")").text(info.country);
			$(".club:eq(" + index + ")").text(info.club);
			$(".pic:eq(" + index + ")").attr('src',info.picture);
		})
		$('.name').css('color','#000');
	})
})
1
2
3
4
5
6
7
8
9
10
11

2. 后台信息管理页

<div class="container">
	<h1>信息管理</h1>
	<form action="" role="form" class="info-list">
		<div class="form-group">
			<label for="name"><h2>名字</h2></label>
			<input type="text" class="form-control" id="name">
			<label for="country"><h2>国家</h2></label>
			<input type="text" class="form-control" id="country">
			<label for="Club"><h2>俱乐部</h2></label>
			<input type="text" class="form-control" id="club">
			<label for="picture"></label><h2>照片</h2>
			<input type="file" class="form-control" id="upload"><br>
			<img src="" alt="" class="picM">
			<input type="text" class="form-control" id="index" style="display:none">
		</div>
		<button class="btn btn-primary" type="button" id="modi">修改</button>
		<button class="btn btn-primary" type="button" id="back">返回</button>
	</form>
	
	<table class="table table-bordered table-hover">
		<thead>
			<tr>
				<th>名字</th>
				<th>国家</th>
				<th>俱乐部</th>
				<th>照片</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="info">
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td><img class="img-reponsive pic" src="" alt=""></td>
				<td><button class="btn btn-primary modify" id="first">修改</button></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td><img class="img-reponsive pic" src="" alt=""></td>
				<td><button class="btn btn-primary modify" id="second">修改</button></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td><img class="img-reponsive pic" src="" alt=""></td>
				<td><button class="btn btn-primary modify" id="third">修改</button></td>
			</tr>
		</tbody>
	</table>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

这里打开后台管理页的时候先隐藏了form标签里面的内容，当点击修改的时候隐藏table的内容，显示form的内容

javascript代码：

和展示页一样，先发送get请求到nodejs后台获取数据

$.ajax({
	url : '/getinfo',
	type : 'get',
	error : function(err){
		console.log(err);
	},
	success : function(data){
		//console.log(data);		
		//console.log(data.length);
		for (var i=0; i<3; i++){
			$("#info tr:eq(" + i + ") td:eq(0)").text(data[i].name);
			$("#info tr:eq(" + i + ") td:eq(1)").text(data[i].country);
			$("#info tr:eq(" + i + ") td:eq(2)").text(data[i].club);
			$(".pic:eq(" + i + ")").attr('src', data[i].picture);
		}
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

绑定input[type=file]的变化，当有文件上传时执行，并将图片转为base64格式存到res

var res = '';//用于上传图片时转化为base64格式
1

$("#upload").bind("input propertychange",function(event){
	var file = document.querySelector('input[type=file]').files[0];
	var reader = new FileReader();
	reader.readAsDataURL(file);		
	reader.onload = function(e) {
		res = e.target.result;
		$(".picM").attr('src',res);
	}
});
1
2
3
4
5
6
7
8
9

点击table标签里面的修改时，隐藏table标签，显示form标签

$('.modify').click(function(){
	var info = {//利用id名来确定index
		"first" : 1,
		"second" : 2,
		"third" : 3
	}
	var index = info[$(this).attr("id")]-1;
	var name = $("#info tr:eq(" + index + ") td:eq(0)").text();
	var country = $("#info tr:eq(" + index + ") td:eq(1)").text();
	var club = $("#info tr:eq(" + index + ") td:eq(2)").text();
	var picture = $(".pic:eq(" + index + ")").attr('src');

	$(".table").css('display','none');
	$(".info-list").css('display','block');

	$("#name").val(name);
	$("#country").val(country);
	$("#club").val(club);
	$("#index").val(index);
	$(".picM").attr('src',picture);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

点击form里面的修改时，用post传数据到路由 /modifyData

$("#modi").click(function(){
	var playerName = $("#name").val();
	var playerCountry = $("#country").val();
	var playerClub = $("#club").val();
	var playerIndex = $("#index").val();//index表示是第几个信息
	var isFile = 'false';

	function ajaxData(playerName, playerCountry, playerClub, playerIndex, playerPic){
		$.ajax({
			url : '/modifyData',
			type : 'post',
			dataType : 'json',
			data : {
				name : playerName,
				country : playerCountry,
				club : playerClub,
				index : playerIndex,
				picture : playerPic
			},
			error : function(err){
				console.log(err);
			},
			success : function(data){
				window.location.href = "http://127.0.0.1:3000/managment";
			}
		})
	}

	var fileName = $('input[type=file]').val();
	if (fileName == ''){//如果有新的文件上传
		ajaxData(playerName, playerCountry, playerClub, playerIndex, isFile);
	}
	else{//如果没有
		ajaxData(playerName, playerCountry, playerClub, playerIndex, res);
	}			
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

3. 后端nodejs
   首先在app.js里声明一些变量，如果使用mongodb，要使用npm安装一下（cnpm install mongodb）

global.fs = require("fs");
global.MongoClient = require('mongodb').MongoClient
global.url = 'mongodb://localhost:27017';
1
2
3

然后进入index.js编辑代码

前端信息展示页 ↓

router.route('/index').get(function(req, res){
	res.render('display');
})
```js
后台信息管理页 ↓

```js
router.route('/managment').get(function(req, res){
	res.render('managment');
})
1
2
3
4
5
6
7
8
9
10

/getinfo 路由，后端收到get请求，就会执行以下代码
fs.readFile读取文件信息，然后用res.send(JSON.parse(data))将信息以JSON对象的格式发送给前端

router.get('/getinfo', function(req, res){
	fs.readFile( './public/json/info.json', 'utf8', function(err, data){
		if (err){
			return console.log(err);
		} 
		//console.log(JSON.parse(data));
		res.send(JSON.parse(data));
		res.end();
	})
})
1
2
3
4
5
6
7
8
9
10

/modifyData理由 post请求，在信息管理页修改完信息后点击修改按钮，会以post的方式向后端发送数据信息

router.post('/modifyData', function(req, res){
	var name = req.body.name;
	var country = req.body.country;
	var club = req.body.club;
	var index = req.body.index;
	var file = req.body.picture;
	//console.log(isNaN(index));

	function modifyPlayerData(file){
		fs.readFile( './public/json/info.json', 'utf8', function(err, data){
			if (err){
				return console.log(err);
			}

			var playinfo = data.toString();
			playinfo = JSON.parse(playinfo);
			playinfo[index].name = name;
			playinfo[index].country = country;
			playinfo[index].club = club;
			if (file != 0){
				playinfo[index].picture = file;
			}

			var str = JSON.stringify(playinfo);

			fs.writeFile( './public/json/info.json', str, function(error, newdata){
				if (error){
					console.log(error);
				}
				console.log('success');
				res.send('1');
				res.end();
			})
		})
	}

	if (file == 'false'){
		console.log('no file');
		modifyPlayerData(0);
	}
	else {
		console.log('new picture')
		modifyPlayerData(file)
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

最后在git中cnpm start开启项目
展示页 http://127.0.0.1:3000/index
后台管理页 http://127.0.0.1:3000/managment
源代码地址：https://github.com/jtbss/Website-Backstage（这里面没有node_modules文件，要自己cnpm安装一些依赖包）

欢迎批评指正！