前言

閑來無事，想學一些框架，查了一些資料，說用前后端分離開發比較主流，同時比較熱門的是Spring Boot+Vue開發，久仰大名，現在正好學習一下。

學習視頻:4小時學會Spring Boot+Vue前后端分離開發

本文原創，創作不易，轉載請注明！！！
本文鏈接
個人博客：https://ronglin.fun/?p=233
PDF鏈接：見博客網站
CSDN: https://blog.csdn.net/RongLin02/article/details/117659135

Vue

官網：Vue.js 3.0
參考教程：Vue3 教程|菜鳥教程

安裝Vue

菜鳥教程中給了很多的安裝方法，我查閱的一些資料很多都是用的NPM安裝，所以這里就用npm安裝vue.js

安裝nodejs與NPM

NPM :NPM 使用介紹
菜鳥的教程中，有很多很多有關NPM的用法，我這里不過多的說明，就說下如何用npm安裝。
npm是Nodejs下的包管理器，功能非常強大，要想用npm，得先安裝Nodejs，有關Nodejs的安裝教程：Node.js 安裝配置 我這里迅速過一下流程。
我們去官方下載Nodejs的安裝包：Node.js 下載LTS(長期支持版本)版本的。
下載好后直接運行就行了。一直點擊下一步就安裝好了。中間有一個更改安裝目錄的，可以根據情況自行調整。
按照好之后，我們輸入node -v可以查看安裝的情況，如下圖：

如果提示 node 不存在，就要去查看一下環境變量中是否存在：此電腦–右鍵–屬性–高級系統設置–環境變量
找到path，點擊編輯，找一下有沒有nodejs的路徑，如果沒有可以重新安裝一下，或者添加上。

安裝Vue

安裝完nodejs后，先來看一下npm能不能用，輸入npm -v，查看版本。

然后，就可以安裝Vue了，先用淘寶的鏡像安裝一下cnpm，然后 用cnpm更新一下npm，在命令行中輸入以下代碼：

npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install npm -g

更新完之后，我們可以發現npm版本從6.14.13更新到了7.16.0，然后全局安裝Vue。

cnpm install vue@next cnpm install -g @vue/cli

輸入vue --version如果可以看到版本就說明安裝完成了。

創建項目

GUI界面

我們可以先調用GUI界面的vue(這個圖形界面是3.0版本的，如果是2.0是不支持GUI版的)
關閉所有瀏覽器界面，在cmd中輸入

npm config set registry https://registry.npm.taobao.org vue ui

第一行代碼是用來設置鏡像源的，要不然會很慢，輸入完第二句代碼，會彈出來一個網頁，如果沒彈出來就用管理員權限運行cmd，然后再輸入vue ui
網頁出來之后，點擊中上位置的創建，它會先讀取文件目錄結構，需要一些時間，稍等片刻。如果特別特別慢，可以重啟一下電腦，然后再試一下。我喜歡把項目根目錄放在F盤，所以我把項目根目錄設置為F:\vue，然后點擊下方的創建新項目

名稱隨意，把下方的Git關閉，點擊下一步，然后選擇手動，然后打開Router和Vuex，關閉Linter/Formatter

然后點擊下一步，這個界面中就一個選項，是詢問是否打開 使用歷實記錄，打開它。然后下一步，然后創建項目，不保存預設
然后等它創建完就行了。
創建完成之后，我們還可以測試一下，點擊左側任務右側點擊運行。

運行完畢后，再點擊右上角的輸出，然后我們就可以看到兩個網站，點擊網站進入，如果界面是vue的歡迎頁則說明成功。

IDEA

我的IDEA是IntelliJ IDEA 2020.1 x64版本的，我們打開IDEA，先安裝vue插件 菜單欄File–Settings–Plugins搜索Vue，點擊install，安裝好之后重啟IDEA。

重啟完之后，導入剛才創建的項目File–Close Project關閉當前項目，然后在新界面中選擇Open or Import，然后選擇我們剛剛用GUI創建好的vue項目，路徑是F:\vue\vuetest，導入。
vue是一個單頁面，它的頁面代碼在src–app.vue中，vue內置了一個服務器，我們可以用idea的終端啟動它，打開IDEA的Terminal輸入npm run serve然后彈出來兩個網站，和我們用GUI點擊啟動之后的網站時一樣的，想要退出，Ctrl+C就行了。

簡單解釋

vue是一個單頁面，它只有一個頁面，但是它會動態刷新app.vue界面的內容，我們看veiws文件夾下，有兩個文件，一個是About.vue還有一個是Home.vue，這兩個就對應主頁面的兩個小界面，當用戶互交時，它會把小界面動態刷新到app.vue中，我們可以在<router-link to="/">Home</router-link>標簽中查看小界面情況。to后面的就是映射的地址。
映射關系一般都是在router–index.js下定義，簡單的看一下語法：

{path: '/',name: 'Home',component: Home}

