nodej+expess搭建简单的展示页和后台信息管理页

最新推荐文章于 2023-04-27 15:23:30 发布
最新推荐文章于 2023-04-27 15:23:30 发布
阅读量397 收藏
点赞数
分类专栏： nodejs 文章标签： nodejs express
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40772969/article/details/87006760
版权

近日学习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>

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. 后台信息管理页
<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>

这里打开后台管理页的时候先隐藏了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);
		}
	}
})

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

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

$("#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);
	}
});

点击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);
})

点击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. 后端nodejs
    首先在app.js里声明一些变量，如果使用mongodb，要使用npm安装一下（cnpm install mongodb）
global.fs = require("fs");
global.MongoClient = require('mongodb').MongoClient
global.url = 'mongodb://localhost:27017';

然后进入index.js编辑代码

前端信息展示页 ↓

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

```js
router.route('/managment').get(function(req, res){
	res.render('managment');
})

/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();
	})
})

/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)
	}
})

最后在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安装一些依赖包）

欢迎批评指正！

CodeMonkey21
关注
专栏目录
NodeJ+Express+Vue+ElementUI+multer 实现upload文件上传（纯JS开发后台功能），记住不是java的哦
qq_41046662的博客
09-19 1002
本帖子用于本人开发过程中，开心了想记录的一些知识点，转载请附上原文链接 ^V^ 啾咪啾咪 1、 .vue 页面的代码，什么引入啥啥的略过喏 template里的代码块 <el-form-item label="图片(270X152)" prop="imgUrl"> <el-upload class="photo-uploader" ...
node搭建web服务器运行html页面,node.js开发web服务器，读取html文件并显示html页面...
weixin_42562079的博客
06-03 2421
最近项目开发遇到要使用node.js，如何使用node.js开发一个web服务器呢？其实很简单，如何要显示更美观的页面我们就需要去读取html文件在网页中显示。在写web服务前，首先要确保你会JavaScript，有一个在使用的编辑器，这里使用的是VSCode，预先安装了node.js，如果你还没安装node.js或者不是使用nvm安装的，请看这里的安装教程：Windows使用nvm安装node....
NodeJs写的会员管理系统前端页面
04-07
NodeJs写的会员管理系统前端页面,没有连接数据库,使用的json文件进行测试.可以完成前端的添加删除修改功能.
用node搭建简单的静态资源管理器
weixin_30237281的博客
08-08 144
我们都知道，老牌的3p服务器都是自带静态资源管理器的。但是node不同，它没有web容器，它的路由地址和真实地址可以没有联系，所有node的优点，是可以把路由做得相当漂亮。 但静态资源管理器也是必不可少的东西，今天我主要用node的fs模块，自己手写一个简单的静态资源管理器。 首先，建一个static文件夹，所有的静态文件都将放到这个文件夹下 引包 var http = require("htt...
node.js编写网页_为Node.js编写可扩展架构
cumi6497的博客
08-02 245
node.js编写网页by Zafar Saleem 通过Zafar Saleem 为Node.js编写可扩展架构 (Writing Scalable Architecture For Nodejs) Writing backend logic for any project these days is pretty easy, thanks to full stack JavaScript....
Node.js--基础
xss125的博客
04-27 1610
自定义的Node.js模块，也叫文件模块，是我们自己写的供自己使用的模块。同时，这类模块发布到npmjs.org上就成了开源的第三方模块。自定义模块是在运行时动态加载，需要完整的路径分析、文件定位、编译执行过程、速度相比核心模块稍微慢一些，但是用的非常多。我们可以把公共的功能 抽离成为一个单独的 js 文件 作为一个模块，默认情况下面这个模块里面的方法或者属性，外面是没法访问的。
NodeJ node.js基础
记得我所记得的
04-11 271
因为是Node服务器端的，怎样实现前台和后台请求以及回应 URL（由什么组成的 ）,传输的内容:表单数据 文件数据 【图片、压缩包、各种后缀文件】 URL的组成 URL由三部分组成： 协议类型 ， 主机名 和 路径及文件名 。通过URL可以指定的主要有以下几种：http、ftp、gopher、telnet、file等。 ---------------------------...
nestjs+typescript+mongodb+redis仿小米商城实现后台管理系统和小米mall.zip
最新发布
08-01
基于node js、vue、mongodb等技术构建的web系统，界面美观，功能齐全，适合用作毕业设计、课程设计作业等，项目均经过测试，可快速部署运行！ 基于node js、vue、mongodb等技术构建的web系统，界面美观，功能齐全，...
Dawn是一个用于前端和nodej的轻量级任务管理和构建工具
08-10
Dawn 取「黎明、破晓」之意，原为「阿里云·业务运营团队」内部的前端构建和工程化工具，现已完全开源。它通过 pipeline 和 middleware 将开发过程抽象为相对固定的阶段和有限的操作，简化并统一了开发人员的日常...
mern-admin-panel：使用ReactJ，ExpressJ，NodeJ，MongoDB和Bootstrap的管理面板
02-05
MERN管理面板 产品特点 使用Bootstrap完成登录页面和基本布局设计 JWT和Passport进行身份验证 带有客户端和服务器端分页的数据表 多种分类 筛选器 最小的设计 通过可选的道具和回调完全可控 演示版 可用脚本 同时...
nodej视频共享
12-22
一个基于nodejs的简单视频分享平台，可以直接在家里或者局域网环境运行。在windows10下正常使用。如果不做任何改动，要求mov文件夹里的视频文件结构只有2层： mov\视频目录名\视频文件名.mp4。另外为了方便运行，根目录下有个批处理文件，可以根据需求修改。最后，mov文件夹的属性需要注意一下，它是个链接，需要用户按自己情况重建一个，测试需要自己找个mp4文件，项目代码里没有。
7 天學習NodeJ
01-29
從網路收集到的一些關於學習NodeJ的文章，適合初學者
Nodejs介绍
Jadon_z的个人博客
09-02 2903
Nodejs介绍
node.js 详解
热门推荐
m0_55557411的博客
04-18 3万+
node.js 详解
nodej学习日志
qq_38820875的博客
11-29 338
node学习第一天 1.什么是nodejs? nodejs是基于Chrome V8引擎的javascript运行环境（runtime）,平台; 2.nodejs的发展历程 2009年2月，Ryan Dahl在博客上宣布准备基于V8创建一个轻量级的Web服务器并提供一套库。 2009年5月，Ryan Dahl在GitHub上发布了最初版本的部分Node.js包，随后几个月里，有人开始使用Node.j...
node.j是消息服务器,NodeJ node.js基础
weixin_35545135的博客
08-11 310
因为是Node服务器端的，怎样实现前台和后台请求以及回应URL(由什么组成的 ),传输的内容:表单数据 文件数据 【图片、压缩包、各种后缀文件】URL的组成 URL由三部分组成： 协议类型 ， 主机名 和 路径及文件名 。通过URL可以指定的主要有以下几种：http、ftp、gopher、telnet、file等。-----------------------------------------...
nodejs oracle数据库 art-template模板引擎实现的商品列表
m0_37820751的博客
11-01 334
根据上一篇文章写得静态jquery完成商品列表按价格升序、降序排序https://blog.csdn.net/m0_37820751/article/details/102623401 这一篇博客则用简单的案例完成整个项目的流程，使用nodejs作为我们页面的服务器，oracle为数据库存储数据，art-template作为我们页面的模板引擎动态渲染数据。 1.首先电脑就要安装nodejs...
Node.js学习
程小博衍的博客
11-18 2752
node.js学习记录
NodeJs: 使用cluster创建nodejs单机多核集群（多进程）
JohnApostle的博客
06-21 2240
前言： nodejs提供了cluster集群（支持端口共享的多进程），cluster基于child_process,process二次封装，方便我们使用该功能实现单机nodejs的web集群。 1、cluster的处理机制 都知道单线程的nodejs遇到cpu密集型操作会很容易出现CPU满载，服务阻塞的问题；通过类似nginx的master-worker多进程负载处理方式进一步压
nodej使用Express+ajax实现登录注册后才能使用留言板功能
03-26
首先，在后端使用Express框架创建API接口，包括登录接口和注册接口，另外还需要创建获取留言列表和添加留言的接口。 在前端页面中，用户需要先登录或注册才能使用留言板功能，可以在登录/注册成功后使用cookie或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值