1. Toy模板网首页
  2. > Toy博客

Vue中的Ajax

9月前 作者：阿瞒有我良计15 分类：Toy博客 阅读(38) 违法举报

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

目录：

  • 1. Vue脚手架配置代理
  • 2.GitHub用户搜索案例
  • 3.vue-resource
  • 4.slot插槽
     

1.Vue脚手架配置代理

vue脚手架配置代理服务器：

  • 方法一：在vue.config.js中添加如下配置：

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

说明：

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

 方法二：

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

说明：

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

本案例需要下载axios库：npm install axios

下载一下所需要的课件资料：

https://gitee.com/coderPatrickStar/Vue/tree/master/%E5%B0%9A%E7%A1%85%E8%B0%B7Vue%E9%85%8D%E5%A5%97%E8%B5%84%E6%BA%90

vue脚手架配置代理服务器方法一：

启动server1,server2

Vue中的Ajax

App.vue

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

<script>
import axios from 'axios'

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

}
</script>

vue.config.js

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
    devServer: {
        proxy: 'http://localhost:5000'
    }
})

运行结果：

Vue中的Ajax

什么是跨域问题？如何解决跨域问题？ 

vue脚手架配置代理服务器方法二：

启动server1,server2

Vue中的Ajax

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/atguigu/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>

 vue.config.js

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
    devServer: {
        proxy: {
            '/atguigu': {
                target: 'http://localhost:5000',
                changeOrigin: true,
                pathRewrite: {'^/atguigu': ''}
            },
            '/demo': {
                target: 'http://localhost:5001',
                changeOrigin: true,
                pathRewrite: {'^/demo': ''}
            }
        }
    }
})

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
new Vue({
    el: '#app',
    render: h => h(App),
})

运行结果：

Vue中的Ajax

2.GitHub用户搜索案例

App.vue

<template>
    <div class="container">
      <Search></Search>
      <List></List>
    </div>
</template>

<script>

import Search from "@/components/Search";
import List from "@/components/List";

export default {
  name: 'App',
  components: {List, Search},
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    el:"#app",
    render: h => h(App),
    beforeCreate(){
        Vue.prototype.$bus = this
    }
})

List.vue

<template>
  <div class="row">
    <!-- 展示用户列表 -->
    <div class="card" v-show="info.users.length" v-for="user in info.users" :key="user.id">
      <a :href="user.html_url" target="_blank">
        <img :src="user.avatar_url" style='width: 100px'/>
      </a>
      <h4 class="card-title">{{user.login}}</h4>
    </div>
    <!-- 展示欢迎词 -->
    <h1 v-show="info.isFirst">欢迎使用！</h1>
    <!-- 展示加载中 -->
    <h1 v-show="info.isLoading">加载中...</h1>
    <!-- 展示错误信息 -->
    <h1 v-show="info.errMsg">{{info.errMsg}}</h1>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name:'List',
  data() {
    return {
      info:{
        isFirst:true,
        isLoading:false,
        errMsg:'',
        users:[]
      }
    }
  },
  mounted(){
    this.$bus.$on('updateListData',(dataObj)=>{
      //动态合并两个对象的属性
      this.info = {...this.info,...dataObj}
    })
  },
  beforeDestroy(){
    this.$bus.$off('updateListData')
  }
}
</script>

<style scoped>
.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%;
}
</style>

Search.vue

<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;
      <button @click="getUsers">Search</button>
    </div>
  </section>
</template>

<script>
import axios from 'axios'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name:'Search',
  data() {
    return {
      keyWord:''
    }
  },
  methods: {
    getUsers(){
      //请求前更新List的数据
      this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})
      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:[]})
          }
      )
    }
  }
}
</script>

运行结果：

Vue中的Ajax

 文章来源地址https://www.toymoban.com/news/detail-455620.html

3.vue-resource

下载 vue-resource库：

npm i vue-resource

main.js

import Vue from 'vue'
import App from './App.vue'
import vueResource from 'vue-resource'

Vue.config.productionTip = false

Vue.use(vueResource)

new Vue({
    el: "#app",
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    }
})

app.vue

<template>
    <div class="container">
      <Search></Search>
      <List></List>
    </div>
</template>

<script>

import Search from "@/components/Search";
import List from "@/components/List";

export default {
  name: 'App',
  components: {List, Search},
}
</script>

List.vue

<template>
  <div class="row">
    <!-- 展示用户列表 -->
    <div class="card" v-show="info.users.length" v-for="user in info.users" :key="user.id">
      <a :href="user.html_url" target="_blank">
        <img :src="user.avatar_url" style='width: 100px'/>
      </a>
      <h4 class="card-title">{{user.login}}</h4>
    </div>
    <!-- 展示欢迎词 -->
    <h1 v-show="info.isFirst">欢迎使用！</h1>
    <!-- 展示加载中 -->
    <h1 v-show="info.isLoading">加载中...</h1>
    <!-- 展示错误信息 -->
    <h1 v-show="info.errMsg">{{info.errMsg}}</h1>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name:'List',
  data() {
    return {
      info:{
        isFirst:true,
        isLoading:false,
        errMsg:'',
        users:[]
      }
    }
  },
  mounted(){
    this.$bus.$on('updateListData',(dataObj)=>{
      //动态合并两个对象的属性
      this.info = {...this.info,...dataObj}
    })
  },
  beforeDestroy(){
    this.$bus.$off('updateListData')
  }
}
</script>