path表示訪問地址， component就表示項目中實際要映射的文件名，全稱是Home.vue，同時注意最上邊的導包問題。

Spring Boot

創建項目

IDEA已經給我們封裝好了Spring Boot框架的基本結構，我們直接創建就行了，菜單欄File–New–Project，然后選擇左側的Spring Initializr然后點擊Next。

下一個界面是配置項目的組、名稱與環境，根據自己情況設計就行了，然后點擊Next
下一個界面比較重要，是配置要添加的依賴。我添加了 Developer Tools下的Lombok、Web下的Spring Web、SQL下的Spring Data JPA和MySQL Driver

然后在一個新的窗口打開，首先要修改的是配置文件，在src–main–resources下的application.properties文件，配置文件有兩種格式一個是properties格式還有一個是yml格式。可以看這個博客了解差異:
application.properties與application.yml之間的區別
我這里用yml，將application.properties重命名為application.yml

spring:datasource:name: test #數據庫名url: jdbc:mysql://localhost:3306/test #urlusername: root #用戶名password: 123456 #密碼driver-class-name: com.mysql.jdbc.Driver #數據庫鏈接驅動jpa:show-sql: trueproperties:hibernate:format_sql: true server:port: 8181

配置了一些基本信息，然后項目創建到這里，前后端基本完成。

前后端交互

我在mysql中創建了一個person表，插入了3組數據，用來測試。
接下來實現前后端進行數據交互，將數據庫中的數據顯示出來，傳到vue中。

前端

我們新建一個vue界面，在veiws下右鍵，New–vue components，起名為person，然后回車。
這里說一下，這個vue界面也可以創建在components文件夾下，最后能映射好就行。
vue代碼：

<template><div><table><tr><td>學號</td><td>姓名</td></tr></table><tr v-for="item in people"><td>{{item.num}}</td><td>{{item.name}}</td></tr></div> </template><script>export default {name: "person",data(){return{msg:'10 粒子',people:[{num:1,name:'麻子'},{num:2,name:'合流'},{num:3,name:'小蓮'}]}}} </script><style scoped></style>

簡單說明，<template>對應HTML代碼，不一樣的是，它其中只能有一個div作為根，

<script>對應js代碼 ，<style>對應css代碼。
我在js中創建了3個假數據，為了更好的調試。
然后將這個界面配置到映射好
進入router–index.js下，加入以下代碼

//導入 import person from '../views/person.vue' //在const routes中加入{path: '/person',component: person}

然后就可以http://localhost:8080/person訪問到效果了。

后端

前端搞定后，就可以讓后端去訪問數據了。
新建三個包controller，entity和PersonRepositoty

第一個是用來和前端映射的，一個是用來和數據庫的表格對接的，還有一個是用來接受查詢結果的

Person類源代碼

package com.ronglin.test.entity;import lombok.Data;import javax.persistence.Entity; import javax.persistence.Id;@Entity @Data public class Person {@Idprivate String Num;private String Name;}

簡單的解釋一下，@Entity標簽是表示它是一個數據庫實體，@Data標簽會自動設置getter和setter方法，@Id標簽表示屬性

再來看PersonRepository接口

package com.ronglin.test.repository;import com.ronglin.test.entity.Person; import org.springframework.data.jpa.repository.JpaRepository;public interface PersonRepository extends JpaRepository<Person,Integer> {}

直接繼承JpaRepository<T,T>接口就行了，第一個泛型是數據庫類型，第二個泛型是索引key

然后就是PersonHandler類

package com.ronglin.test.controller;import com.ronglin.test.entity.Person; import com.ronglin.test.repository.PersonRepository; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.beans.factory.annotation.Autowired;import java.util.List;@RestController @RequestMapping("/person") public class PersonHandler {@Autowiredprivate PersonRepository personRepository;@GetMapping("/findAll")public List<Person> findAll(){return personRepository.findAll();}}

然后我們找到java–testApplication類，右鍵 運行就行了。
我們到瀏覽器中，輸入http://localhost:8181/person/findAll就可以查到后端反饋的內容了。

對接

回到前端，先按Ctrl+C停掉Vue，然后在終端中輸入vue add axios先安裝一個組件
然后再回到后端，我們需要解決一下跨域問題，因為請求的是8181，而前端是8080.
在后端com.ronglin.test下新建一個包，叫config，新建一個類叫CorsConfig
代碼如下

package com.ronglin.test.config;import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry){registry.addMapping("/**").allowedOriginPatterns("*").allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS").allowCredentials(true).maxAge(3600).allowedHeaders("*");} }

然后重新啟動后端，前端在perso.vue中js代碼中加入以下代碼將數據顯示出來。

created() {const _this = thisaxios.get('http://localhost:8181/person/findAll').then(function (resp) {_this.people = resp.data})}

成功了！！！

總結

有點難，框架不愧是框架，封裝的太好了，用起來頭昏眼花。=w=

總結

以上是生活随笔為你收集整理的Spring Boot和Vue的学习(一)--开发环境的安装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。