概述:本文主要講述vue+springboot jpa實現登入註冊的方法,springboot(2.1.3.release)、vue(3.5.5)均為當前最新版本,其中首頁和登入效果如圖所示:
1、安裝node和npm
安裝方法參考官網
2、安裝vue和vue-cli
(1)方式一
(2)方式二:使用使用**映象安裝npm install vue
npm install -g @vue/cli
npm install -g @vue/cli-init
檢視vue版本npm install -g cnpm --registry=
cnpm install cnpm -g
cnpm install vue
cnpm install --global vue-cli
vue --version
3、建立專案
4、安裝並配置elementui和axiosvue init webpack my-project
#也可以使用下列命令,但是會缺少一些目錄
vue create my-projec
(1)切換到my-project中安裝
安裝完成後,在package.json中會出現依賴npm i element-ui -s
npm install axios -s
"dependencies":
(2)配置:在src下的main.js中增加如下內容
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引入方式(3)測試
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請求
傳送post請求this.$axios.get('/hello')
.then(function(response) )
.catch(function(err) );
.then(function(response) )
.catch(function(err) );
測試結果如下:
axios基本語法
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檔案
說明:http://localhost:8080為要請求的伺服器位址,如果get或post請求為:/user/login,則相當於:http://localhost:8080/user/loginproxytable: }}
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...