Vue2学习之第四章——Vue中的ajax-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue2学习之第四章——Vue中的ajax。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vue中的ajax

解决开发环境 Ajax 跨域问题

配置代理方式一

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

// 开启代理服务器（方式一）
  devServer: {
    proxy: 'http://localhost:5000'
  }

说明：

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

方法二

编写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
*/

说明：

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

vue 项目中常用的 2 个 Ajax 库

axios

安装

这里推荐使用的是VS Code，首先在VS里面打开终端，输入npm i axios安装即可

使用

引入axios
import axios from 'axios'
请求数据

axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
	response => {
	// 请求成功后更新List数据
	   this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
	},
	error => {
	// 请求失败后更新List数据
	   this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
	}
)

vue-resource

安装

这里推荐使用的是VS Code，首先在VS里面打开终端，输入npm i vue-resource安装即可

使用

在main.js引入vue-resource

// 引入插件
import VueResource from 'vue-resource'
Vue.use(VueResource)

请求数据

this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
	response => {
	// 请求成功后更新List数据
	   this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
	},
	error => {
	// 请求失败后更新List数据
	   this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
	}
)

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组件决定）

具体编码：文章来源地址https://www.toymoban.com/news/detail-821167.html

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