vue和nodejs怎么結合，node vue 合并項目_吐血整理最佳實踐：SpringBoot整合Vue前后端分離開發

[toc]

vue和nodejs怎么結合、開發環境

IDEA V2018.5

為什么vue不使用ajax。npm v6.4.x

vue-cli v2.9.x

創建項目

IDEA > Create New Project > Gradle

2018-10-27.10.40.49-image.png

此處的 Frameworks全部取消勾選,接著就一直 Next，提示填寫的地方填寫，不需要填寫的就用默認配置就 ok。

項目創建成功，項目結構應該是這樣的。

2018-10-27.10.48.48-image.png

創建后臺模塊

▼ 項目 > 右鍵 > New > Module

2018-10-28.00.50.19-image.png

▼ Spring Initializr

2018-10-28.00.52.21-image.png

▼ 這一步按照正常項目信息填寫。

注意：Type 屬性需要選擇 Gradle Config

2018-10-28.00.54.47-image.png

▼ 按照自己需要的依賴進行選取

2018-10-28.00.57.14-image.png

▼ 下一步默認，然后 Finish。之后需要等待 Gradle 進行模塊的初始化，如果是首次創建 SpringBoot 項目，此處初始化可能需要比較長的時間，需要耐心和良好的網絡環境。

2018-10-28.01.03.54-image.png

成功后是如上所示結構，之后我們需要手動完善一些結構和配置

配置后臺模塊

一、配置模塊依賴

在根項目的settings.gradle文件中增加 include 'server'

2018-10-28.01.08.45-image.png

二、完善 server 項目工程結構

server 目錄默認創建出來只有一個build.gradle文件，我們需要手工完善項目結構

2018-10-28.01.15.43-image.png

如上圖所示，可以看到，我們其實建立出來的就是一個標準的 java 工程結構。

src 目錄下游 main 目錄，正常情況此處src 下還需要有 test 目錄，這里演示就略過了。

main 下面創建 java 和 resources 。

java 下面創建對應的包結構和 SpringBoot 的啟動類，代碼如圖的右邊區域，非初次接觸 SpringBoot 對這個代碼應該不陌生。

resources 目錄下暫時就只創建配置文件application.yml。

三、配置后臺數據源

加入了數據源的 SpringBoot 項目需要在application.yml中配置數據源信息，否則項目會啟動失敗。

2018-10-28.02.32.31-image.png

# 配置項目的數據源

spring:

datasource:

driver-class-name: com.mysql.jdbc.Driver

url: jdbc:mysql://localhost:3306/test?characterEncoding=UTF-8&useUnicode=true&useSSL=false

password: root

username: root

到此后臺模塊創建配置完成

創建前端模塊

▼ 項目 > 右鍵 > New > Module

2018-10-28.01.25.41-image.png

前端模塊這里選擇 Gradle，然后注意右邊 Frameworks 這里需要取消 java 的勾選

2018-10-28.01.28.34-image.png

這一步只需要填寫一下 ArtifactId，名字可以自己定義，不一定要照搬我的命名習慣。然后一直下一步 直到 Finish。

2018-10-28.01.30.37-image.png

模塊完成初始化后，結構如上圖所示，多出一個 client 目錄，也是只有一個 build.gradle 文件。由于這個我們之間選擇的新增 Gradle 的模塊，所以在 settings.gradle 文件中，工具自動幫我們把 include 補全了。

▼▼▼接下來就是比較關鍵的步驟了,敲黑板.....▼▼▼

我們需要將 client 模塊初始化為 vue 項目。這里我們用到的 vue 提供的vue-cli模塊。

關于 vue-cli 的安裝請參考百度。

初始化 vue 項目

打開 idea 底部的 Terminal

2018-10-28.01.38.58-image.png

在控制臺輸入：

vue init webpack client

注意： 此處的項目名稱一定需要和你的創建前端模塊的名稱一致。例如我的前端模塊目錄是 client，我這里就是vue init webpack client。然后其他的配置，的配置選項就是正常的 vue 初始化過程了。我這里選擇的構建工具是 Yarn，不是 npm。此處的選擇不影響后面的構建。

