将springboot-mybatis 的数据库操作界面化
之前的项目我们已经实现了数据库的增删改查，不过通过输网址的方式进行操作并不是一个好的项目效果，这篇文章我们通过建立一个html页面来将我们的操作实现界面化
这里在之前的项目中不需要修改代码，我们在src/main/resource/static目录下直接创建一个index.html就可以了
（将index创建在static 中，我们访问localhost:8080时可以直接跳转到index页面）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> 7 </head> 8 <script type="text/javascript"> 9 $(document).ready(function(){ 10 $("ad").click(function(){ 11 if(addid.value) { 12 var a = "/hello/add?id="+addid.value+"&name="+addname.value; 13 open(a,'get',true); 14 } 15 }); 16 $("fi").click(function(){ 17 if(ff.value){ 18 var a = "/hello/"+ff.value; 19 open(a,'get',true); 20 } 21 }); 22 $("de").click(function(){ 23 if(delid.value){ 24 var a = "/hello/del/"+delid.value; 25 open(a,'get',true); 26 } 27 }); 28 $("up").click(function(){ 29 if(updid.value){ 30 var a = "/hello/upd/?id="+updid.value+"&name="+updname.value; 31 open(a,'get',true); 32 } 33 }); 34 }); 35 </script> 36 <body> 37 <h1>数据库操作</h1> 38 <a href="/hello">数据查看</a><br> 39 <h4>增加一个数据</h4> 40 id<input type="number" id="addid"><br> 41 name:<input type="number" id="addname"> <ad>提交</ad> 42 <h4>删除一个数据</h4> 43 <input type="number" id="delid"> <de>提交</de> 44 <h4>查找一个数据</h4> 45 id: <input type="number" id="ff"> <fi>提交</fi> 46 <h4>修改一个数据</h4> 47 id:<input type="number" id="updid"><br> 48 name:<input type="number" id="updname"> <up>提交</up> 49 50 </body> 51 </html>
这里我使用的是AJAX的效果，在单击提交后，会弹出页面，然后Controller会执行响应的方法操作数据库
不过用AJAX不能展示数据的变化，而且每次弹出页面十分难受，使用表单也可以达到界面化的效果。
源代码：https://github.com/sanfenzZ/springboot-mybatis-JPA-
