vue中的ajax

vue腳手架配置代理

方法一

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

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

說明：

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

方法二

​ 編寫vue.config.js配置具體代理規則：

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

說明：

1. 優點：可以配置多個代理，且可以靈活的控制請求是否走代理。
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 v-slot:footer>
                     <div>html結構2</div>
                  </template>
              </Category>
      子組件中：
              <template>
                  <div>
                     <!-- 定義插槽 -->
                     <slot name="center">插槽預設內容...</slot>
                     <slot name="footer">插槽預設內容...</slot>
                  </div>
              </template>
      

   3. 作用域插槽：

      1. 理解：數據在組件的自身，但根據數據生成的結構需要組件的使用者來決定。（games數據在Category組件中，但使用數據所遍歷出來的結構由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'],
                         //數據在子組件自身
                         data() {
                             return {
                                 games:['紅色警戒','穿越火線','勁舞團','超級瑪麗']
                             }
                         },
                     }
                 </script>