《前端開發(fā)框架》課件-第7章 網(wǎng)絡(luò)請求和狀態(tài)管理

7.1.2

安裝Axios先定一個小目標(biāo)！掌握Axios的安裝方法，能夠在項目中安裝Axios7.1.2

安裝AxiosAxios的安裝方式主要有兩種，一種是通過標(biāo)簽引入，另一種是使用包管理工具安裝。通過標(biāo)簽引入使用包管理工具安裝使用Unpkg或jsDelivr的內(nèi)容分發(fā)網(wǎng)絡(luò)服務(wù)提供的Axios文件，也可以將Axios文件下載至本地再引入。使用npm或yarn包管理工具安裝Axios。7.1.2

安裝Axios1.通過標(biāo)簽引入①使用Unpkg的CDN服務(wù)引入Axios。<scriptsrc="/axios/dist/axios.min.js"></script>②使用jsDelivr的CDN服務(wù)引入Axios。<scriptsrc="/npm/axios/dist/axios.min.js"></script>注意7.1.2

安裝Axios2.使用包管理工具安裝使用npm或yarn包管理工具安裝Axios。#使用npm包管理工具安裝npminstallaxios--save#使用yarn包管理工具安裝yarnaddaxios--save7.1.2

安裝Axios在Vue

3項目中使用yarn安裝Axios打開命令提示符，切換到D:\vue\chapter07目錄，使用yarn創(chuàng)建一個名稱為my-axios的項目。步驟1yarncreatevite--templatevue項目名稱步驟2步驟37.1.2

安裝Axios在Vue

3項目中使用yarn安裝Axios在命令提示符中，切換到my-axios目錄，為項目安裝所有依賴。步驟1cdmy-axiosyarn步驟2步驟37.1.2

安裝Axios在Vue

3項目中使用yarn安裝Axios在my-axios目錄下使用yarn安裝Axios。步驟1yarnaddaxios--步驟2步驟3項目運行時依賴@1.2.1表示安裝Axios的版本號7.1.2

安裝Axios在Vue

3項目中使用yarn安裝Axios使用VSCode編輯器打開my-axios目錄，執(zhí)行命令啟動服務(wù)。yarndev步驟1步驟2步驟3項目啟動后，會默認(rèn)開啟一個本地服務(wù)，地址為:5173/。7.1.3

使用Axios先定一個小目標(biāo)！掌握Axios的使用方法，能夠在項目中使用Axios7.1.3

使用AxiosAxios安裝完成后，如何使用呢？7.1.3

使用Axios在項目中使用Axios時，通常的做法是先將Axios封裝成一個模塊，然后在組件中導(dǎo)入模塊。7.1.3

使用Axios①將Axios封裝成模塊，創(chuàng)建src\axios\request.js文件。import

axiosfrom'axios'constrequest=axios.create({timeout:2000})export

defaultrequest②在組件中導(dǎo)入模塊，在src\App.vue文件中導(dǎo)入模塊。import

requestfrom'./axios/request.js'7.1.3

使用AxiosAxios常用的請求方式：get請求和post請求。①使用Axios發(fā)送get請求的基本語法格式。②使用Axios發(fā)送post請求的基本語法格式。request({request({url:'請求路徑',method:'get',params:{參數(shù)}}).then(res=>{console.log(res)}).catch(error=>{console.log(error)})url:'請求路徑',method:'post',data:{參數(shù)}}).then(res=>{console.log(res)}).catch(error=>{console.log(error)})7.1.4

Axios圖書列表案例先定一個小目標(biāo)！掌握Axios圖書列表案例的實現(xiàn)，能夠使用Axios完成網(wǎng)絡(luò)請求7.1.4

Axios圖書列表案例使用Axios實現(xiàn)圖書列表案例，圖書列表頁面初始效果如下圖所示。7.1.4

Axios圖書列表案例單擊上圖中“請求數(shù)據(jù)”按鈕，數(shù)據(jù)請求成功頁面效果如下圖所示。7.1.4

Axios圖書列表案例圖書列表案例的實現(xiàn)分為以下2步。模擬數(shù)據(jù)請求數(shù)據(jù)127.1.4

