可用于SpringBoot引用的前端UI的Jar包，类似于SwaggerUI包

有的时候我们会碰到一些场景，需要制作前端UI包，用于灵活部署，或者方便个性化改造。那么我们可以使用webjars的方式打包，maven直接引入jar包，即可集成，类似于SwaggerUI包。

WABJAR介绍

WebJars是将这些通用的Web前端资源打包成Java的Jar包，然后借助Maven工具对其管理，保证这些Web资源版本唯一性，升级也比较容易。关于webjars资源，有一个专门的网站http://www.webjars.org/，我们可以到这个网站上找到自己需要的资源，在自己的工程中添加入maven依赖，即可直接使用这些资源了。
webjars官网上可以找到已有的webjars https://www.webjars.org/

SpringBoot中制作webjar包

在3.X的Servlet规范中，WEB-INF/lib下的jar包中的META-INF/resources将自动作为静态资源供程序来访问。SpringBoot已完成自动装配。

一.maven打包

首先把自己的静态资源放到src\main\resource下面：

然后修改pom.xml文件，删除多余的配置，通过maven打包resource文件夹下代码。

<?xml version="1.0"?>
<projectxsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><modelVersion>4.0.0</modelVersion><groupId>com.test</groupId><artifactId>api-ui</artifactId><name>api-ui</name><version>0.0.1-SNAPSHOT</version><description>api引擎web功能。包含api在线设计的UI界面。</description><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><destDir>${project.build.outputDirectory}/META-INF/resources</destDir></properties><build><!-- 类似于webjar方式打包成静态资源包 --><resources><resource><directory>${project.basedir}/src/main/resources</directory><targetPath>${destDir}</targetPath></resource></resources></build>
</project>

打包后的效果如下：

二.项目中使用

自己的springbootweb项目中使用时添加依赖即可，当然还需要相关的web依赖。

<dependency><groupId>com.test</groupId><artifactId>api-ui</artifactId><version>0.0.1-SNAPSHOT</version></dependency>

三.查看效果

启动boot项目访问 http://localhost/api-ui.html ，就像直接访问自己的项目静态文件地址一样.当然为了减少文件名称冲突，最好在打包的ui包里加上几个文件夹路径，比如webjars之类的。省的和原有项目的静态文件冲突。

SpringBoot前后端分离项目中如何制作前端jar包（类似swaggerUI前端jar包制作方法）相关推荐

pageoffice在vue+springboot前后端分离项目中的应用方法
1.因浏览器禁用插件无法使用内嵌在浏览器内部的pageoffice打开方式,需要使用4.0新增的POBrowser方式来在外部打开一个窗口去在线打开office 故下面介绍的是基于4.0在线打开文档的 ...
B站云E办Vue+SpringBoot前后端分离项目——MVC三层架构搭建后台项目
本项目来源B站云E办,笔记整理了项目搭建的过程和涉及的知识点.对于学习来说,不是复制粘贴代码即可,要知其然知其所以然.希望我的笔记能为大家提供思路,也欢迎各位伙伴的指正. 项目前端学习笔记目录 B站云 ...
新手摸爬滚打：vue+springboot前后端分离项目演示（三）——axios实现前后端交互
导语:路漫漫其修远兮,吾将上下而求索前篇: 新手摸爬滚打:vue+springboot前后端分离项目演示(一)--vue cli创建vue2项目新手摸爬滚打:vue+springboot前后端分离 ...
七个开源的 SpringBoot 前后端分离项目，Star过千，快去收藏夹吃灰吧！
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 微信公众号:江南一点雨前后端分离已经在慢慢走进各公司的技 ...
springboot前后端分离项目（图书+博客+聊天室）
一.项目简介项目名称:blc management system(blc MS) 基于Vue CLI4 + SpringBoot开发的前后端分离项目. 基本功能:对博客和书籍进行增删改查,在聊天室点 ...
这几个SpringBoot前后端分离项目（附源码），改改就能换钱。。。
点击上方 "编程技术圈"关注, 星标或置顶一起成长后台回复"大礼包"有惊喜礼包! 每日英文 Happiness comes when we stop comp ...
springboot前后端分离项目MultipartFile获取前端传的file为null问题
[问题描述] springboot+vue 前后端分离项目,在对接上传文件功能时,一直显示文件为空. [分析] 查找了很多博客,解决方法五花八门,但原因应该还是 springboot自带的org.sp ...
阿里云视频上传视频获取进度条问题(使用session方案,获取进度一直为0的解决方案)补充:前后端分离项目中获取进度解决方案
1.场景描述: 之前用阿里云上传视频,前端反应上传视频经常出现获取视频url失败问题.但是接口我测过很多遍都是没有问题的.后台这边提供了一个视频上传的接口返回一个videoId,还提供了一个根据vid ...
springBoot 解决前后端分离项目中跨越请求，同源策略
今天在做项目的过程,采用前后端分离技术的时遇到采用ajax请求无法访问后台接口,按F12,查看浏览器运行状态时,报如下错误为了解决浏览的同源策略,就必须了解什么是同源策略. 1.什么是同源策略同源 ...

SpringBoot前后端分离项目中如何制作前端jar包（类似swaggerUI前端jar包制作方法）