Springboot项目与vue项目整合打包的实现方式

我的环境

* JDK 1.8
 * maven 3.6.0
 * node环境

1.为什么需要前后端项目开发时分离,部署时合并?

在一些公司,部署实施人员的技术无法和互联网公司的运维团队相比,由于各种不定的环境也无法做到自动构建,容器化部署等。因此在这种情况下尽量减少部署时的服务软件需求,打出的包数量也尽量少。针对这种情况这里采用的在开发中做到前后端独立开发,打包时在后端springboot打包发布时将前端的构建输出一起打入,最后只需部署springboot的项目即可,无需再安装nginx服务器

在这里我有两种方式,一种是简单的,一种是复杂的,下边先来看一个简单的例子:

1)前端开发好后将build构建好的dist下的文件拷贝到springboot的resources的static下(boot项目默认没有static,需要自己新建)

操作步骤:前端vue项目使用命令 npm run build 或者 cnpm run build 打包生成dist文件,在springboot项目中resources下建立static文件夹,将dist文件中的文件复制到static中,然后去application中跑起来boot项目,这样直接访问index.html就可以访问到页面(api接口请求地址自己根据情况打包时配置或者在生成的dist文件中config文件夹中的index.js中配置)

项目结构如图:

鼠标选中的这几个就是从dist文件中复制过来的前端的包,然后我们直接启动boot项目就可以通过index.html访问了(ps:上面这是最简单的合并方式,但是如果作为工程级的项目开发,并不推荐使用手工合并,也不推荐将前端代码构建后提交到springboot的resouce下,好的方式应该是保持前后端完全独立开发代码,项目代码互不影响,借助jenkins这样的构建工具在构建springboot时触发前端构建并编写自动化脚本将前端webpack构建好的资源拷贝到springboot下再进行jar的打包,最后就得到了一个完全包含前后端的springboot项目了。不过上述方法操作简单,便于使用,如果想一次性打包完成的话,就看第二种)

2:第二种方法是在src/main下建立一个webapp文件夹,然后将前端项目的源文件复制到该文件夹下,具体结构如图:

然后使用maven命令执行本地node打包命令,这样就可以 在执行mvn clean package命令时,利用maven插件执行cnpm run build命令(我是使用的淘宝的镜像cnpm,国外的npm命令会相对慢一些,大家根据自己的条件选择,具体命令请看项目中前端vue文件的README.md),一次性完成整个过程

实现方法是这样的,我们要引入org.codehaus.mojo插件来进行maven调用node命令,pom.xml中为:

<plugin>
        <groupId>org.codehaus.mojo</groupId>
        <artifactId>exec-maven-plugin</artifactId>
        <executions>
          <execution>
            <id>exec-cnpm-install</id>
            <phase>prepare-package</phase>
            <goals>
              <goal>exec</goal>
            </goals>
            <configuration>
              <executable>${cnpm}</executable>
              <arguments>
                <argument>install</argument>
              </arguments>
              <workingDirectory>${basedir}/src/main/webapp</workingDirectory>
            </configuration>
          </execution>
          <execution>
            <id>exec-cnpm-run-build</id>
            <phase>prepare-package</phase>
            <goals>
              <goal>exec</goal>
            </goals>
            <configuration>
              <executable>${cnpm}</executable>
              <arguments>
                <argument>run</argument>
                <argument>build</argument>
              </arguments>
              <workingDirectory>${basedir}/src/main/webapp</workingDirectory>
            </configuration>
          </execution>
        </executions>
      </plugin>

然后maven-resources-plugin插件将项目的前端文件打包到boot项目的classes中,具体的请参考pom.xml中的,

将webapp/dist文件夹中的文件复制到src/main/resources/static中,并打包到classes

