@Author：Runsen

2020/10/27、 周二、今天又是奮斗的一天。

寫在前面：我是「Runsen」，熱愛技術、熱愛開源、熱愛編程。技術是開源的、知識是共享的。大四棄算法轉前端，需要每天的日積月累， 每天都要加油！！！

今天將完成Vue項目推薦和周末游組件，并使用Ajax發起ajax請求。

Home.vue

<template><div><home-header></home-header><home-swiper></home-swiper><home-icons></home-icons><home-recommend></home-recommend><home-weekend></home-weekend></div> </template><script> // 局部組件需要插入到components中，由于鍵和值都是一樣，所以寫成HomeHeader import HomeHeader from './components/Header' import HomeSwiper from './components/Swiper' import HomeIcons from './components/Icons' // 在文件夾components新建Recommend和Weekend import HomeRecommend from './components/Recommend' import HomeWeekend from './components/Weekend'export default {name: 'Home',components: {HomeHeader,HomeSwiper,HomeIcons,HomeRecommend,HomeWeekend} } </script><style> </style>

Recommend.vue

<template><div><div class="title">熱銷推薦</div><ul><liclass="item border-bottom"v-for="item of recommendList":key="item.id"><img class="item-img" :src="item.imgUrl" /><div class="item-info"><p class="item-title">{{item.title}}</p><p class="item-desc">{{item.desc}}</p><button class="item-button">查看詳情</button></div></li></ul></div> </template><script> export default {name: 'HomeRecommend',data () {return {recommendList: [{id: '0001',imgUrl: 'http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_140x140_73fda71d.jpg',title: '大連圣亞海洋世界',desc: '浪漫大連首站，浪漫的海洋主題樂園'}, {id: '0002',imgUrl: 'http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_140x140_73fda71d.jpg',title: '大連圣亞海洋世界',desc: '浪漫大連首站，浪漫的海洋主題樂園'}, {id: '0003',imgUrl: 'http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_140x140_73fda71d.jpg',title: '大連圣亞海洋世界',desc: '浪漫大連首站，浪漫的海洋主題樂園'}]}} } </script><style lang="stylus" scoped>@import '~styles/mixins.styl'.titlemargin-top: .2remline-height: .8rembackground: #eeetext-indent: .2rem.itemoverflow: hiddendisplay: flexheight: 1.9rem.item-imgwidth: 1.7remheight: 1.7rempadding: .1rem.item-infoflex: 1padding: .1remmin-width: 0.item-titleline-height: .54remfont-size: .32remellipsis().item-descline-height: .4remcolor: #cccellipsis().item-buttonline-height: .44remmargin-top: .16rembackground: #ff9300padding: 0 .2remborder-radius: .06remcolor: #fff </style>

Weekend.vue

template><div><div class="title">周末去哪兒</div><ul><liclass="item border-bottom"v-for="item of recommendList":key="item.id"><div class="item-img-wrapper"><img class="item-img" :src="item.imgUrl" /></div><div class="item-info"><p class="item-title">{{item.title}}</p><p class="item-desc">{{item.desc}}</p></div></li></ul></div> </template><script> export default {name: 'HomeWeekend',data () {return {recommendList: [{id: '0001',imgUrl: 'http://img1.qunarzz.com/sight/source/1505/9f/f585152825459.jpg_r_640x214_5d46e4cc.jpg',title: '大連圣亞海洋世界',desc: '浪漫大連首站，浪漫的海洋主題樂園'}, {id: '0002',imgUrl: 'http://img1.qunarzz.com/sight/source/1505/9f/f585152825459.jpg_r_640x214_5d46e4cc.jpg',title: '大連圣亞海洋世界',desc: '浪漫大連首站，浪漫的海洋主題樂園'}, {id: '0003',imgUrl: 'http://img1.qunarzz.com/sight/source/1505/9f/f585152825459.jpg_r_640x214_5d46e4cc.jpg',title: '大連圣亞海洋世界',desc: '浪漫大連首站，浪漫的海洋主題樂園'}]}} } </script><style lang="stylus" scoped>@import '~styles/mixins.styl'.titlemargin-top: .2remline-height: .8rembackground: #eeetext-indent: .2rem.item-img-wrapperoverflow: hiddenheight: 0padding-bottom: 33.9%.item-imgwidth: 100%.item-infopadding: .1rem.item-titleline-height: .54remfont-size: .32remellipsis().item-descline-height: .4remcolor: #cccellipsis() </style>

