在idea中创建maven工程，集成springmvc和mybatis框架，完成签到程序

2022-01-20 11:08:15

一.思想

思想是先创建两个xml文件一个用来配置数据库连接一个用来配置sql语句，在创建一个pojo类用来对应数据库中的表。

在创建一个dao的java接口文件设置表的增删改查，其中一个xml映射文件要绑定dao接口，这样用getMapper方法调用映射文件，让dao对象调用xml中的sql语句。

然后通过一个service类实现对表的增删改查，通过springmvc设置的controller控制层接收html前端的路径调用对应service类的方法从而完成签到程序。

二.开始项目工程

1.创建新项目

(1）file->new->project

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

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

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

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

2.配置项目

（1）pom.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>
 
    <!--引入外部配置文件-->
    <properties resource="databaseconfig.properties"/>
 
    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">
                <property name="driver" value="${driver}"/>
                <property name="url" value="${url}"/>
                <property name="username" value="${username}"/>
                <property name="password" value="${password}"/>
            </dataSource>
        </environment>
    </environments>
 
    <mappers>
        <mapper resource="com/kid/serviceimpl/SignServiceImpl.xml"/>
    </mappers>
    
</configuration>

（2）第二步集成springmvc和mybatis框架

在resuorces文件夹中创建SqlMapConfig.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>
    <environments default="development">
 
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">
                <property name="driver" value="com.mysql.jdbc.Driver"/>
                <property name="url" value="jdbc:mysql://localhost:3306/数据库名?useUnicode=true&amp;characterEncoding=UTF8"/><!--用自己的数据库名字  -->
                <property name="username" value="用户名"/>   <!-- 用自己的用户名密码 -->
                <property name="password" value="密码"/>
            </dataSource>
        </environment>
 
    </environments>
    <mappers>
        <!-- 这里配置映射文件 -->
        <mapper resource="mapper/SignMapper.xml"/>
    </mappers>
</configuration>

在resources中创建mapper包在包中创建SignMapper.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属性，不然会报错，可看做包名-->
<!-- 代码中 t_sign为数据库的名字 -->
<mapper namespace="com.hxci.dao.SignDao">
    <select id="query" resultType="com.hxci.pojo.Sign">
        select * from t_sign
    </select>
 
    <select id="queryOne" resultType="com.hxci.pojo.Sign">
        select * from t_sign where id=#{id}
    </select>
 
    <insert id="add" parameterType="com.hxci.pojo.Sign">
        insert into t_sign(name,sno,clazz,cours,datatime,num) values(#{name},#{sno},#{clazz},#{cours},#{datatime},#{num})
    </insert>
 
    <update id="update" parameterType="com.hxci.pojo.Sign">
        update t_sign set name=#{name},sno=#{sno},clazz=#{clazz},cours=#{cours},datatime=#{datatime},num=#{num} where id=#{id}
    </update>
 
    <delete id="del" parameterType="com.hxci.pojo.Sign">
        delete from t_sign where id=#{id}
    </delete>
 
</mapper>

（3）pojo 包

在中存放的是需要用到的实体类。我们只是完成较为简单的签到功能，所以只需要在pojo下创建一个 Sign 类即可。创建 Sign 类。

package com.kid.pojo;
 
/**
 * 学生签到的实体类
 */
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 + '\'' +
                '}';
    }
}

（4）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;
 
/**
 * Mybatis 的工具类，可以用于获取和释放 SqlSession 对象
 */
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();
        }
    }
 
    /**
     * 通过 SqlSessionFactory 类可以获取 SqlSession 的对象
     * @return SqlSession 的对象
     */
    public SqlSession getSqlSession() {
        return sqlSession = sqlSessionFactory.openSession(true);
    }
 
    /**
     * 关闭 SqlSession 对象
     */
    public void closeSession() {
        sqlSession.close();
    }
 
}

（5）Service 包

Service 包中存放的是具体业务的接口，学生签到过程中，需要向数据库中添加签到信息，可以查询所有的签到信息，也可以查看某一条详细的签到信息（功能尚不完善，后续会在 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<Sign> queryAll();
 
    //根据唯一编号查找签到信息
    public Sign queryOne(@Param("id") Integer id);
 
    //添加一个签到信息
    public void addSign(Sign sign);
 
}

（5）serviceimpl 包