<!--copy文件到指定目录下 -->
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-resources-plugin</artifactId>
        <configuration>
          <encoding>${project.build.sourceEncoding}</encoding>
        </configuration>
        <executions>
          <execution>
            <id>copy-spring-boot-webapp</id>
            <!-- here the phase you need -->
            <phase>validate</phase>
            <goals>
              <goal>copy-resources</goal>
            </goals>
            <configuration>
              <encoding>utf-8</encoding>
              <outputDirectory>${basedir}/src/main/resources/static</outputDirectory>
              <resources>
                <resource>
                  <directory>${basedir}/src/main/webapp/dist</directory>
                </resource>
              </resources>
            </configuration>
          </execution>
        </executions>
      </plugin>

然后通过maven命令:

mvn clean package -P window 

打包成功后我们的前端项目就整个的打包到了boot项目的jar包中,然后启动项目,访问index.html页面就看到了项目启动成功。

打出来的jar包中如果static说明打包由于种种原因失败了,我就遇到过几次,这时候需要再来一次 mvn clean package -P window

ps:下面看下SprintBoot 整合vue实现上传下载

这里记录一下在Springboot中实现文件上传下载的核心代码

package com.file.demo.springbootfile;
import com.file.util.ResultUtil;
import org.apache.commons.lang.exception.ExceptionUtils;
import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.apache.tomcat.util.http.fileupload.util.Streams;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
/*
* springboot整合vue,文件上传下载
* */
//上传不要用@Controller,用@RestController
@RestController
@RequestMapping("/file")
public class FileController {
  private static final Logger logger = LoggerFactory.getLogger(FileController.class);
  //在文件中,不用/或者\最好,推荐使用File.separator
  private final static String fileDir="files";
  private final static String rootPath = System.getProperty("user.home")+ File.separator+fileDir+File.separator;
  /*
  * 文件上传
  * */
  @RequestMapping("/upload")
  public Object uploadFile(@RequestParam("file")MultipartFile[] multipartFiles, final HttpServletResponse response, final HttpServletRequest request){
    File fileDir = new File(rootPath);
    /*
    * exists():测试此抽象路径名表示的文件是否存在
    * isDirectory():检查一个对象是否是文件夹
    * isFile():判断是否为文件,也可能是文件目录
    * */
    if(!fileDir.exists() && !fileDir.isDirectory()){
      //检查到文件不存在则创建
      fileDir.mkdir();//创建文件,一级
      fileDir.mkdirs();//创建多级
    }
    try{
      if(multipartFiles != null && multipartFiles.length > 0){
        for ( int i = 0;i<multipartFiles.length;i++){
          try{
            String storagePath = rootPath+multipartFiles[i].getOriginalFilename();
            logger.info("上传的文件:" + multipartFiles[i].getName()+","+multipartFiles[i].getContentType()+","
                +multipartFiles[i].getOriginalFilename() + ",保持的路径为:" + storagePath);
            Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true);
          }catch (IOException e){
            logger.info(ExceptionUtils.getFullStackTrace(e));
          }
        }
      }
    }catch (Exception e){
      return ResultUtil.error(e.getMessage());
    }
    return ResultUtil.success("上传成功!");
  }
  /*
  * 文件下载
  * */
  @RequestMapping("/download")
  public Object downkiadFile(@RequestParam String fileName,final HttpServletResponse response,final HttpServletRequest request){
    OutputStream os = null;
    InputStream is = null;
    try{
      //获取输出流rootPath
      os = response.getOutputStream();
      //重置输出流
      response.reset();
      response.setContentType("application/x-download;charset=GBK");
      response.setHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("utf-8"), "iso-8859-1"));
      //读取流
      File f= new File(rootPath+fileName);
      is = new FileInputStream(f);
      if(is == null){
        logger.error("下载文件失败,请检查文件“"+ fileName +"”是否存在");
        return ResultUtil.error("下载附件失败,请检查文件“" + fileName + "”是否存在");
      }
      //复制文件
      IOUtils.copy(is,response.getOutputStream());
      //刷新缓冲
      response.getOutputStream().flush();
    }catch (IOException e){
      return ResultUtil.error("下载文件失败,error:" + e.getMessage());
    }
    //文件的关闭在finally中执行
    finally {
      {
        try {
          if(is != null){
            is.close();
          }
        }catch (IOException e){
          logger.error(ExceptionUtils.getFullStackTrace(e));
        }
        try{
          if(os != null){
            os.close();
          }
        }catch (IOException e){
          logger.info(ExceptionUtils.getFullStackTrace(e));
        }
      }
    }
    return null;
  }
}

