SpringBoot使用WebJars

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

webjars官网:传送门

本文就为大家简单介绍一下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

image

然后在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/

image

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

源码下载 :大老杨码云

推荐阅读更多精彩内容

  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 44,304评论 6 344
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 166,721评论 24 703
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 131,217评论 18 138
  • 如何找流行图标 1.阿里巴巴官方图标:http://www.iconfont.cn/ 2.图标素材网站:http:...
    手执簪花而来阅读 161评论 0 0
  • 2017/11/01/星期三/晴 西方万圣节刚过去,又经历一次被动节日配套洗礼。若干次在商场等地巧遇过节活动...
    呆呆浅蓝阅读 115评论 2 1
  • 文/如马 01 婷婷,是我的小伙伴。 写网络小说方面的小伙伴,曾在一家公司学习奋斗过。 从深圳回到成都,我们一直都...
    如马阅读 1,992评论 50 42
  • 今天最好的朋友给女儿过生日,开心热闹。一整天的气氛都非常好,周身都冒满了幻彩的肥皂泡,让人觉得如此不真实仿若在梦...
    炎染燃烟阅读 221评论 0 0