本人主要做的是java，但是从第一份工作开始，就一直在做一个写前端又写后端的程序员，相信很多朋友和我一样，不仅要会后台代码，还要懂得很多的前端代码，例如javascipt和css样式。

本文就为大家简单介绍一下SpringBoot如何结合前端代码。

SpringBoot结合前端有很多种方法，比如在static里面直接加入css或js，又或者引入webjars，以jar包的形式加入项目，本文就是简单介绍一下这种方式。

话不多说，直接引入代码，还是新建一个SpringBoot Web项目。然后在pom文件引入webjars的jar，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 http://maven.apache.org/xsd/maven-4.0.0.xsd">

	<modelVersion>4.0.0</modelVersion>

	<groupId>com.dalaoyang</groupId>

	<artifactId>springboot_webjars</artifactId>

	<version>0.0.1-SNAPSHOT</version>

	<packaging>jar</packaging>

	<name>springboot_webjars</name>

	<description>springboot_webjars</description>

	<parent>

		<groupId>org.springframework.boot</groupId>

		<artifactId>spring-boot-starter-parent</artifactId>

		<version>1.5.9.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-web</artifactId>

		</dependency>

		<dependency>

			<groupId>org.springframework.boot</groupId>

			<artifactId>spring-boot-devtools</artifactId>

			<scope>runtime</scope>

		</dependency>

		<dependency>

			<groupId>org.springframework.boot</groupId>

			<artifactId>spring-boot-starter-test</artifactId>

			<scope>test</scope>

		</dependency>

       <!-- 引用bootstrap -->

		<dependency>

			<groupId>org.webjars</groupId>

			<artifactId>bootstrap</artifactId>

			<version>3.3.7-1</version>

		</dependency>

		<!-- 引用jquery -->

		<dependency>

			<groupId>org.webjars</groupId>

			<artifactId>jquery</artifactId>

			<version>3.1.1</version>

		</dependency>

	</dependencies>

	<build>

		<plugins>

			<plugin>

				<groupId>org.springframework.boot</groupId>

				<artifactId>spring-boot-maven-plugin</artifactId>

			</plugin>

		</plugins>

	</build>

</project>

然后我们观察一下项目的依赖jar包，依赖中就有了bootstrap.jar和jquery.jar

然后在src/main/resources/static文件下新建index.html，代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Dalaoyang</title>

    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" />

    <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>

    <script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container"><br/>

    <div class="alert alert-success">

        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>

        Hello, <strong>Dalaoyang!</strong>

    </div>

</div>

</body>

</html>

至此配置已经结束，启动项目，访问http://localhost:8888/

至此SpringBoot结合WebJars成功就完成。

源码下载 ：大老杨码云

