SpringBoot+BootStrap搭建演示项目

朱雀 2022-05-08 02:46 217阅读 0赞

1、工程目录结构及功能简要说明：

首先，该文章目的主要是记录自己学习过程，遇到的问题的一些总结，用thymelea模板f和bootstrap等搭建一个菜单框架。

工程结构如下：

![20180531100630608][]

2、配置文件及代码：

pom.xml文件内容如下

1.  `<?xml version="1.0" encoding="UTF-8"?>`
2.  `<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"`
3.  `xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">`
4.  `<modelVersion>4.0.0</modelVersion>`
5.   
6.  `<groupId>com.yu</groupId>`
7.  `<artifactId>springBoot</artifactId>`
8.  `<version>0.0.1-SNAPSHOT</version>`
9.  `<packaging>jar</packaging>`
10.  
11. `<name>springBoot</name>`
12. `<description>Demo project for Spring Boot</description>`
13.  
14. `<parent>`
15. `<groupId>org.springframework.boot</groupId>`
16. `<artifactId>spring-boot-starter-parent</artifactId>`
17. `<version>2.0.2.RELEASE</version>`
18. `<relativePath/> `
19. `</parent>`
20.  
21. `<properties>`
22. `<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>`
23. `<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>`
24. `<java.version>1.8</java.version>`
25. `</properties>`
26.  
27. `<dependencies>`
28. ``
29. `<dependency>`
30. `<groupId>org.springframework.boot</groupId>`
31. `<artifactId>spring-boot-starter</artifactId>`
32. `</dependency>`
33.  
34. ``
35. `<dependency>`
36. `<groupId>org.springframework.boot</groupId>`
37. `<artifactId>spring-boot-starter-test</artifactId>`
38. `<scope>test</scope>`
39. `</dependency>`
40.  
41. ``
42. `<dependency>`
43. `<groupId> org.springframework.boot</groupId>`
44. `<artifactId> spring-boot-devtools</artifactId>`
45. `<optional>true</optional>`
46. `</dependency>`
47.  
48. ``
49. `<dependency>`
50. `<groupId>org.springframework.boot</groupId>`
51. `<artifactId>spring-boot-starter-web</artifactId>`
52. `</dependency>`
53.  
54. ``
55. `<dependency>`
56. `<groupId>org.springframework.boot</groupId>`
57. `<artifactId>spring-boot-starter-thymeleaf</artifactId>`
58. `</dependency>`
59. `<dependency>`
60. `<groupId>org.springframework.boot</groupId>`
61. `<artifactId>spring-boot-starter-freemarker</artifactId>`
62. `</dependency>`
63.  
64. `</dependencies>`
65.  
66. `<build>`
67. `<plugins>`
68. `<plugin>`
69. `<groupId>org.springframework.boot</groupId>`
70. `<artifactId>spring-boot-maven-plugin</artifactId>`
71.  
72. `<configuration>`
73. `<fork>true</fork>`
74. `</configuration>`
75. `</plugin>`
76. `</plugins>`
77. `</build>`
78.  
79. `</project>`

application.properties文件内容，这里配置简单，其他都是用默认配置

1.  `#指定端口`
2.  `server.port=8088`
3.   
4.  `#server.session.timeout=10`
5.  `#server.tomcat.uri-encoding=UTF-8`
6.   
7.  `#配置thymeleaf不做任何缓存`
8.  `spring.thymeleaf.cache=false`
9.   
10. `#设置日志的级别`
11. `#logging.level.com.yu.demo.controller = debug`
12. `#logging.file=logs/sys.log`
13.

index.html文件内容如下

1.  `<!DOCTYPE html>`
2.  `<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"`
3.  `xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">`
4.  `<head>`
5.  `<meta charset="utf-8" />`
6.  `<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}"/>`
7.  `<link rel="stylesheet" th:href="@{/bootstrap/sideBar/sideBar.css}"/>`
8.  `</head>`
9.  `<body>`
10. `<nav class="navbar navbar-inverse navbar-fixed-top">`
11. `<div class="container">`
12. `<div class="navbar-header">`
13. `<a class="navbar-brand" href="#">springboot 演示</a>`
14. `</div>`
15. `<div id="navbar" class="collapse navbar-collapse">`
16. `<ul class="nav navbar-nav">`
17. `<li><a th:href="@{/hello}">hello示例</a></li>`
18. `</ul>`
19. `<ul class="nav navbar-nav">`
20. `<li><a th:href="@{/demoView/thymeleaf}">thymeleaf示例</a></li>`
21. `</ul>`
22. `<ul class="nav navbar-nav">`
23. `<li><a th:href="@{/demoView/freemaker}">freemaker示例</a></li>`
24. `</ul>`
25. `</div>`
26. `</div>`
27. `</nav>`
28.  
29. `<div style="margin: 60px 10px 10px;">`
30. `<a th:href="@{/demoView/index}" >点我点我</a>`
31. `</div>`
32.  
33. `</body>`
34. `</html>`

controller内容如下

`package com.yu.demo.controller;`

1.   
2.  `import java.util.Map;`
3.   
4.  `import org.springframework.beans.factory.annotation.Autowired;`
5.  `import org.springframework.stereotype.Controller;`
6.  `import org.springframework.web.bind.annotation.RequestMapping;`
7.   
8.  `import com.yu.demo.service.IDemoViewService;`
9.   
10. `@Controller`
11. `@RequestMapping("/demoView")`
12. `public class DemoViewController {`
13.  
14. `@Autowired`
15. `IDemoViewService demoViewService;`
16.  
17. `@RequestMapping("/thymeleaf")`
18. `public String testThymeleaf(Map<String,Object> map) {`
19. `map.put("msg", "Hello Thymeleaf");`
20.  
21. `map.put("userList", demoViewService.testThymeleaf());`
22.  
23. `return "test_thymeleaf";`
24. `}`
25.  
26. `@RequestMapping("/freemaker")`
27. `public String testFreemaker(Map<String,Object> map) {`
28. `map.put("msg", "Hello freemarker!");`
29. `return "test_freemarker";`
30. `}`
31.  
32. `@RequestMapping("/index")`
33. `public String index() {`
34. `return "test_sidebar";`
35. `}`
36. `}`

3、效果展示：  
(1)初始化页面

![20180531101703842][]

(2)点击“点我点我”，效果如下（该页面参考sidebar）

![20180531102231467][]

[20180531100630608]: /images/20220508/3be0b96de9af49c5b987f3f568da46e5.png
[20180531101703842]: /images/20220508/23fdca493aee45e495d74561ede68a86.png
[20180531102231467]: /images/20220508/70cb328351544b5da9ee3fb547f33780.png