SSM small project ---------- query student information by class

Posted by steveangelis on Sat, 05 Mar 2022 11:45:01 +0100

1, Project introduction

The main functions of the project are: select a class from the drop-down list, and click the query button to display the table displaying student information at the bottom of the page

As shown in the figure:

Main technologies used: three SSM frameworks, AJAX, jQuery, BootStrap, etc
Project objective: to improve proficiency in the use of the three SSM frameworks through this small project

2, Specific steps

1. Design student form

Add student information after the design is completed (just add a few)

2. Project structure

As shown in the figure

3. Configuration file

In IDEA, we create a maven web app program. After the creation, we need to configure POM XML Maven core configuration file, ApplicationContext XML spring configuration file, dispatchservlet XML spring MVC configuration file, mybaits.xml XML mybatis configuration file and web XML, etc

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.fancy</groupId>
  <artifactId>StudentList</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>StudentList Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <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>
    <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>3.1.0</version>
      <scope>provided</scope>
    </dependency>
    <!-- jsp rely on -->
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.2.1-b03</version>
      <scope>provided</scope>
    </dependency>
    <!--springmvc-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.2.5.RELEASE</version>
    </dependency>
    <!--Transactional-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>5.2.5.RELEASE</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>5.2.5.RELEASE</version>
    </dependency>
    <!--aspectj rely on-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aspects</artifactId>
      <version>5.2.5.RELEASE</version>
    </dependency>
    <!--jackson-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.9.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.0</version>
    </dependency>
    <!--mybatis and spring Integrated-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.1</version>
    </dependency>
    <!--mybatis-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.5.1</version>
    </dependency>
    <!--mysql drive-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.28</version>
    </dependency>
    <!--druid-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.1.12</version>
    </dependency>

    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.6</version>
    </dependency>
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.4</version>
    </dependency>
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.1</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>


  </dependencies>

  <build>
    <resources>
      <resource>
        <directory>src/main/java</directory>
        <includes>
          <include>**/*.xml</include>
          <include>**/*.properties</include>
        </includes>
      </resource>

      <resource>
        <directory>src/main/resources</directory>
        <includes>
          <include>**/*.xml</include>
          <include>**/*.properties</include>
        </includes>
      </resource>
    </resources>
    <finalName>StudentList</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.22.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>

Mainly, don't forget to add a resource scanner < Resources >

applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">
    <context:component-scan base-package="com.fancy.service"></context:component-scan>

    <context:property-placeholder location="classpath:db.properties"></context:property-placeholder>

    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="url" value="${jdbc.url}"></property>
        <property name="username" value="${jdbc.username}"></property>
        <property name="password" value="${jdbc.password}"></property>
    </bean>

    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"></property>
        <property name="configLocation" value="classpath:mybatis.xml"></property>
    </bean>

    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property>
        <property name="basePackage" value="com.fancy.mapper"></property>
    </bean>
</beans>

db.properties

jdbc.driver=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/qdu?useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true
jdbc.username=root
jdbc.password=password

dispatcherServlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.alibaba.com/schema/stat http://www.alibaba.com/schema/stat.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <context:component-scan base-package="com.fancy.controller"></context:component-scan>

<!--    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">-->
<!--        <property name="prefix" value="/WEB-INF/view"></property>-->
<!--        <property name="suffix" value=".jsp"></property>-->
<!--    </bean>-->

    <mvc:annotation-driven></mvc:annotation-driven>
</beans>

mybatis.xml

<?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>
    <typeAliases>
        <package name="com.fancy.pojo"/>
    </typeAliases>
    <mappers>
        <package name="com.fancy.mapper"/>
    </mappers>
</configuration>

4. Business layer

In the business layer, we define the StudentService interface and its implementation class StudentServiceImpl. The implementation method is show, which internally encapsulates the code for the persistence layer to obtain student information

StudentService interface:

package com.fancy.service;

import com.fancy.pojo.Student;

import java.util.List;

public interface StudentService {
     List<Student> show(String sbatch);
}

StudentServiceImpl implementation class

package com.fancy.service;

