springboot工程集成前端编译包,用于uni-app webView工程,解决其需独立部署带来的麻烦,场景如页面->画布->图片->pdf

这篇具有很好参考价值的文章主要介绍了springboot工程集成前端编译包,用于uni-app webView工程,解决其需独立部署带来的麻烦,场景如页面->画布->图片->pdf。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端工程

springboot工程集成前端编译包,用于uni-app webView工程,解决其需独立部署带来的麻烦,场景如页面->画布->图片->pdf,前端,vue.js,uni-app,微信小程序,java文章来源地址https://www.toymoban.com/news/detail-639409.html

访问方式

http://127.0.0.1:8080/context/frontEnd/index

放行

public class SecurityConfig extends WebSecurityConfigurerAdapter {
"/frontEnd/**",

SysFrontEndController

import lombok.extern.slf4j.Slf4j;
import nl.basjes.shaded.org.springframework.core.io.ClassPathResource;
import nl.basjes.shaded.org.springframework.util.AntPathMatcher;
import org.springframework.http.MediaType;
import org.springframework.http.MediaTypeFactory;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.HandlerMapping;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.nio.ByteBuffer;
import java.nio.channels.Channels;
import java.nio.charset.Charset;
import java.util.Optional;

/**
 * @author 蓝之静云
 * @date 2023-08-10 
 */
@RestController
@RequestMapping("/frontEnd")
@Slf4j
public class SysFrontEndController {

    private AntPathMatcher antPathMatcher = new AntPathMatcher();

    @RequestMapping("/**")
    public void getStaticResource(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // 获取完整的路径
        String uri = (String) request.getAttribute(HandlerMapping.PATH_WITHIN_HANDLER_MAPPING_ATTRIBUTE);
        // 获取映射的路径
        String pattern = (String) request.getAttribute(HandlerMapping.BEST_MATCHING_PATTERN_ATTRIBUTE);
        String customPath = antPathMatcher.extractPathWithinPattern(pattern, uri);
        if ("index".equals(customPath)) customPath = customPath + ".html";
        // 按/截取
        String[] split = customPath.split("/");
        // 最后一个就是文件名
        String filename = split[split.length - 1];
        // 若是图片资源
        if (filename.contains(".png")
                || filename.contains(".jpg")
                || filename.contains(".ico")
                || filename.contains(".gif")
                || filename.contains(".svg")
                || filename.contains(".pdf")
                || filename.contains(".jpeg")) {
            ServletOutputStream outputStream = null;
            InputStream inputStream = null;
            try {
                ClassPathResource classPathResource = new ClassPathResource("static/" + customPath);
                inputStream = classPathResource.getInputStream();
                response.setContentType("image/" + filename.split("\\.")[1]);
                outputStream = response.getOutputStream();
                int len;
                byte[] buffer = new byte[4096];
                while ((len = inputStream.read(buffer)) != -1) {
                    outputStream.write(buffer, 0, len);
                }
                outputStream.flush();
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                outputStream.close();
                inputStream.close();
            }
        } else {
            InputStream stream = Thread.currentThread().getContextClassLoader().getResourceAsStream("static/" + customPath);
            assert stream != null;
            ByteBuffer buf = ByteBuffer.allocate(stream.available());
            Channels.newChannel(stream).read(buf);
            buf.flip();
            String fileStr = Charset.defaultCharset().decode(buf).toString();
            buf.clear();
            Optional<MediaType> mediaType = MediaTypeFactory.getMediaType(filename);
            mediaType.ifPresent(type -> response.setContentType(type.toString() + ";charset=UTF-8"));
            response.setCharacterEncoding("UTF-8");
            response.getWriter().write(fileStr);
        }
    }
}

pom.xml

