首页 > 编程语言> 文章详细

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

2021-10-14 21:33:23 阅读：144 来源： 互联网

标签：cours String springmvc idea id maven datatime sign public

一.思想

思想是先创建两个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语句对表进行增删改查。

标签：cours,String,springmvc,idea,id,maven,datatime,sign,public
来源： https://blog.csdn.net/m0_49024941/article/details/120772091

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9