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

最新推荐文章于 2022-10-08 22:27:51 发布

sanfenzZ

最新推荐文章于 2022-10-08 22:27:51 发布

阅读量723

点赞数

本文链接：https://blog.csdn.net/qq_42685050/article/details/81409145

版权

本文介绍如何在SpringBoot-Mybatis项目中实现数据库操作的界面化，通过创建HTML页面和利用AJAX或表单提交，实现对数据库的增删改查，提供友好的用户体验。无需修改原有代码，只需在src/main/resource/static目录下创建index.html即可。

摘要由CSDN通过智能技术生成

上一篇----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会执行响应的方法操作数据库