Axios圖書列表案例模擬數(shù)據(jù)：為了方便演示，使用mockjs模擬后端接口，下面講解如何安裝mockjs，以及編寫模擬數(shù)據(jù)和配置模擬數(shù)據(jù)的相關(guān)信息。7.1.4

Axios圖書列表案例使用mockjs模擬后端接口在my-axios目錄下，使用yarn安裝mockjs。步驟1步驟2yarnaddmockjs@1.1.0--save步驟3步驟47.1.4

Axios圖書列表案例使用mockjs模擬后端接口創(chuàng)建src\mock\books.json文件，該文件用于存放模擬的數(shù)據(jù)。步驟1步驟2[{"id":1,"name":

"西游記",步驟3步驟4"author":"吳承恩"},{"id":2,"name":

"紅樓夢","author":"曹雪芹"},7.1.4

Axios圖書列表案例使用mockjs模擬后端接口>>接上頁代碼步驟1{"id":3,步驟2步驟3步驟4"name":

"三國演義","author":"羅貫中"},{"id":4,"name":

"水滸傳","author":"施耐庵"}]7.1.4

Axios圖書列表案例使用mockjs模擬后端接口創(chuàng)建src\mock\mockSer

ver.js文件，該文件用于配置模擬數(shù)據(jù)的相關(guān)信息。步驟1步驟2importMockfrom

'mockjs'importbooksfrom

