Vue中的ajax和slot插槽

最新推荐文章于 2024-05-21 17:19:31 发布

蓝朽

最新推荐文章于 2024-05-21 17:19:31 发布

阅读量1.5k

点赞数 1

分类专栏： Vue 文章标签： vue.js ajax 前端

本文链接：https://blog.csdn.net/lx00000025/article/details/131354465

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、解决Ajax跨域问题

在前后端分离项目中，解决跨域问题是一个常见的需求。下面列举了几种常用的跨域解决方法：

CORS（跨域资源共享）：这是最常用且推荐的跨域解决方案。通过在服务器端设置响应头，允许特定的源（域名、协议、端口）访问资源。在后端服务器上进行配置即可实现跨域请求。
代理服务器：可以设置一个代理服务器，将前端请求转发到后端服务器上。由于同源策略的限制只适用于浏览器，而代理服务器在服务器端运行，不受同源策略的约束，因此可以解决跨域问题。
JSONP（JSON with Padding）：利用 <script> 标签可以跨域加载脚本的特性，在前端通过动态创建 <script> 标签来请求服务器上的一个回调函数，服务器返回的数据会被包裹在该回调函数中，从而实现跨域请求。
WebSocket：使用 WebSocket 进行通信可以绕过同源策略限制，WebSocket 是一种全双工通信协议，可以在客户端和服务器之间建立持久化的连接，实现实时数据传输。
反向代理：通过在服务器端配置反向代理服务器，将前端请求代理到后端服务器上，由于是在同一域名下进行请求，所以不存在跨域问题。

使用代理服务器

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

module.exports = {
  lintOnSave:false /*关闭语法检查*/,
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
    }
  },
  //开启代理服务器(方式一)
  // devServer: {
  //   proxy: 'http://localhost:5000'
  // },
  //开启代理服务器(方式二)
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        pathRewrite:{'^/api':''},
        // ws: true,//用于支持websocket，默认值为true
        // changeOrigin: true //用于控制请求头中的host值，默认值为true
      },
      '/demo': {
        target: 'http://localhost:5001',
        pathRewrite:{'^/demo':''},
        // ws: true,//用于支持websocket，默认值为true
        // changeOrigin: true //用于控制请求头中的host值，默认值为true
      }
    }
  }
}

App.vue

<template>
  <div >
    <button @click="getStudents">获取学生信息</button>
    <button @click="getCars">获取汽车信息</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
    name:"App",
    methods: {
      getStudents(){
        axios.get('http://localhost:8080/api/students').then(
          response=>{
            console.log("请求成功了",response.data)
          },
          error=>{
            console.log('请求失败了',error.message)
          }

        )
      },
      getCars(){
        axios.get('http://localhost:8080/demo/cars').then(
          response=>{
            console.log("请求成功了",response.data)
          },
          error=>{
            console.log('请求失败了',error.message)
          }

        )
      }
    },
}
</script>

二、slot插槽

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。
分类：默认插槽、具名插槽、作用域插槽

使用方式：

默认插槽：

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

具名插槽：

父组件中：
        <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>

作用域插槽：

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

具体编码：

父组件中：
		<Category>
			<template scope="scopeData">
				<!-- 生成的是ul列表 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category>
			<!-- slot-scope="{games}"：新的api -->
			<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>