Ajax請求

Vue本身不支持ajax請求，需要使用“axios”的第三方插件（2.0），axios是基于promise的http請求客戶端，用來發送請求，是Vue2.0推薦使用的，同時不再對vue-resource進行更新和維護。也可以使用vue-resource進行跨域請求。

安裝：npm install axios --save

在Home.vue

<template><div><home-header :city="city"></home-header><home-swiper :list="swiperList"></home-swiper><home-icons :list="iconList"></home-icons><home-recommend :list="recommendList"></home-recommend><home-weekend :list="weekendList"></home-weekend></div> </template><script> import HomeHeader from './components/Header' import HomeSwiper from './components/Swiper' import HomeIcons from './components/Icons' import HomeRecommend from './components/Recommend' import HomeWeekend from './components/Weekend' import axios from 'axios' export default {name: 'Home',components: {HomeHeader,HomeSwiper,HomeIcons,HomeRecommend,HomeWeekend},data () {return {city: '',swiperList: [],iconList: [],recommendList: [],weekendList: []}},methods: {getHomeInfo () {// 接口路徑是/api/index.json，需要在webpack config目錄下的index.js中的proxyTable設置axios.get('/api/index.json').then(this.getHomeInfoSucc)},getHomeInfoSucc (res) {console.log(res)res = res.dataif (res.ret && res.data) {const data = res.datathis.city = data.citythis.swiperList = data.swiperListthis.iconList = data.iconListthis.recommendList = data.recommendListthis.weekendList = data.weekendList}}},// 當組件掛載是的鉤子函數mountedmounted () {this.getHomeInfo()} } </script><style> </style>

在static目錄下創建接口的json數據。訪問本地json的話,本地json必須放到static下面

配置了json，可以直接在8080端口訪問數據，放回的原頁面。

在一般的項目，不可能直接將static路由暴露，需要重定向，在config/index.js配置即可

在配置文件發生改變，需要重啟應用

Header.vue

<template><div class="header"><div class="header-left"><div class="iconfont back-icon">&#xe624;</div></div><div class="header-input"><span class="iconfont">&#xe602;</span>輸入城市/景點/游玩主題</div><div class="header-right">{{this.city}}<span class="iconfont arrow-icon">&#xe658;</span></div></div> </template><script> export default {name: 'HomeHeader',props: {city: String} } </script><style lang="stylus" scoped> @import '~styles/varibles.styl'; .headerdisplay: flexline-height: 0.86remheight: 0.86rembackground: $bgColorcolor: #fff.header-leftwidth: 0.64remfloat: left.back-icontext-align: centerfont-style: 0.4rem.header-inputflex: 1background: #fffheight: 0.64remline-height: 0.64remmargin-top: 0.12remmargin-left: 0.2remboirder-radius: 0.1remcolor: #ccc.header-rightwidth: 1.24remfloat: righttext-align: center.arrow-iconmargin-left: -0.04remfont-size: 0.24rem </style>

Icons.vue

<template><div class="icons"><swiper :options="swiperOption"><swiper-slide v-for="(page, index) of pages" :key="index"><divclass="icon"v-for="item of page":key="item.id"><div class='icon-img'><img class='icon-img-content' :src='item.imgUrl' /></div><p class="icon-desc">{{item.desc}}</p></div></swiper-slide></swiper></div> </template><script> export default {name: 'HomeIcons',props: {list: Array},data () {return {swiperOption: {autoplay: false}}},computed: {pages () {const pages = []this.list.forEach((item, index) => {const page = Math.floor(index / 8)if (!pages[page]) {pages[page] = []}pages[page].push(item)})return pages}} } </script><style lang="stylus" scoped>@import '~styles/varibles.styl'@import '~styles/mixins.styl'.icons >>> .swiper-containerheight: 0padding-bottom: 50%.iconsmargin-top: .1rem.iconposition: relativeoverflow: hiddenfloat: leftwidth: 25%height: 0padding-bottom: 25%.icon-imgposition: absolutetop: 0left: 0right: 0bottom: .44rembox-sizing: border-boxpadding: .1rem.icon-img-contentdisplay: blockmargin: 0 autoheight: 100%.icon-descposition: absoluteleft: 0right: 0bottom: 0height: .44remline-height: .44remtext-align: centercolor: $darkTextColorellipsis() </style>

Recommend.vue

<template><div><div class="title">熱銷推薦</div><ul><liclass="item border-bottom"v-for="item of list":key="item.id"><img class="item-img" :src="item.imgUrl" /><div class="item-info"><p class="item-title">{{item.title}}</p><p class="item-desc">{{item.desc}}</p><button class="item-button">查看詳情</button></div></li></ul></div> </template><script> export default {name: 'HomeRecommend',props: {list: Array} } </script><style lang="stylus" scoped>@import '~styles/mixins.styl'.titlemargin-top: .2remline-height: .8rembackground: #eeetext-indent: .2rem.itemoverflow: hiddendisplay: flexheight: 1.9rem.item-imgwidth: 1.7remheight: 1.7rempadding: .1rem.item-infoflex: 1padding: .1remmin-width: 0.item-titleline-height: .54remfont-size: .32remellipsis().item-descline-height: .4remcolor: #cccellipsis().item-buttonline-height: .44remmargin-top: .16rembackground: #ff9300padding: 0 .2remborder-radius: .06remcolor: #fff </style>

Swiper.vue

<template><div class="wrapper"><swiper :options="swiperOption" v-if="showSwiper"><swiper-slide v-for="item of list" :key="item.id"><img class="swiper-img" :src="item.imgUrl" /></swiper-slide><div class="swiper-pagination" slot="pagination"></div></swiper></div> </template><script> export default {name: 'HomeSwiper',props: {list: Array},data () {return {swiperOption: {pagination: '.swiper-pagination',loop: true}}},computed: {showSwiper () {return this.list.length}} } </script><style lang="stylus" scoped>.wrapper >>> .swiper-pagination-bullet-activebackground: #fff.wrapperoverflow: hiddenwidth: 100%height: 0padding-bottom: 31.25%background: #eee.swiper-imgwidth: 100% </style>

Weekend.vue

<template><div><div class="title">周末去哪兒</div><ul><liclass="item border-bottom"v-for="item of list":key="item.id"><div class="item-img-wrapper"><img class="item-img" :src="item.imgUrl" /></div><div class="item-info"><p class="item-title">{{item.title}}</p><p class="item-desc">{{item.desc}}</p></div></li></ul></div> </template><script> export default {name: 'HomeWeekend',props: {list: Array} } </script><style lang="stylus" scoped>@import '~styles/mixins.styl'.titleline-height: .8rembackground: #eeetext-indent: .2rem.item-img-wrapperoverflow: hiddenheight: 0padding-bottom: 37.09%.item-imgwidth: 100%.item-infopadding: .1rem.item-titleline-height: .54remfont-size: .32remellipsis().item-descline-height: .4remcolor: #cccellipsis() </style>

參考課程：慕課網Vue2.5->2.6->3.0 開發去哪兒網App 從零基礎入門到實戰項目開發

請一鍵三連！！！！！

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的六十八、完成Vue项目推荐和周末游组件，并使用Ajax发起ajax请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。