社团管理系统（part1）

本课题的主要目标及背景

通过开发社团管理系统，管理员可直接利用系统进行社团以及社团活动管理，将社团活动发布给指定负责人，提高管理员的管理效率，实现对社团信息的规范管理，并通过直接对社团以及活动的快速查询更好地检索到信息，通过可视化的呈现实现社团以及活动的科学统计、从而进行合理的时间和场地安排。

设计环境

开发工具：Eclipse 2022.06

WEB服务器：Tomcat 9.0

数据库：Navicat for MySQL 10.1.7

part1实现社团成员和管理员的登录注册功能实现

一、导入相关包

1. 下载bootstrap-dist，便可以使用bootstrap布局网页样式

下载地址：Bootstrap中文网

2. Apache开源组织提供的用于操作数据库的工具包，方便我们操作数据库

DbUtils – Download Apache Commons DbUtils

3. jstl-1.2(JSP标准标签库包),

mysql-connector-java-5.1.48(java连接到MySQL数据库服务器的驱动程序包)

链接：https://pan.baidu.com/s/1o9gwfufjwG0i30Zkc37wtw
提取码：e51y

将相关文件复制到当前目录下，便导入成功

二、创建数据库中学生和管理员两张表

Navicat for MySQL 10.1.7的界面

三、今天要实现的界面大致浏览

四、代码部分（注册部分讲解，仅供参考，部分需自己修改）

部门成员和管理员登录注册要实现的文件，今天讲解部门成员注册代码，其他部分全部可以根据原理写出。

1.BaseService.java

用于数据库的连接，此后的类继承BaseService就可以实现数据库的连接了

