vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue ajax配置slot插槽

Vue中的Ajax 配置代理slot插槽的方法详解

作者：怀梦

这篇文章主要介绍了Vue中的Ajax 配置代理 slot插槽的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

4.1.Vue脚手架配置代理

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

配置参考文档Vue-Cli devServer.proxy

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 **JSON **的格式来写

4.1.1.方法一

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

module.exports = { 
devServer : { 
  proxy:"http://localhost:5000" 
  } 
}

说明

4.1.2.方法二

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

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

说明

vue.config.js

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

src/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/api1/students').then(
                    response => { 
                        console.log('请求成功了',response.data);
                    },
                    error => { 
                        console.log('请求失败了',error.message);
                    }
                )
            },
            getCars() {
                axios.get('http://localhost:8080/api2/cars').then(
                    response => { 
                        console.log('请求成功了',response.data); 
                    },
                    error => { 
                        console.log('请求失败了',error.message); 
                    }
                );
            }
        }
    }
</script>

4.2.GitHub用户搜索案例

public/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE游览器的一个特殊配置，含义是让IE游览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
    <!-- 引入bootstrap样式 --> 
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css" rel="external nofollow" >
    <!-- 配置网页的标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 当游览器不支持js时noscript中的元素就会被渲染-->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

src/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; // 安装全局事件总线
  }
})

src/App.vue

<template>
    <div class="container">
        <Search/>
        <List/>
    </div>
</template> 
<script> 
    // 引入组件
    import Search from './components/Search.vue';
    import List from './components/List.vue';
    export default {
        name:'App',
        components:{
            Search,
            List
        },
    }
</script>

src/components/Search.vue

<template>
    <div class="container">
        <Search/>
        <List/>
    </div>
</template> 
<script> 
    // 引入组件
    import Search from './components/Search.vue';
    import List from './components/List.vue';
    export default {
        name:'App',
        components:{
            Search,
            List
        },
    }
</script>

src/components/List.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="searchUsers">Search</button>
        </div>
    </section>
</template>
<script>
    import axios from "axios";
    export default {
        name: "Search",
        data() {
            return {
                keyWord: ""
            };
        },
        methods: {
            searchUsers() {
                // 请求前更新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>

4.3.vue-resource

vue项目常用的两个Ajax库

下载vue-resource库npm i vue-resource

src/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; // 安装全局事件总线
  }
})

src/App.vue

<template>
    <div class="container">
        <Search/>
        <List/>
    </div>
</template> 
<script> 
    // 引入组件
    import Search from './components/Search.vue';
    import List from './components/List.vue';
    export default {
        name:'App',
        components:{
            Search,
            List
        },
    }
</script>

src/components/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="searchUsers">Search</button>
        </div>
    </section>
</template>
<script>
    export default {
        name: "Search",
        data() {
            return {
                keyWord: ""
            };
        },
        methods: {
            searchUsers() {
                // 请求前更新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>

src/components/List.vue

<template>
    <div class="row">
        <!-- 展示用户列表 -->
        <div
                v-show="info.users.length"
                class="card"
                v-for="user in info.users"
                :key="user.login"
        >
            <a :href="user.html_url" rel="external nofollow"  target="_blank">
                <img :src="user.avatar_url" style="width: 100px" />
            </a>
            <p class="card-text">{{ user.login }}</p>
        </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 {
        name: "List",
        data() {
            return {
                info: {
                    isFirst: true,
                    isLoading: false,
                    errMsg: "",
                    users: [],
                }
            }
        },
        mounted() {
            this.$bus.$on("updateListData", (dataObj) => {
                    this.info = { ...this.info, ...dataObj };
                }
            );
        }
    }
</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: 0.75rem;
        margin-bottom: 2rem;
        border: 1px solid #efefef;
        text-align: center;
    }
    .card > img {
        margin-bottom: 0.75rem;
        border-radius: 100px;
    }
    .card-text {
        font-size: 85%;
    }
</style>

4.4.slot 插槽

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

1.默认插槽

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

2.具名插槽，父组件指明放入子组件的哪个插槽slot=“footer”，如果是template可以写成v-slot:footer

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

3.作用域插槽，scope用于父组件往子组件插槽放的html结构接收子组件的数据；理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

注意：关于样式，既可以写在父组件中，解析后放入子组件插槽；也可以放在子组件中，传给子组件再解析

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

4.4.1.默认插槽

src/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="(item, index) in games" :key="index">{{item}}</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.vue';
    export default {
        name:'App',
        components:{
            Category
        },
        data() {
            return {
                foods: ['火锅','烧烤','小龙虾','牛排'],
                games: ['红色警戒','穿越火线','劲舞团','超级玛丽'],
                films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
            }
        }
    }
</script>
<style>
    .container {
        display: flex;justify-content: space-around;
    }
</style>

src/components/Category.vue

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

4.4.2.具名插槽

src/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" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >更多美食</a>
        </Category>
        <Category title="游戏">
            <ul slot="center">
                <li v-for="(item, index) in games" :key="index">{{item}}</li>
            </ul>
            <div class="foot" slot="footer">
                <a href="http://www.atguigu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >单机游戏</a> 
                <a href="http://www.atguigu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >网络游戏</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" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >经典</a> 
                    <a href="http://www.atguigu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >热门</a> 
                    <a href="http://www.atguigu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >推荐</a>
                </div>
                <h4>欢迎前来观影</h4>
            </template>
        </Category>
    </div>
</template> 
<script> 
    // 引入组件
    import Category from './components/Category.vue';
    export default {
        name:'App',
        components:{
            Category
        },
        data() {
            return {
                foods: ['火锅','烧烤','小龙虾','牛排'],
                games: ['红色警戒','穿越火线','劲舞团','超级玛丽'],
                films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
            }
        }
    }
</script>
<style>
    .container,.foot {
        display: flex;justify-content: space-around;
    }
    h4{text-align: center;}
</style>

src/components/Category.vue

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

4.4.3.作用域插槽

src/App.vue

<template>
    <div class="container">
        <Category title="游戏">
            <template scope="liqb">
                <ul>
                    <li v-for="(item, index) in liqb.games" :key="index">{{item}}</li>
                </ul>
            </template>
        </Category>
        <Category title="游戏">
            <template scope="{games}">
                <ol>
                    <li style="color:red" v-for="(item, index) in games" :key="index">{{item}}</li>
                </ol>
            </template>
        </Category>
        <Category title="游戏">
            <template slot-scope="{games}">
                <h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
            </template>
        </Category>
    </div>
</template> 
<script> 
    // 引入组件
    import Category from './components/Category.vue';
    export default {
        name:'App',
        components:{
            Category
        }
    }
</script>
<style>
    .container,.foot {
        display: flex;justify-content: space-around;
    }
    h4{text-align: center;}
</style>

src/components/Category.vue

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

到此这篇关于Vue中的Ajax 配置代理 slot插槽的文章就介绍到这了,更多相关vue ajax配置slot插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文