目录

环境搭建

数据库

创建 Maven 项目

配置项目

编写项目

创建包结构

编写后端代码

pojo 包

util 包

 service 包

serviceimpl 包

controller 包

创建前端显示页面

可能出现的问题

Tomcat启动失败

乱码问题

我们使用 SpringMVC 和 MyBatis 框架做一个简单的签到程序。我们前端使用的是 ajax 向后台传值，后台 SpringMVC 采用注解的方式进行开发（使用注解开发比较方便），最终的签到数据会通过 MyBatis 框架存入到 MySQL 数据库中。

源代码已经放在了 GitHub 上，可以自行拉取。项目会进行持续完善。以下为仓库的 HTTPS 地址。

https://github.com/1412KID1412/TaskSSM.git

环境搭建

数据库

我们这里使用的是MySQL数据库进行最终的存值。需要先新建名为 task 数据库（注意查看是否已经存在该数据库），在 task 数据库中新建表名为 sign 数据表，随后在表中适当添加数据。

创建表和添加数据的 SQL 文件如下所示。可以将一下SQL语句放在一个 .sql 文件中，然后选择数据库运行 SQL 文件即可。

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for `sign`
-- ----------------------------
DROp TABLE IF EXISTS `sign`;
CREATE TABLE `sign` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一编号，没有实际意义',
  `name` varchar(255) DEFAULT NULL COMMENT '学生的姓名',
  `sno` varchar(255) DEFAULT NULL COMMENT '学生的学号',
  `classnumber` varchar(255) DEFAULT NULL COMMENT '班级编号',
  `cours` varchar(255) DEFAULT NULL COMMENT '课程名称',
  `datatime` varchar(255) DEFAULT NULL COMMENT '签到时间',
  `num` varchar(255) DEFAULT NULL COMMENT '座位号',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=15 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of sign
-- ----------------------------
INSERT INTO `sign` VALUES ('11', '张三', '101', '电竞02', '意识练习', '8：20', '12');
INSERT INTO `sign` VALUES ('12', '李四', '102', '电竞01', '手法练习', '8：22', '13');
INSERT INTO `sign` VALUES ('13', '王五', '103', '电竞01', '手法练习', '8：21', '12');
INSERT INTO `sign` VALUES ('14', '赵六', '104', '电竞02', '意识练习', '8：21', '15');

 创建完成后如图所示。

创建 Maven 项目

使用IDEA创建Maven项目，选择自己需要的JDK版本，进入下一步。我们这里推荐使用1.8版本的 JDK。

填写项目的名称和项目的存放地址，点击 Finish 即可完成 Mavne 项目的创建。

 添加框架支持。需要将普通的 Maven 工程升级为 Web 工程。右键点击模块。选择 Add framework Support 进行添加 web 框架。

选择 Web Application 点击 OK ，即可添加 Web 框架支持。

配置项目

我们需要在 pom.xml 配置文件中添加需要的依赖代码。我们需要添加 SpringMVC、mysql、MyBatis、json、junit 等框架的依赖。依赖代码如下所示。

    

        
        
            org.springframework
            spring-webmvc
            5.1.9.RELEASE
        

        
        
            mysql
            mysql-connector-java
            8.0.26
        

        
        
            org.mybatis
            mybatis
            3.5.7
        

        
        
        
            org.json
            json
            20210307
        
        
        
        
        
            org.junit.jupiter
            junit-jupiter-api
            5.8.1
            test
        

    


    
    
        
            
                src/main/resources
                
                    ***.xml
                
                true
            
            
                src/main/java
                
                    ***.xml
                
                true
            
        
    

我们通过 MyBatis 框架来连接 MySQL 数据库。我们先添加文件名为 mybatis-config.xml 的 MyBatis 的配置文件。我们需要在 resources 包下创建 mybatis-config.xml 配置文件。（可能会出现爆红现象，那是因为没有找到资源，我们后面会进行处理的）