'./books.json'Mock.mock('/mock/getBooks','get',{code:200,//請求成功的狀態(tài)碼//模擬的請求數(shù)據(jù)步驟3步驟4data:books})7.1.4

Axios圖書列表案例使用mockjs模擬后端接口修改src\main.js文件，在創(chuàng)建Vue應(yīng)用實例前導(dǎo)入mockSer

ver.js文件。步驟1步驟2import'./mock/mockServer.js'步驟3步驟47.1.4

Axios圖書列表案例請求數(shù)據(jù)：后端接口和模擬數(shù)據(jù)準(zhǔn)備好之后，就可以請求接口、獲取數(shù)據(jù)了。下面講解如何在頁面中請求接口并獲取數(shù)據(jù)。7.1.4

Axios圖書列表案例在頁面中請求接口并獲取數(shù)據(jù)清空src\App.vue文件中的內(nèi)容。步驟1步驟2<template><divclass="box"><button>請求數(shù)據(jù)</button><tablewidth="90%"class="table"><caption>步驟3<h2>圖書列表</h2></caption>步驟4步驟5<thead><tr><th>編號</th><th>書名</th>7.1.4

Axios圖書列表案例在頁面中請求接口并獲取數(shù)據(jù)>>接上頁代碼步驟1步驟2<th>作者</th></tr></thead><tbody>步驟3<!--主體內(nèi)容--></tbody>步驟4步驟5</table></div></template>7.1.4

Axios圖書列表案例在頁面中請求接口并獲取數(shù)據(jù)在src\App.vue文件中編寫樣式代碼。步驟1步驟2<style>body,

html{width:100%;height:100%;}步驟3#app{width:100%!important;}步驟4步驟5table{border-collapse:

collapse;margin:0auto;text-align:

center;7.1.4

Axios圖書列表案例在頁面中請求接口并獲取數(shù)據(jù)>>接上頁代碼步驟1步驟2}tabletd,

tableth{border:1px

solid#cad9ea;color:

#666;height:30px;步驟3}tabletheadth{background-color:#CCE8EB;width:100px;}步驟4步驟57.1.4

Axios圖書列表案例在頁面中請求接口并獲取數(shù)據(jù)>>接上頁代碼步驟1步驟2tabletr:nth-child(odd){background:

#fff;}tabletr:nth-child(even){步驟3background:

#F5FAFA

;}步驟4步驟5</style>7.1.4

Axios圖書列表案例在頁面中請求接口并獲取數(shù)據(jù)為“請求數(shù)據(jù)”按鈕綁定單擊事件處理方法。步驟1步驟2<button@click="getData">請求數(shù)據(jù)</button>步驟3步驟4步驟57.1.4

Axios圖書列表案例在頁面中請求接口并獲取數(shù)據(jù)在src\App.vue文件中請求接口數(shù)據(jù)。步驟1步驟2<scriptsetup>import{reactive

}from

'vue'importrequestfrom

'./axios/request.js'constbookData=reactive({步驟3list:[]})步驟4步驟5//測試請求方法7.1.4

Axios圖書列表案例在頁面中請求接口并獲取數(shù)據(jù)>>接上頁代碼步驟1步驟2constgetData=function(){request({url:'/mock/getBooks',method:'get'}).then(res=>{步驟3bookData.list=res.data.dataconsole.log(res.data.data)}).catch(error=>{console.log(error)})步驟4步驟5}</script>7.1.4

Axios圖書列表案例在頁面中請求接口并獲取數(shù)據(jù)在src\App.vue文件中編寫主體內(nèi)容。步驟1步驟2<tbodyv-for="iteminbookData.list":key="item.id"><!--主體內(nèi)容--><tr>步驟3<td>{{item.id}}</td><td>{{}}</td><td>{{item.author}}</td></tr>步驟4步驟5</tbody>7.2.2

安裝Vuex先定一個小目標(biāo)！掌握Vuex的安裝方法，能夠在項目中安裝Vuex7.2.2

安裝VuexVuex的安裝方式主要有兩種，一種是通過標(biāo)簽引入，另一種是使用包管理工具安裝。通過標(biāo)簽引入使用包管理工具安裝使用Unpkg的CDN服務(wù)提供的Vuex文件，也可以將Vuex文件下載至本地再引入。使用npm或yarn包管理工具安裝Vuex。7.2.2

安裝Vuex1.通過標(biāo)簽引入使用Unpkg的CDN服務(wù)引入Vuex。<scriptsrc="/vuex@next"></script>注意7.2.2

安裝Vuex2.使用包管理工具安裝使用npm或yarn包管理工具安裝Vuex。#使用npm包管理工具安裝npminstallvuex--save#使用yarn包管理工具安裝yarnaddvuex--save7.2.2

安裝Vuex在Vue

3項目中使用yarn安裝Vuex打開命令提示符，切換到D:\vue\chapter07目錄，使用yarn創(chuàng)建一個名稱為my-vuex的項目。步驟1yarncreatevite--templatevue項目名稱步驟2步驟37.2.2

安裝Vuex在Vue

3項目中使用yarn安裝Vuex在命令提示符中，切換到my-vuex目錄，為項目安裝所有依賴。步驟1cdmy-vuexyarn步驟2步驟37.2.2

安裝Vuex在Vue

3項目中使用yarn安裝Vuex在my-vuex目錄下使用yarn安裝Vuex。步驟1yarnaddvuex--步驟2步驟3項目運行時依賴@4.0.2表示安裝Vuex的版本號7.2.2

安裝Vuex在Vue

3項目中使用yarn安裝Vuex使用VSCode編輯器打開my-vuex目錄，執(zhí)行命令啟動服務(wù)。步驟1yarndev步驟2步驟3項目啟動后，會默認(rèn)開啟一個本地服務(wù)，地址為:5173/。7.2.4

Vuex計數(shù)器案例先定一個小目標(biāo)！掌握Vuex計數(shù)器案例的實現(xiàn)，能夠運用Vuex完成計數(shù)器效果7.2.4

Vuex計數(shù)器案例要求使用Vuex實現(xiàn)計數(shù)器案例：計數(shù)器初始頁面中定義2個初始數(shù)字0和100，定義“+”和“-”2個按鈕。每次單擊“+”按鈕，數(shù)字從0自增1；每次單擊“-”按鈕，數(shù)字會從100自減1。7.2.4

Vuex計數(shù)器案例計數(shù)器初始頁面效果如下圖所示。7.2.4

Vuex計數(shù)器案例在計數(shù)器初始頁面中單擊“+”按鈕，數(shù)字從0變?yōu)?，效果如下圖所示。7.2.4

Vuex計數(shù)器案例在計數(shù)器初始頁面中單擊“-”按鈕，數(shù)字從100變?yōu)?9，效果如下圖所示。7.2.4

Vuex計數(shù)器案例講解計數(shù)器案例的實現(xiàn)清空src\App.vue文件中的內(nèi)容，重新編寫如下代碼。步驟1步驟2<template><p>每次增加1：<button@click="increment">+</button>數(shù)字：0步驟3步驟4</p><p>每次減少1：<button@click="reduction">-</button>數(shù)字：100</p></template>7.2.4

