Vue與Springboot的簡單整合

概述：本文主要講述vue+springboot jpa實現登入註冊的方法，springboot(2.1.3.release)、vue(3.5.5)均為當前最新版本，其中首頁和登入效果如圖所示：

1、安裝node和npm

安裝方法參考官網

2、安裝vue和vue-cli

（1）方式一

npm install vue

npm install -g @vue/cli
npm install -g @vue/cli-init

npm install -g cnpm --registry=

cnpm install cnpm -g
cnpm install vue
cnpm install --global vue-cli

vue --version

vue init webpack my-project

#也可以使用下列命令，但是會缺少一些目錄
vue create my-projec

（1）切換到my-project中安裝

npm i element-ui -s

npm install axios -s

"dependencies":

import elementui from 'element-ui'

import '../node_modules/element-ui/lib/theme-chalk/index.css'
import axios from '../node_modules/axios'
import qs from '../node_modules/qs'
​vue.use(elementui);
new vue()

cdn引入方式

​

export default new router()

（1）elementui測試,修改專案中components下的helloworld.vue，更多詳情參見官網

button

try element
get測試
post測試
​visible: false

cd my-project

npm run dev
#如使用vue create my-projec 啟動使用
npm run serve

(2)axios請求測試

傳送get請求

this.$axios.get('/hello')

.then(function(response) )
.catch(function(err) );

.then(function(response) )

.catch(function(err) );

測試結果如下：

axios基本語法

axios.request(config)

axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

5、建立springboot專案

springboot jpa資料訪問的詳細內容參見官網指導手冊

專案結構如圖：

其中static目錄下的檔案從my-project打包而來，命令如下

npm run build

(1)後台接收引數的一點說明

@requestparam 接受url中的請求引數（不用於表單提交）

(2)前後端分離跨域處理

修改vue專案中config下的index.js檔案

proxytable: }}

spring boot+vue從零開始搭建系統（三）：專案前後端分離_實現簡單登入demo

springboot專案整合vue

由於特殊原因，所以臨危受命將vue整合到springboot的專案中，終於在忙活了一天之後成功搞定，下面就分享一下這次的整合過程 1建立springboot和vue專案 springboot以及vue專案都已經由前後端同事分別開發完成，這裡就不介紹具體的建立過程了 2.打包vue專案 vue使用了v...

springBoot和vue後台整合

版本資訊 spring boot 2.4.3 vue 2.6.11 configuration public class mvcconfig extends webmvcconfigurationsupport 到這裡就可以使用backend.com index.html訪問了 controller...

把vue打包到springboot的jar下執行

業務場景 2由於伺服器許可權問題，不允許講vue放到nginx下 解決辦法 1把vue編譯後的靜態檔案放到springboot專案的resources下面，即將index.html放到resources templates下面，將static下面的檔案放到resources static下 2spr...