zoukankan      html  css  js  c++  java
  • SpringBoot使用WebJars

    本人主要做的是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成功就完成。

    源码下载 :大老杨码云

  • 相关阅读:
    “用户、组或角色'XXX'在当前数据库中已存在”问题
    C#与Java在继承静态类上的区别
    Java中静态内部类的理解
    python第三天
    python第二天
    python第一天
    applicationhost.config web.config
    IIS:错误: 无法提交配置更改,因为文件已在磁盘上更改
    SMO 的环境
    从客户端中检测到有潜在危险的 Request.Form 值
  • 原文地址:https://www.cnblogs.com/dalaoyang/p/8627564.html
Copyright © 2011-2022 走看看