Vuex計數(shù)器案例講解計數(shù)器案例的實現(xiàn)>>接上頁代碼步驟1步驟2<scriptsetup>constincrement=()=>{}constreduction=()=>{}</script>步驟3步驟4<style>button{background-color:aquamarine;}</style>7.2.4

Vuex計數(shù)器案例講解計數(shù)器案例的實現(xiàn)創(chuàng)建src\store\index.js文件。步驟1步驟2import{createStore

}from

'vuex'conststore

=createStore({state:{add:0,步驟3步驟4reduce:100},mutations:{increase(state){state.add++},7.2.4

Vuex計數(shù)器案例講解計數(shù)器案例的實現(xiàn)>>接上頁代碼步驟1步驟2decrease(state){state.reduce--}},步驟3步驟4actions:{},modules:{}})exportdefaultstore7.2.4

Vuex計數(shù)器案例講解計數(shù)器案例的實現(xiàn)修改src\App.vue文件，提交increase()方法和decrease()方法。步驟1步驟2<scriptsetup>import{useStore

}from

'vuex'conststore

=useStore()constincrement=()=>{mit('increase')}步驟3步驟4constreduction=()=>{mit('decrease')}</script>7.2.4

Vuex計數(shù)器案例講解計數(shù)器案例的實現(xiàn)在<template>模板中獲取state中的數(shù)據(jù)并顯示在頁面中。步驟1步驟2<p>每次增加1：<button@click="increment">+</button>數(shù)字：{{this.$store.state.add}}</p>步驟3步驟4<p>每次減少1：<button@click="decrement">-</button>數(shù)字：{{this.$store.state.reduce}}</p>7.3.4

Pinia計數(shù)器案例先定一個小目標(biāo)！掌握Pinia計數(shù)器案例的實現(xiàn)，能夠運用Pinia完成計數(shù)器效果7.3.4

Pinia計數(shù)器案例要求使用Pinia實現(xiàn)計數(shù)器案例：計數(shù)器初始頁面定義了2個初始數(shù)字0和100，定義了“+”和“-”2個按鈕。每次單擊“+”按鈕，數(shù)字從0自增1；每次單擊“-”按鈕，數(shù)字會從100自減1。7.3.4

Pinia計數(shù)器案例計數(shù)器初始頁面效果如下圖所示。7.3.4

Pinia計數(shù)器案例在計數(shù)器初始頁面中單擊“+”按鈕，其后數(shù)字從0變?yōu)?，效果如下圖所示。7.3.4

Pinia計數(shù)器案例在計數(shù)器初始頁面中單擊“-”按鈕，其后數(shù)字從100變?yōu)?9，效果如下圖所示。7.3.4

Pinia計數(shù)器案例講解計數(shù)器案例的實現(xiàn)清空src\App.vue文件中的內(nèi)容，重新編寫如下代碼。步驟1步驟2<template><p>每次增加1：<button@click="increment">+</button>數(shù)字：0步驟3步驟4</p><p>每次減少1：<button@click="reduction">-</button>數(shù)字：100</p></template>7.3.4

Pinia計數(shù)器案例講解計數(shù)器案例的實現(xiàn)>>接上頁代碼步驟1步驟2<scriptsetup>constincrement=()=>{}constreduction=()=>{}</script>步驟3步驟4<style>button{background-color:aquamarine;}</style>7.3.4

Pinia計數(shù)器案例講解計數(shù)器案例的實現(xiàn)創(chuàng)建src\store\index.js文件。步驟1步驟2import{defineStore

}from

'pinia'exportconstuseStore

=defineStore('storeId',{state:()=>{return{步驟3步驟4add:0,reduce:100}},7.3.4

Pinia計數(shù)器案例講解計數(shù)器案例的實現(xiàn)>>接上頁代碼步驟1步驟2getters:{},actions:{increase(){this.add++步驟3步驟4},decrease(){this.reduce--}}})7.3.4

Pinia計數(shù)器案例講解計數(shù)器案例的實現(xiàn)修改src\App.vue文件，調(diào)用actions中定義的increase()方法和decrease()步驟1步驟2方法。<scriptsetup>import{useStore

}from'./store'import{storeToRefs

}from'pinia'conststore

=useStore()const{add,reduce}=storeToRefs(store)constincrement=()=>{store.increase()步驟3步驟4}constreduction=()=>{store.decrease()}</script>7.3.4