serviceimpl 包中存放的是接口的实现类，但是 MyBatis 框架使用的不是实现类，使用的是与接口对应的配置文件。创建 SignServiceImpl.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.kid.service.SignService">
 
 
    <!--查找所有的签到信息-->
    <select id="queryAll" resultType="com.kid.pojo.Sign">
        select *
        from sign
    </select>
 
    <!--根据唯一编号id进行查找签到信息-->
    <select id="queryOne" resultType="com.kid.pojo.Sign">
        select *
        from sign
        where #{id} = id
    </select>
 
    <!--添加签到信息-->
    <insert id="addSign" parameterType="com.kid.pojo.Sign">
        insert into sign (name, sno, classnumber, cours, datatime, num)
        values (#{name}, #{sno}, #{classnumber}, #{cours}, #{datatime}, #{num})
    </insert>
 
</mapper>

（7）ontroller 包中存放的是控制类，接收前端学生的签到信息，然后调用服务接口，将信息存入到数据库中。创建 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<Sign> 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 包。

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>签到系统</title>
    <link href="css/style.css" rel="stylesheet"/>
    <link href="css/response.css" rel="stylesheet"/>
</head>
<body class="bg">
<div class="content">
    <div class="header">
        <div class="header-nei">
            <h2 class="header-title">签到</h2>
        </div>
    </div>
    <!--head/-->
    <div class="head-height">&nbsp;</div>
    <div class="login-reg" style="padding-top:16px;">
        <form id="form1">
            <div class="log-reg-list"><input type="text" name="name" class="log-reg-text2 order-txm"
                                             placeholder="请输入姓名"/><span>*必填</span></div>
            <div class="log-reg-list"><input type="text" name="sno" class="log-reg-text2 order-sj"
                                             placeholder="请输入学号"/><span>*</span></div>
            <div class="log-reg-list"><input type="text" name="classnumber" class="log-reg-text2 order-phone"
                                             placeholder="请输入班级"/><span>*</span></div>
            <div class="log-reg-list"><input type="text" name="cours" class="log-reg-text2 order-sj-name"
                                             placeholder="课程名称"/><span>*</span></div>
            <div class="log-reg-list"><input type="text" name="datatime" class="log-reg-text2 order-user"
                                             placeholder="上课时间"/><span>*</span></div>
            <div class="log-reg-list"><input type="text" name="num" class="log-reg-text2 order-phone"
                                             placeholder="座位号"/><span>*</span></div>
        </form>
        <div class="log-reg-sub">
            <a href="javascript:tijiao();" class="log-reg-btn">提交</a>
        </div>
    </div>
</div>
 
 
<script src="js/jquery.min.js"></script>
<script src="js/style.js"></script>
</body>
 
<!--jquery 轻量级 前端框架 ajax 异步请求 结合strut2(spring mvc) -->
<!--json 对象 -->
<script type="text/javascript">
 
    function tijiao() {
        $.ajax({
            type: "post",
            url: "/Task4_war_exploded/add",
            data: $('#form1').serialize(),
            dataType: "json",
            success: function (res) {
                if (res == 1) {
                    alert("签到成功!");
                    window.location.href = "order.html";
                } else {
                    alert("签到失败！！！");
                }
            },
            error: function (data) {
                alert("系统出现异常！！！！");
            }
        });
    }
 
</script>
 
</html>

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>信息录入系统</title>
    <link href="css/style.css" rel="stylesheet"/>
    <link href="css/response.css" rel="stylesheet"/>
</head>
<body class="bg">
<div class="content">
    <div class="header">
        <div class="header-nei">
            <a href="javascript:;" onclick="javascript:history.back(-1);" class="back-up"><i
                    class="iconfont">&#xe61f;</i></a>
            <h2 class="header-title">定单列表</h2>
        </div>
    </div>
    <!--head/-->
    <div class="head-height">&nbsp;</div>
 
    <div class="nav" id="nav"></div>
 
    <div class="loading" id="morediv"><a href="javascript:more()">加载全部信息...</a></div>
</div>
<!--content/-->
<div class="bg100"></div>
<script src="js/jquery.min.js"></script>
<script src="js/style.js"></script>
</body>
<!-- 显示功能页面，页面加载的时候就应该触发ajax事件 -->
<script type="text/javascript">
 
    var _dl = '';
    var data;
    var flag = false;
 
    $(function () {
 
        //查询的ajax
        $.ajax({
            type: "post",
            url: "/Task4_war_exploded/queryAll",
            data: $('#form').serialize(),
            dataType: "json",
            success: function (res) {
                data = res;//将查询到的数据扩大作用域，以便查看更多使用
                //所有的数据都在res中 json数组
                //query 如何遍历json数组
                if (res != null && res.length > 0 && flag == false) {
                    flag = true;
                    // var _dl = '';
                    $("#nav").empty(); //先清空列表
                    $.each(res, function (i, v) { //每循环一次数组的时候，拼接一条html
                        if (i <= 5) {
                            _dl = _dl + //替换数组中想要显示的数据
                                '<dl>' +
                                '<a href="order-info.html?' + v.id + '">' +
                                '<dt>' + (i + 1) + '</dt>' +
                                '<dd>' + v.cours + ' ' + v.datatime + '</dd>' +
                                '<i class="iconfont">&#xe649;</i>' +
                                '<div class="clears"></div>' +
                                '</a>' +
                                '</dl>';
                        }
                    });
                    $("#nav").append(_dl); //在循环之后将拼接后的html追加到根节点（列表）
                }
            },
            error: function (res) {
                alert("系统异常");
            }
        });
    })
 
 
    function more() {
        $("#nav").empty(); //先清空列表
        $.each(data, function (i, v) { //每循环一次数组的时候，拼接一条html
            if (i > 5) {
                _dl = _dl + //替换数组中想要显示的数据
                    '<dl>' +
                    '<a href="order-info.html?' + v.id + '">' +
                    '<dt>' + (i + 1) + '</dt>' +
                    '<dd>' + v.cours + ' ' + v.datatime + '</dd>' +
                    '<i class="iconfont">&#xe649;</i>' +
                    '<div class="clears"></div>' +
                    '</a>' +
                    '</dl>';
            }
        });
        $("#nav").append(_dl); //在循环之后将拼接后的html追加到根节点（列表）
 
        document.getElementById("morediv").style.display = "none";//全部显示完以后，隐藏显示更多按钮
    }
 
</script>
</html>

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>信息录入系统</title>
    <link href="css/style.css" rel="stylesheet"/>
    <link href="css/response.css" rel="stylesheet"/>
</head>
<body class="bg">
<div class="content">
    <div class="header">
        <div class="header-nei">
            <a href="javascript:;" onclick="javascript:history.back(-1);" class="back-up"><i
                    class="iconfont">&#xe61f;</i></a>
            <h2 class="header-title">签到详情</h2>
        </div>
    </div>
    <!--head/-->
    <div class="head-height">&nbsp;</div>
    <div class="order-info">
        <table>
            <tr>
                <th>姓名</th>
                <td id="name">正在加载</td>
            </tr>
            <tr>
                <th>学号</th>
                <td id="sno">正在加载</td>
            </tr>
            <tr>
                <th>班级</th>
                <td id="classnumber">正在加载</td>
            </tr>
            <tr>
                <th>课程</th>
                <td id="cours">正在加载</td>
            </tr>
            <tr>
                <th>时间</th>
                <td id="datatime">正在加载</td>
            </tr>
            <tr>
                <th>座位号</th>
                <td id="num">正在加载</td>
            </tr>
        </table>
    </div>
</div>
<!--content/-->
<div class="bg100"></div>
<script src="js/jquery.min.js"></script>
<script src="js/style.js"></script>
</body>
<script type="text/javascript">
    $(function () {
        //获取order.html传递过来的 下标i
        //http://localhost:8080/ssh_sign/html/order-info.html?0
        var i = (window.location.href).split("?")[1];
        //通过一个ajax 向后台传递i，获取一条数据，并且显示在对应的位置上
        $.ajax({
            type: "post",
            url: "/Task4_war_exploded/queryOne",
            data: {'index': i},  //--->index与控制类中的变量index是一样的
            dataType: "json",
            success: function (res) {
                $("#name").text(res.name);
                $("#sno").text(res.sno);
                $("#classnumber").text(res.classnumber);
                $("#cours").text(res.cours);
                $("#datatime").text(res.datatime);
                $("#num").text(res.num);
            },
            error: function (data) {
                alert("系统出现异常")
            }
        });
    })
</script>
</html>

配置完项目的目录：

四.数据库

（1）数据库创建

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

（2）数据库添加数据->数据表

五。运行结果

总结：mybatis框架用来设置与数据库的的连接和sql语句的配置，springmvc框架用来拦截路径设置控制层调用sql语句对表进行增删改查。

码农公寓