package com.jdbc;import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;public class BaseService {public static Connection getConnection() throws SQLException {//驱动try {Class.forName("com.mysql.jdbc.Driver");} catch (ClassNotFoundException e) {// TODO Auto-generated catch blocke.printStackTrace();System.out.print("驱动不对");}// 连接数据库，数据库名称为自己的String url = "jdbc:mysql://localhost:3306/自己数据库的名字?characterEncoding=UTF8&serverTimezone=Asia/Shanghai&useSSL=false";String user = "自己数据库的user名";String password = "请输入自己的密码";Connection conn = DriverManager.getConnection(url, user, password);return conn;}
}

2.首页代码

 <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css" >
<title>Insert title here</title>
</head>
<body>
<script src="bootstrap-4.6.1-dist/jquery-3.6.0.min.js" ></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.bundle.min.js" ></script>
</body><div class="container">
<%@include file="nav.jsp" %><div class="row" style="margin-top:10px"><div class="col-2"></div><div class="col-7"><div class="card-deck"><div class="card"><div class="card-header">管理员</div><div class="card-body text-secondary"><a class="dropdown-item" href="http://localhost:1090/CommunityManager/AdminLogin.jsp">进入界面</a></div></div><div class="card"><div class="card-header">社团成员</div><div class="card-body text-success"><a class="dropdown-item" href="http://localhost:1090/CommunityManager/StuLogin.jsp">进入界面</a></div></div><div class="card"><div class="card-header">社团</div><div class="card-body text-primary"><a class="dropdown-item" href="http://localhost:1090/CommunityManager/ClubInfo.jsp">进入界面</a></div></div></div></div></div>
</div>
</html>

3.导航条代码

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<nav class="navbar navbar-expand-lg navbar-light bg-light"><a class="navbar-brand" href="http://localhost:1090/CommunityManager/index.jsp">首页</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNavDropdown"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="http://localhost:1090/CommunityManager/ClubListServlet">社团列表<span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="http://localhost:1090/CommunityManager/ActivityListServlet">社团活动</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">登录中心</a><div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"><a class="dropdown-item" href="http://localhost:1090/CommunityManager/AdminLogin.jsp">管理员登录</a><a class="dropdown-item" href="http://localhost:1090/CommunityManager/StuLogin.jsp">社团成员登录</a><a class="dropdown-item" href="http://localhost:1090/CommunityManager/ClubInfo.jsp">社团信息中心</a></div></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">注册中心</a><div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"><a class="dropdown-item" href="http://localhost:1090/CommunityManager/AdminReg.jsp">管理员注册</a><a class="dropdown-item" href="http://localhost:1090/CommunityManager/StuReg.jsp">部门成员注册</a></div></li></ul></div>
</nav>

4.Stu.java

部门成员类,在Service方法中后续封装时会用到。

package com.stu;import java.util.Date;public class stu {private String stu_name;private String password;private String sex;private Date birthday;private String club;private String major;private String telephone;public String getStu_name() {return stu_name;}public void setStu_name(String stu_name) {this.stu_name = stu_name;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public String getSex() {return sex;}public void setSex(String sex) {this.sex = sex;}public Date getBirthday() {return birthday;}public void setBirthday(Date birthday) {this.birthday = birthday;}public String getClub() {return club;}public void setClub(String club) {this.club = club;}public String getMajor() {return major;}public void setMajor(String major) {this.major = major;}public String getTelephone() {return telephone;}public void setTelephone(String telephone) {this.telephone = telephone;}
}

5.学生登陆界面（StuReg.jsp）

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css" >
<title>Insert title here</title>
</head>
<body>
<script src="bootstrap-4.6.1-dist/jquery-3.6.0.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.bundle.min.js"></script>
</body>
</body>
<div class="container">
<%@include file="nav.jsp" %><div class="row" style="margin-top:10px"><div class="col-3"></div><div class="col-7"><div class="card"><div class="card-body"><%Object stuRegerrMsg = session.getAttribute("stuRegerrMsg");if (stuRegerrMsg != null) {%><div style="color: red; text-align: left"><%=stuRegerrMsg%></div><%session.removeAttribute("stuRegerrMsg");}%><form action="/CommunityManager/StuRegServlet" method="post"><div class="form-group row"><label for="InputStuName">用户名</label><div class="col-sm-10"><input type="text" name="stuUsername" class="form-control" id="InputStuNameid"></div></div><div class="form-group row"><label for="InputStuPassword">密码</label><div class="col-sm-10"><input type="text" name="stuPassword" class="form-control" id="InputStuPasswordid1"></div></div><div class="form-group row"><div class="form-check form-check-inline">性别：<input class="form-check-input" type="checkbox" name="stuSex"  value="女"><label class="form-check-label" for="SexCheck_Male">女</label></div><div class="form-check form-check-inline"><input  class="form-check-input" type="checkbox" name="stuSex" value="男"><label class="form-check-label" for="SexCheck_Male">男</label></div></div><div class="form-group row"><label for="InputStuBirth">出生年月</label><div class="col-sm-10"><input type="date" name="stuBirthday" class="form-control" id="InputStuBirthdayid"></div></div><div class="form-group row"><label for="InputClub">所在社团</label><div class="col-sm-10"><input type="text" name="club" class="form-control" id="InputClubid"></div></div><div class="form-group row"><label for="InputClass">学院班级</label><div class="col-sm-10"><input type="text" name="class" class="form-control" id="InputClassid"></div></div><div class="form-group row"><label for="InputStuTele">联系电话</label><div class="col-sm-10"><input type="text" name="stuTelephone" class="form-control" id="InputStuTelephoneid"></div></div><div class="form-group row"><label for="Inputveri">校验码</label><div class="col-sm-3"><img id="vericode" src="Vericode" onclick="this.src=this.src+'?'+Math.random()" width="100" height="40"></div><div class="col-sm-5"><input type="text" name="veri" class="form-control" id="InputPasswordid2"></div><div class="col-sm-5"><button id="btn" onclick="document.getElementById('vericode').click()" >刷新验证码</button></div></div><div class="form-group row"><div class="col-sm-10"><button type="submit" class="btn btn-primary">注册</button></div></div></form></div></div></div></div>
</div>
</html>

6.StuReg.jsp跳转到Servlet(StuRegServlet.java)

常规操作就是从jsp页面跳转到servlet里进行页面的判断然后再跳转到jsp界面；

request.getParameter()方法传递的数据，会从web客户端传到web服务器端(在这里即从jsp跳转到servlet中)；

request.getRequestDispatcher().forward(request,response)用于转发，即服务器跳转，在执行当前文件的过程中转向执行目标文件，两个文件(当前文件和目标文件)属于同一次请求，前后页共用一个request，可以携带数据信息有记忆地跳转。

package com.stu;import java.io.IOException;
import java.sql.SQLException;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;@WebServlet("/StuRegServlet")
public class StuRegServlet extends HttpServlet {private static final long serialVersionUID = 1L;public StuRegServlet() {super();}protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String stuUsername=request.getParameter("stuUsername");String stuPassword=request.getParameter("stuPassword");String stuClass=request.getParameter("class");String stuClub=request.getParameter("club");String stuSex=request.getParameter("stuSex");String stuTelephone=request.getParameter("stuTelephone");String stuBirthday=request.getParameter("stuBirthday");SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");//日期格式String vcode1=request.getParameter("veri");//获取输入的验证码String s_v = (String) request.getSession().getAttribute("v");//获取真实正确的验证码//判断验证码是否正确if(!vcode1.equals(s_v)) {request.getSession().setAttribute("stuRegerrMsg","请输入正确的验证码");request.getRequestDispatcher("StuReg.jsp").forward(request,response);}else {try {Date stu_Birthday=sdf.parse(stuBirthday);StuService.addStuUser(stuUsername,stuPassword,stuSex,stu_Birthday,stuClub,stuClass,stuTelephone);} catch (SQLException e1) {// TODO Auto-generated catch blocke1.printStackTrace();System.out.print("no");} catch (ParseException e) {// TODO Auto-generated catch blocke.printStackTrace();} request.setAttribute("stuUsername", stuUsername);request.setAttribute("stuPassword", stuPassword);request.setAttribute("stuSex",stuSex);request.setAttribute("stuClub",stuClub);request.setAttribute("stuClass",stuClass);request.setAttribute("stuBirthday",stuBirthday);request.setAttribute("stuTelephone",stuTelephone);request.getRequestDispatcher("StuRegsucc.jsp").forward(request,response);}}}

7.StuService.java代码

在servlet中我们调用在service文件中编写的方法，进行方法调用从而实现方法。

package com.stu;import java.sql.Connection;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Date;
import java.util.Map;import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.MapHandler;
import com.jdbc.BaseService;public class StuService extends BaseService {//注册添加public static int addStuUser(String stu_name, String password, String sex, Date birthday, String club, String major,String telephone) throws SQLException {Connection conn = StuService.getConnection();// 使用JdbcUtils连接数据库，使用QueryRunner简化数据库操作QueryRunner qr = new QueryRunner();// SQL语句String sql = "insert into student(stu_name,password,sex,birthday,club,major,telephone) values(?,?,?,?,?,?,?)";// 更新操作return qr.update(conn, sql, stu_name, password, sex, birthday, club, major, telephone);}//登录public static int stuLogin(String stuUsername, String stuPassword) throws SQLException {Connection conn = StuService.getConnection();QueryRunner qr = new QueryRunner();String sql = "select * from student where stu_name=? and password=?";Map<String, Object> map = qr.query(conn, sql, new MapHandler(), stuUsername, stuPassword);if (map == null)return 404;elsereturn 1;}//更新修改信息public static void updateStu(String oldname, String newname, String newpassword, String club, String major,String newtelephone) {// TODO Auto-generated method stubtry {Connection conn = StuService.getConnection();Statement stmt = conn.createStatement();String sql1 = "UPDATE student SET stu_name = '" + newname + "'" + "," + "password=" + "'" + newpassword+ "'" + "," + "club=" + "'" + club + "'" + "," + "major=" + "'" + major + "'" + "," + "telephone="+ "'" + newtelephone + "'" + " WHERE stu_name = '" + oldname + "'";stmt.executeUpdate(sql1);} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}}
}

8.Vericode.java(验证码图片显示)

package com.stu;import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;@WebServlet("/Vericode")
public class Vericode extends HttpServlet {private static final long serialVersionUID = 1L;public Vericode() {super();}protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {OutputStream os=response.getOutputStream();BufferedImage img=new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);//获取绘图对象Graphics g=img.getGraphics();//填充绘图颜色g.setColor(Color.white);//填充图片区域g.fillRect(0, 0, 80, 30);//设置画笔颜色g.setColor(Color.red);//设置字体g.setFont(new Font("华文隶书",Font.ITALIC,28));//定义数组String[] code={"2","3","4","5","6","7","8","9","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"};int length=30;String result="",txt="";//随机数字for(int i=0;i<4;i++){int j=(int) (Math.random()*length);txt=code[j];result+=txt;}//this.getServletContext().setAttribute("value1",result);//将结果传给session，用于登录比较request.getSession().setAttribute("v",result);//绘制验证码g.drawString(result, 10, 25);//显示图片ImageIO.write(img, "jpg", os);}}

以上就是注册部分代码，其实代码非常少，大部分代码都是用来装饰页面的，搞懂十几行后，其他的复制粘贴大致样式就好了。

注册总结大致流程就是：

jsp（登录界面，输入信息）-->携带信息，跳转表单到servlet用来处理请求和响应（可将方法集中至service，然后直接调用service中方法，这样比较干净简洁）-->跳转jsp(显示注册成功或者失败的界面)

登录也同上流程

以上就是登录注册的大致流程~