<style scoped>
.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%;
}
</style>

Search.vue

<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;
      <button @click="getUsers">Search</button>
    </div>
  </section>
</template>

<script>
// import axios from 'axios'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Search',
  data() {
    return {
      keyWord: ''
    }
  },
  methods: {
    getUsers() {
      //请求前更新List的数据
      this.$bus.$emit('updateListData', {isLoading: true, errMsg: '', users: [], isFirst: false})
      this.$http.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: []})
          }
      )
    }
  }
}
</script>

总结：

vue项目常用的两个Ajax库：

  1. axios：通用的Ajax请求库，官方推荐，效率高
  2. vue-resource：vue插件库，vue 1.x使用广泛，官方已不维护

4.slot插槽 

总结：

插槽：

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

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

  3. 使用方式：

  • 默认插槽： 
父组件中：
        <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>
  • 作用域插槽：

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

  2. 具体编码

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

 

默认插槽

App.vue

<template>
  <div class="container">
    <Category title="美食">
      <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
    </Category>
    <Category title="游戏">
      <ul>
        <li v-for="(g,index) in games" :key="index">{{ g }}</li>
      </ul>
    </Category>
    <Category title="电影">
      <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
    </Category>
  </div>
</template>

<script>

import Category from "@/components/Category";

export default {
  name: 'App',
  components: {Category},
  data() {
    return {
      games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-around;
}
</style>

Category.vue

<template>
  <div class="category">
    <h3>{{ title }}分类</h3>
    <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
    <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Category",
  data() {
    return {}
  },
  props: ['title']
}
</script>

<style scoped>
.category {
  background-color: skyblue;
  width: 200px;
  height: 300px;
}

h3 {
  text-align: center;
  background-color: orange;
}

video {
  width: 100%;
}

img {
  width: 100%;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import vueResource from 'vue-resource'

Vue.config.productionTip = false

Vue.use(vueResource)

new Vue({
    el: "#app",
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    }
})

运行结果：

Vue中的Ajax

具名插槽 

App.vue

<template>
  <div class="container">
    <Category title="美食">
      <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
      <a slot="footer" href="http://www.atguigu.com">更多美食</a>
    </Category>
    <Category title="游戏">
      <ul slot="center">
        <li v-for="(g,index) in games" :key="index">{{ g }}</li>
      </ul>
      <div class="foot" slot="footer">
        <a href="http://www.atguigu.com">单机游戏</a>
        <a href="http://www.atguigu.com">网络游戏</a>
      </div>
    </Category>
    <Category title="电影">
      <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
      <template v-slot:footer>
        <div class="foot">
          <a href="http://www.atguigu.com">经典</a>
          <a href="http://www.atguigu.com">热门</a>
          <a href="http://www.atguigu.com">推荐</a>
        </div>
        <h4>欢迎前来观影</h4>
      </template>
    </Category>
  </div>
</template>

<script>

import Category from "@/components/Category";

export default {
  name: 'App',
  components: {Category},
  data() {
    return {
      games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
    }
  }
}
</script>

<style>
.container, .foot {
  display: flex;
  justify-content: space-around;
}

h4 {
  text-align: center;
}
</style>

Category.vue

<template>
  <div class="category">
    <h3>{{ title }}分类</h3>
    <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
    <slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
    <slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Category",
  data() {
    return {}
  },
  props: ['title']
}
</script>

<style scoped>
.category{
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h3{
  text-align: center;
  background-color: orange;
}
video{
  width: 100%;
}
img{
  width: 100%;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import vueResource from 'vue-resource'

Vue.config.productionTip = false

Vue.use(vueResource)

new Vue({
    el: "#app",
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    }
})

运行结果：

Vue中的Ajax

作用域插槽 

App.vue

<template>
  <div class="container">
    <Category title="游戏">
      <template scope="atguigu">
        <ul>
          <li v-for="(g,index) in atguigu.games" :key="index">{{ g }}</li>
        </ul>
      </template>
    </Category>
    <Category title="游戏">
      <template scope="atguigu">
        <ol>
          <li v-for="(g,index) in atguigu.games" :key="index">{{ g }}</li>
        </ol>
      </template>
    </Category>
    <Category title="游戏">
      <template scope="atguigu">
        <h4 v-for="(g,index) in atguigu.games" :key="index">{{ g }}</h4>
      </template>
    </Category>
  </div>
</template>

<script>

import Category from "@/components/Category";

export default {
  name: 'App',
  components: {Category},

}
</script>

<style>
.container, .foot {
  display: flex;
  justify-content: space-around;
}

h4 {
  text-align: center;
}
</style>

Category.vue

<template>
  <div class="category">
    <h3>{{ title }}分类</h3>
    <slot :games="games">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Category",
  data() {
    return {
      games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
    }
  },
  props: ['title']
}
</script>

