小型新闻发布系统-总结

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

白色的榆

22332人浏览 · 2018-08-21 17:51:35

白色的榆 · 2018-08-21 17:51:35 发布

小型新闻发布系统

一、客户需求分析
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="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="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，这样在需要判断用户身份权限的页面就可以直接获得当前登陆用户的身份权限。还有在主页面添加了个过滤器来过滤用户是否登陆等等

欢迎使用若依开源

快速构建 Web 应用程序

更多推荐

eclipse安装若依框架

1、首先下载maven，下载地址为：http://maven.apache.org/download.cgi，然后选择apache-maven-3.6.0-bin.tar.gz，如下图所示：2、然后新建一个maven目录，如下图所示：3、将下载的maven包解压到该目录中，（注意此时maven的位置，与压缩包的位置相同）如下图所示：4、配置环境变量，新建一个MAVEN_HOME，值为：D:\...

RuoYi 若依

开源框架若依实战Demo学习笔记

若依是个不错的框架，下面是我用他写的一个简单demo，以后会在此基础上进行进一步的开发，下面是整合的过程。我在整合的过程中可谓是一波三折，大家如果不想走弯路，那么这篇文章将对你很有帮助。首先，项目代码地址写列出来，方便大家下载使用，这是整理后的代码https://gitee.com/schjava/heros_separ.git启动项目访问localhost（默认80端口）配置测试用户先创建角色为