課程鏈接

4.Vue中的Ajax

4.1.vue腳手架配置代理

4.1.1.方法一

? 在vue.config.js中添加如下配置：

devServer:{proxy:"http://localhost:5000"
}

說明：

1. 優(yōu)點：配置簡單，請求資源時直接發(fā)給前端（8080）即可。
2. 缺點：不能配置多個代理，不能靈活的控制請求是否走代理。
3. 工作方式：若按照上述配置代理，當請求了前端不存在的資源時，那么該請求會轉發(fā)給服務器 （優(yōu)先匹配前端資源【public下的資源】）

4.1.2.方法二

? 編寫vue.config.js配置具體代理規(guī)則：

module.exports = {devServer: {proxy: {'/api1': {// 匹配所有以 '/api1'開頭的請求路徑target: 'http://localhost:5000',// 代理目標的基礎路徑changeOrigin: true,//用于控制請求頭中的host值pathRewrite: {'^/api1': ''}},'/api2': {// 匹配所有以 '/api2'開頭的請求路徑target: 'http://localhost:5001',// 代理目標的基礎路徑changeOrigin: true,//用于控制請求頭中的host值pathRewrite: {'^/api2': ''}}}}
}
/*changeOrigin設置為true時，服務器收到的請求頭中的host為：localhost:5000changeOrigin設置為false時，服務器收到的請求頭中的host為：localhost:8080changeOrigin默認值為true
*/

說明：

1. 優(yōu)點：可以配置多個代理，且可以靈活的控制請求是否走代理。
2. 缺點：配置略微繁瑣，請求資源時必須加前綴。

4.2.插槽

1. 作用：讓父組件可以向子組件指定位置插入html結構，也是一種組件間通信的方式，適用于 父組件 ===> 子組件 。

2. 分類：默認插槽、具名插槽、作用域插槽

3. 使用方式：

   1. 默認插槽：

      父組件中：<Category><div>html結構1</div></Category>
      子組件中：<template><div><!-- 定義插槽 --><slot>插槽默認內容...</slot></div></template>
      

   2. 具名插槽：

      父組件中：<Category><template slot="center"><div>html結構1</div></template><!-- <template slot="footer"></template> --><template v-slot:footer><!--v-slot只能配合template使用--><div>html結構2</div></template></Category>
      子組件中：<template><div><!-- 定義插槽 --><slot name="center">插槽默認內容...</slot><slot name="footer">插槽默認內容...</slot></div></template>
      

   3. 作用域插槽：

      1. 理解：數(shù)據(jù)在組件的自身，但根據(jù)數(shù)據(jù)生成的結構需要組件的使用者來決定。（games數(shù)據(jù)在Category組件中，但使用數(shù)據(jù)所遍歷出來的結構由App組件決定）

      2. 具體編碼：

         父組件中：<Category><template scope="scopeData"><!-- 生成的是ul列表 --><ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template></Category><Category><template slot-scope="scopeData"><!-- 生成的是h4標題 --><h4 v-for="g in scopeData.games" :key="g">{{g}}</h4></template></Category>
         子組件中：<template><div><slot :games="games"></slot></div></template><script>export default {name:'Category',props:['title'],//數(shù)據(jù)在子組件自身data() {return {games:['紅色警戒','穿越火線','勁舞團','超級瑪麗']}},}</script>
         

   作用域如何理解：主要在于子組件slot標簽中的:games=‘games’ 和父組件的scope=‘xxx’

5.Vuex

5.1.理解Vuex

5.1.1.概念

? 在Vue中實現(xiàn)集中式狀態(tài)（數(shù)據(jù)）管理的一個Vue插件，對vue應用中多個組件的共享狀態(tài)進行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間通信。

5.1.2.何時使用？

? 多個組件需要共享數(shù)據(jù)時

5.1.3.vuex原理

比喻：

• 這三個由store管理，且他們的數(shù)據(jù)類型都是對象，且必須要所有組件都能看到store才行

5.2.vuex使用

5.2.1.搭建vuex環(huán)境

0. 安裝vuex：

  npm i vuex//vue3版本所對應的vuex4版本npm i vuex@3//vue2版本下載vuex3版本

1. 創(chuàng)建文件：src/store/index.js

   //引入Vue核心庫
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //應用Vuex插件
   Vue.use(Vuex)//準備actions對象——響應組件中用戶的動作
   const actions = {}
   //準備mutations對象——修改state中的數(shù)據(jù)
   const mutations = {}
   //準備state對象——保存具體的數(shù)據(jù)
   const state = {}//創(chuàng)建并暴露store
   export default new Vuex.Store({actions,mutations,state
   })
   

2. 在main.js中創(chuàng)建vm時傳入store配置項

   ......
   //引入store
   import store from './store'
   ......//創(chuàng)建vm
   new Vue({el:'#app',render: h => h(App),store
   })
   

5.2.2.基本使用

1. 初始化數(shù)據(jù)、配置actions、配置mutations，操作文件store.js

   //引入Vue核心庫
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //引用Vuex
   Vue.use(Vuex)const actions = {//響應組件中加的動作jia(context,value){// console.log('actions中的jia被調用了',miniStore,value)context.commit('JIA',value)},
   }const mutations = {//執(zhí)行加JIA(state,value){// console.log('mutations中的JIA被調用了',state,value)state.sum += value}
   }//初始化數(shù)據(jù)
   const state = {sum:0
   }//創(chuàng)建并暴露store
   export default new Vuex.Store({actions,mutations,state,
   })
   

2. 組件中讀取vuex中的數(shù)據(jù)：$store.state.sum

3. 組件中修改vuex中的數(shù)據(jù)：$store.dispatch('action中的方法名',數(shù)據(jù))或 $store.commit('mutations中的方法名',數(shù)據(jù))

備注：若沒有網絡請求或其他業(yè)務邏輯，組件中也可以越過actions，即不寫dispatch，直接編寫commit
html頁面中解析state時可以不加this，但js中的vue書寫時需要

5.2.3.getters的使用

1. 概念：當state中的數(shù)據(jù)需要經過加工后再使用時，可以使用getters加工。

2. 在store.js中追加getters配置

   ......const getters = {bigSum(state){return state.sum * 10}
   }//創(chuàng)建并暴露store
   export default new Vuex.Store({......getters
   })
   

3. 組件中讀取數(shù)據(jù)：$store.getters.bigSum

5.2.4.四個map方法的使用

1. mapState方法：用于幫助我們映射state中的數(shù)據(jù)為計算屬性

   computed: {//借助mapState生成計算屬性：sum、school、subject（對象寫法）...mapState({sum:'sum',school:'school',subject:'subject'}),//借助mapState生成計算屬性：sum、school、subject（數(shù)組寫法）...mapState(['sum','school','subject']),
   },
   

2. mapGetters方法：用于幫助我們映射getters中的數(shù)據(jù)為計算屬性

   computed: {//借助mapGetters生成計算屬性：bigSum（對象寫法）...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成計算屬性：bigSum（數(shù)組寫法）...mapGetters(['bigSum'])
   },
   

3. mapActions方法：用于幫助我們生成與actions對話的方法，即：包含$store.dispatch(xxx)的函數(shù)

   methods:{//靠mapActions生成：incrementOdd、incrementWait（對象形式）...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})//靠mapActions生成：incrementOdd、incrementWait（數(shù)組形式）...mapActions(['jiaOdd','jiaWait'])
   }
   

4. mapMutations方法：用于幫助我們生成與mutations對話的方法，即：包含$store.commit(xxx)的函數(shù)

   methods:{//靠mapActions生成：increment、decrement（對象形式）...mapMutations({increment:'JIA',decrement:'JIAN'}),//靠mapMutations生成：JIA、JIAN（對象形式）...mapMutations(['JIA','JIAN']),
   }
   

備注：mapActions與mapMutations使用時，若需要傳遞參數(shù)需要：在模板中綁定事件時傳遞好參數(shù)，否則參數(shù)是事件對象。

5.2.5.模塊化+命名空間

1. 目的：讓代碼更好維護，讓多種數(shù)據(jù)分類更加明確。

2. 修改store.js

   const countAbout = {namespaced:true,//開啟命名空間state:{x:1},mutations: { ... },actions: { ... },getters: {bigSum(state){return state.sum * 10}}
   }const personAbout = {namespaced:true,//開啟命名空間state:{ ... },mutations: { ... },actions: { ... }
   }const store = new Vuex.Store({modules: {countAbout,personAbout}
   })
   

3. 開啟命名空間后，組件中讀取state數(shù)據(jù)：

   //方式一：自己直接讀取
   this.$store.state.personAbout.list
   //方式二：借助mapState讀取：
   ...mapState('countAbout',['sum','school','subject']),
   

4. 開啟命名空間后，組件中讀取getters數(shù)據(jù)：

   //方式一：自己直接讀取
   this.$store.getters['personAbout/firstPersonName']
   //方式二：借助mapGetters讀取：
   ...mapGetters('countAbout',['bigSum'])
   

5. 開啟命名空間后，組件中調用dispatch

   //方式一：自己直接dispatch
   this.$store.dispatch('personAbout/addPersonWang',person)
   //方式二：借助mapActions：
   ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   

6. 開啟命名空間后，組件中調用commit

   //方式一：自己直接commit
   this.$store.commit('personAbout/ADD_PERSON',person)
   //方式二：借助mapMutations：
   ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
   

6.路由

6.1.相關理解

6.1.1.路由的理解

1. 理解： 一個路由（route）就是一組映射關系（key - value），多個路由需要路由器（router）進行管理。
2. 前端路由：key是路徑，value是組件。（后端路由value是function）

6.1.2.vue-router理解

Vue的一個插件庫，專門用來實現(xiàn)SPA應用

什么是SPA應用：

1. 單頁 Web 應用(single page web application，SPA)
2. 整個應用只有一個完整的頁面
3. 點擊頁面中的導航鏈按不會刷新頁面，只會做頁面的局部更新
4. 數(shù)據(jù)需要通過ajax請求獲取。

6.2.基本路由

6.2.1.基本使用

1. 安裝vue-router，命令：npm i vue-router
   vue2要下載npm i vue-router@3 3版本的才行

2. 應用插件：Vue.use(VueRouter)

3. 編寫router配置項:

   //引入VueRouter
   import VueRouter from 'vue-router'
   //引入Luyou 組件
   import About from '../components/About'
   import Home from '../components/Home'//創(chuàng)建router實例對象，去管理一組一組的路由規(guī)則
   const router = new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home}]
   })//暴露router
   export default router
   

