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成功就完成。

    源码下载 :大老杨码云

  • 相关阅读:
    函数的调用过程
    Android基础-弹出式菜单
    Android基础-上下文菜单(Content_Menu)
    Adnroid基础-选项菜单(OptionMenu)
    Android基础-UI界面(项目实战 点菜界面) 1.EditText 2.SeekBar 3.CheckBox 4.ToggleButton 5.RadioGroup 6.Button 7.TextView 8.ImageView
    Android基础-进度条(SeekBar)
    Android基础-开关按钮(ToggleButton)
    Android基础-单选框(RadioButton)
    显示应用名称
    在Xcode中使用pch文件
  • 原文地址:https://www.cnblogs.com/dalaoyang/p/8627564.html
Copyright © 2011-2022 走看看