JavaWeb新闻发布系统案例1

Gorgeous_Tang

已于 2022-03-27 20:06:42 修改

阅读量3.1k

点赞数 2

文章标签： java eclipse

于 2022-03-27 20:06:05 首次发布

本文链接：https://blog.csdn.net/weixin_65479202/article/details/123778696

版权

新闻发布系统项目分析

1.前端后端功能分析

前端功能：

用户登录

用户注册

新闻分类显示

新闻信息显示

分页功能（首页，下一页，上一页，尾页）

历史记录功能

评论模块

后台功能：

管理员登录

主页默认显示所有新闻+分页

发布新闻

修改新闻

新闻分类模块：增删改查模块

评论模块：增删改查

普通用户管理：增删改查

分页功能

用户登录

创建登录界面

创建loginj界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻发布系统-管理员登录</title>
<!-- 引入login.css -->
<link rel="stylesheet" type="text/css" href="css/login.css" />
<!-- JavaScript 验证表单区域 -->
<script type="text/javascript">
	var code = "";//保存验证码
	//验证的需求：利用随机数  +拼接+数组存储需要随机的字符
	//所有字符串
	var arr = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l',
			'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y',
			'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' ];

	function $(id) {
		return document.getElementById(id);
	}
	//加载函数
	window.onload = function() {
		//设置username的焦点事件
		$("username").onblur = function() {
			var usernameValue = this.value;
			if (!usernameValue) {
				alert('用户名不能为空')
				return false;
			}
			return true;
		}
		//设置password的焦点事件
		$("password").onblur = function() {
			var passwordValue = this.value;
			if (!passwordValue) {
				alert('密码不能为空')
				return false;
			}
			return true;
		}

		//获取表单设置表单的阻止提交事件
		$("myForm").onsubmit = function() {
			if (!$("username").onblur() || !$("password").onblur()
					|| !$("code").onblur()) {
				return false;
			}
			return true;
		}

		//获取验证码进行匹配
		$("code").onblur = function() {
			//获取输入项中的验证码
			var inputCode = this.value;
			//获取span标签随机生成保留的验证码
			var spanCode = $("code_val").innerHTML;
			if (!inputCode) {
				alert('验证码不能为空');
				return false;
			} else {//编写了验证码
				if (inputCode != spanCode) {
					alert('验证码输入错误');
					this.value = "";
					//重新生成
					setCode();
					return false;
				}
			}
			return true;
		};

		//随机生成的验证码
		//javascript  随机器   Math.random()  0-1之间		

		//生成一个0-9的随机数
		/* var sj = Math.random()*10;
		// 向下取整 
		console.log(Math.floor(sj)); */

		setCode();

		/* 如果span中存储的验证码不清晰  需要重新修改  设置span的点击事件 */
		$("code_val").onclick = function() {
			setCode();
		}
	};

	//封装验证码生成
	function setCode() {
		//清空上一次保留的验证码
		code = "";
		//通过Math.random();产生一个随机数
		for (var i = 0; i < 4; i++) {
			/* 取范围 乘  数组的长度个数 */
			var sj = Math.floor(Math.random() * arr.length);
			//console.log(sj)
			//console.log(arr[sj]);  //根据随机数获取数组中的元素
			code += arr[sj];
		}
		//获取存储验证码的span标签
		$("code_val").innerHTML = code;
	}
</script>

</head>
<body>
	<!-- 登录大容器 -->
	<div id="login">
		<!-- 上 -->
		<div id="top">
			<div id="top_left">
				<img src="images/login_03.gif" />
			</div>
			<div id="top_center"></div>
		</div>
		<!-- 中 -->
		<div id="center">
			<div id="center_left"></div>
			<!-- 表单区域 -->
			<div id="center_middle" style="background: plum">
				<form id="myForm" action="doLogin.jsp" method="post">
					<div id="user">
						用 户 <input type="text" id="username" name="username" />
					</div>
					<div id="pwd">
						密 码 <input type="password" id="password" name="password" />
					</div>
					<!-- 登录前需要验证码进行验证 -->
					<div id="yzm">
						验证码 <input type="text" name="code" id="code" /><span
							id="code_val">SBSB</span>
					</div>
					<!-- 区域留出来   7天免登录-->
					<div id="mdl"></div>
					<div id="btn">
						<input type="submit" value="登录" /> <input type="reset" value="清空" />
					</div>


				</form>
			</div>
			<div id="center_right"></div>
		</div>
		<!-- 下 -->
		<div id="down">
			<div id="down_left">
				<div id="inf">
					<span class="inf_text">版本信息</span> <span class="copyright">管理信息系统
						2008 v2.0</span>
				</div>
			</div>
			<div id="down_center"></div>
		</div>

	</div>
</body>
</html>