一、思路:
1.先建立maven项目,并且添加依赖文件,添加web项目后,完成文件的目录准备,再添加TomCat,确保可以成功运行就可以开始测试
2.书写一个jsp文件作为登录页面,代码详解如下
3.在src中建立Java项目并且对其进行分层目录,无论是三层还是五层都是可以的,看个人意愿,建立一个测试用来 测试这个项目和服务器是否可以正常运行,在这里采用了三种不同的用户向服务器发出请求的方式,
(Servlet,GenericServlet,HttpServlet三者之间的关系,Servlet中包含GenericServlet,GenericServlet包含HttpServlet)
4.添加核心配置文件,在此中采用的mybatis与数据库相连
5.登录页面的servIet中使用httpServIet请求的方法,并且在数据库中获取数据,代码如下
6.分层书写UI层的动态展示页面,并且渲染数据
7.在展示页面层添加删除操作并且转到servIet层写端处理数据, 处理后再跳转到前端展示页面,
8.在展示页面添加添加数据操作并且跳转到 UI层添加新的页面作为添加信息的页面,然后在此页面进行页面的动态生成表单,再跳转到servIet层端处理数据并且跳转到前端UI层页面展示,(在此中处理数据采用的是mybatis中的注解方法)
(补充内容:)
一个Java Servlet只是一个普通的Java类实现的接口javax.servlet.Servlet。Servlet处理的是get请求,如果读者不理解HTTP,可以把它看成是当用户在浏览器地址栏输入URL、单击Web页面中的链接、提交没有指定method的表单时浏览器所发出的请求 Servlet也可以很方便地处理post请求。post请求是提交那些指定了method=“post”的表单时所发出的请求。若要创建一个Servlet,则应使创建的类继承HttpServlet类,并覆盖doGet()、doPost()方法之一或全部。doGet()和doPost()方法都有两个参数,分别为HttpServletRequest类型HttpServletResponse类型。
doGet()方法和doPost()方法抛出两个异常,因此必须在声明中包含它们。另外还必须导入java.io包(要用到PrintWriter等类)、javax.servlet包(要用到HttpServlet等类)以及javax.servlet.http包要用到(HttpServlet Request类和HttpServletResponse类)。doGet()和doPost()这两个方法是由service()方法调用的,有时可能需要直接覆盖service()方法,比如Servlet要处理Get和Post两种请求时。
Servlet:
接口定义了以下 5 个方法,当使用它的时候要实现所有接口方法。
public interface Servlet {
//1-Servlet初始化方法
public void init(ServletConfig config) throws ServletException;
//2-获取Servlet配置
public ServletConfig getServletConfig();
//3-处理请求和响应
public void service(ServletRequest req, ServletResponse res)
throws ServletException, IOException;
//4-获取Servlet信息
public String getServletInfo();
//5-Servlet销毁方法
public void destroy();
}
下面是测试代码:
import javax.servlet.*;
import javax.servlet.annotation.WebServlet;
import java.io.IOException;
@WebServlet("/loginok2")
public class UserServIet implements Servlet {
@Override
public void init(ServletConfig servletConfig) throws ServletException {
}
@Override
public ServletConfig getServletConfig() {
return null;
}
@Override
public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
System.out.println("收到请求");
String user = servletRequest.getParameter("user");
String pwd = servletRequest.getParameter("pwd");
System.out.println("user = " + user);
System.out.println("pwd = " + pwd);
}
@Override
public String getServletInfo() {
return null;
}
@Override
public void destroy() {
}
}
jsp文件代码:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="loginok" method="post" >//和上述测试文件的@WebServlet中的内容保持一致
<input type="text" name="user" placeholder="用户名" class="usernm" onblur="clickUsername()" id="username">
<span id="usernameInput"></span><br>
<input type="password" name="pwd" placeholder="密码" class="passwd" onblur="clickPassword()" id="password">
<span id="passwordInput"></span><br>
<button type="submit" class="btn">登录</button>
</form>
</body>
</html>
GenericServlet:
继承这个接口的扩展类GenericServlet,当HTTP请求到达Web服务器时,Web服务器会调用您的Servlet的service()方法,然后service()方法读取请求,并生成一个发送回客户端(例如浏览器)的响应。
测试代码:
import javax.servlet.GenericServlet;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebServlet;
import java.io.IOException;
@WebServlet("/loginok1")
public class UserGenericServlet extends GenericServlet {
@Override
public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
System.out.println("收到请求");
String user = servletRequest.getParameter("user");
String pwd = servletRequest.getParameter("pwd");
System.out.println("user = " + user);
System.out.println("pwd = " + pwd);
}
}
jsp文件代码与上面相同, 注意和其测试文件的@WebServlet中的内容保持一致
HttpServlet:
继承这个接口的扩展类HttpServlet,当HTTP请求到达Web服务器时,Web服务器会调用您的Servlet的doGet()方法 和doPost方法,然后此方法读取请求,并生成一个发送回客户端(例如浏览器)的响应
测试代码:
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
@WebServlet("/loginok")
public class UserRequst extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("收到请求");
String user = servletRequest.getParameter("user");
String pwd = servletRequest.getParameter("pwd");
System.out.println("user = " + user);
System.out.println("pwd = " + pwd);
}
jsp文件代码与上面相同, 注意和其测试文件的@WebServlet中的内容保持一致
二、pom文件的添加依赖:
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
<!-- 1.1 MySQL驱动依赖包-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.30</version>
</dependency>
<!-- 1.2 commons-beanutils依赖包-->
<dependency>
<groupId>commons-beanutils</groupId>
<artifactId>commons-beanutils</artifactId>
<version>1.9.3</version>
</dependency>
<!-- 1.3 阿里巴巴druid数据库连接池依赖包-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.23</version>
</dependency>
<!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.6</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.5</version>
</dependency>
</dependencies>
三、核心配置文件:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE configuration PUBLIC
"-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<environments default="develop">
<environment id="develop">
<transactionManager type="JDBC"></transactionManager>
<dataSource type="POOLED">
<property name="driver" value="com.mysql.cj.jdbc.Driver"/>
<property name="url" value="jdbc:mysql://localhost:3306/xsgl?serverTimezone=UTC"/>
<property name="username" value="root"/>
<property name="password" value="123456"/>
</dataSource>
</environment>
</environments>
<mappers>
<mapper class="Dao.StudentDao"/>
</mappers>
</configuration>
四、登录页面的Java后端ServIet层处理代码:
import Dao.StudentDao;
import Model.Student;
import Model.User;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
@WebServlet("/loginok")
public class UserRequst extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String user = req.getParameter("user");
String pwd = req.getParameter("pwd");
InputStream in = Resources.getResourceAsStream("config/mybatis_config.xml");
SqlSessionFactory build = new SqlSessionFactoryBuilder().build(in);
SqlSession sqlSession = build.openSession();
StudentDao studentDao = sqlSession.getMapper(StudentDao.class);
User login = studentDao.login(user, pwd);
if (login==null){
req.getRequestDispatcher("usererror").forward(req,resp);
}else {
InputStream on = Resources.getResourceAsStream("config/mybatis_config.xml");
SqlSessionFactory build1 = new SqlSessionFactoryBuilder().build(on);
SqlSession sqlSession1 = build1.openSession();
StudentDao studentDao1 = sqlSession.getMapper(StudentDao.class);
List<Student> all = studentDao.findAll();
req.setAttribute("all",all);
req.getRequestDispatcher("/showlist").forward(req,resp);
}
}
}
登录页面jsp文件的代码:
<%--
Created by IntelliJ IDEA.
User: 86173
Date: 2024/7/26
Time: 17:13
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
background: linear-gradient(135deg, #4a90e2, #9013fe);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.main {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.login {
width: 360px;
padding: 40px;
background-color: #ffffff;
border-radius: 25px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
text-align: center;
}
h1 {
margin-bottom: 30px;
color: #4a90e2;
font-size: 24px;
}
.loginForm {
display: flex;
flex-direction: column;
}
.usernm,
.passwd {
height: 45px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
padding: 0 15px;
font-size: 16px;
}
.btn {
height: 45px;
background-color: #4a90e2;
border: none;
border-radius: 10px;
cursor: pointer;
color: #fff;
font-size: 16px;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #357abD;
}
.btn:last-of-type {
background-color: #9013fe;
margin-top: 10px;
}
.btn:last-of-type:hover {
background-color: #7011cd;
}
span {
margin: 0px;
color: gray;
text-align: left;
}
a {
text-decoration: none;
color: inherit;
}
</style>
<title>Title</title>
</head>
<body>
<div class="main">
<div class="login">
<h1>登录</h1>
<form action="loginok" method="post" class="loginForm" onsubmit="return clickLogin()">
<input type="text" name="user" placeholder="用户名" class="usernm" onblur="clickUsername()" id="username">
<span id="usernameInput"></span><br>
<input type="password" name="pwd" placeholder="密码" class="passwd" onblur="clickPassword()" id="password">
<span id="passwordInput"></span><br>
<button type="submit" class="btn">登录</button>
<button type="button" class="btn"><a href="/register.html">注册</a></button>
</form>
</div>
</div>
</body>
</html>
五、UI层展示页面代码:
import Model.Student;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
@WebServlet("/showlist")
public class showlist extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
List<Student> all = (List<Student>)req.getAttribute("all");
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
PrintWriter stu = resp.getWriter();
stu.write("<!Doctype html>");
stu.write("<html lang='en'>");
stu.write("<head>");
stu.write("<meta charset='utf-8'>");
stu.write("<meta name='viewport',content='width=device-width,initial-scale=1.0'>");
stu.write("<title>学生信息管理</title>");
stu.write("<style>");
stu.write("body { font-family: '微软雅黑'; background-color: #e0f7fa; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; }");
stu.write(".container { background-color: #ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 90%; max-width: 800px; text-align: center; }");
stu.write("h1 { color: #00796b; margin-bottom: 20px; }");
stu.write(".btn { display: block; width: 100%; padding: 12px; margin: 10px 0; font-size: 18px; color: #ffffff; background-color: #00796b; border: none; border-radius: 6px; cursor: pointer; }");
stu.write(".btn:hover { background-color: #004d40; }");
stu.write("table { width: 100%; border-collapse: collapse; margin-top: 20px; }");
stu.write("th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }");
stu.write("th { background-color: #e0f7fa; color: black; }");
stu.write("tr:nth-child(even) { background-color: lightyellow; }");
stu.write("tr:hover { background-color: #e0f7fa; }");
stu.write("</style>");
stu.write("</head>");
stu.write("<body>");
stu.write("<div class='container'>");
stu.write("<h1>学生信息管理</h1>");
stu.write("<div><a href='insert'>添加信息</a></div>");
// 显示学生信息表格
stu.write("<table>");
stu.write("<tr><th>id</th><th>姓名</th><th>性别</th><th>年龄</th><th>专业</th><th>时间</th><th>操作一</th></tr>");
for (int i = 0; i < all.size(); i++) {
stu.write("<tr>");
stu.write("<td>"+all.get(i).getId()+"</td>");
stu.write("<td>");
stu.write(all.get(i).getName());
stu.write("</td>");
stu.write("<td>");
stu.write(all.get(i).getSex());
stu.write("</td>");
stu.write("<td>"+all.get(i).getAge()+"</td>");
stu.write("<td>");
stu.write(all.get(i).getMajor());
stu.write("</td>");
stu.write("<td>");
stu.write(all.get(i).getTime());
stu.write("</td>");
stu.write("<td>");
stu.write("<a onclick=\"if(confirm('确定删除吗?')) return true; return false;\" href=delone?id="+all.get(i).getId()+">删除</a>");
stu.write("</td>");
stu.write("</tr>");
}
stu.write("</table>");
stu.write("</div>");
stu.write("</body>");
stu.write("</html>");
}
}
六、删除的后端ServIet层代码:
import Dao.StudentDao;
import Model.Student;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
@WebServlet("/delone")
public class del extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String id = req.getParameter("id");
InputStream on = Resources.getResourceAsStream("config/mybatis_config.xml");
SqlSessionFactory build1 = new SqlSessionFactoryBuilder().build(on);
SqlSession sqlSession1 = build1.openSession();
StudentDao studentDao1 = sqlSession1.getMapper(StudentDao.class);
int i = studentDao1.deleteStudent(id);
sqlSession1.commit();
List<Student> all = studentDao1.findAll();
req.setAttribute("all",all);
req.getRequestDispatcher("/showlist").forward(req,resp);
}
}
七、添加信息UI层页面代码:
注意先在数据展示页面添加添加信息操作按钮,并且与UI层跳转连接起来后再写下面代码
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/insert")
public class InsertStudent extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
PrintWriter stu = resp.getWriter();
stu.write("<!Doctype html>");
stu.write("<html lang='en'>");
stu.write("<head>");
stu.write("<meta charset='utf-8'>");
stu.write("<meta name='viewport',content='width=device-width,initial-scale=1.0'>");
stu.write("<title>学生信息管理</title>");
stu.write("<style>");
stu.write("body { font-family: '微软雅黑'; background-color: #e0f7fa; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; }");
stu.write(".container { background-color: #ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 90%; max-width: 800px; text-align: center; }");
stu.write("h1 { color: #00796b; margin-bottom: 20px; }");
stu.write(".btn { display: block; width: 100%; padding: 12px; margin: 10px 0; font-size: 18px; color: #ffffff; background-color: #00796b; border: none; border-radius: 6px; cursor: pointer; }");
stu.write(".btn:hover { background-color: #004d40; }");
stu.write("table { width: 100%; border-collapse: collapse; margin-top: 20px; }");
stu.write("th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }");
stu.write("th { background-color: #e0f7fa; color: black; }");
stu.write("tr:nth-child(even) { background-color: lightyellow; }");
stu.write("tr:hover { background-color: #e0f7fa; }");
stu.write("input: { margin-top:10px; }");
stu.write("</style>");
stu.write("</head>");
stu.write("<body>");
stu.write("<div class='container'>");
stu.write("<h1>学生信息添加</h1>");
stu.write("<form action='insertok'>");
stu.write("姓名:<input type='text' name='name'><br><br>"+
"性别:<input type='text' name='sex'><br><br>"+
"年龄:<input type='text' name='age'><br><br>"+
"专业:<input type='text' name='major'><br><br>"+
"时间:<input type='text' name='time'><br><br>"+
"<button>提交</button>"+
"<input type='reset' value='重置'/>"+
"</form>");
stu.write("</div>");
stu.write("</body>");
stu.write("</html>");
}
}
添加信息后端处理代码:
import Dao.StudentDao;
import Model.Student;
import Model.User;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
@WebServlet("/insertok")
public class insertok extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String name = req.getParameter("name");
String sex = req.getParameter("sex");
Integer age = (Integer.valueOf(req.getParameter("age")));
String major = req.getParameter("major");
String time = req.getParameter("time");
Student student = new Student();
student.setName(name);
student.setSex(sex);student.setAge(age);
student.setMajor(major);student.setTime(time);
InputStream in = Resources.getResourceAsStream("config/mybatis_config.xml");
SqlSessionFactory build = new SqlSessionFactoryBuilder().build(in);
SqlSession sqlSession = build.openSession();
StudentDao studentDao = sqlSession.getMapper(StudentDao.class);
studentDao.saveStudent(student);
sqlSession.commit();
List<Student> all = studentDao.findAll();
req.setAttribute("all",all);
req.getRequestDispatcher("/showlist").forward(req,resp);
}
}
使用注解的接口代码:
import Model.Student;
import Model.User;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import java.util.List;
public interface StudentDao {
@Select("select * from student")
List<Student> findAll();
@Insert("insert into student values(null,#{name},#{sex},#{age},#{major},#{time})")
int saveStudent(Student student);
@Delete("delete from student where id=#{id}")
int deleteStudent(String id);
@Select("select * from user where sname=#{sname} and password=#{password}")
User login(@Param("sname") String sname, @Param("password") String password);
}
Model层的javaBean则与其所有的数据库和数据库中的表对应即可