import com.fancy.mapper.StudentMapper;
import com.fancy.pojo.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class StudentServiceImpl implements StudentService{

    @Autowired
    StudentMapper studentMapper;

    @Override
    public List<Student> show(String sbatch) {

        List<Student> students = studentMapper.selectStudentsByClass(sbatch);
        return students;
    }
}

The business layer should pay attention to the persistence layer objects

5. Persistent layer

The persistence layer code is encapsulated under the mapper package, which are dao interface and mapper implementation class respectively

StudentMapper.java

package com.fancy.service;

import com.fancy.mapper.StudentMapper;
import com.fancy.pojo.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class StudentServiceImpl implements StudentService{

    @Autowired
    StudentMapper studentMapper;

    @Override
    public List<Student> show(String sbatch) {

        List<Student> students = studentMapper.selectStudentsByClass(sbatch);
        return students;
    }
}

StudentMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.fancy.mapper.StudentMapper">
    <select id="selectStudentsByClass" parameterType="java.lang.String" resultType="com.fancy.pojo.Student">
        select * from student where sbatch = #{sBatch};
    </select>
</mapper>

6. View layer

In index In JSP, we send a request to the controller through AJAX and carry the data in < Select > at the same time. After the request is successful, we reload the data in table. In table, we iterate through all the returned results by adding ${value} and < C: foreach >

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%--
  Created by IntelliJ IDEA.
  User: full-blown flowers fancy
  Date: 2022/3/5
  Time: 10:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <title>Query interface</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        #title {
            height: 100px;
            width: 1000px;
            margin: 60px auto;
            color: rgb(205, 156, 50);
            background-color: #e8eb2649;
            text-align: center;
            border-radius: 10px;
        }

        #list {
            height: 50px;
            width: 300px;
            margin: 60px auto;
        }
        #btn {
            height: 50px;
            width: 100px;
            position: absolute;
            left:1120px;
            top:280px;
        }
        #table {
            width : 1200px;
            margin : 0px auto;
        }
    </style>
    <script>
        $(function(){
            $("#btn").click(function (){
                $.ajax({
                    url:"/MyWeb/show.action",
                    type:"GET",
                    dataTyp:"json",
                    data:{"sbatch":$("select").val()},
                    success:function(students){
                         $("#table").load("http://localhost:8080/MyWeb/index.jsp #table");
                    }
                })

            })

        })
    </script>
</head>

<body>
    <div id="title" class="container">
        <h1>Query class student list</h1>
    </div>
    <hr>
    <select id="list" class="form-control">
        <option selected="selected">Please select a class</option>
        <option>20 Software J01</option>
        <option>20 Software BD01</option>
        <option>20 Software BD02</option>
        <option>20 Software BD03</option>
    </select>
   <button id="btn" class="btn btn-danger" >query</button>
   <table id="table" class="table table-bordered table-striped">
       <tr>
           <th>Student number</th>
           <th>full name</th>
           <th>password</th>
           <th>Gender</th>
           <th>class</th>
       </tr>
       <%

       %>
       <c:forEach items="${students}" var="stu">
        <tr>
           <td>${stu.sid}</td>
           <td>${stu.sname}</td>
           <td>${stu.spassword}</td>
           <td>${stu.sgender}</td>
           <td>${stu.sbatch}</td>
        </tr>
       </c:forEach>
   </table>
</body>

</html>

7. Control layer

The controller class code for processing requests is mainly placed under the controller package. We take out the data in select and call the service method to query. Note that we define the method as void and return the data queried in the database through session. As for why not forward the request, this is the difference between Ajax request and ordinary Http request

package com.fancy.controller;

import com.fancy.pojo.Student;
import com.fancy.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpSession;
import java.util.List;

@Controller
public class StudentController {

    @Autowired
    StudentService studentService;

    @RequestMapping("/show.action")
    @ResponseBody
    public void show(String sbatch, HttpSession session) {
        System.out.println(sbatch);
        List<Student> students = studentService.show(sbatch);
        session.setAttribute("students", students);
    }

}

3, Testing

Topics: JavaEE Mybatis Spring Spring MVC SSM

Programmer Think