本人主要做的是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. 浅析PHP中的闭包和匿名函数

    PHP闭包和匿名函数使用的句法与普通函数相同,但闭包和匿名函数其实是伪装成函数的对象(Closure类的实例) .下面给大家介绍PHP中的闭包和匿名函数知识,需要的朋友参考下吧   闭包是指在创建时封 ...

  2. 如何使用PowerShell批量删除Office 365的用户

    概述 本文将演示如何在必要的时候(例如在测试环境),通过PowerShell脚本批量删除Office 365的用户,首先需要通过Get-MsolUser的命令(并且配合筛选条件)获取到符合条件的用户列 ...

  3. laravel 路由缓存

    使用路由缓存之前,需要知晓路由缓存只能用于控制器路由,不能用于闭包路由,如果路由定义中包含闭包路由将无法进行路由缓存,只有将所有路由定义转化为控制器路由或资源路由后才能执行路由缓存命令: php ar ...

  4. 解决kali linux 升级后安装w3af 问题

    1.在kali linux 下安装w3af 会出现很多问题,因为新版的kaliLinux ,以及python 环境的配置问题和 库的安装问题会出现很多报错 kali linux环境一般都自带git安装 ...

  5. bzoj1123 割点性质应用

    删掉无向图上任意一点,请求出将会增加的不连通的点对数 将无向图联通性的问题转化到搜索树方向上考虑 如果一个点不是割点,那么删掉该点的答案很简单,就是2*(n-1) 如果点u是割点,同时u在搜索树上有t ...

  6. bzoj4821-线段树区间lazy_tag下放的优先级和区间覆盖

    见博客https://www.cnblogs.com/zwfymqz/p/8588693.html 题解链接https://blog.csdn.net/ripped/article/details/7 ...

  7. bzoj 2761

    神题... 其实这题巨水,用各种诡异的方法都能A,包括STL等等 我之所以写题解,是因为我发现了一个bug:bz和luogu时限有问题! 这题我用了两种做法: ①:直接使用STL-map(不能直接用数 ...

  8. dubbo支持哪些通信协议和序列化协议

    dubbo支持的通信协议 dubbo协议 dubbo://192.168.0.1:20188 默认就是走dubbo协议的,单一长连接,NIO异步通信,基于hessian作为序列化协议 适用的场景就是: ...

  9. JavaScript学习:取数组中最大值和最小值

    在实际业务中有的时候要取出数组中的最大值或最小值.但在数组中并没有提供arr.max()和arr.min()这样的方法.那么是不是可以通过别的方式实现类似这样的方法呢?那么今天我们就来整理取出数组中最 ...

  10. OpenJDK-study-002 从GitHub下载openjdk,以及Cygwin的安装

    承前启后 由于上一篇openjdk-study-001中,从Mercurial直接拉取openjdk森林失败,于是网上搜了一下,发现GitHub上有人分享openjdk的源码 https://gith ...