我们还需要在 resources 包下创建一个 databaseconfig.properties 资源文件，用来保存数据库的连接信息。（注意，需要替换为自己的信息，我的密码为空，那 password 这一项就空着，没有空格）

driver=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://localhost:3306/task?useSSL=true&useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
username=root
password=

我们还需要在 resources 包下创建 springmvc-config.xml 配置文件。自动扫描包，会自动扫描指定路径下的所有注解（路径可能会爆红，那是因为我们还没有创建指定路径，后续会进行处理）。

我们需要在 web.xml 配置文件中，注册 SpringMVC 的 DispatcherServlet，即视图解析器。DispatcherServlet 本质上还是一个 Servlet。我们这里直接添加了 SpringMVC 官方的编码过滤器，可以解决大部分乱码问题。（添加代码后可能会出现爆红情况，那是因为我们没有创建 springmvc-servlet.xml 配置文件，这里先不需要处理爆红错误，我们后续会进行创建的对应的配置文件的。）

    
    
    
        SpringMVC
        org.springframework.web.servlet.DispatcherServlet
        
        
            contextConfigLocation
            classpath:springmvc-config.xml
        
        
        1
    

    
    
        SpringMVC
        /
    

    
    
        encoding
        org.springframework.web.filter.CharacterEncodingFilter
        
            encoding
            utf-8
        
    
    
        encoding
        
public class Sign {
    private Integer id;//唯一编号，没有什么实际意义
    private String name;//姓名
    private String sno;//学号
    private String classnumber;//班级编号
    private String cours;//课程名称
    private String datatime;//签到时间
    private String num;//座位号

    public Sign() {
    }

    public Sign(Integer id, String name, String sno, String classNumber, String cours, String datatime, String num) {
        this.id = id;
        this.name = name;
        this.sno = sno;
        this.classnumber = classNumber;
        this.cours = cours;
        this.datatime = datatime;
        this.num = num;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getSno() {
        return sno;
    }

    public void setSno(String sno) {
        this.sno = sno;
    }

    public String getClassnumber() {
        return classnumber;
    }

    public void setClassnumber(String classnumber) {
        this.classnumber = classnumber;
    }

    public String getCours() {
        return cours;
    }

    public void setCours(String cours) {
        this.cours = cours;
    }

    public String getDatatime() {
        return datatime;
    }

    public void setDatatime(String datatime) {
        this.datatime = datatime;
    }

    public String getNum() {
        return num;
    }

    public void setNum(String num) {
        this.num = num;
    }

    @Override
    public String toString() {
        return "Sign{" +
                "id=" + id +
                ", name='" + name + ''' +
                ", sno='" + sno + ''' +
                ", classNumber='" + classnumber + ''' +
                ", cours='" + cours + ''' +
                ", datatime='" + datatime + ''' +
                ", num='" + num + ''' +
                '}';
    }
}

util 包

util 包中存放的是工具类，存放的是 MyBatis 框架连接 MySQL 数据库的工具类，用于获取 SqlSession 对象和释放 SqlSession 对象。创建 MyBatisUtil 类。

package com.kid.util;


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 java.io.IOException;
import java.io.InputStream;


public class MyBatisUtil {

    String resource = "mybatis-config.xml";
    InputStream inputStream = null;
    SqlSessionFactory sqlSessionFactory = null;
    SqlSession sqlSession = null;