Pinia計數(shù)器案例講解計數(shù)器案例的實現(xiàn)在<template>模板中輸出state中的數(shù)據(jù)，顯示在頁面中。步驟1步驟2<p>每次增加1：<button@click="increment">+</button>數(shù)字：{{add}}</p>步驟3步驟4<p>每次減少1：<button@click="reduction">-</button>數(shù)字：{{reduce}}</p>7.3.5

Pinia模塊化先定一個小目標(biāo)！熟悉Pinia模塊化，能夠闡述Pinia模塊化的實現(xiàn)原理7.3.5

Pinia模塊化Pinia模塊化應(yīng)用場景？7.3.5

Pinia模塊化在復(fù)雜的大型項目中，如果將多個模塊的數(shù)據(jù)都定義到一個store對象中，那么store對象將變得非常大且難以管理，此時，可以使用Pinia直接定義多個模塊，Pinia不需要像Vuex一樣使用modules模塊，它可以在src\store目錄中直接定義對應(yīng)模塊，一個.js文件為一個模塊。7.3.5

Pinia模塊化在src\store目錄下，新建user.js和shop.js文件作為兩個模塊，其中，user.js文件用于保存用戶信息數(shù)據(jù)，shop.js文件用于保存商品信息數(shù)據(jù)。7.3.5

Pinia模塊化講解user.js和shop.js模塊的創(chuàng)建創(chuàng)建src\store\user.js文件，編寫用戶信息數(shù)據(jù)。步驟1步驟2import{defineStore

}from

'pinia'exportconstuseUserStore

=defineStore('user',{state:()=>{return{name:'小明',sex:'男',age:18}步驟3步驟4步驟5步驟6},getters:{},actions:{}})7.3.5

Pinia模塊化講解user.js和shop.js模塊的創(chuàng)建創(chuàng)建src\store\shop.js文件，編寫商品信息數(shù)據(jù)。步驟1步驟2import{defineStore

}from

'pinia'exportconstuseShopStore

=defineStore('shop',{步驟3state:()=>{return{list:[步驟4步驟5步驟6{id:'01',name:'手機',price:2000},7.3.5

Pinia模塊化講解user.js和shop.js模塊的創(chuàng)建>>接上頁代碼步驟1步驟2{id:'02',name:'音響',步驟3price:5000}]步驟4步驟5步驟6}},getters:{},actions:{}})7.3.5

Pinia模塊化講解user.js和shop.js模塊的創(chuàng)建>>接上頁代碼步驟1步驟2getters:{},actions:{increase(){步驟3this.add++},decrease(){步驟4步驟5步驟6this.reduce--}}})7.3.5

Pinia模塊化講解user.js和shop.js模塊的創(chuàng)建創(chuàng)建src\components\User.vue文件，在頁面中顯示用戶信息數(shù)據(jù)。步驟1步驟2<template><div>user模塊：<p>姓名：{{name}}</p><p>性別：{{sex}}</p><p>年齡：{{age}}</p></div>步驟3</template>步驟4步驟5步驟6<scriptsetup>import{useUserStore}from'../store/user.js'import{storeToRefs

}from'pinia'constuser=useUserStore()const{name,sex,age}=storeToRefs(user)</script>7.3.5

Pinia模塊化講解user.js和shop.js模塊的創(chuàng)建修改src\main.js文件，切換頁面中顯示的組件。import

Appfrom'./components/User.vue'步驟1步驟2保存上述代碼，在瀏覽器中訪問:5173/，user模塊的頁面效果如下圖所示。步驟3步驟4步驟5步驟67.3.5

Pinia模塊化講解user.js和shop.js模塊的創(chuàng)建創(chuàng)建src\components\Shop.vue文件，在頁面中顯示商品信息數(shù)據(jù)。步驟1步驟2<template>shop模塊：<divv-for="iteminlist"><p>商品id：{{item.id}}</p><p>商品名稱：{{}}</p><p>商品價格：{{item.price}}元</p></div>步驟3步驟4步驟5步驟6</template>7.3.5

Pinia模塊化講解user.js和shop.js模塊的創(chuàng)建>>接上頁代碼步驟1步驟2<scriptsetup>import{useShopStore

}from

'../store/shop.js'import{storeToRefs

}from

