第 4 章:Vue 中的 ajax

学习资料来自尚硅谷VUE教学视频

csdn:课程代码、vue3笔记、课件

gitee:课件、代码、资料

其他:vscode插件推荐、第三方库网站、npmjs库

工具库推荐:
moment.js 时间处理工具,很强很大。还有个轻量的叫dayjs
生成全球唯一id工具:uuid,但是很大,有个精简版:nanoid

章节导航:

第 1 章:Vue 核心(上)

第 1 章:Vue 核心(下)

第 2 章:Vue 组件化编程

第 3 章:使用 Vue 脚手架

第 4 章:Vue 中的 ajax

第 5 章:vuex

第 6 章:vue-router(Vue路由)

第 7 章:Vue UI 组件库

第 7 章:Vue3

第 4 章:Vue 中的 ajax

    • 4.1. vue脚手架配置代理
      • 4.1.1 方法一
      • 4.1.2 方法二
    • 4.2. vue 项目中常用的 2 个 Ajax 库:axios
    • 4.3. vue 项目中常用的 2 个 Ajax 库:vue-resource
    • 4.4. 插槽

4.1. vue脚手架配置代理

跨域:
同源策略:所谓同源是指域名(127.0.0.1),协议(http),端口(8080)相同。

解决跨域:
1.cors
2.jsonp 巧妙的方式,借助script标签里的src属性在引入外部资源的时候不受同源策略限制的特点,且只能 get请求
3.配置代理服务器,代理服务器和前端请求同源,但是他是服务器,服务器和服务器之间通信不用ajax,ajax是前端技术,得有浏览器,有Window,才有xhr、fetch这些东西,在node.js里写new XMLHttpRequest()是会报错的,两台服务器之间打交道用的是最传统的http请求,所以同源策略管不到代理服务器,跨域问题就解决了。

怎么开启代理服务器:
1.Nginx
2.vue-cli

4.1.1 方法一

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

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

说明:

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

4.1.2 方法二

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

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,// 用于控制请求头中的host值
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,// 用于控制请求头中的host值
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
   changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
   changeOrigin默认值为true
*/

说明:

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

引入成型的第三方资源(样式等):
1.可以放在:src/assets/css/下,在app组件里引入
import ‘./assets/css/bootstrap.css’
如果通过import形式引入样式,脚手架会做一个非常严格的检查,你这个.css里面只要用到了不存在的资源那就会报错
2.放在public/css/下,在index.html里引入

4.2. vue 项目中常用的 2 个 Ajax 库:axios

发送请求的几种方法:
1.xhr new XMLHttpRequest() xhr.open() xhr.send()
2.jQuery $.get $.post
3.axios 尤雨溪 推荐 是promise风格
4.fetch 是promise风格,和xhr一样是js内置的,但是ie不兼容

安装axios:npm i axios

使用:
发送方:

	import axios from 'axios'

	searchUsers(){
		//请求前更新List的数据
		this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})
		//ES6模板字符串,用``代替"",在${} 里面写表达式
		axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
			response => {
				console.log('请求成功了')
				//请求成功后更新List的数据
				this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
			},
			error => {
				//请求后更新List的数据
				this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
			}
		)
	}

接收方:

	this.$bus.$on('updateListData',(dataObj)=>{
		//es6的拷贝对象方法
		this.info = {...this.info,...dataObj}
	})

4.3. vue 项目中常用的 2 个 Ajax 库:vue-resource

vue 插件库, vue1.x 使用广泛,官方已不维护。交给别的团队维护了。

安装vue-resource:npm i vue-resource

//引入插件
import vueResource from 'vue-resource'
//使用插件,这样vm和vc身上都会有$http
Vue.use(vueResource)

具体使用方式和axios区别就是把上面的axios.get改成this.$http.get,其他都一样,也是promise风格的。

4.4. 插槽

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

  2. 分类:默认插槽、具名插槽、作用域插槽

  3. 使用方式:

    1. 默认插槽:

插槽中的元素是在父组件完成解析之后塞到子组件的,所以样式写在父组件或子组件都行,如果写在父组件会把样式带好传过去,如果写在子组件样式也能控制

父组件中:

      <Category>
         <html结构>xxxx</html结构>
      </Category>

子组件中:

         <template>
             <div>
				<!-- 定义一个插槽(挖个坑,等着组件的使用者进行填充) -->
				<slot>我是一些默认值,当使用者没有传递具体结构时,我会出现</slot>
             </div>
         </template>
  1. 具名插槽:

vue2.6新提出了一个 slot="center" 新写法: v-slot:footer ,但只能在 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>
  1. 作用域插槽:

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

父组件中:

<template>
  <div class="container">
    <Category title="游戏">
      <!-- 注意属性名叫scope,没有d,引号内的名字可以随意定 -->
      <template scope="atguigu">
        <ul>
          <!-- scopeData里是键值对的对象,键就是子组件的定义的名字,可以传多个 -->
          <li v-for="(g, index) in atguigu.games" :key="index">{{ g }}</li>
        </ul>
      </template>
    </Category>

    <Category title="游戏">
      <!-- {games} es6的结构赋值 -->
      <template scope="{games , msg}">
        <ol>
          <li style="color: red" v-for="(g, index) in games" :key="index">
            {{ g }}
          </li>
        </ol>
        <h4>{{ msg }}</h4>
      </template>
    </Category>

    <Category title="游戏">
      <template slot-scope="{ games }">
        <h4 v-for="(g, index) in games" :key="index">{{ g }}</h4>
      </template>
    </Category>
  </div>
</template>

子组件中:

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<slot :games="games" msg="hello">我是默认的一些内容</slot>
	</div>
</template>

<script>
    export default {
        name:'Category',
        props:['title'],
        //数据在子组件自身
        data() {
            return {
                games:['红色警戒','穿越火线','劲舞团','超级玛丽']
            }
        },
    }
</script>

你可能感兴趣的:(学习之路,vue.js,javascript,学习笔记)