環境準備:

開發:

跨域問題:

只有瀏覽器才存在跨域問題, 此時瀏覽器的地址和前端服務一致,所以不存在跨域問題, 但是當瀏覽器中的js代碼需要向8080發送請求時就會由于存在跨域問題而失敗. 簡單的說前端和瀏覽器的地址+端口是一致的,瀏覽器只能向前端服務發送請求, 所以可以使用配置代理的方式, 使得瀏覽器不直接發送請求到別的服務,而是將請求發送給前端服務, 由前端服務發送相應的請求給別的服務器.

一個單擊事件綁定兩個函數的格式:

用分號將兩個函數名隔開

優化axios:

避免重復代碼的書寫

原本的axios是直接返回result

路由:

和之前的課程設計不同, 所有的vue文件都要導入進App.vue中, 這時就需要使用路由技術來確定何時展現不同的頁面

在vue中路由模式有兩種: 哈希模式, history模式

導入vue-router后需要在main.js中導入, 注意, 如果router不是在index.js中寫的, 那么路徑就不能省略文件名. (也就是說, 如果沒有寫文件的名字 ,他會默認找到名為index的js文件)最后在App.vue中導入router, 這樣就會使用router-view來承載對應組件中的內容

在代碼中實現頁面的跳轉:

導入'vue-router' 的useRouter函數, 生成router, router有實現頁面跳轉的api: push方法,?

子路由:

注意重定向: 可以把'/'的訪問重新定義到指定的路徑

Pinia:

注意useTokenStore的返回值, 是一個json對象: return {token, setToken, removeToken}

在pinia中定義的響應式數據都不需要通過.value獲取數據

在登陸成功后, 將返回的token保存在pinia對象的token中,然后在其他的調用后端服務器的請求中添加請求頭傳入pinia中的token即可.

如果在所有的請求中都手動添加請求頭是比較繁瑣的, 可以添加攔截器,配置請求前的操作:

pinia持久化插件:

未登錄統一處理:

編程技巧總結:

對于使用次數超過兩次的代碼一般都會進行封裝或者編寫攔截器

對于內容的展示會封裝成函數后在script標簽中執行進行渲染

相當一部分的數據都寫成響應式數據, 對于json格式的數據使用的非常普遍

有專門的文件夾對應utils, api, view

要注意script標簽中函數執行的先后順序, 函數調用可能存在數據的依賴關系(比如說, A函數從后臺獲取數據, B函數需要使用獲取到的數據, 那么B函數就需要放在A的后面調用)

開發步驟: 1.頁面的搭建: 去到Element Plus官網查找相應的框架

2. 根據需求修改框架

3. 編寫需要的數據, 函數

4.編寫api接口

項目總結:

1.了解了Element + Plus的使用

2.了解了axios的使用

3.了解了pinia的使用(用于共享不同vue文件之間的數據)

4.了解了路由的使用, 用于切換不同的vue頁面

5. 注重重復代碼的封裝, 提高利用率, 包括數據模型的復用