介紹

本次項目是移動應(yīng)用網(wǎng)頁課程的大作業(yè)，項目使用github上一開源項目學(xué)習(xí)開發(fā)而來。
https://github.com/axhello/douyu-vue
本項目基本就是斗魚手機移動端的復(fù)刻，除了沒有評論功能，以外功能都差不多，其后端也是對接的官方的api接口。
源碼壓縮包地址
https://download.csdn.net/download/david2000999/85656221

學(xué)習(xí)建議

本項目可以幫助初學(xué)者更好理解完整的前后端開發(fā)模式，如何進行前后端數(shù)對接，其中格外注意數(shù)據(jù)傳輸和展示的格式

對于想要業(yè)務(wù)功能的同學(xué)，可以直接搭建一個后端自己的數(shù)據(jù)庫，承接自己新業(yè)務(wù)上的數(shù)據(jù)，比如開發(fā)自己的評論區(qū)，和一些數(shù)據(jù)統(tǒng)計頁面，添加數(shù)據(jù)分析功能等等。

使用

首先建立空文件打開控制臺克隆代碼到本地

git clone https://github.com/axhello/douyu-vue.git

然后進行相關(guān)依賴安裝(前提本地安裝好了npm 和 node)

npm installnpm run serve

運行后就可以得到

瀏覽器直接訪問即可
其中第二個局域網(wǎng)地址，可以讓電腦連接手機熱點后再啟動項目，就可以使用第二個的局域網(wǎng)地址再手機上瀏覽器上進行直接訪問了，可以更好體驗移動端的適配性。

業(yè)務(wù)分區(qū)

（1）首頁：最新活動也展示和熱度最高的直播間
（2）分區(qū)頁：星勢力，網(wǎng)游競技，單機熱游，手游休閑，娛樂天地，科技文化，語音互動，語音直播，正能量，賽車競技，京斗云
（3）分類頁：各個具體分區(qū)頁中的再分類頁
（4）推薦區(qū)：直播區(qū)和視頻區(qū)下方還有類似內(nèi)容推薦內(nèi)容
（5）搜索區(qū)：搜索欄中進行定向內(nèi)容的搜索

功能設(shè)計

（1）直播內(nèi)容展示
（2）搜索相關(guān)內(nèi)容
（3）直播內(nèi)容分類
（4）推薦相關(guān)直播內(nèi)容
（5）熱點內(nèi)容滾動展示
（6）獲取斗魚安裝下載

軟件架構(gòu)

運行截圖

核心代碼

category.vue

