springboot 集成前端html+bootstrap_springboot+html-CSDN博客

本文链接：https://blog.csdn.net/zh_9590/article/details/107686047

最近由于开发需求，需要写一些半自动化接口，需要单开工程仅供运维使用，所以又要回过头熟悉下前端技术，做个笔记记录，方便后续查询使用。

1、环境简要介绍下

版本不是很严格，主要就是看自己需求来实际的选择进行。

springboot版本：2.2.9

bootstrap版本：3.3.7

jquery版本： 1.12.4

2、部分代码

pom文件：

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.2.9.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.zh.boot</groupId>
	<artifactId>zh-boot</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>zh-boot</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<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>
			<exclusions>
				<exclusion>
					<groupId>org.junit.vintage</groupId>
					<artifactId>junit-vintage-engine</artifactId>
				</exclusion>
			</exclusions>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-web -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>fastjson</artifactId>
			<version>1.2.70</version>
		</dependency>

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

		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>bootstrap</artifactId>
			<version>3.3.7</version>
		</dependency>

		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>jquery</artifactId>
			<version>1.12.4</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.webjars/webjars-locator -->
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>webjars-locator</artifactId>
			<version>0.32</version>
		</dependency>

	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>

			<!-- maven打包忽略test类 -->
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-surefire-plugin</artifactId>
				<version>2.22.2</version>
				<configuration>
					<skipTests>true</skipTests>
				</configuration>
			</plugin>

		</plugins>
	</build>

</project>

application.yml文件

server:
  port: 8080

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    check-template-location: true
    cache: false
    mode: HTML5
    encoding: utf-8

一个入口controller类

package com.zh.boot.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

/**
 * @author : Lu Ma Ren
 * @Date: 2020/6/1 16:00
 * @Description: V-
 */
@SuppressWarnings("all")
@Controller
@RequestMapping(value = "/auto")
public class AutoInterfaceController {

    @GetMapping(value = "/main")
    public ModelAndView intoMainPage() {
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("main");

        modelAndView.addObject("param1", "我第一个参数");
        modelAndView.addObject("param2", "我第二个参数");
        modelAndView.addObject("param3", "success");
        return modelAndView;
    }

}

html界面：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <link href="./webjars/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="./webjars/jquery/1.12.4/jquery.min.js"></script>
    <script src="./webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <meta charset="UTF-8">
    <title>SpringBoot+Html+Bootstrap</title>
</head>
<body>
<div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#home" aria-controls="home" role="tab" data-toggle="tab">创建内容模板</a>
        </li>
        <li role="presentation">
            <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">创建Model</a>
        </li>
        <li role="presentation">
            <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">管理历史记录</a>
        </li>
        <li role="presentation">
            <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">待定开发</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content" style="margin-outside: 10px">

        <div role="tabpanel" class="tab-pane active" id="home">
            第一个tab页
        </div>
        <div role="tabpanel" class="tab-pane" id="profile">
            <p th:text="${param1}"></p>
        </div>
        <div role="tabpanel" class="tab-pane" id="messages">
            <p th:text="${param2}"></p>
        </div>
        <div role="tabpanel" class="tab-pane" id="settings">
            <p th:text="${param3}"></p>
        </div>
    </div>

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

这块有个深坑：就是路径问题，所以建议直接写绝对路径

启动项目，访问地址：

这样就得到结果了，不过还是要验证下最终包资源问题，浏览开发者工具打开就可以看到结果