2018-10-28.01.46.08-image.png

這一步完成后，基本的前端模塊算初始化完成。接下來，我們需要將前端模塊整合道 Gradle 中便于統一編譯和管理。

配置前端模塊

一、clinet/build.gradle配置

2018-10-28.01.54.54-image.png

將clinet/build.gradle內容修改為如下：

plugins {

id "com.moowork.node" version "1.2.0"

}

node {

version = '8.7.0'

yarnVersion = '1.3.2'

download = true

}

task bootRun(dependsOn: 'start') {

group = 'application'

description = 'Run the client app (for use with gradle bootRun -parallel)'

}

task start(type: YarnTask, dependsOn: 'yarn') {

group = 'application'

description = 'Run the client app'

args = ['run', 'start']

}

task build(type: YarnTask, dependsOn: 'yarn') {

group = 'build'

description = 'Build the client bundle'

args = ['run', 'build']

}

此處主要是為Gradle 配置了幾個任務。大致意思就是用 Gradle 來代理執行前端的編譯命令。

二、build.gradle配置

這里需要配置是根項目下的build.gradle

2018-10-28.02.01.29-image.png

在build.gradle 中追加下面代碼

task copyHtml(type: Copy) {

group = 'build'

description = '復制編譯后的index.html到 server 的 resource 目錄'

from 'client/dist/index.html'

into 'server/build/resources/main/static'

}

task copyStatic(type: Copy, dependsOn: 'copyHtml') {

group = 'build'

description = '復制編譯后的靜態文件到 server 的 resource 目錄'

from 'client/dist/static'

into 'server/build/resources/main/static/static'

}

copyStatic.mustRunAfter('client:build')

task mergeBuild(dependsOn: ['client:build', ':copyStatic', 'server:bootJar']) {

group = 'build'

description = '合并編譯輸出'

}

task independentBuild(dependsOn: ['client:build', 'server:bootJar']) {

group = 'build'

description = '獨立編譯輸出'

}

此處主要解釋一下mergeBuild和independentBuild

mergeBuild：合并編譯輸出

合并編譯輸出輸出的意思，表示前后端開發的時候是分模塊分離開發，但是最終編譯到發布項目的時候，會將前端編譯的靜態內容和html 復制道后臺SpringBoot 項目的靜態資源目錄中,從而達到一體發布。

independentBuild:獨立編譯輸出

獨立編譯輸出區別于mergeBuild是不會復制前端文件到SpringBoot端來，所以我們在部署項目的時候，需要單獨部署前端服務。

三、配置前端開發模式代理

2018-10-28.02.12.45-image.png

client/config/index.js 修改proxyTable和port兩處配置，如圖所示。端口修改是因為，SpringBoot 運行的默認端口也是8080，為了不沖突，前端修改端口。proxyTable表示在開發階段，前端所有已/server開頭的請求,都代理到http://localhost:8080后臺服務進行處理，pathRewrite意思是代理的轉發時，剔除/server部分。

例：

前臺請求：http://localhost:8081/server/user/list

實際代理執行請求：http://localhost:8080/user/list

端口和路徑都發生了變化

到此項目的初始配置就基本完成。

最后：如何運行項目

2018-10-28.02.22.52-image.png

找到 idea 右邊欄上的 Gradle 選項卡，打開找到 vueb 下面的 Tasks>appplication>bootRun 右鍵選擇Create 'vueb [bootRun]'...

2018-10-28.02.24.32-image.png

在 Arguments 中增加-parallel參數，然后 ok。

2018-10-28.02.26.27-image.png

最后在運行欄中可以看到配置的啟動項。點擊旁邊的三角形就可以同時啟動前端和后端服務。

2018-10-28.02.27.45-image.png

最后可以看到控制臺提示兩個啟動成功的信息，則表示項目構建成功。

2018-10-28.02.36.03-image.png

上圖所示，表示 SpringBoot 項目啟動成功

2018-10-28.02.36.17-image.png

上圖所示，前端項目啟動成功，我們可以訪問http://localhost:8081

2018-10-28.02.38.04-image.png

Over