如何把网上下载的前端页面在Spring Boot中跑起来（CSS，JavaScript，程序运行等路径设置）

最新推荐文章于 2024-06-28 16:39:13 发布

IT1995

最新推荐文章于 2024-06-28 16:39:13 发布

阅读量6.1k

点赞数 17

本文链接：https://blog.csdn.net/qq78442761/article/details/89445145

版权

Java 同时被 2 个专栏收录

370 篇文章 20 订阅

订阅专栏

Spring Boot

140 篇文章 4 订阅

订阅专栏

这个功能非常有用，估计99.99%的java web开发者都干过，本人是初学者，特写这个博客记录下！

方便本人以后查阅，方便以后进行投机取巧

这里使用thymeleaf模板引擎！

在网上下载了一个Bootstrap 页面，如下：

把页面复制到Spring Boot中运行：

使用thymeleaf模板引擎修改文件路径后：

这样就达到了投机取巧的功能，

修改下程序运行的路径：

刷新下界面

其中对应源码如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>学生后台登录</title>
  <!-- plugins:css -->
  <link rel="stylesheet" th:href="@{/asserts/vendors/iconfonts/mdi/css/materialdesignicons.min.css}" />
  <link rel="stylesheet" th:href="@{/asserts/vendors/css/vendor.bundle.base.css}" />
  <!-- endinject -->
  <!-- plugin css for this page -->
  <!-- End plugin css for this page -->
  <!-- inject:css -->
  <link rel="stylesheet" th:href="@{/asserts/css/style.css}" />
  <!-- endinject -->
  <link rel="shortcut icon" th:href="@{/asserts/images/favicon.png}" />
</head>

<body>
  <div class="container-scroller">
    <div class="container-fluid page-body-wrapper full-page-wrapper">
      <div class="content-wrapper d-flex align-items-center auth">
        <div class="row w-100">
          <div class="col-lg-4 mx-auto">
            <div class="auth-form-light text-left p-5">
              <div class="brand-logo">
                <img th:src="@{/asserts/images/logo.svg}">
              </div>
              <h4>你好! 这里是学生登录后台界面</h4>
              <h6 class="font-weight-light">继续登录.</h6>
              <form class="pt-3">
                <div class="form-group">
                  <input type="email" class="form-control form-control-lg" id="exampleInputEmail1" placeholder="Username">
                </div>
                <div class="form-group">
                  <input type="password" class="form-control form-control-lg" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div class="mt-3">
                  <a class="btn btn-block btn-gradient-primary btn-lg font-weight-medium auth-form-btn" href="../../index.html">登录</a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <!-- content-wrapper ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <!-- plugins:js -->
  <script th:src="@{/asserts/vendors/js/vendor.bundle.base.js}"></script>
  <script th:src="@{/asserts/vendors/js/vendor.bundle.addons.js}"></script>
  <!-- endinject -->
  <!-- inject:js -->
  <script th:src="@{/asserts/js/off-canvas.js}"></script>
  <script th:src="@{/asserts/js/misc.js}"></script>
  <!-- endinject -->
</body>

</html>

porn.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>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.19.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.loginWebDemo</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>loginWeb</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
        <thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
        <thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</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-starter-web</artifactId>
        </dependency>

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

        <!--引入jquery-webjar-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.3.1</version>
        </dependency>

        <!--引入bootstrap-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>4.0.0</version>
        </dependency>

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

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

    </dependencies>

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

</project>