Springboot項目與vue項目整合打包

原創

2019-08-23 06:00

.爲什麼需要前後端項目開發時分離，部署時合併？
在一些公司，部署實施人員的技術無法和互聯網公司的運維團隊相比，由於各種不定的環境也無法做到自動構建，容器化部署等。因此在這種情況下儘量減少部署時的服務軟件需求，打出的包數量也儘量少。針對這種情況這裏採用的在開發中做到前後端獨立開發，打包時在後端springboot打包發佈時將前端的構建輸出一起打入，最後只需部署springboot的項目即可，無需再安裝nginx服務器
後端：
準備工作：

安裝JDK
配置環境變量
安裝IDEA
一. 在IDEA中新建SpringBoot項目
點擊File -> new -> Project

然後選擇Spring initializr，之後選擇自己的JDK，我測試安裝的是12.0版本，一般開發使用的是1.8穩定版

選擇好相應的JDK之後點擊next，根據個人需求進行相應的修改，然後next

然後選擇web -> Spring Web Starter, 我的IDEA 版本高一點，低版本的是 Web -> Web

然後next，修改自己的項目名和相應的根目錄

然後點擊finish，可以看到目錄結構如下圖

然後啓動是會報錯的，提示我們和maven相關的信息，
是說明我們沒有maven import

import maven 之後再運行
打開localhost:8080 之後

會出現這樣的界面，那是因爲我們沒有controller 可以去執行
我們新建一個controller

然後重新運行，再瀏覽器訪問

前端：
然後是前端使用vue-cli構建前端
項目搭建在我的這篇博客裏
使用vue-cli構建項目前端

項目打包，點擊IDEA的右側，如圖所示，點擊install

引入axios

npm install axios --save

在 main.js 中引入 axios
這時候如果在其它的組件中，是無法使用 axios 命令的。所以我們將 axios 改寫爲 Vue 的原型屬性

 Vue.prototype.$axios = axios;

然後在需要調用接口的地方調用

    this.$axios({
      method: 'get',
      url: 'http://localhost:8080/test',
      data: {}
    }).then((response) => { // 這裏使用了ES6的語法
      this.responseMessage = response
      console.log('success', response) // 請求成功返回的數據
    }).catch((error) => {
      console.log(error) // 請求失敗返回的數據
    })

然後運行

npm run build

打包前端項目，然後將打包好的dist文件中的static文件覆蓋後端項目的resources -> static，
index.hml放到templates中

springboot中使用thymeleaf模板訪問html頁面

在傳統的web開發中通常使用jsp頁面，首先需要在pom文件中引入springmvc相關的包，然後寫springmvc的配置文件（包括訪問資源的路徑解析），之後還需再web.xml中配置訪問路由。這無疑太麻煩了，每次開發前都需要編寫大量的配置文件。
springboot爲此提供了高效便捷的解決方案，只需再pom.xml中添加web開發的依賴，便可進行web開發，省去了繁瑣的配置步驟。
下面爲web開發引入的依賴

在pom.xml文件中添加thymeleaf依賴

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>

在application.xml中添加訪問請求配置(也可以是application.yml文件，個人習慣)
添加controller

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@Controller
@RequestMapping("/TestDemo")
public class IndexController {
   @RequestMapping("Index")
    public String demo() {
        return "index"; // 地址指向index.hml
    }
}

注意：不要使用@RestController註解，@RestController註解是@ResponseBody和@Controller的集合體，使用@RestController註解會默認返回數據，而不會請求到頁面。

application.properties添加如下配置：

# 定位模板的目錄
spring.mvc.view.prefix=classpath:/templates/
# 給返回的頁面添加後綴名
spring.mvc.view.suffix=.html

注意：
spring boot默認開啓了靜態文件的配置，任何放在static文件夾下的資源都是靜態文件。引用靜態文件時以/或者前綴不加任何定位符，都會去static文件夾下查找。

Thymeleaf模版默認會使用templates作爲視圖文件下

然後請求界面，看到如上圖所示就是請求成功

如果在啓動的過程中

因爲spring boot static路徑下的文件可以直接/ 訪問，不需要加static前綴
找到index.html 文件將/static 去掉，重新運行

然後這個項目打包發佈
點擊IDEA右側的maven -> lifecycle ->install

打包成功之後再 target目錄下的jar文件就是我們要的jar文件

springboot 打包的項目是可以使用java -jar 來啓動的

啓動後再次訪問項目