JavaWeb搭建简单的Web学生信息管理系统项目 (javaweb+Thymeleaf+Jquery+mysql+Druid(JDBC))

学生信息管理系统项目

项目知识背景介绍

项目采用三层架构

• 表述层：又可以称之为控制层，负责处理浏览器请求、返回响应、页面调度(跳转)。
• 业务逻辑层：负责处理业务逻辑，根据业务逻辑把持久化层从数据库查询出来的数据进行运算、组装，封装好后返回给表述层，也可以根据业务功能的需要调用持久化层把数据保存到数据库、修改数据库中的数据、删除数据库中的数据
• 持久化层：根据上一层的调用对数据库中的数据执行增删改查的操作

三层架构和数据模型的关系

模型对整个项目中三层架构的每一层都提供支持，具体体现是使用模型对象封装业务功能数据

其实数据模型就是JavaBean，也是Java实体类，他还有很多其他的名称:

• POJO：Plain old Java Object，传统的普通的Java对象
• entity：实体类
• bean或Java bean
• domain：领域模型

三层架构与MVC多层架构的关系

MVC是什么？

1）M：Model模型

2）V：View视图

3）C：Controller控制器

MVC是在表述层开发中运用的一种设计理念。主张把封装数据的『模型』、显示用户界面的『视图』、**协调调度的『控制器』**分开。

好处：

1）进一步实现各个组件之间的解耦

2）让各个组件可以单独维护

3）将视图分离出来以后，后端工程师和前端工程师的对接更方便。

项目需求

项目实现的需求非常简单,即演示对学生信息数据的CRUD(增删改查)!!

---

项目准备

数据建模

物理建模: 建立数据库及数据库表

CREATE DATABASE `student_info`CHARACTER SET utf8;
USE `student_info`;

CREATE TABLE t_student(
    student_id INT PRIMARY KEY AUTO_INCREMENT,
    student_name varchar(100),
    student_class varchar(100)
);

逻辑建模: 建立与数据表字段对应的JavaBean。

实现ORM(Object Releation Mapping),即数据库表和JavaBean建立联系!

package com.carson.pojo;

public class User {
    private Integer userId;
    private String userName;
    private String userPassword;

    public User() {
    }

    public User(Integer userId, String userName, String userPassword) {
        this.userId = userId;
        this.userName = userName;
        this.userPassword = userPassword;
    }

    public Integer getUserId() {
        return userId;
    }

    public void setUserId(Integer userId) {
        this.userId = userId;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getUserPassword() {
        return userPassword;
    }

    public void setUserPassword(String userPassword) {
        this.userPassword = userPassword;
    }

    @Override
    public String toString() {
        return "User{" +
                "userId=" + userId +
                ", userName='" + userName + '\'' +
                ", userPassword='" + userPassword + '\'' +
                '}';
    }
}

环境搭建

本项目基于Maven环境创建,关于IDEA中Maven的使用,可以参考我的另外一遍博文,附上链接: Maven使用

项目所需全部依赖如下:

pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.carson</groupId>
  <artifactId>student_info</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>
  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.7</maven.compiler.source>
    <maven.compiler.target>1.7</maven.compiler.target>
  </properties>

  <dependencies>
    <!--Junit单元测试依赖-->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
    <!--servlet依赖-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>4.0.1</version>
    </dependency>
    <!--连接数据库依赖-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.19</version>
    </dependency>
    <!-- 连接池类库-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.1.10</version>
    </dependency>
    <!-- dbutils依赖 -->
    <dependency>
      <groupId>commons-dbutils</groupId>
      <artifactId>commons-dbutils</artifactId>
      <version>1.6</version>
    </dependency>
    <!-- beanutils依赖 -->
    <dependency>
      <groupId>commons-beanutils</groupId>
      <artifactId>commons-beanutils</artifactId>
      <version>1.8.3</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/commons-beanutils/commons-beanutils-bean-collections -->
    <dependency>
      <groupId>commons-beanutils</groupId>
      <artifactId>commons-beanutils-bean-collections</artifactId>
      <version>1.8.3</version>
    </dependency>

    <!-- themeleaf依赖 -->
    <dependency>
      <groupId>org.thymeleaf</groupId>
      <artifactId>thymeleaf</artifactId>
      <version>3.0.12.RELEASE</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.attoparser/attoparser -->
    <dependency>
      <groupId>org.attoparser</groupId>
      <artifactId>attoparser</artifactId>
      <version>2.0.5.RELEASE</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.javassist/javassist -->
    <dependency>
      <groupId>org.javassist</groupId>
      <artifactId>javassist</artifactId>
      <version>3.20.0-GA</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/log4j/log4j -->
    <dependency>
      <groupId>log4j</groupId>
      <artifactId>log4j</artifactId>
      <version>1.2.15</version>
      <exclusions>
        <exclusion>
          <groupId>javax.mail</groupId>
          <artifactId>mail</artifactId>
        </exclusion>
        <exclusion>
          <groupId>javax.jms</groupId>
          <artifactId>jms</artifactId>
        </exclusion>
        <exclusion>
          <groupId>com.sun.jdmk</groupId>
          <artifactId>jmxtools</artifactId>
        </exclusion>
        <exclusion>
          <groupId>com.sun.jmx</groupId>
          <artifactId>jmxri</artifactId>
        </exclusion>
      </exclusions>
      <scope>compile</scope>
    </dependency>
    <!-- https://mvnrepository.com/artifact/ognl/ognl -->
    <dependency>
      <groupId>ognl</groupId>
      <artifactId>ognl</artifactId>
      <version>3.1.26</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.slf4j/slf4j-api -->
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-api</artifactId>
      <version>1.7.25</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.slf4j/slf4j-log4j12 -->
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-log4j12</artifactId>
      <version>1.7.25</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.unbescape/unbescape -->
    <dependency>
      <groupId>org.unbescape</groupId>
      <artifactId>unbescape</artifactId>
      <version>1.1.6.RELEASE</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/commons-logging/commons-logging -->
    <dependency>
      <groupId>commons-logging</groupId>
      <artifactId>commons-logging</artifactId>
      <version>1.1.1</version>
    </dependency>