'pinia'constshop=useShopStore()const{list}=storeToRefs(shop)</script>步驟3步驟4步驟5步驟67.3.5

Pinia模塊化講解user.js和shop.js模塊的創(chuàng)建修改src\main.js文件，切換頁面中顯示的組件。import

Appfrom'./components/Shop.vue'步驟1步驟2保存上述代碼，在瀏覽器中訪問:5173/，shop模塊的頁面效果如下圖所示。步驟3步驟4步驟5步驟67.3.6

Pinia持久化存儲先定一個小目標(biāo)！掌握Pinia持久化存儲，能夠運用Pinia實現(xiàn)全部數(shù)據(jù)或部分?jǐn)?shù)據(jù)的持久化存儲7.3.6

Pinia持久化存儲在項目開發(fā)中，使用Pinia進行狀態(tài)管理時，若想要刷新瀏覽器后，仍保留之前的操作狀態(tài)，可以通過Pinia的持久化插件pinia-plugin-persist實現(xiàn)。7.3.6

Pinia持久化存儲使用npm或yarn包管理工具安裝pinia-plugin-persist。#使用npm包管理工具安裝npminstallpinia-plugin-persist--save#使用yarn包管理工具安裝yarnaddpinia-plugin-persist--save7.3.6

Pinia持久化存儲在my-pinia項目中安裝pinia-plugin-persist在my-pinia目錄下使用yarn安裝pinia-plugin-persist插件。步驟1yarnaddpinia-plugin-persist--步驟2步驟3項目運行時依賴@1.0.0表示安裝pinia-plugin-persist的版本號7.3.6

Pinia持久化存儲在my-pinia項目中安裝pinia-plugin-persist使用VSCode編輯器打開my-pinia目錄，執(zhí)行命令啟動服務(wù)。yarndev步驟1步驟2步驟37.3.6

Pinia持久化存儲在my-pinia項目中安裝pinia-plugin-persist在src\main.js文件中導(dǎo)入并掛載pinia-plugin-persist插件。步驟1import{createApp}from

'vue'import'./style.css'import{createPinia}from

'pinia'importpiniaPluginPersistfrom

'pinia-plugin-persist'importAppfrom

'./components/Shop.vue'constpinia=createPinia()步驟2步驟3pinia.use(piniaPluginPersist)constapp=createApp(App)app.use(pinia)app.mount('#app')7.3.6

Pinia持久化存儲在my-pinia項目中安裝pinia-plugin-persist掛載pinia-plugin-persist插件后，在模塊中實現(xiàn)持久化存儲的示例代碼如下。步驟1persist:{enabled:true,strategies:[{//開啟數(shù)據(jù)緩存步驟2步驟3key:

'StoreId1',storage:localStorage,paths:['字段']}//當(dāng)前store的id//存儲方式//指定要持久化的字段]}7.3.6

Pinia持久化存儲1.全部數(shù)據(jù)持久化存儲下面以my-pinia項目為例，演示如何使用Pinia實現(xiàn)全部數(shù)據(jù)持久化存儲。當(dāng)用戶單擊“增加年齡”按鈕時，年齡值將會改變，此時關(guān)閉瀏覽器或刷新頁面后，要求頁面顯示最新修改的年齡值。7.3.6

Pinia持久化存儲使用Pinia實現(xiàn)全部數(shù)據(jù)持久化存儲在src\components\User.vue文件中定義“增加年齡”按鈕。步驟1步驟2<template><div>user模塊：<p>姓名：{{name}}</p><p>性別：{{sex}}</p><p>年齡：{{age}}</p><button@click="changeAge">增加年齡</button>步驟3步驟4</div></template>7.3.6

Pinia持久化存儲使用Pinia實現(xiàn)全部數(shù)據(jù)持久化存儲修改src\store\user.js文件，在actions中定義一個改變年齡的方法，并實現(xiàn)持久化存儲。步驟1步驟2actions:{changeAge(){this.age++},步驟3步驟4},persist:{enabled:true,strategies:[7.3.6

Pinia持久化存儲使用Pinia實現(xiàn)全部數(shù)據(jù)持久化存儲>>接上頁代碼步驟1步驟2{key:

'user',storage:localStorage}步驟3步驟4]}7.3.6

Pinia持久化存儲