二、springboot+bootstrap搭建演示项目

Spring Boot菜单框架搭建

最新推荐文章于 2025-07-25 11:37:56 发布

原创最新推荐文章于 2025-07-25 11:37:56 发布 · 1.8w 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#springboot+bootstrap

java 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用Spring Boot、Thymeleaf和Bootstrap快速搭建一个菜单框架，包括配置pom.xml文件、设置application.properties参数、编写控制器代码以及实现前端页面布局。

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

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

工程结构如下：

2、配置文件及代码：

pom.xml文件内容如下

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.yu</groupId>
    <artifactId>springBoot</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>springBoot</name>
    <description>Demo project for Spring Boot</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.2.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <!-- 基础组件-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <!-- 测试组件 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        
        <!-- 热部署组件 -->
        <dependency>
            <groupId> org.springframework.boot</groupId>
            <artifactId> spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>
        
        <!-- web支持 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        
        <!-- 模板引擎 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>
        
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                
                <configuration>
                    <fork>true</fork><!-- fork:如果没有该配置，这个devtools不会起作用，即应用不会restart -->
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

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

#指定端口
server.port=8088

#server.session.timeout=10
#server.tomcat.uri-encoding=UTF-8

#配置thymeleaf不做任何缓存
spring.thymeleaf.cache=false

#设置日志的级别
#logging.level.com.yu.demo.controller = debug
#logging.file=logs/sys.log

index.html文件内容如下

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">  
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/bootstrap/sideBar/sideBar.css}"/>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">springboot 演示</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a th:href="@{/hello}">hello示例</a></li>
                </ul>
                <ul class="nav navbar-nav">
                    <li><a th:href="@{/demoView/thymeleaf}">thymeleaf示例</a></li>
                </ul>
                <ul class="nav navbar-nav">
                    <li><a th:href="@{/demoView/freemaker}">freemaker示例</a></li>
                </ul>
            </div>
        </div>
    </nav>

	<div style="margin: 60px 10px 10px;">
	    <a th:href="@{/demoView/index}" >点我点我</a>
	</div>
	
</body>
</html>

controller内容如下

package com.yu.demo.controller;

import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import com.yu.demo.service.IDemoViewService;

@Controller
@RequestMapping("/demoView")
public class DemoViewController {
	
	@Autowired
	IDemoViewService demoViewService;

    @RequestMapping("/thymeleaf")
    public String testThymeleaf(Map<String,Object> map) {
        map.put("msg", "Hello Thymeleaf");
        
        map.put("userList", demoViewService.testThymeleaf());

        return "test_thymeleaf";
    }

    @RequestMapping("/freemaker")
    public String testFreemaker(Map<String,Object> map) {
        map.put("msg", "Hello freemarker!");
        return "test_freemarker";
    }
    
    @RequestMapping("/index")
    public String index() {
        return "test_sidebar";
    }
}

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