【JavaWeb项目jsp+mysql】实验室官网系统

一:概述

软件创新实验室暑期集训的大作业的项目开发部分和前端页面部分.

背景介绍

本届实验室集训主题为实验室官网开发，故此次大作业也和此相关。本题目脱胎于19级作业里的学习小组功能，项目立足点也在于实验室的学习小组。

学习小组：实验室成员根据自己的发展方向确定自己的学习小组，比如Java后端开发学习小组，前端开发学习小组，游戏开发学习小组，人工智能学习小组等等。每个小组都有自己的活动，可以有相关领域的学习交流，经验分享等等，在每月底实验室会进行小组报告，报告过去的一个月的学习情况等等。

需求
1.前后台
前台主要做展示交互
后台可以对完整进行管理设置
注：这个其实可以设计成两种页面（能实现功能即可）
2.权限管理
权限有两种：普通用户和管理员
普通用户登录后可以在前台浏览和评论，可以创建或者加入相应的学习小组
管理员可以登录后台，可以对用户、学习小组、评论等进行管理
3.用户注册和登录
注册：填写相关信息即可注册成功
登录：输入正确的账号密码即可登录成功
4.用户管理
管理员可以对用户信息进行管理（增加、修改、删除）
5.多级评论
可以展示多级评论（至少两级）
评论需要展示评论内容，评论时间，评论用户
用户可以对评论进行回复
6.学习小组
用户可以创建自己的学习小组，其他用户可以选择加入学习小组
小组成员可以发起或者查看相应的话题讨论
在对应的话题讨论中可以发表评论看法

---

二:环境介绍

我使用的是

• Mysql8

• jdk11

• idea2021.2

• tomcat9(从10退下来的,感觉问题太多了55,还是9好用)

• maven3.8.1

---

三:数据库模型以及一些用到的maven依赖

表名	内容
userinfo	存储着用户和管理员的信息,如:用户编号,用户名,密码,邮箱,手机号
groupinfo	存储着学校小组的信息,如:小组名字,小组人数,小组简介
groupmember	存储着小组成员信息,如:小组名字,成员编号
topicinfo	存储着话题信息,如:话题编号,所属小组名,发起者编号和用户名,话题标题,话题内容
talk1	存储着评论信息,如:评论编号,评论双方编号,所属话题标题,评论内容,评论时间

---

<dependencies>
        <dependency>
            <groupId>javax.mvc</groupId>
            <artifactId>javax.mvc-api</artifactId>
            <version>1.0.0</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter-api</artifactId>
            <version>${junit.version}</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter-engine</artifactId>
            <version>${junit.version}</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.25</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
    </dependencies>

sql文件也在gitee和github上,需要的自取

四:项目构造

前端部分

---

后端部分

太长就不一一截图了,大家可以在gitee和github上push下来看(链接在下方)(欢迎来点小星星哦)

实验室官网小项目: 运用了jsp,servlet级的开发项目,实验室网站,包括前后台,权限管理,用户注册和登录,用户管理,多级评论,学习小组 (gitee.com)

Yudaotor/jsp-html-css-StudyGroupWeb: 运用了jsp,servlet级的开发项目,实验室网站,包括前后台,权限管理,用户注册和登录,用户管理,多级评论,学习小组 (github.com)

---

五:界面展示

(小动画嘿嘿,在加载网页主体的时候会有一个淡入的效果)

登录界面

(当输错密码后会有红字提醒你用户名或密码错误)

注册界面

首页

(登录了就会来到这界面,直接跳转会被拦截下来)

小组界面

(会显示现有小组,可以选自加入或者自己创建学习小组)

话题界面

(会显示你所在小组中的话题,点击查看可以进入话题.也可以自己创建话题)

查看话题

(会显示同学们评论的内容和时间,也可以进行回复)(界面稍微丑hhh)

我的界面

密码管理

(可以在这修改密码)

小组管理

(展示自己所在的小组以及可以选择退出小组)

话题管理

(会显示自己创建的话题,可以在这里进行删除)

管理员界面

(只有管理员才可以进入,非管理员会被拦截下)

用户管理

(管理员可以进行修改用户信息以及删除用户,还可以在这里添加新的用户)

小组管理

(管理员可以进行对学校小组的删除)

六:设计思路

总体设计思路是从前端开始,再传信息到servlet层,servlet层将数据传给service层处理,service层调用dao层进行对数据库的操作,dao层配合pojo和utils中的jdbc来完成对数据库的操作,达到一个功能的实现.

