【vue腳手架配置代理+github用戶搜索案例+vue項(xiàng)目中常用的發(fā)送Ajax請(qǐng)求的庫(kù)+slot插槽】

這篇具有很好參考價(jià)值的文章主要介紹了【vue腳手架配置代理+github用戶搜索案例+vue項(xiàng)目中常用的發(fā)送Ajax請(qǐng)求的庫(kù)+slot插槽】。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

1 vue腳手架配置代理

下載axios
引用axios：import axios from 'axios'
解決跨域方法：
1> cors：

2> jsonp：用的少，只能解決get請(qǐng)求的跨域問(wèn)題
3> 配置一個(gè)代理服務(wù)器
配置一個(gè)代理服務(wù)器方式一：
開(kāi)啟8080代理服務(wù)器方式：nginx(較復(fù)雜，需借助后端知識(shí)) 、vue-cli(重點(diǎn))。
1> 第一步：先通過(guò)cmd打開(kāi)兩臺(tái)服務(wù)器

打開(kāi)結(jié)果如下圖所示：

如忘記打開(kāi)，終端將會(huì)出現(xiàn)GET http://localhost:8081/students 500 (Internal Server Error)錯(cuò)誤。
2> 第二步：在vue.config.js文件里面，加入此語(yǔ)句

3> 第三步：更改App.vue文件中的端口號(hào)

4> 第四步：點(diǎn)擊按鈕后，請(qǐng)求結(jié)果如下

工作方式：若按照上述配置代理，當(dāng)請(qǐng)求了前端不存在的資源時(shí)，那么該請(qǐng)求會(huì)轉(zhuǎn)發(fā)給服務(wù)器 （優(yōu)先匹配前端資源）
優(yōu)點(diǎn)：配置簡(jiǎn)單，請(qǐng)求資源時(shí)直接發(fā)給前端（8080）即可。
缺點(diǎn)：1.不能配置多個(gè)代理
     2.不能靈活控制走不走代理

配置一個(gè)代理服務(wù)器方式二：
1> 第一步：依舊先通過(guò)cmd打開(kāi)兩臺(tái)服務(wù)器
2> 第二步：在vue.config.js文件里面，加入此語(yǔ)句

changeOrigin設(shè)置為true時(shí)，服務(wù)器收到的請(qǐng)求頭中的host為：localhost:5000 changeOrigin設(shè)置為false時(shí)，服務(wù)器收到的請(qǐng)求頭中的host為：localhost:8080 changeOrigin默認(rèn)值為true
3> 第三步：更新App.vue文件中的內(nèi)容

4> 第四步：點(diǎn)擊按鈕后，請(qǐng)求結(jié)果如下

優(yōu)點(diǎn)：可以配置多個(gè)代理，且可以靈活的控制請(qǐng)求是否走代理。
缺點(diǎn)：配置略微繁瑣，請(qǐng)求資源時(shí)必須加前綴。

2 github用戶搜索案例

【vue腳手架配置代理+github用戶搜索案例+vue項(xiàng)目中常用的發(fā)送Ajax請(qǐng)求的庫(kù)+slot插槽】,Vue,vue.js,ajax

2.1 靜態(tài)列表

目錄展示：
App.vue:
Search.vue:
List.vue:
index.html:

2.2 列表展示

List組件和Search組件為兄弟組件，可使用全局事件總線、消息訂閱與發(fā)布、把數(shù)據(jù)交給最外側(cè)App等方式實(shí)現(xiàn)數(shù)據(jù)傳遞。
main.js:
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>
    // 引入axios
    import axios from 'axios'

    export default {
        name:'Search',
        data() {
            return {
                keyWord:''
            }
        },
        methods: {
            searchUsers() {
                // 模板字符串
                axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                    response => {
                        console.log('請(qǐng)求成功了');
                        this.$bus.$emit('getUsers',response.data.items)
                    },
                    error => {
                        console.log('請(qǐng)求失敗了',error.message);
                    }
                )
            }
        }
    }
</script>

List.vue:

<template>
    <div class="row">
        <div class="card" v-for="user in users" :key="user.login">
            <a :href="user.html_url" target="_blank">
                <img :src="user.avatar_url" style='width: 100px'/>
            </a>
            <p class="card-text">{{user.login}}</p>
        </div>
        
    </div>
</template>

<script>
    export default {
        name:'List',
        data() {
            return {
                users:[]
            }
        },
        // 利用全局事件總線
        mounted() {
            this.$bus.$on('getUsers',(users)=>{
                console.log('我是List組件，收到了數(shù)據(jù)：',users);
                this.users = users
            })
        }
    }
</script>

<style>
    .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>

效果展示(點(diǎn)擊頭像跳轉(zhuǎn)到用戶github主頁(yè))：

2.3 完善案例

以上展示了請(qǐng)求成功時(shí)的呈現(xiàn)(users)，還需對(duì)其它三種展示進(jìn)行完善。
1> 添加一個(gè)歡迎詞(welcome)
2> 當(dāng)內(nèi)容未加載出來(lái)時(shí)添加一個(gè)加載中(loading)
3> 添加一個(gè)請(qǐng)求失敗時(shí)的呈現(xiàn)(error)
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" 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>
        <!-- 展示錯(cuò)誤信息 -->
        <h1 v-show="info.errMsg">{{info.errMsg}}</h1>
    </div>
