上一篇----springboot 整合mybatis 进行数据库操作(JPA)
之前的项目我们已经实现了数据库的增删改查，不过通过输网址的方式进行操作并不是一个好的项目效果，这篇文章我们通过建立一个html页面来将我们的操作实现界面化
这里在之前的项目中不需要修改代码，我们在src/main/resource/static目录下直接创建一个index.html就可以了
（将index创建在static 中，我们访问localhost:8080时可以直接跳转到index页面）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("ad").click(function(){
if(addid.value) {
var a = "/hello/add?id="+addid.value+"&name="+addname.value;
open(a,'get',true);
}
});
$("fi").click(function(){
if(ff.value){
var a = "/hello/"+ff.value;
open(a,'get',true);
}
});
$("de").click(function(){
if(delid.value){
var a = "/hello/del/"+delid.value;
open(a,'get',true);
}
});
$("up").click(function(){
if(updid.value){
var a = "/hello/upd/?id="+updid.value+"&name="+updname.value;
open(a,'get',true);
}
});
});
</script>
<body>
<h1>数据库操作</h1>
<a href="/hello">数据查看</a><br>
<h4>增加一个数据</h4>
id<input type="number" id="addid"><br>
name:<input type="number" id="addname"> <ad>提交</ad>
<h4>删除一个数据</h4>
<input type="number" id="delid"> <de>提交</de>
<h4>查找一个数据</h4>
id: <input type="number" id="ff"> <fi>提交</fi>
<h4>修改一个数据</h4>
id:<input type="number" id="updid"><br>
name:<input type="number" id="updname"> <up>提交</up>
</body>
</html>这里我使用的是AJAX的效果，在单击提交后，会弹出页面，然后Controller会执行响应的方法操作数据库
不过用AJAX不能展示数据的变化，而且每次弹出页面十分难受，使用表单也可以达到界面化的效果。源码在这里