在这些过程中,再配合filter过滤器实现对于权限的管理,拦截未登录用户的访问以及非管理员身份的非法访问.

七:遇到的问题

说到这个我可就起劲了(cao),由于是基本自学的javaweb,做这个小网站的时候真的是遇到过各种的问题,基本上来说csdn频率非常之高,(毕竟不会的东西太多了555),下面挑几个记忆犹新()的问题来简单分享一下.

怎么实现多个分开的form表单提交

(好吧,也不知道怎么描述这个问题)简单来说就是我在实现点击小组后面的加入后可以加入到对应小组的功能时遇到的一个问题.因为每个小组后面都会跟着一个加入按钮,这就意味着会有多个表单,而点击的加入需要提交对应的表单,好家伙由于没怎么学js(菜鸡),一度焦头烂额,最后经过百度查以后发现可以这么来搞

<form action="${pageContext.request.contextPath}/group" method="post" id="<%=li.getGroupName()%>">
            <input type="hidden" name="method" value="join2">
            <input type="hidden" name="groupName" value="<%=li.getGroupName()%>">
        </form>

        <tr>
            <td><%=li.getGroupName()%></td>
            <td><%=li.getGroupSize()%></td>
            <td><%=li.getGroupInfo()%></td>
            <td><a href="javascript:document:<%=li.getGroupName()%>.submit();">加入</a></td>
        </tr>

即把submit的id和表单id连起来就可以实现这种效果,再把这一行小组名称作为id就可以实现对应的小组加入了.------搞得这么麻烦果然是我太菜了哈哈哈哈哈

关于request的重定向问题

一开始老是忘了在重定向的地址前加上req.getContextPath(),导致一直跳转404,好家伙原来重定向要加一个这个来获取项目地址.

如何在一个servlet中实现多个doPost方法

毕竟doPost就只有一个,因为不想搞太多的servlet出来,所以就打算把用户需要用的(比如登录注册等)都放在UserServlet中,小组也类似这样.

后来经过百度发现可以这么干来实现

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String method = req.getParameter("method");
        String login = "login";
        String register = "register";
        String logout = "logout";
        String modifyPwd = "modifyPwd";
        if (login.equals(method)){
            login(req,resp);
        }else if (register.equals(method)) {
            register(req,resp);
        }else if (logout.equals(method)) {
            logout(req,resp);
        }else if (modifyPwd.equals(method)){
            modifyPwd(req,resp);
        }
    }

在前端提交表单的时候设置一些hidden类型的值,再根据传回来的method里对应方法来调用不同的方法.

使用session来实现登录界面错误提示时显示null的问题

关于这个问题之前写过一个博客,可以直接移步查看

解决在使用session实现登录界面错误提示显示为null问题_Laurie_c的博客妙妙屋-CSDN博客

八:改进空间

说实话,改进空间巨大巨大!毕竟第一次搞这东西,可以说是举步维艰哈哈哈.有些东西前面搞好了就懒得改了,太麻烦了.

比如关于前端页面可以把页面主题分开成两个网页head和foot,到时候再拼接起来使用应该会节省不少时间

还有就是在使用css的时候不需要每个界面都去创建一个css文件,应该把不同的css样式分开,比如导航栏的,网页主体的,网页脚部的,这样在调用的时候可以省下很多重复搬运css的功夫

总的来说就是缺少模块化的思想(不知道有没有这个词,没有的话就当我编的嘿嘿)

九:资源获取

github和gitee上都已经上传过了,可以直接去查阅

实验室官网小项目: 运用了jsp,servlet级的开发项目,实验室网站,包括前后台,权限管理,用户注册和登录,用户管理,多级评论,学习小组 (gitee.com)

Yudaotor/jsp-html-css-StudyGroupWeb: 运用了jsp,servlet级的开发项目,实验室网站,包括前后台,权限管理,用户注册和登录,用户管理,多级评论,学习小组 (github.com)

十:总结

鉴于是小白第一个javaweb项目,没有使用高端的东西,一切看起来都是那么的简朴…甚至于js都几乎没有怎么使用,但是在这几天完成这个大作业的过程中,收货可以说是巨大的.果然唯有实践出真知,在不断的试错,不断的查阅,不断的学习之下,也慢慢熟悉已掌握的知识以及了解还未了解的知识.今后会继续学习,努力做出更好的东西.

(不得不吐槽,遇到一些bug来查csdn那感觉真的是一言难尽,各种莫名其妙的回答,还有一些复制粘贴,只好大浪淘沙了o(╥﹏╥)o)

共勉!