<style scoped>
.category {
  background-color: skyblue;
  width: 200px;
  height: 300px;
}

h3 {
  text-align: center;
  background-color: orange;
}

video {
  width: 100%;
}

img {
  width: 100%;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import vueResource from 'vue-resource'

Vue.config.productionTip = false

Vue.use(vueResource)

new Vue({
    el: "#app",
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    }
})

运行结果：

Vue中的Ajax

 

到了这里，关于Vue中的Ajax的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Vue基础入门（2）- Vue的生命周期、Vue的工程化开发和脚手架、Vue项目目录介绍和运行流程

    Vue基础入门（2）- Vue的生命周期、Vue的工程化开发和脚手架、Vue项目目录介绍和运行流程

    Vue生命周期：就是一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个阶段： ① 创建 ② 挂载 ③ 更新 ④ 销毁 1.创建阶段：创建响应式数据 2.挂载阶段：渲染模板 3.更新阶段：修改数据，更新视图 watch 是监听的数据修改就触发， updated 是整个组件的dom更新才触发 4.销毁

    2024年03月10日
    浏览(60)
  • Vue 脚手架（打包工具）的理解 - 配置文件理解

    Vue 脚手架（打包工具）的理解 - 配置文件理解

    Vue 脚手架是 Vue 作为一个前端开发项目的最核心点，将 JavaScript 、 CSS 、 HTML 这几种前端自动整合，极大的简化了前端开发工作。 没有 Vue 脚手架，就没有 Vue ，这是一定的，Java 语言和C语言都需要编译，那么你可以将 Vue 脚手架看作是伪编译器吧，或者是伪解释器，当然伪解

    2024年02月06日
    浏览(41)
  • Vue（Vue脚手架）

    Vue（Vue脚手架）

    Vue官方提供脚手架平台选择最新版本： 可以相加兼容的标准化开发工具（开发平台） 禁止：最新的开发技术版本和比较旧版本的开发平台   Vue CLI 🛠️ Vue.js 开发的标准工具 https://cli.vuejs.org/zh/ c：cmmand l：line i：interface 命令行接口工具   在cmd中查看vue是否存在cli  全局安

    2024年02月01日
    浏览(42)

  • Vue 脚手架

    ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ │── main.js: 入口文件 ├── .gi

    2024年03月24日
    浏览(42)
  • 使用Vue脚手架

    使用Vue脚手架

    (193条消息) 第 3 章 使用 Vue 脚手架_qq_40832034的博客-CSDN博客 说明 1.Vue脚手架是Vue官方提供的标准化开发工具（开发平台） 2.最新的版本是4.x 3.文档Vue CLI脚手架（命令行接口） 具体步骤 1.如果下载缓慢请配置npm淘宝镜像 npm config set registry http://registry.npm.taobao.org 2.全局安装 @v

    2024年02月13日
    浏览(60)
  • vue脚手架创建项目

    vue脚手架创建项目

    npm install -g @vue/cli 如果报错可以尝试使用cnpm vue -V vue create 项目名称 输入y 上下选中选项 Manually select features （自由选择），回车 vue 版本的选择 其他按需要选择

    2024年02月05日
    浏览(62)

  • 如何搭建vue脚手架

    使用 create-vue 脚手架创建项目 create-vue参考地址：GitHub - vuejs/create-vue: 🛠️ The recommended way to start a Vite-powered Vue project 步骤： 执行创建命令 2.选择项目依赖类容 安装：项目开发需要的一些插件 必装： Vue Language Features (Volar)  vue3语法支持 TypeScript Vue Plugin (Volar)  vue3中更好的

    2023年04月14日
    浏览(47)
  • 使用Vue脚手架2

    使用Vue脚手架2

    ref属性 src/components/SchoolName.vue   src/App.vue   props配置项 src/App.vue src/components/StudentName.vue   注意：当props中与当前组件配置同名时， props中的配置优先级高于当前组件  mixin混入 1. 组件和混入对象含有同名选项 时，这些选项将以恰当的方式进行“合并”，在发生冲突时以 组件

    2024年02月12日
    浏览(44)
  • vue脚手架文件说明

    vue脚手架文件说明

    node_modules 都是下载的第三方包 public/index.html 浏览器运行的网页 src/main.js webpack打包的入口 src/APP.vue Vue页面入口 package.json 依赖包列表文件

    2024年02月15日
    浏览(46)
  • Vue脚手架搭建项目

    Vue脚手架搭建项目

    一、 安装Node.js (一) 注意事项 1. 注意电脑系统版本以及位数，按照自己电脑的环境下载相应的Node.js安装包 2. 确定运行项目的Node.js版本和npm版本，避免后期因为版本不同而产生的一些差异问题 3. 在官网下载Node安装包时请下载稳定版（或不同版本的稳定版），正确区分稳定版

    2024年02月09日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包