</template>

<script>
    export default {
        name:'List',
        data() {
            return {
                info:{
                    isFirst:true, // 是否為初次展示
                    isLoading:false, // 是否處于加載中
                    errMsg:'', // 存儲(chǔ)錯(cuò)誤信息
                    users:[]
                }
            }
        },
        // 利用全局事件總線
        mounted() {
            // this.$bus.$on('updateListData',(isFirst,isLoading,errMsg,users)=>{
            this.$bus.$on('updateListData',(dataObj)=>{
                // console.log('我是List組件，收到了數(shù)據(jù)：',users);
                /* this.isFirst = isFirst
                this.isLoading = isLoading
                this.errMsg = errMsg
                this.users = users */
                // this.info = dataObj // 此寫(xiě)法沒(méi)錯(cuò) 但由于isFirst后續(xù)不再變化沒(méi)有書(shū)寫(xiě) 會(huì)弄丟isFirst數(shù)據(jù)
                // 因此通過(guò)字面量的形式去合并對(duì)象
                this.info = {...this.info,...dataObj}
            })
        }
    }
</script>

<style>
    .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="searchUsers">Search</button>
        </div>
    </section>
</template>

<script>
    // 引入axios
    import axios from 'axios'

    export default {
        name:'Search',
        data() {
            return {
                keyWord:''
            }
        },
        methods: {
            searchUsers() {
                // 請(qǐng)求前先更新List的數(shù)據(jù)
                this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]}) 
                // 發(fā)送請(qǐng)求
                // 模板字符串
                axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                    response => {
                        console.log('請(qǐng)求成功了');
                        // this.$bus.$emit('getUsers',response.data.items)
                        // 請(qǐng)求成功后更新List的數(shù)據(jù)
                        // 因?yàn)閕sFirst后續(xù)不再發(fā)生變化 故可刪掉
                        this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
                    },
                    error => {
                        console.log('請(qǐng)求失敗了',error.message);
                        // 請(qǐng)求失敗后更新List的數(shù)據(jù)
                        this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
                    }
                )
            }
        }
    }
</script>

效果展示：

3 vue項(xiàng)目中常用的發(fā)送Ajax請(qǐng)求的庫(kù)

3.1 xhr

3.2 jQuery

3.3 axios

通用的 Ajax 請(qǐng)求庫(kù), 官方推薦，使用廣泛。

3.4 fetch

3.5 vue-resource

vue插件庫(kù), vue1.x 使用廣泛，官方已不維護(hù)。
安裝：npm i vue-resource
引入與使用：
github用戶搜索案例的Search.vue組件需改為：

4 slot 插槽

4.1 效果

【vue腳手架配置代理+github用戶搜索案例+vue項(xiàng)目中常用的發(fā)送Ajax請(qǐng)求的庫(kù)+slot插槽】,Vue,vue.js,ajax
App.vue:

<template>
  <div class="container">
    <Category title="美食" :listData="foods"/>
    <Category title="游戲" :listData="games"/>
    <Category title="電影" :listData="films"/>
  </div>
</template>

<script>
  import Category from './components/Category.vue'
  
  export default {
    name:'App',
    components:{Category},
    data() {
      return {
        foods:['火鍋','燒烤','小龍蝦','牛排'],
        games:['紅色警戒','穿越火線','勁舞團(tuán)','超級(jí)瑪麗'],
        films:['《教父》','《拆彈專家》','《你好，李煥英》','《米奇妙妙屋》']
      }
    }
  }
</script>

<style lang="css">
  .container {
    display: flex;
    justify-content: space-around;
  }
</style>

Category.vue:

<template>
    <div class="category">
        <h3>{{title}}分類</h3>
        <ul>
            <li v-for="(item,index) in listData" :key="index">{{item}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name:'Category',
        props:['listData','title']
    }
</script>

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

【vue腳手架配置代理+github用戶搜索案例+vue項(xiàng)目中常用的發(fā)送Ajax請(qǐng)求的庫(kù)+slot插槽】,Vue,vue.js,ajax
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.vue'
  
  export default {
    name:'App',
    components:{Category},
    data() {
      return {
        foods:['火鍋','燒烤','小龍蝦','牛排'],
        games:['紅色警戒','穿越火線','勁舞團(tuán)','超級(jí)瑪麗'],
        films:['《教父》','《拆彈專家》','《你好，李煥英》','《米奇妙妙屋》']
      }
    },
  }
</script>

<style scoped>
  .container {
    display: flex;
    justify-content: space-around;
  }
  img {
    width: 100%;
  }
  video {
    width: 100%;
  }
</style>

Category.vue:

<template>
    <div class="category">
        <h3>{{title}}分類</h3>
        <!-- 定義一個(gè)插槽(挖個(gè)坑，等著組件的使用者進(jìn)行填充) -->
        <slot>我是一些默認(rèn)值，當(dāng)使用者沒(méi)有傳遞具體結(jié)構(gòu)時(shí)，我會(huì)出現(xiàn)</slot>
        
    </div>
