版本说明：
代码地址：https://gitee.com/joy521125/ssm-senior.git thymeleaf分支；
基于https://gitee.com/joy521125/ssm-senior.git master分支修改而来；
1.加入jar包：
1 <dependency> 2 <groupId>org.thymeleaf</groupId> 3 <artifactId>thymeleaf</artifactId> 4 <version>3.1.1.RELEASE</version> 5 </dependency> 6 <dependency> 7 <groupId>org.thymeleaf</groupId> 8 <artifactId>thymeleaf-spring5</artifactId> 9 <version>3.1.1.RELEASE</version> 10 </dependency>
需要修改 core下面的jackson的版本：
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.14.2</version>
</dependency>
需要修改web下jetty的版本：
<properties>
<jettyVersion>9.4.9.v20180320</jettyVersion>
</properties>
2.配置视图解析器：
文档地址：https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html#the-springstandard-dialect
1 <bean id="templateResolver" class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver"> 2 <property name="prefix" value="/WEB-INF/views/" /> 3 <property name="suffix" value=".html" /> 4 <property name="characterEncoding" value="UTF-8"/> 5 </bean> 6 7 <bean id="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine"> 8 <property name="templateResolver" ref="templateResolver" /> 9 <property name="enableSpringELCompiler" value="true" /> 10 </bean> 11 <bean class="org.thymeleaf.spring5.view.ThymeleafViewResolver"> 12 <property name="templateEngine" ref="templateEngine" /> 13 <property name="characterEncoding" value="UTF-8"/> 14 <!-- NOTE 'order' and 'viewNames' are optional --> 15 </bean>
index.html:
属性赋值：https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html#setting-attribute-values
<input type="button" class="page" th:attr="value=${item}">
<input type="hidden" th:attr="value=${item}">
1 <!DOCTYPE html>
2 <html xmlns:th="http://www.thymeleaf.org" >
3 <head>
4 <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
5 <meta charset="UTF-8">
6 <title th:text="#{EMPLOYEE.LIST}"></title>
7 </head>
8 <body>
9 <input type="button" value="添加" id="add">
10 <table>
11 <tr>
12 <td>id</td>
13 <td th:text="#{EMPLOYEE.LASTNAME}"></td>
14 <td th:text="#{EMPLOYEE.EMAIL}"></td>
15 <td th:text="#{EMPLOYEE.GENDER}"></td>
16 <td th:text="#{SYS.OPERATE}"></td>
17 </tr>
18 <tr class="row" th:each="item : ${pages.list}">
19 <td th:text="${item.id}"></td>
20 <td th:text="${item.lastName}"></td>
21 <td th:text="${item.email}"></td>
22 <td th:text="${item.gender}"></td>
23 <td > <input type="button" th:attr="value=#{SYS.EDIT}" class="editRow">
24 <!--属性设置：https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html#setting-attribute-values -->
25 <input type="hidden" th:attr="value=${item.id}"/>
26 </td>
27 <td > <input type="button" th:attr="value=#{SYS.DETAIL}" class="detailRow">
28 <input type="hidden" th:attr="value=${item.id}"/>
29 </td>
30 </tr>
31 </table>
32 <p>
33 <th:block th:if="${pages.hasPreviousPage}">
34 <input type="button" class="page" value="前一页"/>
35 <input type="hidden" th:attr="value=${pages.prePage}">
36 </th:block>
37 <th:block th:each="item : ${pages.navigatepageNums}">
38 <th:block th:if="${item==pages.pageNum}">
39 <input type="button" class="page" style="color: red" th:attr="value=${item}">
40 </th:block>
41 <th:block th:if="${item!=pages.pageNum}">
42 <input type="button" class="page" th:attr="value=${item}">
43 </th:block>
44 <input type="hidden" th:attr="value=${item}">
45 </th:block>
46 <th:block th:if="${pages.hasNextPage}">
47 <input type="button" class="page" value="下一页"/>
48 <input type="hidden" th:attr="value=${pages.nextPage}">
49 </th:block>
50 <input type="hidden" id="pageNum" th:attr="value=${pages.pageNum}"> <input
51 type="hidden" id="pageSize" th:attr="value=${pages.pageSize}">
52 </p>
53 </body>
54 <script>
55 function getContextPath() {
56 var pathName = document.location.pathname;
57 var index = pathName.substr(1).indexOf("/");
58 var result = pathName.substr(0, index + 1);
59 return result;
60 }
61 $(function() {
62 var baseUrl = getContextPath();
63 $(".page").each(function() {
64 $(this).click(function() {
65 var pageNum = $(this).next().val();
66 var pageSize = 5;
67 window.location = baseUrl+"/emp/list?pageNum="
68 + pageNum
69 + "&pageSize="
70 + pageSize;
71 })
72 });
73 $("#add").click(function(){
74 window.location = baseUrl+"/emp/add"
75 })
76 $(".editRow").each(function(){
77 $(this).click(function(){
78 var id = $(this).next().val();
79 window.location = "edit/"+id
80 })
81 })
82 $(".detailRow").each(function(){
83 $(this).click(function(){
84 var id = $(this).next().val();
85 $.get(baseUrl+"/emp/detail/"+id,function(data){
86 if(data.code == 200){
87 data = data.context.data;
88 alert("姓名："+data.lastName+",邮箱："+data.email+",性别："+data.gender);
89 }
90
91 })
92
93 })
94 })
95
96 })
97 </script>
98 </html>
View Code
add.html:
1 <!DOCTYPE html>
2 <html xmlns:th="http://www.thymeleaf.org" >
3 <head>
4 <script th:src="@{/js/jquery.min.js}"></script>
5 <meta charset="UTF-8">
6 <title th:text="#{EMPLOYEE.EDIT}"></title>
7 </head>
8 <body>
9 <form action="#">
10 <th:block th:text="#{EMPLOYEE.LASTNAME}"></th:block>：<input type="text" name="lastName" /><br>
11 <th:block th:text="#{EMPLOYEE.EMAIL}"></th:block>：<input type="text" name="email" /><br>
12 <th:block th:text="#{EMPLOYEE.GENDER}"></th:block>：男<input type="radio" name="gender" value="男"/> 女<input type="radio" name="gender" value="女"/><br>
13 <input type="submit" id="submit" th:attr="value=#{SYS.SUBMIT}">
14 </form>
15 </body>
16 <script>
17 function getContextPath() {
18 var pathName = document.location.pathname;
19 var index = pathName.substr(1).indexOf("/");
20 var result = pathName.substr(0, index + 1);
21 return result;
22 }
23 $(function(){
24 var baseUrl = getContextPath();
25 var gender = '${employee.gender}';
26 $("#submit").click(function(){
27 var array = $("form").serializeArray();
28 var json = {};
29 for(var i=0;i<array.length;i++){
30 json[array[i].name] = array[i].value;
31 }
32 json = JSON.stringify(json);
33 $.ajax({
34 type: 'post',
35 url: baseUrl+'/emp/save',
36 data: json,//必须是字符串
37 contentType:"application/json;charset=utf-8",
38 success: function(data) {
39 if(data.code == 200){
40 window.location.href=baseUrl+"/emp/list";
41 return true;
42 }else{
43 alert(data.msg);
44 }
45 }
46 });
47 return false;
48 })
49
50
51 })
52 </script>
53 </html>
View Code
update.html：
取值方式：https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html#javascript-inlining
var gender = '[[${employee.gender}]]';
1 <!DOCTYPE html>
2 <html xmlns:th="http://www.thymeleaf.org" >
3 <head>
4 <script th:src="@{/js/jquery.min.js}"></script>
5 <meta charset="UTF-8">
6 <title th:text="#{EMPLOYEE.EDIT}"></title>
7 </head>
8 <body>
9 <form>
10 <th:block th:text="#{EMPLOYEE.LASTNAME}"></th:block>：<input type="text" name="lastName" th:attr="value=${employee.lastName}"/><br>
11 <th:block th:text="#{EMPLOYEE.EMAIL}"></th:block>：<input type="text" name="email" th:attr="value=${employee.email}"/><br>
12 <th:block th:text="#{EMPLOYEE.GENDER}"></th:block>：男<input type="radio" name="gender" value="男"/> 女<input type="radio" name="gender" value="女"/><br>
13 <input type="submit" id="submit" th:attr="value=#{SYS.SUBMIT}">
14 <input type="hidden" name="id" th:attr="value=${employee.id}" id="employeeId">
15
16 </form>
17 </body>
18 <script>
19 function getContextPath() {
20 var pathName = document.location.pathname;
21 var index = pathName.substr(1).indexOf("/");
22 var result = pathName.substr(0, index + 1);
23 return result;
24 }
25 $(function(){
26 var baseUrl = getContextPath();
27 //取值方式：https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html#javascript-inlining
28 var gender = '[[${employee.gender}]]';
29 debugger
30 if(!!gender ){
31 if(gender == "男"){
32 $('input:radio[name="gender"]:first').attr("checked","checked");
33 }
34 if(gender == "女"){
35 $('input:radio[name="gender"]:last').attr("checked","checked");
36 }
37 }
38 $("#submit").click(function(){
39 var array = $("form").serializeArray();
40 var json = {};
41 for(var i=0;i<array.length;i++){
42 json[array[i].name] = array[i].value;
43 }
44 json = JSON.stringify(json);
45 $.ajax({
46 type: 'put',
47 url: baseUrl+'/emp/update',
48 data: json,//必须是字符串
49 contentType:"application/json;charset=utf-8",
50 success: function(data) {
51 if(data.code == 200){
52 window.location.href= baseUrl+"/emp/list";
53 return true;
54 }else{
55 alert(data.msg);
56 }
57 }
58 });
59 return false;
60 })
61
62 })
63 </script>
64 </html>
View Code
sql:
DROP TABLE IF EXISTS `tbl_employee`; CREATE TABLE `tbl_employee` ( `ID` int NOT NULL AUTO_INCREMENT, `d_id` int NULL DEFAULT NULL, `last_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL, `phone_no` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL, `gender` char(1) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL, `email` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL, `IS_DELETED` char(1) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT 'N' COMMENT '删除标志位', `CREATOR` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '创建者', `MODIFIER` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '修改者', `CREATE_DATE` datetime NULL DEFAULT NULL COMMENT '创建时间', `MODIFY_DATE` datetime NULL DEFAULT NULL COMMENT '修改时间', PRIMARY KEY (`ID`) USING BTREE ) ENGINE = InnoDB AUTO_INCREMENT = 21 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic; SET FOREIGN_KEY_CHECKS = 1;View Code
效果图：
标签：function,helloword,utf8mb4,springmvc,gender,thymeleaf,var,NULL From： https://www.cnblogs.com/lixiuming521125/p/17177803.html