源码下载地址: https://github.com/struggle0903/SpringBootfiledemo.git

总结

以上所述是小编给大家介绍的Springboot项目与vue项目整合打包的实现方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

时间: 2019-07-02

vue+springboot实现项目的CORS跨域请求

跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制.关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源共享CORS详解.本文为通过一个小demo对该博客中分析内容的一些验证. 1.springboot+vue项目的构建和启动 细节不在此赘述,任何简单的springboot项目就可以,而前端vue项目只需用axios发ajax请求即可. 我的d

如何把vuejs打包出来的文件整合到springboot里

这个需求不知道是不是合适,因为静态的vuejs项目,用nginx部署,听说很快. 一般有这个需求的,都是用tomcat来部署java项目,tomcat转发静态vuejs,应该不会很快. 好吧,以上都是听说...应该...实际嘛?... 废话不多讲,马上搞起. 这里第一句要说的是,目前这个方式我认为只支持#这个方式的路由,如果改成了html5的mode: 'history',应该是不支持的. 开始准备: 注意,我的springboot用的视图模板是thymeleaf,静态文件夹路径默认是resou

vue+springboot前后端分离实现单点登录跨域问题解决方法

最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

SpringBoot+Vue.js实现前后端分离的文件上传功能

这篇文章需要一定Vue和SpringBoot的知识,分为两个项目,一个是前端Vue项目,一个是后端SpringBoot项目. 后端项目搭建 我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一个SpringBoot项目,一直点next即可 项目创建成功后,maven的pom配置如下 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> &l

springboot整合vue项目(小试牛刀)

序 本文主要研究一下如何在springboot工程整合vue maven <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> 新建springboot的web工程,默认会在resources目录下生成static以及templates文件夹 temp

Vue+SpringBoot开发V部落博客管理平台

V部落是一个多用户博客管理平台,采用Vue+SpringBoot开发. 演示地址: http://45.77.146.32:8081/index.html 项目地址: https://github.com/lenve/VBlog 登陆页面 文章列表 发表文章 用户管理 栏目管理 数据统计 技术栈 后端技术栈 后端主要采用了: 1.SpringBoot 2.SpringSecurity 3.MyBatis 4.部分接口遵循Restful风格 5.MySQL 前端技术栈 前端主要采用了: 1.Vue

Spring Boot/VUE中路由传递参数的实现代码

在路由时传递参数,一般有两种形式,一种是拼接在url地址中,另一种是查询参数.如:http://localhost:8080/router/tang/101?type=spor&num=12.下面根据代码看一下,VUE 和 Spring Boot 中各自是如何处理传递和接受参数的. Spring Boot package com.tang.demo1.controller; import org.springframework.web.bind.annotation.*; @RestContro

浅谈angular4.0中路由传递参数、获取参数最nice的写法

研究ng4的官网,终于找到了我想要的方法.我想要的结果是用'&'拼接参数传送,这样阅读上是最好的. 否则很多'/'的拼接,容易混淆参数和组件名称. 一般我们页面跳转传递参数都是这样的格式: http://angular.io/api?uid=1&username=moon 但是在SPA单页应用中却是下面的结果居多[初级视频都是这样敷衍的] http://angular.io/api/1/moon 那么怎么实现我说的结果呢? 重点开始了. 实现从product页面跳转到product-det

vue中路由参数传递可能会遇到的坑

