HTML 登录网页（前端 + 后端JSON数据 + 动态显示系统时间)，express,ejs实现实例

最新推荐文章于 2024-08-31 13:58:33 发布

Error Man

最新推荐文章于 2024-08-31 13:58:33 发布

阅读量1.1k

点赞数 1

分类专栏： # html

本文链接：https://blog.csdn.net/no_O_ac/article/details/90605643

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现内容：

n使用$.ajax()中的get方式与服务器端通信
n使用按钮元素的onclick()关联点击登录事件
n在网页上显示服务器端的当前日期时间（使用ejs模板）
输入帐号与密码，点击登录网页，提交当前帐号到服务器
如果帐号不存在，提示帐号错误，如果密码错误，提示密码错误
如果帐号密码正确，则用alert显示欢迎该登录帐号和姓名的信息
登录成功后保存帐号到localStorage中，下次打开登录网页将自动获取该帐号位默认帐号
设计一个帐号文件users.json，有三个属性：帐号userNo、姓名name、密码password
设计一个ejs模板文件index+*.ejs，增加一个显示服务器端当前日期和时间以及早中午下晚（8点前（不含8点，下同）、12点前、14点前、18点前、18点及之后）的文本框
时间对象在main.js中产生，计算时间字符串代码全部在ejs模板中执行（模板中只能使用时间对象）
默认路由（/）获取index*文件
验证帐号密码的路由为/check
ejs模板文件和帐号文件保存到主程序所在文件夹的views子文件夹中
jQuery框架文件保存到public/javascripts中，
图片文件存到public/images文件夹中
users.json文件至少要有3个json对象

首先下载 nodejs, 创建文件夹 "login前端+后台" ,进入该文件夹,

用命令行输入命令 npm init -y , npm install express , express (选择y ) , npm install ejs

最后 .json 文件 .ejs 文件放在 views 文件夹里面，用的图片放在 public\images 里面

main.js 放在 login前端+后台 文件夹

如： index.ejs , users.json , main.js

代码： index + *.ejs

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>登录网页</title>
	<script type="text/javascript" src="/javascripts/jquery.1.12.4.min.js"></script>
    <script type="text/javascript">
		window.onload=function(){
			//alert('加载完毕');
			function no(){
				//localStorage.clear();
				if(localStorage.length == 0) alert("没有默认账号");
				else {
					var tmp = localStorage.getItem("K2106");
					$("#username").val(tmp);
				}
			}
			no();
		};
		function check() {
				var name=$("#username").val();
				var pas=$("#password").val();
				if(name == "" || pas == ""){
					alert("账号或密码不能为空");
					return 0;
				}
				$.ajax({
					url:  '/check',
					type: "get",
					data: {username: name},
					dataType: "json", //服务器端发回的字符串被自动解析成json对象，不需要转换
					error: function(xhr, status, error){
						alert("xhr: " + xhr.status + ", status: " + status +  ", error: " + error)
					},
					success: function(data){		
						if(!data.ok){
							alert("账号错误");
						}else{
							if(pas == data.password){
								alert('Welcome ' + data.name);
								if(localStorage.length == 0) localStorage.setItem("K2106",name);
							} else {
								alert("密码错误");
							}
						}
					} 
				});
			}
		/*
		function Refresh()  
		{  
		window.location.reload();  
		}  
		setTimeout('Refresh()',900); //1秒刷新一次  
		*/
    </script>
    <style>
        *all{
            margin: 0;
            padding: 0;
        }
        div.inner,table{
            position:absolute;
        }
        .outer{
            height: 100%;    
        }
        .inner{
            border: 1px solid blue;
		    border-radius: 20px;
		    width: 400px;
		    height: 200px;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%,-50%);
		    background-image: url(/images/001.png);
		    background-repeat: no-repeat;
		    background-size:100%;
        }
        .table{
            top: 30%;
		    left: 20%;
        }
        .under{
            position: fixed; 
            left: 0px; 
            bottom: 30px; 
            width: 100%; 
            text-align:center;
            font-size: 15px;
        }
		.Time{
			top: 65%;
			left: 36%;
            position: fixed; 
			width: 400px;
			text-align:right;
		}
    </style>
</head>
<body>
	<div class="outer">
		<div class="inner">
			<table class="table">
				<tr>
					<td>账&nbsp;&nbsp;&nbsp;号</td>
					<td><input type="text" name="username" id="username"/> </td>
				</tr>
				<tr>
					<td>密&nbsp;&nbsp;&nbsp;码</td>
					<td><input type="password" name="password" id="password"/> </td>
				</tr>    
				<tr>
					<td colspan="2" align="right">
						<input type='button' onclick = 'check()' value="               登陆                 "/>
					</td>
				</tr>
			 </table>
		</div>
		<span class = "Time">
			服务器时间：<%= year %>-<%= month %>-<%= day %> <%= hh %>:<%= mm %>:<%= ss%>
			(<%if(hh < 8){%>
			早上好
			<%} else if(hh < 12) {%>
			上午好
			<%} else if(hh < 14) {%>
			中午好
			<%} else if(hh < 18) {%>
			下午好
			<%} else {%>
			晚上好
			<%}%>)
		</span>
		<div class="under"><span>显示器分辨率要求≥1024*768，请使用Firefox浏览器（<a href="http://www.firefox.com.cn/" target="_blank">官网下载</a>），可以获得最佳显示效果，Chrome浏览器次之，IE浏览器则要求10或以上版本，其他浏览器较慢且有卡顿等现象。</span></div>
	</div>
</body>
</html>

代码：main.js

var fs = require('fs');
var ejs = require('ejs');
var express = require('express');
var app = express();

app.use(express.static(__dirname + "/public"));  

app.all("*", function(req, res, next) {
    res.setHeader("Content-Type", "text/html, charset=utf-8");
    next();
});

app.get("/", function (req, res){
	var now = new Date();
	var year = now.getFullYear();       //年
	var month = now.getMonth() + 1;     //月
	var day = now.getDate();            //日
	var hh = now.getHours();            //时
	var mm = now.getMinutes();          //分
	var ss = now.getSeconds();           //秒
	fs.readFile("views/index.ejs","utf-8",function(e,data){
		res.write(ejs.render(data,  {year: year,month:month,day:day,hh:hh,mm:mm,ss:ss}));
		res.end();
	});
});

app.get("/check", function (req, res){
	var user = req.query.username;
	var row = getuser(user);
	var str = JSON.stringify(row);
	res.write(str);
	res.end();
});

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

function getuser(user){
	var rows = getusers();
	var row = finduser(rows, user);
	if(row){
		row.ok = 1;
		return row;
	}else{
		return {"ok": 0};
	}
}

function getusers(){
	var data = fs.readFileSync("views/users.json","utf-8");  /*同步方法读写文件，与上述的静态路径无关。*/
	var str = data.toString();	  // 将二进制文件转为字符串，然后转为json
	return JSON.parse(str);   // 数组也算一个json对象	
}

function finduser(rows, user){
	for(var k = 0; k < rows.length; k++){
		if(rows[k].username == user){
			return rows[k];
		}
	}
	return null;
}

代码：.json

[
	{
		"username":"zl666",
		"password":"zltxdy",
		"name":"zl"
	},
	{
		"username":"LLLYYY",
		"password":"swqeaaa",
		"name":"ly"
	}
]

Error Man

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

HTML 登录网页（前端 + 后端JSON数据 + 动态显示系统时间)，express,ejs实现 实例

实现内容：

HTML 登录网页（前端 + 后端JSON数据 + 动态显示系统时间)，express,ejs实现实例