准备工作
所使用到的技术：
前端–html css javascript
后端–tomcat servlet jsp el jdbc mybatis
项目结构：
实现原理：
1.登录页面的逻辑结构
2.数据库设计
登录页面
login.jsp
<%-- Created by IntelliJ IDEA. User: thorns Date: 2021/12/14 Time: 10:08 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %><html><head> <title>登录页面</title> <style> #frame_{ width:500px; height:400px; margin-left:600px; margin-top:210px; background-color: azure; border:black solid 2px; } #inner_{ margin-left: 180px; margin-top:140px; } </style> <%--> 在这里写js代码，对那些数据进行验证： 用户id是否为空 先去拿标签里面的值 判断是否为空 为空的时候 就返回 并且来一个提示操作 用户id不能为空 密码是否为空 先去拿标签里面的值 判断是否为空 为空的时候 就返回 并且来一个提示操作 用户密码不能为空 <--%> <script> </script></head><body><div id="frame_"> <div id="inner_"> 用户id:<input type="text" id="u_id"><br><br> 密码：<input type="password" id="u_pwd"><br><br> <button id="btn01">重置</button><button style="margin-left:20px" id="btn02">登录</button><br> <span id="error" style="color: #ff0000">${error}</span> <script> <%--> 在这里写js代码，对那些数据进行验证： 用户id是否为空 先去拿标签里面的值 判断是否为空 为空的时候 就返回 并且来一个提示操作 用户id不能为空 密码是否为空 先去拿标签里面的值 判断是否为空 为空的时候 就返回 并且来一个提示操作 用户密码不能为空 <--%> let btn001 = document.getElementById("btn02"); btn001.onclick = function() { //1.获取id查看是否为空 let id_str = document.getElementById("u_id").value; if(id_str==null||id_str==""){ document.getElementById("error").innerHTML="账户不能为空！" return; } let pwd_str=document.getElementById("u_pwd").value; if(pwd_str==null||pwd_str==""){ document.getElementById("error").innerHTML="密码不能为空！" return; } //我们开始访问服务器 window.location.href = "LoginServlet?u_id="+id_str+"&u_pwd="+pwd_str; } </script> </div></div></body></html>LoginServlet
import java.io.IOException;import java.util.ArrayList;/*这个注解就是我们起的名字，为了让前端的页面来访问 */@WebServlet("/LoginServlet")public class LoginServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String u_id = req.getParameter("u_id"); String u_pwd = req.getParameter("u_pwd"); User u = new User(); u.setU_id(Integer.valueOf(u_id)); u.setU_pwd(u_pwd); //实现登录服务层的业务逻辑层 loginService l = new loginServiceImpl(); User user = l.loginService(u); /* 如果user为空，说明账户和密码不一致，就跳转到到登录页面 如果不为空，账户和密码一直，就跳转到主界面 */ if (user != null) { /*获取Arr对象*/ FileService fs = new FileServiceImpl(); ArrayList<User> arr = fs.getAllStudent(); req.setAttribute("user", user); req.setAttribute("arr",arr); req.getRequestDispatcher("mainPage.jsp").forward(req, resp); } else { req.setAttribute("error", "账户和密码不一致"); req.getRequestDispatcher("login.jsp").forward(req, resp); } }}bean层：User.java
package com.StudentManager.bean;public class User { private int u_id; private String u_name; private String u_pwd; private String u_phone; private int role; private int isdelete; public User(){} public User(int u_id, String u_name, String u_pwd, String u_phone, int role, int isdelete) { this.u_name = u_name; this.u_id = u_id; this.u_pwd = u_pwd; this.u_phone = u_phone; this.role = role; this.isdelete = isdelete; } public String getU_name() { return u_name; } public void setU_name(String u_name) { this.u_name = u_name; } public int getU_id() { return u_id; } public void setU_id(int u_id) { this.u_id = u_id; } public String getU_pwd() { return u_pwd; } public void setU_pwd(String u_pwd) { this.u_pwd = u_pwd; } public String getU_phone() { return u_phone; } public void setU_phone(String u_phone) { this.u_phone = u_phone; } public int getRole() { return role; } public void setRole(int role) { this.role = role; } public int getIsdelete() { return isdelete; } public void setIsdelete(int isdelete) { this.isdelete = isdelete; } @Override public String toString() { return "User{" + "u_id=" + u_id + ", u_name='" + u_name + '\'' + ", u_pwd='" + u_pwd + '\'' + ", u_phone='" + u_phone + '\'' + ", role=" + role + ", isdelete=" + isdelete + '}'; }}service层：loginService.java
package com.StudentManager.service;import com.StudentManager.bean.User;public interface loginService { User loginService(User u);}service层：loginServiceImpl.java(接口)
package com.StudentManager.service;import com.StudentManager.bean.User;import com.StudentManager.dao.LoginDao;import com.StudentManager.dao.LoginDaoImpl;public class loginServiceImpl implements loginService { @Override public User loginService(User u) { LoginDao ld = new LoginDaoImpl(); return ld.logindao(u); }}dao层：loginDao.java
package com.StudentManager.dao;import com.StudentManager.bean.User;public interface LoginDao { User logindao(User u);}dao层：loginDaoImpl.java(接口)
package com.StudentManager.dao;import com.StudentManager.bean.User;import com.StudentManager.util.ConnectionFactory;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;public class LoginDaoImpl implements LoginDao{ @Override public User logindao(User u) { int id = u.getU_id(); String pwd = u.getU_pwd(); //就在这里写数据库的东西 //获取连接对象->准备我们的sql语句->把sql语句放在prepareStatement = ConnectionFactory.获取结果 //执行 Connection connection = ConnectionFactory.getConnection(); PreparedStatement pre = null; ResultSet res = null; //准备sql语句 String sql = "SELECT * FROM `user` WHERE u_id="+id+" AND u_pwd='"+pwd+"'"; try{ pre = connection.prepareStatement(sql); res = pre.executeQuery(); /* 如果信息正确->返回一条数据 如果信息错误—>返回null */ while(res.next()){ User user = new User(); user.setU_id(res.getInt("u_id")); user.setU_name(res.getString("u_name")); user.setU_pwd(res.getString("u_pwd")); user.setU_phone(res.getString("u_phone")); user.setRole(res.getInt("u_isdelete")); return user; } }catch(SQLException e){ e.printStackTrace(); } return null; }}主界面
mainPage.jsp
<%-- Created by IntelliJ IDEA. @author: --%><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><html><head> <title>主界面</title> <style> #head_{ height: 100px; width: 100%; background-color: slategray; } #personFile{ width: 120px; height: 50px; padding-top: 25px; margin-left: 90%; } #search{ height: 70px; width: 100%; background-color: cornflowerblue; } #inner_s{ /*width: 200px; height: 40px; padding-right: 70%; padding-top: 50%;*/ width: 30%; padding-top:25px; padding-left: 45%; } #table{ margin-left: 30%; margin-top: 30px; } td{ text-align: center; height: 20px; width: 150px; border: black 1px solid; padding:1px; } </style> <script> function search(){ //要搜索的信息就拿回来了 let v = document.getElementById("fileId").value; /* v id 名字*/ window.location.href = "MainServlet？v="+v+"&id=${user.getU_id()}"; } function goShow(v){ window.location.href = "ShowServlet?v="+v+"&id=${user.getU_id()}"; } function del(v,name){ let isdel = confirm("是否删除"+v+"同学"); if(isdel){ window.location.href = "DeleteServlet?v="+v+"&id=${user.getU_id()}"; }else{ return; } } function upDate(v){ /* v:学生的id 我们先跳到服务器里 从服务器里再跳到修改界面 1.学生的id 2.老师的id*/ window.location.href = "upTo?stuId="+v+"&admId=${user.getU_id()}"; } </script></head><body><div id="head_"> <div id="personFile"> 名字:<span style="color: red">${user.getU_name()}</span><br> 编号:<span style="color: red">${user.getU_id()}</span> </div></div><div id="search"> <div id="inner_s"> <input type="text" style="font-size: 20px; height: 26px;width: 190px" id="fileId"> <button style="font-size: 18px; height: 28px;" onclick="search()">查询</button> </div></div><div> <table id="table" style="height: 30px;width: 700px;border: black 1px solid;border-collapse:collapse;"> <tr> <td>学生id</td> <td>学生名字</td> <td>学生电话</td> <td>查看成绩</td> <td>操作</td> </tr> <c:forEach items="${arr}" var="item"> <tr> <td>${item.getU_id()}</td> <td>${item.getU_name()}</td> <td>${item.getU_phone()}</td> <td><button style="color: chocolate" onclick="goShow(${item.getU_id()})">查看成绩</button></td> <td><button style="color: chocolate" onclick="upDate(${item.getU_id()})">修改</button> <button style="color: chocolate" onclick="del(${item.getU_id()})">删除</button> </td> </tr> </c:forEach> </table></div></body></html>数据库的连接
数据库连接池–c3p0
导入jar包
配置xml文件
c3p0-config.xml
<?xml version="1.0" encoding="UTF-8"?><c3p0-config><default-config><!--mysql数据库连接的各项参数--><property name="driverClass">com.mysql.cj.jdbc.Driver</property><property name="jdbcUrl">jdbc:mysql://localhost:3306/studentManager?useSSL=false&serverTimezone=Asia/Shanghai&characterEncoding=utf-8&autoReconnect=true</property><property name="user">root</property><property name="password">root</property><!--配置数据库连接池的初始连接数、最小链接数、获取连接数、最大连接数、最大空闲时间--><property name="acquireIncrement">10</property><property name="initialPoolSize">10</property><property name="maxPoolSize">100</property><property name="maxIdleTime">60</property><property name="minPoolSize">5</property></default-config></c3p0-config>==创建连接：ConnectionFactory工具类抽取 ==
( 通过上面的操作，我们已经能够对数据库的数据进行增删改查了，但是我们发现，无论增删改查都需要连接数据库，关闭资源，所以我们把连接数据库，释放资源的操作抽取到一个工具类 )
package com.StudentManager.util;import com.mchange.v2.c3p0.ComboPooledDataSource;import javax.sql.DataSource;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;public class ConnectionFactory {//获取数据源 自动读取c3p0-config.xml文件private static DataSource dataSource = new ComboPooledDataSource();//获取连接public static Connection getConnection() {try {return dataSource.getConnection();} catch (SQLException e) {e.printStackTrace();}return null;}//资源关闭工具方法public static void close(Connection connection,PreparedStatement preparedStatement,ResultSet resultSet) {try {//释放资源，根据先开后放if(resultSet != null) resultSet.close();if(preparedStatement != null) preparedStatement.close();if(connection != null) connection.close();} catch (SQLException e) {e.printStackTrace();}}}执行SQL语句：loginDaoImpl.java(接口)
package com.StudentManager.dao;import com.StudentManager.bean.User;import com.StudentManager.util.ConnectionFactory;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;public class LoginDaoImpl implements LoginDao{ @Override public User logindao(User u) { int id = u.getU_id(); String pwd = u.getU_pwd(); //就在这里写数据库的东西 //获取连接对象->准备我们的sql语句->把sql语句放在prepareStatement = ConnectionFactory.获取结果 //执行 /*通过管理器的静态方法getConnection建立数据库连接*/ Connection connection = ConnectionFactory.getConnection(); /*执行预编译SQL语句对象*/ PreparedStatement pre = null; /*返回查询结果集接口*/ ResultSet res = null; //准备sql语句 String sql = "SELECT * FROM `user` WHERE u_id="+id+" AND u_pwd='"+pwd+"'"; try{ pre = connection.prepareStatement(sql); res = pre.executeQuery(); /* 如果信息正确->返回一条数据 如果信息错误—>返回null */ while(res.next()){ /*java.sql.ResultSet接口类似于一个数据表，通过该接口的实例可以获得检索结果集以及对应的数据库表相关信息。res.next()方法是遍历数据表*/ User user = new User(); user.setU_id(res.getInt("u_id")); user.setU_name(res.getString("u_name")); user.setU_pwd(res.getString("u_pwd")); user.setU_phone(res.getString("u_phone")); user.setRole(res.getInt("u_isdelete")); return user; } }catch(SQLException e){ e.printStackTrace(); } return null; }}跳转到登录界面
LoginServlet
import java.io.IOException;import java.util.ArrayList;/*这个注解就是我们起的名字，为了让前端的页面来访问 */@WebServlet("/LoginServlet")public class LoginServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String u_id = req.getParameter("u_id"); String u_pwd = req.getParameter("u_pwd"); User u = new User(); u.setU_id(Integer.valueOf(u_id)); u.setU_pwd(u_pwd); //实现登录服务层的业务逻辑层 loginService l = new loginServiceImpl(); User user = l.loginService(u); /* 如果user为空，说明账户和密码不一致，就跳转到到登录页面 如果不为空，账户和密码一直，就跳转到主界面 */ /*if (user != null) { FileService fs = new FileServiceImpl(); ArrayList<User> arr = fs.getAllStudent(); req.setAttribute("user", user); req.setAttribute("arr",arr);*/ req.getRequestDispatcher("mainPage.jsp").forward(req, resp); } else { req.setAttribute("error", "账户和密码不一致"); req.getRequestDispatcher("login.jsp").forward(req, resp); } }}动态获取
LoginServlet
if (user != null) { /*获取Arr对象*/ FileService fs = new FileServiceImpl(); ArrayList<User> arr = fs.getAllStudent(); req.setAttribute("user", user); req.setAttribute("arr",arr); req.getRequestDispatcher("mainPage.jsp").forward(req, resp); } else { req.setAttribute("error", "账户和密码不一致"); req.getRequestDispatcher("login.jsp").forward(req, resp); } }}FIleService.java
package com.StudentManager.service;import com.StudentManager.bean.User;import java.util.ArrayList;public interface FileService { ArrayList<User> getAllStudent();}FIleServiceImpl.java
package com.StudentManager.service;import com.StudentManager.bean.User;import com.StudentManager.dao.FileDao;import com.StudentManager.dao.FileDaoImpl;import java.util.ArrayList;public class FileServiceImpl implements FileService{ FileDao fs = new FileDaoImpl(); @Override public ArrayList<User> getAllStudent() { /*访问持久层*/ return fs.getAllStudent(); } }}FIleDao.java
package com.StudentManager.dao;import com.StudentManager.bean.User;import java.util.ArrayList;public interface FileDao { ArrayList<User> getAllStudent();}FIleDaoImpl.java
package com.StudentManager.dao;import com.StudentManager.bean.Major;import com.StudentManager.bean.User;import com.StudentManager.util.ConnectionFactory;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import java.util.ArrayList;public class FileDaoImpl implements FileDao{ @Override public ArrayList<User> getAllStudent() { ArrayList<User> arr = new ArrayList<>(); Connection connection = ConnectionFactory.getConnection(); PreparedStatement pre = null; ResultSet res = null; //准备sql语句 String sql = "SELECT * FROM `user` WHERE u_role=1 AND u_isdelete=0"; try{ pre = connection.prepareStatement(sql); res = pre.executeQuery(); /* 如果信息正确->返回一条数据 如果信息错误—>返回null */ while(res.next()){ User user = new User(); user.setU_id(res.getInt("u_id")); user.setU_name(res.getString("u_name")); user.setU_pwd(res.getString("u_pwd")); user.setU_phone(res.getString("u_phone")); user.setRole(res.getInt("u_isdelete")); arr.add(user); } }catch(SQLException e){ e.printStackTrace(); } return arr; }}mainPage.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>... <c:forEach items="${arr}" var="item"> <tr> <td>${item.getU_id()}</td> <td>${item.getU_name()}</td> <td>${item.getU_phone()}</td> <td><button style="color: chocolate" onclick="goShow(${item.getU_id()})">查看成绩</button></td> <td><button style="color: chocolate" onclick="upDate(${item.getU_id()})">修改</button> <button style="color: chocolate" onclick="del(${item.getU_id()})">删除</button> </td> </tr> </c:forEach>搜索功能
mainPage.jsp
... <script> function search(){ //要搜索的信息就拿回来了 let v = document.getElementById("fileId").value; /* v id 名字*/ window.location.href = "MainServlet？v="+v+"&id=${user.getU_id()}"; } </script>...<div id="search"> <div id="inner_s"> <input type="text" style="font-size: 20px; height: 26px;width: 190px" id="fileId"> <button style="font-size: 18px; height: 28px;" onclick="search()">查询</button> </div></div>MainServlet.java
...@WebServlet("/MainServlet")public class MainServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("UTF-8"); String v = req.getParameter("v"); FileService fs = new FileServiceImpl(); User u = fs.getFileByNameOrId(v); ArrayList<User> arr = new ArrayList<>(); arr.add(u); req.setAttribute("user",admineU); if(u!=null){ req.setAttribute("arr",arr); req.getRequestDispatcher("mainPage.jsp").forward(req,resp); } }}FileService.java
User getFileByNameOrId(String v);FileServiceImpl.java
public User getFileByNameOrId(String v) { return fs.getFileByNameOrId(v); }FileDao.java
User getFileByNameOrId(String v);FileDaoImpl.java
public User getFileByNameOrId(String v){ Connection connection = ConnectionFactory.getConnection(); PreparedStatement pre = null; ResultSet res = null; //准备sql语句 String sql = "SELECT * FROM user WHERE u_name='"+v+"'"; try{ pre = connection.prepareStatement(sql); res = pre.executeQuery(); /* 如果信息正确->返回一条数据 如果信息错误—>返回null */ while(res.next()){ User user = new User(); user.setU_id(res.getInt("u_id")); user.setU_name(res.getString("u_name")); user.setU_pwd(res.getString("u_pwd")); user.setU_phone(res.getString("u_phone")); user.setRole(res.getInt("u_isdelete")); return user; } }catch(SQLException e){ e.printStackTrace(); } return null; }保存管理员的账号"：&id=${user.getU_id()}"
MainServlet.java
String id = req.getParameter("id"); FileService fs2 = new FileServiceImpl(); User admineU = fs2.getAdmine(id); if(u!=null){ ... }else{ FileService f = new FileServiceImpl(); ArrayList<User> arr2 = f.getAllStudent(); req.setAttribute("arr",arr2); req.getRequestDispatcher("mainPage.jsp").forward(req,resp); }FileService.java
User getAdmine(String id);FileServiceImpl.java
@Override public User getAdmine(String id) { return fs.getAdmine(id); }FileDao.java
User getAdmine(String id);FileDaoImpl.java
@Override public User getAdmine(String id) { Connection connection = ConnectionFactory.getConnection(); PreparedStatement pre = null; ResultSet res = null; //准备sql语句 String sql = "SELECT * FROM user WHERE u_id="+id; try{ pre = connection.prepareStatement(sql); res = pre.executeQuery(); /* 如果信息正确->返回一条数据 如果信息错误—>返回null */ while(res.next()){ User user = new User(); user.setU_id(res.getInt("u_id")); user.setU_name(res.getString("u_name")); return user; } }catch(SQLException e){ e.printStackTrace(); } return null; }