環境準備
安裝腳手架
vuecli:
npm install -g @vue/cli
vite:
npm init vue@latest
- -g 全局安裝，任意目錄都可以使用vue腳本
進入目錄創建項目：
在目錄的終端輸入：vue ui
安裝devtool(這個網頁是安裝好了自動跳轉的)
運行項目：
修改端口號
devServer:{ port: 7070
}
文檔地址：
https://webpack.docschina.org/configuration/dev-server/#devserverproxy
代理問題
之前所有關于/api的地址都會走代理：
devServer:{ port: 7070, proxy: { '/api': { target: 'http://localhost:5008', changeOrigin: true } }
🌰：
當我輸入：http://localhost:7070/api/user/search/1
會自動跳轉到http://localhost:5008/api/user/search/1
項目結構
├─assets
├─components
├─router
├─store
└─views
-
assets - 靜態資源
-
components - 可重用組件
-
router - 路由
-
store - 數據共享
-
views - 視圖組件
以后還會添加
- api - 跟后臺交互，發送 fetch、xhr 請求，接收響應
- plugins - 插件
Vue組件
<script setup> </script> <template> </template> <style scoped> </style>
- template 模板部分
- srcipt 代碼部分 js數據和行為
- style 樣式
App.Vue
- 頂層組件
模板從javascript中提取數據：
<template>
<h1>{{meg}}</h1>
</template><script>
const options = { data: function (){ return {meg : "你好！"}; }
};
export default options;
</script>
基礎操作
Js屬性綁定值
<input type="text" v-bind:value="name">
使用v-bind:value 綁定script中的值
簡寫：<input type="date" :value="age">
事件綁定
<div> <input type="button" value="點我" v-on:click="m1"> <input type="button" value="點我" @click="m1">
</div>function m1(){ alert("嘻嘻哈哈")
}
當點擊button的時候，會觸發m1方法
v-on: 簡寫： @
雙向綁定
網頁上的數據改變，js中的屬性值也會改變
在template中使用v-model綁定script中的值
Axios
- Axios是什么？
- 用于發送異步 HTTP 請求（包括 GET、POST、PUT、DELETE 等）來與服務器進行交互。
- 對請求和響應有統一的攔截
也就是說可以使用Axios來獲取后端的數據，然后顯示在前端
使用Get方法
import axios from "axios";function sendReq(){axios.get('https://jsonplaceholder.typicode.com/posts').then(response => {console.log(response.data)})}
使用Post方法
function sendPost(){axios.post('https://jsonplaceholder.typicode.com/posts',{tittle: 'foo',body: 'bar',userId: 1,}).then(resp => {console.log(resp)})}
核心思想
前端傳遞的值到后端，需要符合后端的要求！
比如說：一個類，或者指定的屬性
默認配置
核心思想：創建一個實例，在實例里面修改配置，后期都可以使用這個配置
baseURL：會將配置好的url和之后寫的url進行拼接
withCredentials: 前后端都允許攜帶cookie，保持Session的一致性
狀態碼：
攔截器
攔截器的作用：
允許你在請求被發送或響應被處理之前，對它們進行統一的修改或處理。
-
統一修改請求頭：在發送請求之前，你可以添加或修改請求頭，例如添加認證令牌（如 JWT tokens）、CORS 頭等。
-
統一修改請求參數：可以在發送請求前修改或添加查詢參數、請求體等。
-
統一處理響應數據：在響應數據到達客戶端之前，你可以對它們進行處理，比如數據格式化、狀態碼檢查等。
-
錯誤處理：可以統一捕獲和處理請求或響應過程中發生的錯誤，比如網絡錯誤、超時、非200狀態碼等。
請求頭中會自帶一些信息：通過在請求頭中添加認證令牌（如 Authorization 頭），可以驗證用戶的身份，允許服務器識別和授權用戶。
_axios.interceptors.request.use(function(config){config.headers = {Authorization: ?'Bearer'}return config;},function(error){return Promise.reject(error);})
響應后做一個統一的處理：
_axios.interceptors.response.use(function(config){return config},function(error){ ?// 這里響應后如果出現錯誤了可以做一個統一的處理if(error.response.status === 201){console.log('請求內容不存在')return Promise.resolve(201)}if(error.response.status === 404){console.log('請求參數不正確')return Promise.resolve(201)}})
Vue基礎
Vue條件渲染
通過前端獲取的數據，存儲在數組中，然后通過Vue組件：v-if 條件判斷
<div> <div class="tbody"> <input type="button" value="獲取遠程數據" @click="get()"> </div> <div v-if="items.length > 0"> 已獲取數據 </div> <div v-else> 未獲取數據 </div>
</div>
async function get() { const resp = await axios.get('https://jsonplaceholder.typicode.com/posts'); console.log(resp.data) items.value = resp.data;
} // 創建一個響應式數組來存儲數據
const items = ref([]);
當我點擊獲取數據的時候，v-if會自己判斷是否條件成立，如果條件成立的話，那么先顯示div內容，否則不會顯示
