第四章：Vue中的ajax

第四章：Vue中的ajax

4.1：解决开发环境跨域问题

• vue脚手架配置代理

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

     devServer: {
         proxy: "http://localhost:5000",  // 配置需要请求接口的地址，只需到端口号写到即可
     }
     

     说明：

     • 优点：配置简单，请求资源时直接发给前端即可。
     • 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
     • 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发服务器(优先匹配前端资源)。

  2. 编写vue.config.js配置具体代理规则：

     devServer: {
         proxy: {
           '/xiaowang': {	// 配置所有以 '/xiaowang'开头的请求路径
             target: 'http://localhost:5000',  // 代理目标的基础路径
             pathRewrite: { '^/xiaowang': "" },  // 若真实请求路径没有'/xiaowang'的这个虚拟目录，则可以过滤这个目录
             ws: true,
             ChangeOrigin: true,		// 是否与请求的资源端口号保持一致
           },
           .... // 配置多个就跟上面配置类似
         }
       }
     

     说明：

     • 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
     • 缺点：配置略微繁琐，请求资源时必须加前缀。

4.2：slot插槽

• 作用：让组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。

• 分类：默认插槽、具名插槽、作用域插槽。

• 使用方式

  1. 默认插槽

     父组件中：
     	<Category>
             <div>html结构</div>
     	</Category>
     子组件：
     	<template>
             <div>
                 <slot>插槽默认内容....</slot> <!-- 定义插槽 -->
             </div>
     	</template>
     

  2. 具名插槽

     父组件中：
     	<Category>
             <div slot="footer">html结构</div>
     	</Category>
     子组件：
     	<template>
             <div>
                 <slot name="footer">插槽默认内容....</slot> <!-- 定义插槽 -->
             </div>
     	</template>
     

  3. 作用域插槽

     • 理解：数据在组件的自身，但根据数据生成的结果需要组件的使用者来决定。

       父组件中：
       		<Category>
       			<template scope="scopeData">
       				<ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul>
       			</template>
       		</Category>
       子组件中：
               <template>
                   <div>
                       <slot :games="games"></slot>
                   </div>
               </template>
               <script>
                   export default {
                       name:'Category',
                       props:['title'],
                       data() {  return { games:['红色警戒','穿越火线','劲舞团','超级玛丽'] }  },
                   }
               </script>