将springboot-mybatis 的数据库操作界面化

亦凉 2022-05-17 01:16 228阅读 0赞

### [上一篇----springboot 整合mybatis 进行数据库操作(JPA)][----springboot _mybatis _JPA] ###

### 之前的项目我们已经实现了数据库的增删改查，不过通过输网址的方式进行操作并不是一个好的项目效果，这篇文章我们通过建立一个html页面来将我们的操作实现界面化 ###

###   这里在之前的项目中不需要修改代码，我们在src/main/resource/static目录下直接创建一个index.html就可以了 ###

### （将index创建在static 中，我们访问[localhost:8080][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会执行响应的方法操作数据库

![70][]

**不过用AJAX不能展示数据的变化，而且每次弹出页面十分难受，使用表单也可以达到界面化的效果。源码在[这里][Link 1]**

[----springboot _mybatis _JPA]: https://blog.csdn.net/qq_42685050/article/details/81408381
[localhost_8080]: http://localhost:8080
[70]: /images/20220517/0bdfe75c198349c18c925c1425aa8171.png
[Link 1]: https://github.com/sanfenzZ/springboot-mybatis-JPA-