在idea中创建maven工程，集成springmvc和mybatis框架，完成签到程序
作者：互联网
一.思想
思想是先创建两个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&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"> </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语句对表进行增删改查。
标签：cours,String,springmvc,idea,id,maven,datatime,sign,public 来源： https://blog.csdn.net/m0_49024941/article/details/120772091