（一）前後端結合測試——vue+springBoot實戰

參考教程：https://learner.blog.csdn.net/article/details/88925013

#安裝vue-cli 

參考教程 vue-cli安裝

#安裝lombok

lombok介紹

 

最好每做幾步，就進行測試，以便更好地定位問題

 

#構建前端項目

vue create wj-vue

cd wj-vue

cnpm install

cnpm install --save axios

cnpm run serve

 

#前端頁面開發

1）新建Login.vue

2)新建AppIndex.vue

3)設置反向代理

4)配置頁面路由

5）設置跨域支持

Vue Cli4解決跨域問題
解決辦法：
只需要在後臺方法前加一個@CrossOrigin註解就可以解決
 

6）運行項目

 

Q:把項目從虛擬機複製到本機，再運行時出錯

A：把node_modules刪除，重新下載依賴

 

** <router-link to=' '>的路徑要與router的path路徑對應

<router-link to="/about">About</router-link>

要與

  {
    path: '/about',
    name: 'About',
    component: About
  }

匹配

7）效果

 

#創建後端項目

1）IDEA新建項目，spring Initializr ——>next

2）輸入項目元數據，Next

3)web——>spring web, next

4)finish

5)運行Application.java

 

 

#後端開發

1）User類 --------接收對象

2）Result類-------響應

3）LoginController類-----處理響應

4）配置端口

5）測試項目

同時啓動前端和後端

前端login頁面輸入用戶名admin,密碼123456

點擊登錄，自動跳轉到index頁面