思想是先创建两个xml文件一个用来配置数据库连接一个用来配置sql语句,在创建一个pojo类用来对应数据库中的表。
在创建一个dao的java接口文件设置表的增删改查,其中一个xml映射文件要绑定dao接口,这样用getMapper方法调用映射文件,让dao对象调用xml中的sql语句。
然后通过一个service类实现对表的增删改查,通过springmvc设置的controller控制层接收html前端的路径调用对应service类的方法从而完成签到程序。
<?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>
<?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&characterEncoding=UTF8"/><!--用自己的数据库名字 --> <property name="username" value="用户名"/> <!-- 用自己的用户名密码 --> <property name="password" value="密码"/> </dataSource> </environment> </environments> <mappers> <!-- 这里配置映射文件 --> <mapper resource="mapper/SignMapper.xml"/> </mappers> </configuration>
<?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>
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"> </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"></i></a> <h2 class="header-title">定单列表</h2> </div> </div> <!--head/--> <div class="head-height"> </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"></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"></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"></i></a> <h2 class="header-title">签到详情</h2> </div> </div> <!--head/--> <div class="head-height"> </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语句对表进行增删改查。