小型新闻发布系统-总结

小型新闻发布系统

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

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

注册页面
小型新闻发布系统-总结_第1张图片

首页
小型新闻发布系统-总结_第2张图片
管理员身份登陆可以查看用户信息
小型新闻发布系统-总结_第3张图片
普通用户登陆不能查看用户信息
会弹出身份权限不够框
小型新闻发布系统-总结_第4张图片
然后用户管理框变红
小型新闻发布系统-总结_第5张图片
用户信息编辑页面
小型新闻发布系统-总结_第6张图片
新闻列表页面
小型新闻发布系统-总结_第7张图片
新闻查看页面
小型新闻发布系统-总结_第8张图片
新闻上传页面
小型新闻发布系统-总结_第9张图片
用户退出
小型新闻发布系统-总结_第10张图片
小型新闻发布系统-总结_第11张图片

三、项目设计与实现
本项目采用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="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>    
                  <a href="login.jsp">注册a>
               p>
            form>
         div>
         
             <div class="copy-right">
            <p><a>    Copyright © 2018a>p>
         div>
      div>
          
body>
html>
注册页面login.jsp如下

<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="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>    
                  <a href="load.jsp">登陆a>
               p>
            form>
         div>
         
             <div class="copy-right">
            <p>    Copyright © 2018a>p> 
         div>
      div>
          
body>
html>

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

地址:代码

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

你可能感兴趣的:(总结)