SpringBoot增删改查页面代码（二）

后续我用了高版本的MySQL，application.properties里面为（用8.0MySQL的可以改成下面的配置，没有用8.0的话，就不用改配置）：

#扫描实体类
mybatis.type-aliases-package=com.example.entity
#扫描映射文件
mybatis.mapper-locations: classpath:mapper/*.xml

#配置数据库
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test?seUnicode=true&characterEncoding=UTF-8&useSSL=false&autoReconnect=true&failOverReadOnly=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root

#过滤静态资源
spring.mvc.static-path-pattern=/**

#指定系统直接访问路径
spring.resources.static-locations = classpath:/templates/,classpath:/META-INF/resources/,classpath:/resources/
#热部署：修改后台文件保存后自动重启
#spring.devtools.restart.enabled=true

#Messages资源信息
#spring.messages.basename=messages

#关闭thymeleaf缓存 开发时使用 否则没有实时画面
spring.thymeleaf.cache=false

1.在templates文件夹下user文件夹，修改userList.html文件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>用户列表</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"></link>
</head>
<body class="container">
<br/>
<h1>用户列表</h1>
<br/><br/>
<div class="with:80%">


    <table class="table table-hover">
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>编辑</th>
            <th>删除</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user : ${users}">
            <th scope="row" th:text="${user.id}"></th>
            <td th:text="${user.name}"></td>
            <td th:text="${user.age}"></td>
            <td><a th:href="@{/toEdit(id=${user.id})}">编辑</a></td>
            <td><a th:href="@{/delete(id=${user.id})}">删除</a></td>
        </tr>

        </tbody>
    </table>
</div>
<div class="form-group">
    <div class="col-sm-2 control-label">
        <a href="/toAdd" th:href="@{/toAdd}" class="btn btn-info">增加</a>
    </div>
</div>

</body>
</html>

2.在同个目录下，新建userAdd.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>添加用户</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"></link>
</head>
<body class="container">
<br/>
<h1>添加用户</h1>
<br/><br/>
<div class="with:80%">
    <form class="form-horizontal" th:action="@{/add}" method="post">
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="name" id="name" placeholder="name"/>
            </div>
        </div>


        <div class="form-group">
            <label for="age" class="col-sm-2 control-label">年龄</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="age" id="age" placeholder="age"/>
            </div>
        </div>


        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" value="确定" class="btn btn-info"/>
                &nbsp; &nbsp; &nbsp;
                <input type="reset" value="重置" class="btn btn-info"/>
                <a href="/toAdd" th:href="@{/}" class="btn btn-info">返回</a>
            </div>

        </div>
    </form>
</div>
</body>
</html>

3.新建userEdit.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>修改用户</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"></link>
</head>
<body class="container">
<br/>
<h1>修改用户</h1>
<br/><br/>
<div class="with:80%">
    <form  class="form-horizontal" th:action="@{/edit}" th:object="${user}" method="post">
        <input type="hidden" name="id" th:value="*{id}"/>
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">name</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="name" id="name" th:value="*{name}" placeholder="name"/>
            </div>
        </div>

        <div class="form-group">
            <label for="age" class="col-sm-2 control-label">age</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="age" id="age" th:value="*{age}" placeholder="age"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" value="确定" class="btn btn-info"/>
                &nbsp; &nbsp; &nbsp;
                <a href="/toAdd" th:href="@{/}" class="btn btn-info">返回</a>
            </div>

        </div>
    </form>

</div>
</body>
</html>

至此，基于SpringBoot的增删改查项目就已经完成了，后续会陆续完善功能

posted @ 2019-04-25 00:54  暗影月色程序猿  阅读(110)  评论(0)  编辑  收藏  举报