Springboot2模块系列:thymeleaf+Bootstrap(一)前后端结合--项目结构

1 pom.xml

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2 文件

2.1 Bootstrap文件

下载Bootstrap,放置到静态文件夹static下,文件包括css和js文件,结构如下:

├── static
│   ├── css
│   │   ├── bootstrap.css
│   │   ├── bootstrap.css.map
│   │   ├── bootstrap-grid.css
│   │   ├── bootstrap-grid.css.map
│   │   ├── bootstrap-grid.min.css
│   │   ├── bootstrap-grid.min.css.map
│   │   ├── bootstrap.min.css
│   │   ├── bootstrap.min.css.map
│   │   ├── bootstrap-reboot.css
│   │   ├── bootstrap-reboot.css.map
│   │   ├── bootstrap-reboot.min.css
│   │   ├── bootstrap-reboot.min.css.map
│   │   └── peopleInfos.css
│   ├── js
│   │   ├── bootstrap.bundle.js
│   │   ├── bootstrap.bundle.js.map
│   │   ├── bootstrap.bundle.min.js
│   │   ├── bootstrap.bundle.min.js.map
│   │   ├── bootstrap.js
│   │   ├── bootstrap.js.map
│   │   ├── bootstrap.min.js
│   │   ├── bootstrap.min.js.map
│   │   ├── jquery-3.2.1.js
│   │   ├── jquery-3.2.1.min.js
│   │   ├── jquery-3.4.1.js
│   │   ├── jquery-3.4.1.min.js
│   │   ├── jquery.js
│   │   ├── jquery插件库.url
│   │   ├── sockjs.min.js
│   │   └── stomp.min.js

2.2 界面模板文件

2.2.1 static文件

├── static
│   ├── app.js
│   ├── assets
│   │   ├── brand
│   │   │   ├── bootstrap-outline.svg
│   │   │   └── bootstrap-solid.svg
│   │   └── dist
│   │       ├── css
│   │       └── js
│   ├── chat.html
│   ├── chat.js
│   ├── css
│   │   ├── album
│   │   │   ├── album.css
│   │   │   └── index.html
│   │   ├── blog
│   │   │   ├── blog.css
│   │   │   └── index.html
│   │   ├── bootstrap.css
│   │   ├── bootstrap.css.map
│   │   ├── bootstrap-grid.css
│   │   ├── bootstrap-grid.css.map
│   │   ├── bootstrap-grid.min.css
│   │   ├── bootstrap-grid.min.css.map
│   │   ├── bootstrap.min.css
│   │   ├── bootstrap.min.css.map
│   │   ├── bootstrap-reboot.css
│   │   ├── bootstrap-reboot.css.map
│   │   ├── bootstrap-reboot.min.css
│   │   ├── bootstrap-reboot.min.css.map
│   │   ├── dashboard
│   │   │   ├── dashboard.css
│   │   │   ├── dashboard.js
│   │   │   └── index.html
│   │   ├── datasshow
│   │   │   └── datasshow.css
│   │   ├── sign-in
│   │   │   └── signin.css
│   │   └── user-info
│   │       └── userinfo.css
│   ├── js
│   │   ├── bootstrap.bundle.js
│   │   ├── bootstrap.bundle.js.map
│   │   ├── bootstrap.bundle.min.js
│   │   ├── bootstrap.bundle.min.js.map
│   │   ├── bootstrap.js
│   │   ├── bootstrap.js.map
│   │   ├── bootstrap.min.js
│   │   ├── bootstrap.min.js.map
│   │   ├── datasshow
│   │   │   └── dashboard.js
│   │   ├── jquery-3.2.1.js
│   │   ├── jquery-3.2.1.min.js
│   │   ├── jquery-3.4.1.js
│   │   ├── jquery-3.4.1.min.js
│   │   ├── jquery.js
│   │   ├── jquery插件库.url
│   │   ├── sockjs.min.js
│   │   ├── stomp.min.js
│   │   └── user-info
│   │       └── userinfo.js
│   ├── sign-in
│   │   ├── index.html
│   │   └── signin.css

