小型新闻发布系统-总结

小型新闻发布系统

一、客户需求分析
1.小型新闻发布系统，面向的是发布新闻的人员和管理系统的管理人员
对于两种身份的用户，要具有登陆界面
2.对于发布新闻的人员来说，该系统要具有新闻的发布和查看功能，同时该系统还支持文件的上传和下载
3.对于管理人员来说即具有普通用户的功能，又有自己的特有权限，即在该系统上注册的人员信息的查看删除修改

二、项目运行截图
登陆页面：

注册页面

首页

管理员身份登陆可以查看用户信息

普通用户登陆不能查看用户信息
会弹出身份权限不够框

然后用户管理框变红

用户信息编辑页面

新闻列表页面

新闻查看页面

新闻上传页面

用户退出

三、项目设计与实现
本项目采用MVC模式，整个项目有以下页面组成登陆页面注册页面主页用户信息查看页面用户信息删除修改页面新闻列表查看页面新闻发布页面和具体新闻查看页面，此项目的前端采用的是下载的模板
部分代码如下
—–用户登陆页面
因为要实现没点击前在用户名栏和密码栏显示默认的用户名和密码字体所以用到jQuery来实现这一效果jQuery代码如下：通过聚焦来切换不同的input来显示然后通过Servlet来验证此用户有没有在此系统上注册过

$(document).ready(function() {$("#username").focus(function(){$("#username").val("");});$("#username").blur(function(event) {/* Act on the event */if ($("#username").val()=="") {$("#username").val("用户名");}});$("#tel").focus(function(){$("#tel").val("");});$("#tel").blur(function(event) {/* Act on the event */if ($("#tel").val()=="") {$("#tel").val("手机号");}});$("#password").focus(function(){$("#password").val("");$("#password").hide();$("#password1").show();$("#password1").focus();$("#password1").val("");});$("#password1").blur(function(){if ($("#password1").val()=="") {$("#password1").hide();$("#password").show();$("#password").val("密码");}if ($("#password1").val()!=""){$("#password1").show();}});$("#password2").focus(function(){$("#password2").val("");$("#password2").hide();$("#password3").show();$("#password3").focus();$("#password3").val("");});$("#password3").blur(function(){if ($("#password3").val()=="") {$("#password3").hide();$("#password2").show();$("#password2").val("密码");}if ($("#password3").val()!=""){$("#password3").show();}});
});

Load.jsp登陆页面代码如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String username =request.getParameter("username");application.setAttribute("user",username);
%>
<head><title>登陆</title><meta charset="utf-8"><link href="css/style.css" rel='stylesheet' type='text/css' /><meta name="viewport" content="width=device-width, initial-scale=1"><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><script type="text/javascript" src="js/login.js"></script>
</head>
<body><div class="main"><div class="login-form"><h1>用户登陆</h1><div class="head"><img src="data:images/user.png" alt=""/></div><form action="LoadFilterServlet" method="post"><input type="text" id="username" class="text" value="用户名" name="username"><input type="text" id="password" name="password" value="密码"><input type="password" id="password1" name="password1" value="password" style="display: none;"><div class="submit"><input type="submit" value="登陆"></div> <p><a href="#">忘记密码 ?</a> &nbsp;&nbsp;&nbsp;<a href="login.jsp">注册</a></p></form></div><!--//End-login-form--><div class="copy-right"><p><a> &nbsp;&nbsp;&nbsp;Copyright &copy; 2018</a></p></div></div><!-----//end-main---->
</body>
</html>

注册页面login.jsp如下
<!DOCTYPE html>
<html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head><title>注册</title><meta charset="utf-8"><link href="css/style.css" rel='stylesheet' type='text/css' /><meta name="viewport" content="width=device-width, initial-scale=1"><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><script type="text/javascript" src="js/login.js"></script>
</head>
<body><div class="main"><div class="login-form"><h1>用户注册</h1><div class="head"><img src="data:images/user.png" alt=""/></div><form action="LoginServlet" method="post"><input type="text" id="username" class="text" value="用户名" name="username"><input type="text" id="password" name="password" value="密码"><input type="password" id="password1" name="password1" style="display: none;"><input type="text" id="password2" name="password2" value="确认密码"><input type="password" id="password3" name="password3" style="display: none;"><input type="text" name="tel" value="手机号" id="tel"><p class="p1">性别：<input type="radio" name="sex" class="sex" value="男">男<input type="radio" name="sex" class="sex" value="女">女</p><div class="submit"><input type="submit" value="注册"></div> <p><a href="#">忘记密码 ?</a> &nbsp;&nbsp;&nbsp;<a href="load.jsp">登陆</a></p></form></div><!--//End-login-form--><div class="copy-right"><p> &nbsp;&nbsp;&nbsp;Copyright &copy; 2018</a></p> </div></div><!-----//end-main---->
</body>
</html>

具体详细代码我已经上传到GitHub

地址：代码

四、个人小结
通过此次项目的实现让我加深了解了servlet 过滤器 jQuery jsp bean的使用，通过servlet来实现具体的后台操作 jsp来具体显示操作的结果 bean是实现具体功能的基础 jQuery来实现前端的特效表示。比如登陆界面的特效显示就要用到jQuery的shou（）和hide（）来切换不同的input来显示。由于此项目要判断用户的身份权限所以在登陆验证的Servlet中添加个存放用户用户身份权限的Application，这样在需要判断用户身份权限的页面就可以直接获得当前登陆用户的身份权限。还有在主页面添加了个过滤器来过滤用户是否登陆等等