前言 vue中路由跳转传参数有多种,自己常用的是下面的几种 通过router-link进行跳转 通过编程导航进行路由跳转 本文主要给大家介绍了关于vue路由参数传递遇到的一些坑,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 首先我的路由的定义 { path: '/b', name: 'B', component: resolve => require(['../pages/B.vue'], resolve) } 我从A组件跳转到B组件,并通过路由信息对象传递一些参数 this

spring boot+vue 的前后端分离与合并方案实例详解

springboot和vue结合的方案网络上的主要有以下两种: 1. [不推荐]在html中直接使用script标签引入vue和一些常用的组件,这种方式和以前传统的开发是一样的,只是可以很爽的使用vue的双向数据绑定,这种方式只适合于普通的全栈开发. 2.[推荐]使用vue官方的脚手架创建单独的前端工程项目,做到和后端完全独立开发和部署,后端单独部署一个纯restful的服务,而前端直接采用nginx来部署,这种称为完全的前后端分离架构开发模式,但是在分离中有很多api权限的问题需要解决,包括部

详解Guava Cache本地缓存在Spring Boot应用中的实践

概述 在如今高并发的互联网应用中,缓存的地位举足轻重,对提升程序性能帮助不小.而 3.x开始的 Spring也引入了对 Cache的支持,那对于如今发展得如火如荼的 Spring Boot来说自然也是支持缓存特性的.当然 Spring Boot默认使用的是 SimpleCacheConfiguration,即使用 ConcurrentMapCacheManager 来实现的缓存.但本文将讲述如何将 Guava Cache缓存应用到 Spring Boot应用中. Guava Cache是一个全内

通过spring boot 设置tomcat解决 post参数限制问题

今天传图片,用的base64字符串,POST方法,前端传送的时候总是莫名其妙的崩溃,去网上搜了半天,以为是文件大小被限制了,但是我这个是字符串接收,不是文件接收,于是又继续搜,原来post本身没有参数大小限制,但是tomcat给限制了,于是解决方式如下: 一.外置的tomcat 这个简单,直接在server.xml里面添加或者修改这句话: <Connector port="8080" protocol="HTTP/1.1" connectionTimeout=

Spring Boot项目中定制拦截器的方法详解

这篇文章主要介绍了Spring Boot项目中定制拦截器的方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Servlet 过滤器属于Servlet API,和Spring关系不大.除了使用过滤器包装web请求,Spring MVC还提供HandlerInterceptor(拦截器)工具.根据文档,HandlerInterceptor的功能跟过滤器类似,但拦截器提供更精细的控制能力:在request被响应之前.request被响应之后.视

如何在Spring Boot应用中优雅的使用Date和LocalDateTime的教程详解

Java8已经发布很多年了,但是很多人在开发时仍然坚持使用着Date和SimpleDateFormat进行时间操作.SimpleDateFormat不是线程安全的,而Date处理时间很麻烦,所以Java8提供了LocalDateTime.LocalDate和LocalTime等全新的时间操作API.无论是Date还是LocalDate,在开发Spring Boot应用时经常需要在每个实体类的日期字段上加上@DateTimeFormat注解来接收前端传值与日期字段绑定,加上@JsonFormat注

深入理解python中函数传递参数是值传递还是引用传递

目前网络上大部分博客的结论都是这样的: Python不允许程序员选择采用传值还是传 引用.Python参数传递采用的肯定是"传对象引用"的方式.实际上,这种方式相当于传值和传引用的一种综合.如果函数收到的是一个可变对象(比如字典 或者列表)的引用,就能修改对象的原始值--相当于通过"传引用"来传递对象.如果函数收到的是一个不可变对象(比如数字.字符或者元组)的引用,就不能 直接修改原始对象--相当于通过"传值"来传递对象. 你可以在很多讨论该问题

Spring Boot 项目中使用Swagger2的示例

本文介绍了Spring Boot 项目中使用Swagger2的示例,分享给大家,具体如下: 添加Swagger2依赖 在pom.xml中加入Swagger2的依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <version>2.2.2</version> </dependency&g