    {
        try {
            inputStream = Resources.getResourceAsStream(resource);
            sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    
    public SqlSession getSqlSession() {
        return sqlSession = sqlSessionFactory.openSession(true);
    }

    
    public void closeSession() {
        sqlSession.close();
    }

}

 service 包

serviceinpl 包中存放的是具体业务的接口，学生签到过程中，需要向数据库中添加签到信息，可以查询所有的签到信息，也可以查看某一条详细的签到信息（功能尚不完善，后续会在 GitHub 中进行更新）。创建 SignService 接口。

package com.kid.service;

import com.kid.pojo.Sign;
import org.apache.ibatis.annotations.Param;

import java.util.List;


public interface SignService {

    //查找所有签到
    public List queryAll();

    //根据唯一编号查找签到信息
    public Sign queryOne(@Param("id") Integer id);

    //添加一个签到信息
    public void addSign(Sign sign);

}

serviceimpl 包

serviceimpl 包中存放的是接口的实现类，但是 MyBatis 框架使用的不是实现类，使用的是与接口对应的配置文件。创建 SignServiceImpl.xml 配置文件。

    
    
        select *
        from sign
    

    
    
        select *
        from sign
        where #{id} = id
    

    
    
        insert into sign (name, sno, classnumber, cours, datatime, num)
        values (#{name}, #{sno}, #{classnumber}, #{cours}, #{datatime}, #{num})
    

controller 包

controller 包中存放的是控制类，接收前端学生的签到信息，然后调用服务接口，将信息存入到数据库中。创建 SignController 类。

package com.kid.controller;

import com.kid.util.MyBatisUtil;
import com.kid.pojo.Sign;
import com.kid.service.SignService;
import org.json.JSONArray;
import org.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller
public class SignController extends MyBatisUtil {

    SignService signService = null;

    //不会走视图解析器
    @ResponseBody
    //请求地址
    @RequestMapping(value = "/add", produces = "text/html;charset=UTF-8;")
    public String add(Sign sign) {

        signService = getSqlSession().getMapper(SignService.class);

        System.out.println("这里是SignController类中的add方法");//测试信息
        System.out.println("sign = " + sign);//测试信息

        signService.addSign(sign);

        closeSession();

        return "1";
    }

    //不走视图解析器
    @ResponseBody
    //请求地址
    @RequestMapping(value = "/queryAll", produces = "text/html;charset=UTF-8;")
    public String queryAll() {
        //测试信息
        System.out.println("这里是SignController类中的queryAll方法");

        signService = getSqlSession().getMapper(SignService.class);

        List signList = signService.queryAll();

        signList.toString();

        JSonArray jsonArray = new JSonArray(signList);

        closeSession();

        return jsonArray.toString();
    }

    @ResponseBody
    @RequestMapping(value = "queryOne", produces = "text/html;charset=UTF-8;")
    public String queryOne(String index) {
        //测试信息
        System.out.println("这里是SignController类中的queryOne方法");
        System.out.println("index = " + index);

        signService = getSqlSession().getMapper(SignService.class);
        Sign sign = signService.queryOne(Integer.parseInt(index));

        System.out.println("sign = " + sign);

        JSonObject jsonObject = new JSonObject(sign);

        return jsonObject.toString();
    }

}

创建前端显示页面

我们在 web 包下创建 html 包。包结构如下图所示（没有 css 文件和 js 文件不影响功能的实现）。

 创建 input.html 文件，添加登录信息。

    
    
    
    
    
    



    
        
            
签到
        
    
    
     
    
        

            *必填
            *
            *
            *
            *
            *
        
        
            提交
        
    

创建 order.html 文件，用来显示全部信息。

    
    
    
    
    
    



    
        
            
            
定单列表
        
    
    
     

    

    加载全部信息...

创建 order-info.html 文件，用来显示详细信息。

    
    
    
    
    
    



    
        
            
            
签到详情
        
    
    
     
    
        

            

                
姓名
                
正在加载
            
            

                
学号
                
正在加载
            
            

                
班级
                
正在加载
            
            

                
课程
                
正在加载
            
            

                
时间
                
正在加载
            
            

                
座位号
                
正在加载
            
        
    

可能出现的问题

Tomcat启动失败

可能因为资源没找到，需要手动导包。

乱码问题

可以使用 SpringMVC 官方的过滤器设置字符集。在 web.xml 配置文件中添加一下代码（注意，本项目已经添加了以下代码）。

    
    
        encoding
        org.springframework.web.filter.CharacterEncodingFilter
        
            encoding
            utf-8
        
    
    
        encoding
        /*