Vue中的ajax请求及插槽的使用

最新推荐文章于 2024-05-17 11:40:43 发布

Hiyiin

最新推荐文章于 2024-05-17 11:40:43 发布

阅读量179

点赞数

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

本文链接：https://blog.csdn.net/Hiyiin/article/details/125547817

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1 解决开发环境中的ajax跨域请求问题

1.1 跨域请求问题

我们知道服务器与服务器之间是不存在跨域请求的问题的，但一般在项目中是不允许进行跨域请求的，若要进行跨域请求，就需要借助一台代理服务器了，在进行跨域请求时，我们的请求如果直接发给目标服务器，目标服务器会返回一段具有特殊响应头的响应体数据，那么返回的数据是无法解析的，这时候就需要在本项目的端口配置一台代理服务器，先将请求发送给代理服务器，再又代理服务器转发到目标服务器，然后将代理服务器响应的数据处理后转发到本机服务器。

1.2 使用vue脚手架配置代理服务器

1.2.1 方法一

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

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

注意：

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

1.2.2 方法二

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

devServer: {
    proxy: {
        '/api1': {//配置所有以'/api'开头的请求路径
        	target: 'http://localhost:5000',//代理服务器的基础路径
        	pathRewrite: { "^/api1": "" },//路径重写：将所有路径前缀改为空字符串
        	ws: true, //用于支持web-socket网络套接字
        	changeOrigin: true //用于控制请求头中的host值
        },
        '/xbf2': {
        	pathRewrite: { "^/xbf2": "" },
        	target: 'http://localhost:5001'
        }
    }
}

注意：

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

2 GitHub用户搜索案例

2.1 原生静态html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="./bootstrap.css">
  <link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="app">
  <div class="container">
    <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" placeholder="enter the name you search"/>&nbsp;<button>Search</button>
      </div>
    </section>
    <div class="row">
      <div class="card">
        <a href="https://github.com/xxxxxx" target="_blank">
          <img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/>
        </a>
        <p class="card-text">xxxxxx</p>
      </div>
      <div class="card">
        <a href="https://github.com/xxxxxx" target="_blank">
          <img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/>
        </a>
        <p class="card-text">xxxxxx</p>
      </div>
      <div class="card">
        <a href="https://github.com/xxxxxx" target="_blank">
          <img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/>
        </a>
        <p class="card-text">xxxxxx</p>
      </div>
      <div class="card">
        <a href="https://github.com/xxxxxx" target="_blank">
          <img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/>
        </a>
        <p class="card-text">xxxxxx</p>
      </div>
      <div class="card">
        <a href="https://github.com/xxxxxx" target="_blank">
          <img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/>
        </a>
        <p class="card-text">xxxxxx</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

index.css

.album {
  min-height: 50rem; /* Can be removed; just added for demo purposes */
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #f7f7f7;
}

.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: .75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}

使用到的第三方库css库：bootstrap.css

2.2 案例要求

将静态页面拆分成vue静态组件
实现动态组件

2.3 接口地址

https://api.github.com/search/users?q=xxx

3 vue项目中常用的2个ajax库

1 axios

通用ajax请求库，官方推荐，使用广泛

2 vue-resource

vue插件库，vue1.x使用广泛，官方已不再维护。

4 slot插槽

4.1 作用

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

4.2 分类

默认插槽
具名插槽
作用域插槽

4.3 使用方式

默认插槽

父组件中：
<Category>
    <div>html结构</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 title="游戏">
    <template scope="data">
        <ul>
            <li v-for="(game, index) in data.games" :key="index">{{ game }}</li>
        </ul>
    </template>
</Category>
<Category title="游戏">
    <template scope="{games}">
        <ol>
            <li v-for="(game, index) in games" :key="index">{{ game }}</li>
        </ol>
    </template>
</Category>
<Category title="游戏">
    <template slot-scope="{games}">
        <h4 v-for="(game, index) in games" :key="index">{{ game }}</h4>
    </template>
</Category>

子组件中：
<template>
    <div class="category">
        <h3>{{ title }}分类</h3>
        <slot :games="games">我是默认的一些内容</slot>
    </div>
</template>

<script>
export default {
    name: "CategoryVue",
    data() {
        return {
            games: ["梦幻西游", "糖豆人", "超级玛丽", "塞尔达"],
        }
    },
    props: ["title"]
}
</script>

Hiyiin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的ajax请求及插槽的使用

我们知道服务器与服务器之间是不存在跨域请求的问题的，但一般在项目中是不允许进行跨域请求的，若要进行跨域请求，就需要借助一台代理服务器了，在进行跨域请求时，我们的请求如果直接发给目标服务器，目标服务器会返回一段具有特殊响应头的响应体数据，那么返回的数据是无法解析的，这时候就需要在本项目的端口配置一台代理服务器，先将请求发送给代理服务器，再又代理服务器转发到目标服务器，然后将代理服务器响应的数据处理后转发到本机服务器。在vue.config.js中添加如下配置注意：编写vue.config.js配置具体代理规
复制链接

扫一扫