</template>

<script>
    export default {
        name:'Category',
        props:['title']
    }
</script>

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

【vue腳手架配置代理+github用戶搜索案例+vue項(xiàng)目中常用的發(fā)送Ajax請(qǐng)求的庫(kù)+slot插槽】,Vue,vue.js,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="https://home.meishichina.com/recipe.html">更多美食</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="https://www.baidu.com/">單機(jī)游戲</a>
        <a href="https://www.baidu.com/">網(wǎng)絡(luò)游戲</a>
      </div>
    </Category>

    <Category title="電影">
      <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
      <!-- 寫(xiě)法一 -->
      <!-- <template slot="footer"> -->
      <!-- 寫(xiě)法二 -->
      <template v-slot:footer>
        <div class="foot">
          <a href="https://www.baidu.com/">經(jīng)典</a>
          <a href="https://www.baidu.com/">熱門</a>
          <a href="https://www.baidu.com/">推薦</a>
        </div>
        <h4>歡迎前來(lái)觀影！</h4>
      </template>
    </Category>
  </div>
</template>

<script>
  import Category from './components/Category.vue'
  
  export default {
    name:'App',
    components:{Category},
    data() {
      return {
        foods:['火鍋','燒烤','小龍蝦','牛排'],
        games:['紅色警戒','穿越火線','勁舞團(tuán)','超級(jí)瑪麗'],
        films:['《教父》','《拆彈專家》','《你好，李煥英》','《米奇妙妙屋》']
      }
    },
  }
</script>

<style scoped>
  .container,.foot {
    display: flex;
    justify-content: space-around;
  }
  img {
    width: 100%;
  }
  video {
    width: 100%;
  }
  h4 {
    text-align: center;
  }
  a {
    display: block;
    text-align: center;
  }
</style>

Category.vue:

<template>
    <div class="category">
        <h3>{{title}}分類</h3>
        <!-- 定義一個(gè)插槽(挖個(gè)坑，等著組件的使用者進(jìn)行填充) -->
        <slot name="center">我是一些默認(rèn)值，當(dāng)使用者沒(méi)有傳遞具體結(jié)構(gòu)時(shí)，我會(huì)出現(xiàn)1</slot>
        <slot name="footer">我是一些默認(rèn)值，當(dāng)使用者沒(méi)有傳遞具體結(jié)構(gòu)時(shí)，我會(huì)出現(xiàn)2</slot>
    </div>
</template>

<script>
    export default {
        name:'Category',
        props:['title']
    }
</script>

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

【vue腳手架配置代理+github用戶搜索案例+vue項(xiàng)目中常用的發(fā)送Ajax請(qǐng)求的庫(kù)+slot插槽】,Vue,vue.js,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> -->
      <!-- 解構(gòu)賦值寫(xiě)法 -->
      <template scope="{games}">
        <ol>
          <li v-for="(g,index) in games" :key="index">{{g}}</li>
        </ol>
      </template>
    </Category>

    <Category title="游戲">
      <!-- <template scope="atguigu"> -->
      <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 scoped>
  .container,.foot {
    display: flex;
    justify-content: space-around;
  }
  img {
    width: 100%;
  }
  video {
    width: 100%;
  }
  h4 {
    text-align: center;
  }
  a {
    display: block;
    text-align: center;
  }
</style>

Category.vue:文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-808382.html

<template>
    <div class="category">
        <h3>{{title}}分類</h3>
        <slot :games="games">我是默認(rèn)的一些內(nèi)容</slot>
    </div>
</template>

<script>
    export default {
        name:'Category',
        props:['title'],
        data() {
            return {
                games:['紅色警戒','穿越火線','勁舞團(tuán)','超級(jí)瑪麗'],
            }
        },
    }
</script>

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

4.2 理解

父組件向子組件傳遞帶數(shù)據(jù)的標(biāo)簽，當(dāng)一個(gè)組件有不確定的結(jié)構(gòu)時(shí), 就需要使用slot 技術(shù)，注意：插槽內(nèi)容是在父組件中編譯后，再傳遞給子組件的。
作用：讓父組件可以向子組件指定位置插入html結(jié)構(gòu)，也是一種組件間通信的方式，適用于父組件 ——> 子組件。
分類：默認(rèn)插槽、具名插槽、作用域插槽
使用方式：
1> 默認(rèn)插槽：

2> 具名插槽：

3> 作用域插槽：數(shù)據(jù)在組件的自身，但根據(jù)數(shù)據(jù)生成的結(jié)構(gòu)需要組件的使用者來(lái)決定。（games數(shù)據(jù)在Category組件中，但使用數(shù)據(jù)所遍歷出來(lái)的結(jié)構(gòu)由App組件決定）

到了這里，關(guān)于【vue腳手架配置代理+github用戶搜索案例+vue項(xiàng)目中常用的發(fā)送Ajax請(qǐng)求的庫(kù)+slot插槽】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！