4. 實現(xiàn)切換（active-class可配置高亮樣式）

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

5. 指定展示位置

   <router-view></router-view>
   

6.2.2.幾個注意點

1. 路由組件通常存放在pages文件夾，一般組件通常存放在components文件夾。
2. 通過切換，“隱藏”了的路由組件，默認是被銷毀掉的，需要的時候再去掛載。
3. 每個組件都有自己的$route屬性，里面存儲著自己的路由信息。
4. 整個應用只有一個router，可以通過組件的$router屬性獲取到。

6.3.嵌套（多級）路由

1. 配置路由規(guī)則，使用children配置項：

   routes:[{path:'/about',component:About,},{path:'/home',component:Home,children:[ //通過children配置子級路由{path:'news', //此處一定不要寫：/newscomponent:News},{path:'message',//此處一定不要寫：/messagecomponent:Message}]}
   ]
   

2. 跳轉（要寫完整路徑）：

   <router-link to="/home/news">News</router-link>
   

6.4.路由的query參數(shù)

1. 傳遞參數(shù)

   <!-- 跳轉并攜帶query參數(shù)，to的字符串寫法 -->
   <router-link :to="/home/message/detail?id=666&title=你好">跳轉</router-link><!-- 跳轉并攜帶query參數(shù)，to的對象寫法 -->
   <router-link :to="{path:'/home/message/detail',query:{id:666,title:'你好'}}"
   >跳轉</router-link>
   

2. 接收參數(shù)：

   $route.query.id
   $route.query.title
   

6.5.命名路由

1. 作用：可以簡化路由的跳轉。

2. 如何使用

   1. 給路由命名：

      {path:'/demo',component:Demo,children:[{path:'test',component:Test,children:[{name:'hello' //給路由命名path:'welcome',component:Hello,}]}]
      }
      

   2. 簡化跳轉：

      <!--簡化前，需要寫完整的路徑 -->
      <router-link to="/demo/test/welcome">跳轉</router-link><!--簡化后，直接通過名字跳轉 -->
      <router-link :to="{name:'hello'}">跳轉</router-link><!--簡化寫法配合傳遞參數(shù) -->
      <router-link :to="{name:'hello',query:{id:666,title:'你好'}}"
      >跳轉</router-link>
      

6.6.路由的params參數(shù)

1. 配置路由，聲明接收params參數(shù)

   {path:'/home',component:Home,children:[{path:'news',component:News},{component:Message,children:[{name:'xiangqing',path:'detail/:id/:title', //使用占位符聲明接收params參數(shù)component:Detail}]}]
   }
   

2. 傳遞參數(shù)

   <!-- 跳轉并攜帶params參數(shù)，to的字符串寫法 -->
   <router-link :to="/home/message/detail/666/你好">跳轉</router-link><!-- 跳轉并攜帶params參數(shù)，to的對象寫法 -->
   <router-link :to="{name:'xiangqing',params:{id:666,title:'你好'}}"
   >跳轉</router-link>
   

   特別注意：路由攜帶params參數(shù)時，若使用to的對象寫法，則不能使用path配置項，必須使用name配置！

3. 接收參數(shù)：

   $route.params.id
   $route.params.title
   

6.7.路由的props配置

? 作用：讓路由組件更方便的收到參數(shù)

{name:'xiangqing',path:'detail/:id',component:Detail,//第一種寫法：props值為對象，該對象中所有的key-value的組合最終都會通過props傳給Detail組件// props:{a:900}//第二種寫法：props值為布爾值，布爾值為true，則把路由收到的所有params參數(shù)通過props傳給Detail組件// props:true//第三種寫法：props值為函數(shù)，該函數(shù)返回的對象中每一組key-value都會通過props傳給Detail組件props(route){return {id:route.query.id,title:route.query.title}}
}

6.8.<router-link>的replace屬性

1. 作用：控制路由跳轉時操作瀏覽器歷史記錄的模式
2. 瀏覽器的歷史記錄有兩種寫入方式：分別為push和replace。路由跳轉時候默認為push
push是追加歷史記錄
   replace是替換當前記錄
3. 如何開啟replace模式：<router-link replace .......>News</router-link>
   

6.9.編程式路由導航

1. 作用：不借助<router-link> 實現(xiàn)路由跳轉，讓路由跳轉更加靈活

2. 具體編碼：

   //$router的兩個API
   this.$router.push({name:'xiangqing',params:{id:xxx,title:xxx}
   })this.$router.replace({name:'xiangqing',params:{id:xxx,title:xxx}
   })
   this.$router.forward() //前進
   this.$router.back() //后退//傳數(shù)字 正數(shù)就是前進幾步 負數(shù)就是后退幾步
   this.$router.go() //可前進也可后退 

6.10.緩存路由組件

1. 作用：讓不展示的路由組件保持掛載，不被銷毀。

2. 具體編碼：

 <!-- 緩存一個時 --><!--  <keep-alive include="News">  --><!--緩存哪個路由<寫組件名>的內容，不寫則都緩存--><!-- 緩存多個時 --><keep-alive :include="[News, Message]"> <router-view></router-view></keep-alive>

6.11.兩個新的生命周期鉤子

1. 作用：路由組件所獨有的兩個鉤子，用于捕獲路由組件的激活狀態(tài)。
2. 具體名字：
   1. activated路由組件被激活時觸發(fā)。
   2. deactivated路由組件失活時觸發(fā)。
      PS:之前講的nextTick也是一個鉤子

6.12.路由守衛(wèi)

1. 作用：對路由進行權限控制

2. 分類：全局守衛(wèi)、獨享守衛(wèi)、組件內守衛(wèi)

3. 全局守衛(wèi):

   //全局前置守衛(wèi)：初始化時執(zhí)行、每次路由切換前執(zhí)行
   router.beforeEach((to,from,next)=>{console.log('beforeEach',to,from)if(to.meta.isAuth){ //判斷當前路由是否需要進行權限控制if(localStorage.getItem('school') === 'atguigu'){ //權限控制的具體規(guī)則next() //放行}else{alert('暫無權限查看')// next({name:'guanyu'})}}else{next() //放行}
   })//全局后置守衛(wèi)：初始化時執(zhí)行、每次路由切換后執(zhí)行
   router.afterEach((to,from)=>{console.log('afterEach',to,from)if(to.meta.title){ document.title = to.meta.title //修改網頁的title}else{document.title = 'vue_test'}
   })
   

4. 獨享守衛(wèi):

   beforeEnter(to,from,next){console.log('beforeEnter',to,from)if(to.meta.isAuth){ //判斷當前路由是否需要進行權限控制if(localStorage.getItem('school') === 'atguigu'){next()}else{alert('暫無權限查看')// next({name:'guanyu'})}}else{next()}
   }
   

5. 組件內守衛(wèi)：

   //進入守衛(wèi)：通過路由規(guī)則，進入該組件時被調用
   beforeRouteEnter (to, from, next) {
   },
   //離開守衛(wèi)：通過路由規(guī)則，離開該組件時被調用
   beforeRouteLeave (to, from, next) {
   }
   

6.13.路由器的兩種工作模式

6.13.1.hash & history

1. 對于一個url來說，什么是hash值？—— #及其后面的內容就是hash值。
2. hash值不會包含在 HTTP 請求中，即：hash值不會帶給服務器。
3. hash模式：
   1. 地址中永遠帶著#號，不美觀 。
   2. 若以后將地址通過第三方手機app分享，若app校驗嚴格，則地址會被標記為不合法。
   3. 兼容性較好。
4. history模式：
   1. 地址干凈，美觀 。
   2. 兼容性和hash模式相比略差。
   3. 應用部署上線時需要后端人員支持，解決刷新頁面服務端404的問題。

6.13.2. nodejs部署項目（簡單版）

nodejs部署一個項目的大致流程：

1. 打包項目 npm run build 注意區(qū)別是hash還是history模式
2. 初始化一個項目 npm init
3. 安裝nodejs中的express npm i express
4. 寫好server.js
   （可能需要下載npm install --save connect-history-api-fallback）

//使用nodejs部署項目server.js
const express = require('express')
//hash模式不用這樣
//history模式下，使用connect-history-api-fallback來解決 單獨復制并新建一個頁面填入http://localhost:5005/home/message等頁面不出現(xiàn)內容的問題
const history = require('connect-history-api-fallback');
const app = express()
//history模式下
app.use(history())//指定路徑
app.use(express.static(__dirname+'/static'))/* app.get('/person',(req,res)=>{res.send({name:'tom',age:18,})
}) */app.listen(5005,(err)=>{if(!err) console.log('服務器啟動成功了')
})

5. 運行項目 node server

7.VUE UI組件庫

7.1.移動端常用 UI 組件庫

1. Vant https://youzan.github.io/vant
2. Cube UI https://didi.github.io/cube-ui
3. Mint UI http://mint-ui.github.io

7.2.PC 端常用 UI 組件庫

1. Element UI https://element.eleme.cn
2. IView UI https://www.iviewui.co