		<resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml</include>
                </includes>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.*</include>
                </includes>
            </resource>
            <resource>
                <directory>src/main/webapp</directory>
                <targetPath>META-INF/resources</targetPath>
                <includes>
                    <include>**/*.*</include>
                </includes>
            </resource>
        </resources>

到了这里,关于springboot工程集成前端编译包,用于uni-app webView工程,解决其需独立部署带来的麻烦,场景如页面->画布->图片->pdf的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app 之 安装uView,安装scss/sass编译

    uni-app 之 安装uView,安装scss/sass编译 image.png image.png image.png 点击HBuilder X 顶部,工具,插件安装,安装新插件 image.png image.png 安装成功! 注意,一定要先登录才可以安装 image.png 1. 引入uView主JS库 在项目根目录中的 main.js 中,引入并使用uView的JS库,注意这两行要放在 import Vu

    2024年02月10日
    浏览(53)
  • UNI-APP 人脸识别分析及实现(前端)

    实现流程: 1、打开摄像头——自动读取照片——传输给后端——后端交由第三发或自主开发来识别——返回结果(相识度比) 2、打开摄像头——自动读取视频——传输给后端——后端通过解析视频,截取图片交由第三发或自主开发来识别——返回结果(相识度比) 通过分

    2023年04月08日
    浏览(46)
  • uni-app 开发微信小程序 自动化编译/启动项目

          最近开发一个uni-app的小程序项目,因为习惯使用vscode 而项目不得不借助hbuderx 运行,微信开发工具调试,偶尔还需要使用 ios模拟器, 8g内存的mac 就变的异常卡顿,所以就研究了下通过npm命令去编译、 运行等工程化配置, 这样就不用运行hbuderx 减少内存使用,顺便 

    2024年02月07日
    浏览(56)
  • uni-app打包小程序根据不同编译条件打包不同静态素材目录

    在uni-app开发小程序的时候,我们经常有这样的需求,一个小程序,拥有多个不同样式的模板,发布的时候,为了减少包的体积,我们希望只打包当前使用的模板对应的静态素材目录,而其他模板的目录不打包进去。 在package.json中定义的模板变量如下: 每一个模板的静态素材

    2024年02月10日
    浏览(55)
  • 使用uni-app+uview创建小程序工程并支持请求后端接口

    一、使用工具:     1.hubilderx   下载地址:HBuilderX-高效极客技巧     2.微信开发者工具   下载地址:微信开发者工具下载地址与更新日志 | 微信开放文档     3.uview组件库API:Color 色彩 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 二、使用hubuilderx创建uni-app项目

    2024年02月11日
    浏览(62)
  • uni-app 的条件编译(APP-PLUS 、H5、MP-WEIXIN )

    条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。 写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。 1 #ifdef:if defined 仅在某平台存在 2 #ifndef:if not defined 除了某平台均存在 3 %PLATFORM%:平台名称

    2024年02月09日
    浏览(47)
  • uni-app + SpringBoot +stomp 支持websocket 打包app

    websocket 协议是在http 协议的基础上的升级,通过一次http 请求建立长连接,转而变为TCP 的全双工通信;而http 协议是一问一答的请求方式方式。 websocket-uni.js

    2024年02月11日
    浏览(51)
  • 前端vue uni-app自定义精美海报生成组件

    在当前技术飞速发展的时代,软件开发的复杂度也在不断提高。传统的开发方式往往将一个系统做成整块应用,一个小的改动或者一个小功能的增加都可能引起整体逻辑的修改,从而造成牵一发而动全身的情况。为了解决这个问题,组件化开发逐渐成为了一种趋势。通过组件

    2024年02月14日
    浏览(63)
  • uni-app前端H5页面底部内容被tabbar遮挡

    在用uniapp写小程序的时候,底部有一部分内容没显示出来,被底部的tabbar遮挡住了 给最外部的view设置样式 padding-bottom: var(--window-bottom) ,如下 参考1 参考2 使用 uni-app 框架开发的一个项目,发现 H5 端页面底部的内容被导航栏(Tabbar)遮挡,小程序端可以正常显示。 查阅资料

    2024年02月04日
    浏览(65)
  • uni-app集成uni-simple-router,报错:Uncaught ReferenceError: ROUTES is not defined

    参考连接:GitHub - SilurianYang/uni-read-pages: read `pages.json` file to generate the routes table 作用:配置  vue.config.js  通过  webpack 注入全局变量 问题:缺少Webpack 配置环境 方法: 项目根目录下打开终端,运行以下命令来安装相关依赖包: npm install cross-env --save-dev

    2024年02月08日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包