2.2.2 templates文件

使用Thymeleaf模块,将前端页面放置在templates文件夹下,文件结构如下:

└── templates
    ├── datasshow
    │   └── index.html
    ├── sign-in
    │   ├── index.html

3 项目结构

├── micros-user
│   ├── logs
│   │   ├── error.log
│   │   └── info.log
│   ├── pom.xml
│   ├── sqltools_20200512090140_17607.log
│   ├── src
│   │   └── main
│   │       ├── java
│   │       │   └── com
│   │       │       └── company
│   │       │           └── web
│   │       │               ├── config
│   │       │               │   ├── AuthorizationServerConfig.java
│   │       │               │   ├── ResourceServerConfig.java
│   │       │               │   ├── StaticResourcesLoadConfig.java
│   │       │               │   └── WebSecurityConfig.java
│   │       │               ├── controller
│   │       │               │   ├── AjaxController.java
│   │       │               │   ├── AnswersController.java
│   │       │               │   ├── ExchangeDataController.java
│   │       │               │   ├── ExchangeData.java
│   │       │               │   ├── PageController.java
│   │       │               │   ├── PageInterceptController.java
│   │       │               │   ├── QuestionsController.java
│   │       │               │   └── TokenByRedisController.java
│   │       │               ├── InitiApplication.java
│   │       │               ├── mapper
│   │       │               │   ├── AnswersMapper.java
│   │       │               │   ├── AnswersMapper.xml
│   │       │               │   ├── QuestionsMapper.java
│   │       │               │   ├── QuestionsMapper.xml
│   │       │               │   ├── UserInfosMapper.java
│   │       │               │   └── UserInfosMapper.xml
│   │       │               ├── po
│   │       │               │   ├── Answers.java
│   │       │               │   ├── Questions.java
│   │       │               │   └── UserInfos.java
│   │       │               ├── service
│   │       │               │   ├── AnswersService.java
│   │       │               │   ├── QuestionsService.java
│   │       │               │   └── UserInfosService.java
│   │       │               └── util
│   │       │                   ├── http
│   │       │                   └── https
│   │       ├── resources
│   │       │   ├── application-dev.yml
│   │       │   ├── application.yml
│   │       │   ├── config
│   │       │   │   ├── logback.xml
│   │       │   │   └── mybatis-config.xml
│   │       │   ├── jar
│   │       │   ├── sql
│   │       │   │   └── data.sql
│   │       │   ├── ssl-pre
│   │       │   ├── ssl-rc
│   │       │   ├── ssl-test
│   │       │   ├── static
│   │       │   │   ├── app.js
│   │       │   │   ├── assets
│   │       │   │   │   ├── brand
│   │       │   │   │   │   ├── bootstrap-outline.svg
│   │       │   │   │   │   └── bootstrap-solid.svg
│   │       │   │   │   └── dist
│   │       │   │   │       ├── css
│   │       │   │   │       │   ├── bootstrap.css
│   │       │   │   │       │   ├── bootstrap.css.map
│   │       │   │   │       │   ├── bootstrap-grid.css
│   │       │   │   │       │   ├── bootstrap-grid.css.map
│   │       │   │   │       │   ├── bootstrap-grid.min.css
│   │       │   │   │       │   ├── bootstrap-grid.min.css.map
│   │       │   │   │       │   ├── bootstrap.min.css
│   │       │   │   │       │   ├── bootstrap.min.css.map
│   │       │   │   │       │   ├── bootstrap-reboot.css
│   │       │   │   │       │   ├── bootstrap-reboot.css.map
│   │       │   │   │       │   ├── bootstrap-reboot.min.css
│   │       │   │   │       │   └── bootstrap-reboot.min.css.map
│   │       │   │   │       └── js
│   │       │   │   │           ├── bootstrap.bundle.js
│   │       │   │   │           ├── bootstrap.bundle.js.map
│   │       │   │   │           ├── bootstrap.bundle.min.js
│   │       │   │   │           ├── bootstrap.bundle.min.js.map
│   │       │   │   │           ├── bootstrap.js
│   │       │   │   │           ├── bootstrap.js.map
│   │       │   │   │           ├── bootstrap.min.js
│   │       │   │   │           └── bootstrap.min.js.map
│   │       │   │   ├── css
│   │       │   │   │   ├── bootstrap.css
│   │       │   │   │   ├── bootstrap.css.map
│   │       │   │   │   ├── bootstrap-grid.css
│   │       │   │   │   ├── bootstrap-grid.css.map
│   │       │   │   │   ├── bootstrap-grid.min.css
│   │       │   │   │   ├── bootstrap-grid.min.css.map
│   │       │   │   │   ├── bootstrap.min.css
│   │       │   │   │   ├── bootstrap.min.css.map
│   │       │   │   │   ├── bootstrap-reboot.css
│   │       │   │   │   ├── bootstrap-reboot.css.map
│   │       │   │   │   ├── bootstrap-reboot.min.css
│   │       │   │   │   ├── bootstrap-reboot.min.css.map
│   │       │   │   │   ├── dashboard
│   │       │   │   │   │   ├── dashboard.css
│   │       │   │   │   │   ├── dashboard.js
│   │       │   │   │   │   └── index.html
│   │       │   │   │   ├── datasshow
│   │       │   │   │   │   └── datasshow.css
│   │       │   │   │   ├── sign-in
│   │       │   │   │   │   └── signin.css
│   │       │   │   │   └── user-info
│   │       │   │   │       └── userinfo.css
│   │       │   │   ├── js
│   │       │   │   │   ├── bootstrap.bundle.js
│   │       │   │   │   ├── bootstrap.bundle.js.map
│   │       │   │   │   ├── bootstrap.bundle.min.js
│   │       │   │   │   ├── bootstrap.bundle.min.js.map
│   │       │   │   │   ├── bootstrap.js
│   │       │   │   │   ├── bootstrap.js.map
│   │       │   │   │   ├── bootstrap.min.js
│   │       │   │   │   ├── bootstrap.min.js.map
│   │       │   │   │   ├── datasshow
│   │       │   │   │   │   └── dashboard.js
│   │       │   │   │   ├── jquery-3.2.1.js
│   │       │   │   │   ├── jquery-3.2.1.min.js
│   │       │   │   │   ├── jquery-3.4.1.js
│   │       │   │   │   ├── jquery-3.4.1.min.js
│   │       │   │   │   ├── jquery.js
│   │       │   │   │   ├── jquery插件库.url
│   │       │   │   │   ├── sockjs.min.js
│   │       │   │   │   ├── stomp.min.js
│   │       │   │   │   └── user-info
│   │       │   │   │       └── userinfo.js
│   │       │   │   ├── sign-in
│   │       │   │   │   ├── index.html
│   │       │   │   │   └── signin.css
│   │       │   └── templates
│   │       │       ├── datasshow
│   │       │       │   └── index.html
│   │       │       ├── sign-in
│   │       │       │   └── index.html
│   │       └── webapp
│   │           ├── index.jsp
│   │           └── WEB-INF
│   │               └── web.xml

【参考文献】
[1]https://getbootstrap.com/docs/4.5/getting-started/download/
[2]https://www.runoob.com/bootstrap/bootstrap-environment-setup.html
[3]https://www.cnblogs.com/lanxuan826/p/11221603.html
[4]https://www.cnblogs.com/hfultrastrong/p/8583874.html
[5]https://blog.csdn.net/qq_40058321/article/details/98478488
[6]https://blog.csdn.net/yelllowcong/article/details/79830468
[7]https://blog.csdn.net/u010999809/article/details/80726248
[8]https://www.pianshen.com/article/1066405203/

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天然玩家

坚持才能做到极致

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值