SpringBoot使用WebJars的更多相关文章

  1. SpringBoot第十集：i18n与Webjars的应用（2020最新最易懂）

    SpringBoot第十集:i18n与Webjars的应用(2020最新最易懂) 一,页面国际化 i18n(其来源是英文单词 internationalization的首末字符i和n,18为中间的字符 ...

  2. SpringBoot学习历程

    新年新气象,更新了一下本人所有写的关于SpringBoot的文章目录,感谢大家长期以来的支持,在接下来的日子还会不定期的进行更新. 入门 使用IntelliJ Idea新建SpringBoot项目 S ...

  3. 7.SpringBoot 之 Web

    添加资源处理 package org.springframework.boot.autoconfigure.web.servlet. public class WebMvcAutoConfigurat ...

  4. SpringBoot源码学习系列之SpringMVC自动配置

    目录 1.ContentNegotiatingViewResolver 2.静态资源 3.自动注册 Converter, GenericConverter, and Formatter beans. ...

  5. SpringBoot布道系列 | 目录汇总 | 2019持续更新ing

    SpringBoot 基础教程 | 三大推荐理由 1.文章内容均为原创,结合官方文档和实战经验编写. 2.文章结构经过细致整理,对新人学习更加友好. 3.精选常用技术,不求全面,但求精华!! Spri ...

  6. SpringBoot | 第十八章：web应用开发之WebJars使用

    前言 前面一章节我们主要讲解了关于文件上传的两种方式.本章节继续web开发的相关知识点.通常对于web开发而言,像js.css.images等静态资源版本管理是比较混乱的,比如Jquery.Boots ...

  7. Springboot访问静态资源&WebJars&图标&欢迎页面

    目录 概述 1.访问WebJar资源 2.访问静态资源 3.favicon.ico图标 4.欢迎页面 概述 使用Springboot进行web开发时,boot底层实际用的就是springmvc,项目中 ...

  8. SpringBoot 基于web应用开发(请求参数获取，静态资源，webjars)

    SpringBoot 基于web应用开发 一.Lombok使用 1.导入依赖库 <dependency>    <groupId>org.projectlombok</g ...

  9. webjars和springboot热启动

    webjars WebJars将Web前端Javascript和CSS等资源打包成Java的Jar包, 以便能使Maven的依赖管理支持静态JavaScript库/CSS库,比如jQuery.layu ...

随机推荐

  1. day05流程控制while循环 流程控制for循环

    1.什么是循环:循环就是重复做某事 2.为何要有循环:为了计算机能够具备人重复做某事的能力 3,.如何用循环: 1.结束while循环的两种方法:1.修改条件:等到下一次循环开始时判断,条件为假才会结 ...

  2. Layer-level的快速算法

    十岁的小男孩 本文为终端移植的一个小章节. Sparse Block Net 本节为优化加速的第二章节,主要介绍Sparse-block net.上章节为OP算子层的加速,本节为层级间的加速,主要针对 ...

  3. Niagara workbench 介绍文档---翻译

    一. 发现在建立station的时候存在一些问题,所以对技术文档部分做一个详细的了解,在这之前对出现的问题总结一下 1.  在 Windows操作系统中Application Direction中可以 ...

  4. 广工赛-hdu6470矩阵快速幂

    递推时把(n+1)^3拆开 构造矩阵即可 #include<bits/stdc++.h> using namespace std; #define ll long long #define ...

  5. Nginx详解一：Nginx基础篇之环境准备

    环境确认: 1.确认系统网络可用 2.确认yum源可用 3.确认关闭iptabkes规则 查看是否有iptabkes规则:iptables -L 如果有的话:iptables -F关闭 保险起见也看看 ...

  6. binlog2sql之MySQL数据闪回实践

    DBA或开发人员,有时会误删或者误更新数据,如果是线上环境并且影响较大,就需要能快速回滚.传统恢复方法是利用备份重搭实例,再应用去除错误sql后的binlog来恢复数据.此法费时费力,甚至需要停机维护 ...

  7. rsync启动并生成PID

    /usr/bin/rsync --daemon --config=/usr/local/rsync/etc/rsyncd.conf

  8. CPU虚拟化

    1. 为什么需要 CPU 虚拟化 X86 操作系统是设计在直接运行在裸硬件设备上的,因此它们自动认为它们完全占有计算机硬件.x86 架构提供四个特权级别给操作系统和应用程序来访问硬件.  Ring 是 ...

  9. .NetCore 下开发独立的（RPL）含有界面的组件包 （四）授权过滤

    .NetCore 下开发独立的(RPL)含有界面的组件包 (一)准备工作 .NetCore 下开发独立的(RPL)含有界面的组件包 (二)扩展中间件及服 务 .NetCore 下开发独立的(RPL)含 ...

  10. [转] Node.js中package.json中库的版本号详解(^和~区别)

    当我们查看package.json中已安装的库的时候,会发现他们的版本号之前都会加一个符号,有的是插入符号(^),有的是波浪符号(~).那么他们到底有什么区别呢?先贴一个例子,对照例子来做解释: bl ...