  </dependencies>

  <build>
    <!--在build中配置resources，来防止我们资源导出失败的问题-->
    <resources>
      <resource>
        <directory>src/main/resources</directory>
        <includes>
          <include>**/*.properties</include>
          <include>**/*.xml</include>
        </includes>
        <filtering>true</filtering>
      </resource>
      <resource>
        <directory>src/main/java</directory>
        <includes>
          <include>**/*.properties</include>
          <include>**/*.xml</include>
        </includes>
        <filtering>true</filtering>
      </resource>
    </resources>
  </build>
</project>

搭建Thymeleaf环境

关于Thymeleaf的相关使用和介绍,

可参考我的另外一遍博文,附上链接: Thymeleaf使用

---

1. 建立处理Thymeleaf模板的ViewBaseServlet作为基础类

package com.carson.servlet.base;

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.WebContext;
import org.thymeleaf.templatemode.TemplateMode;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

//视图层基础Servlet类
public class ViewBaseServlet extends HttpServlet {
    private TemplateEngine templateEngine;

    @Override
    public void init() throws ServletException {

        // 1.获取ServletContext对象
        ServletContext servletContext = this.getServletContext();

        // 2.创建Thymeleaf解析器对象
        ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver(servletContext);

        // 3.给解析器对象设置参数
        // ①HTML是默认模式，明确设置是为了代码更容易理解
        templateResolver.setTemplateMode(TemplateMode.HTML);

        // ②设置前缀
        String viewPrefix = servletContext.getInitParameter("view-prefix");

        templateResolver.setPrefix(viewPrefix);

        // ③设置后缀
        String viewSuffix = servletContext.getInitParameter("view-suffix");

        templateResolver.setSuffix(viewSuffix);

        // ④设置缓存过期时间（毫秒）
        templateResolver.setCacheTTLMs(60000L);

        // ⑤设置是否缓存
        templateResolver.setCacheable(true);

        // ⑥设置服务器端编码方式
        templateResolver.setCharacterEncoding("utf-8");

        // 4.创建模板引擎对象
        templateEngine = new TemplateEngine();

        // 5.给模板引擎对象设置模板解析器
        templateEngine.setTemplateResolver(templateResolver);

    }

    protected void processTemplate(String templateName, HttpServletRequest req, HttpServletResponse resp) throws IOException {
        // 1.设置响应体内容类型和字符集
        resp.setContentType("text/html;charset=UTF-8");

        // 2.创建WebContext对象
        WebContext webContext = new WebContext(req, resp, getServletContext());

        // 3.处理模板数据
        templateEngine.process(templateName, webContext, resp.getWriter());

    }
}

2. 配置web.xml

<!-- 在上下文参数中配置视图前缀和视图后缀的全局参数,方便后期读取 -->
<context-param>
    <param-name>view-prefix</param-name>
    <param-value>/WEB-INF/view/</param-value>
</context-param>
<context-param>
    <param-name>view-suffix</param-name>
    <param-value>.html</param-value>
</context-param>

3. webapp目录下WEB-INF目录下创建view目录存储Thymeleaf模板文件

项目具体实现的功能说明

1）登陆功能: 浏览器通过默认路径访问PortalServlet，PortalServlet解析对应的Thymeleaf模板视图返回login.html,若登陆成功,跳转到首页;若登陆失败,页面显示相应错误信息。其通过设置过滤器实现路由页面跳转,再通过Session信息的有无来验证用户的登陆情况。

2）显示学生列表：在首页点击显示学生列表，跳转到目标页面把所有学生的信息列表显示出来.

3）查询信息: 在学生列表页面通过输入框和单选框来查询特定学生/班级的数据

3）删除信息：在学生列表的特定学生记录上点击删除图标，弹出确认框,若确定,则执行学生信息的删除操作。

4）新增信息：

• 在列表页面点击添加学生跳转到新增学生信息的表单页面
• 在新增信息的表单页面点击提交按钮执行保存，然后跳转回学生列表页面

5）修改信息：

• 在学生列表上点击修改图标，跳转到更新学生信息的表单页面
• 在更新信息的表单页面点击提交按钮执行更新，然后跳转回学生列表页面

6）数据分页显示(异步实现)

• 点击学生列表下的页面跳转按钮,发起异步请求,返回学生数据

• JQuery库发起AJAX异步请求,解析返回的HTML数据,更新表单部分的数据

项目具体目录结构:

项目效果展示

登陆功能


首页:

学生信息列表:

异步分页功能

查询信息:

添加学生信息:

修改学生信息;

…

---

欢迎交流分享,有项目源码的需要可以关注下我个人微信公众号
回复 “JAVA” 获取!!