<template><div class="n-list clearfix"><av-for="(catelist, index) in catelists":key="index"class="n-list-item"@click="rooms(catelist)"><img class="live-feature" :src="catelist.icon"><p class="title">{{ catelist.cate2Name }}</p></a></div> </template><script> import { category } from '@/api/mobile' export default {name: 'Category',data() {return {catelists: []}},watch: {'$route.params.id'() {this.fetchData()}},created() {this.fetchData()},methods: {fetchData() {category({ type: '' }).then(response => {console.log(response.data)const cate1Id = this.$route.params.idconst cate2Info = response.data.cate2Infoconst result = cate2Info.filter(cate2 => cate2.cate1Id === cate1Id)this.catelists = result})},rooms(catelist) {this.$cookie.set('gameName', catelist.cate2Name)this.$router.push({name: 'rooms',params: { name: catelist.shortName }})}} } </script><style lang="scss"> .n-list {width: 100%;height: 100%;overflow-y: auto;background-color: #f4f4f4;z-index: 4;.n-list-item {margin: 0;padding: 0;float: left;width: 3.3rem;height: 3.3rem;border-right: 1px dashed #ddd;border-bottom: 1px dashed #ddd;text-align: center;font-size: 0.32rem;color: #000;margin-left: 1px;&:nth-child(3n) {border-right: none;}img {margin-top: 0.66666666rem;margin-bottom: 0.133333333rem;width: 1.62666666rem;height: 1.62666666rem;border-radius: 0.8133333rem;}} } </style>

detail.vue

<template><iframeclass="dy-inframe"frameborder="0":src="roomId"></iframe> </template> <script> export default {name: 'RoomDetail',computed: {roomId() {return '//m.douyu.com/' + this.$route.params.id}} } </script> <style lang="scss"> .dy-inframe {width: 100%;height: 1050px;overflow-x: hidden;overflow-y: auto; } </style>

home.vue

<template><section class="content"><div class="m-row"><v-swiper /><div class="live-list"><router-linkv-for="(livelist, index) in livelists":key="index":to="{name: 'detail', params: { id: livelist.rid }}"class="live"><imgclass="live-feature":src="livelist.roomSrc"><div class="live-title">{{ livelist.roomName }}</div><div class="live-info"><span class="dy-name">{{ livelist.nickname }}</span><span class="popularity">{{ livelist.hn }}</span></div></router-link></div></div></section> </template><script> import VSwiper from '@/components/v-swiper' import { home } from '@/api/mobile' export default {components: {VSwiper},data() {return {livelists: []}},created() {this.fetchData()},methods: {fetchData() {home().then(response => {console.log(response.data[0].list)this.livelists = response.data[0].list// this.livelists = response.data.data})}} } </script><style lang="scss"> .m-row {background: #fff; } .live-list {position: relative;box-sizing: border-box;padding: 0 0.13333333rem 0.13333333rem;width: 100%;&:after {display: block;content: '';clear: both;}.live {float: left;position: relative;display: block;margin: 0.13333333rem;width: 4.6rem;height: 3.28rem;color: #333;font-size: 12px;.live-feature {position: absolute;display: block;top: 0;left: 0;width: 100%;height: 2.61333333rem;background-color: #000;border-radius: 0.1rem;}.live-title {position: absolute;bottom: 0;left: 0.2rem;width: 4rem;color: #000;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;line-height: 0.66666667rem;}.live-info {position: absolute;bottom: 0.66666667rem;left: 0;width: 100%;color: #fff;/*padding: .1rem 0;*/border-bottom-left-radius: 0.2rem;border-bottom-right-radius: 0.2rem;background: linear-gradient(rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.1) 30%,rgba(0, 0, 0, 0.8) 100%);.dy-name {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;max-width: 2.746666666rem;display: inline-block;padding-left: 0.1rem;}.popularity {float: right;padding-right: 0.2rem;}}} } </style>

rooms.vue

<template><div class="m-row"><div class="title"><svg-icon icon-class="tv" /><span>{{ cateName }}</span><strong>{{ gameName }}</strong></div><div class="live-list clearfix"><router-linkv-for="(roomlist, index) in roomlists":key="index":to="{name: 'detail', params: {id: roomlist.rid}}"class="live"><img class="live-feature" :src="roomlist.roomSrc"><div class="live-title">{{ roomlist.roomName }}</div><div class="live-info"><span class="dy-name">{{ roomlist.nickname }}</span><span class="popularity">{{ roomlist.hn }}</span></div></router-link></div><v-more-button><div v-if="!hidden" class="more-button"><div v-show="!loading" @click="loadMore">加載更多</div><div v-show="loading" class="ball-pulse"><div></div><div></div><div></div></div></div></v-more-button></div> </template> <script> import VMoreButton from '@/components/v-more-button' import { rooms } from '@/api/mobile' export default {name: 'Rooms',components: {VMoreButton},props: {name: {type: String,default: ''}},data: () => ({roomlists: [],params: {name: '',page: 1},hidden: false,loading: false,cateName: '',gameName: ''}),created() {this.fetchData()},mounted() {this.cateName = this.$cookie.get('cateName')this.gameName = this.$cookie.get('gameName')},methods: {fetchData() {rooms({ page: this.params.page, type: this.name }).then(response => {this.loading = falsethis.roomlists = response.data.list})},loadMore() {this.loading = truethis.params.page = ++this.params.pagethis.fetchData()}} } </script> <style lang="scss" scoped> .m-row {.play-icon {width: 0.3999999rem;height: 0.3999999rem;vertical-align: sub;}.title {font-size: 12px;margin-left: 10px;line-height: 0.8333333rem;strong {margin-left: 4px;color: #fa7122;}} } .live-list {.live {float: left;position: relative;display: block;margin: 0.13333333rem;width: 4.6rem;height: 3.28rem;color: #333;font-size: 12px;.live-feature {position: absolute;display: block;top: 0;left: 0;width: 100%;height: 2.61333333rem;background-color: #000;border-radius: 0.2rem;}.live-title {position: absolute;bottom: 0;left: 0.2rem;width: 4rem;color: #000;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;line-height: 0.66666667rem;}.live-info {position: absolute;bottom: 0.66666667rem;left: 0;width: 100%;color: #fff;/*padding: .1rem 0;*/border-bottom-left-radius: 0.2rem;border-bottom-right-radius: 0.2rem;background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.8) 100%);.dy-name {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;max-width: 2.746666666rem;display: inline-block;padding-left: 0.2rem;}.popularity {float: right;padding-right: 0.2rem;}}} } </style>

總結(jié)

以上是生活随笔為你收集整理的基于斗鱼的娱乐直播视频平台--Vue移动端页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。