凤舞战歌txt,叶选宁3000伏兵名单,アキバ系彼女
前言
想必大家都看过斗鱼直播吧？这次在下使用从github上面摸下来的api，为大家重现一下斗鱼网站的搭建，使用vue-cli-webpack来实现。
声明
本文章所用api均从网络获取，本文作者不承担任何法律责任，请阅读本文的小伙伴们用于学习用途，不能用于商业！
如有侵权行为，请与作者联系，作者将于2日内删除。
效果
pc端
移动端
开始
好，扯了这么久的淡，该开始构建项目了
项目初始化
初始化文件夹
打开一个新文件夹，在命令行输入：
vue init webpack
如果显示vue not found,那么该去下载vue-cli，如果webpack未找到就去下载webpack
到这一步以后就ctrl + c ,退出终端
安装依赖
退出命令行之后，输入以下指令：
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
chromedriver 是安装必备的包，镜像好像有问题，我们提前装一下。
npm install
gfw不是吹的，外网真的很慢，大家泡杯茶慢慢等
趁着等的时候，我们来下载几个样式和图片，运行
git clone https://github.com/yexchen/douyu_assets.git
来下载assets文件，覆盖 assets文件夹到 项目文件/src 中
npm i -s lib-flexible npm i -s axios npm i -s vue-axios
我们还需要lib-flexible来解决移动端适配的问题,axios和vue-axios来方便请求我们的数据
引入安装的包
大家可以进入到src目录下，这里简要介绍下各个文件的功能
assets 放静态内容的地方，但是支持预编译 components 放组件的地方，当然也可以别具一格随便创个文件夹代替之 router/index.js router文件夹是放路由的地方，index.js是我们的根路由 app.vue vue-cli帮我们生成好的一个组件(根组件)，没什么好稀奇的 main.js webpack的入口文件，聚合vue应用里面的东西
我们来修改main.js,参照下图:
红线区域我们引入了移动适配的lib-flexible,和font-awesome,style公共样式
接下来，我们来引入axios和vue-axios，请看下图：
这里我们引入了vue-axios和axios,并通过vue.use来进行绑定
跑起项目
准备工作已经做完了，接下来可以跑起项目了：
npm run dev
根据命令行的提示打开网页即可看到效果：
好的，我们的项目初始化就到这里了。
配置映射和测试斗鱼api
配置映射
来到根目录下的 config/index.js 这里是配置开发，构建，及路由映射的地方
如图修改proxytable中内容，这里解释一下几个参数：
target : 目标地址,
changeorigin : 是否跨域,
pathrewrite : 键值对中用值替换键的值，其中^是正则中表示开始的符号
随手请求一个api
进入src/app.vue，如下修改文件：
created是我们的生命钩子函数，vue实例在created阶段会执行里面的代码。
this.$http相当于this.axios，$http的具体实现可以去node_modules里面看，很简单的
重启webpack服务，看下效果
ctrl+c
npm run dev
看到以上效果的话，证明数据请求成功了。
搭建首页应用
思维导图解析
我们要写的应用较为复杂，写vue的项目就是这样，需要清晰的思想，不然很容易崩溃，最后重来
好，接下来为大家讲解一下我们的组件：
root是根组件，一切的源（废话）
app，应用组件，对应src/app.vue
side-menu :侧边栏，因为较为容易且不需要改变单页路由来显示不同内容，所以直接放在app组件里边
router-view : 这是vue-router的子路由显示面板，通过src/router/index.js来控制
home : 主页视图文件
public : 公用组件，亦可在其他页面使用，降低工作量
appheader : 应用头部组件
loading : 加载中的组件，就一张gif
侧边栏sidemenu组件
在src/components目录中新建一个文件，名为sidemenu.vue,修改内容为：
我要评论
<template lang="html">
<div class="side-menu" @click = "hideside">
<ul>
<router-link v-for = "(item,index) in list" :to="item.url" :key = "index">
{{item.title}}
<i class = "icon-chevron-right"></i>
</router-link>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
list : [
{title : "首页",url : "/"},
{title : "全部分类",url : "/category"}
]
}
},
methods : {
hideside(){
this.$emit("hide")
}
}
}
</script>
<style lang="css">
.side-menu {
background: rgba(10,10,10,.3);
height: 100%;
position: fixed;
width: 100%;
top: 0;
padding-top: 44px;
z-index: 11;
}
.side-menu ul {
width: 70%;
background: #282828;
height: 100%;
border-top: 1px solid #222;
}
.side-menu ul li {
height: 50px;
border-bottom: 1px dotted #333;
font-size: 14px;
line-height: 50px;
padding: 0 30px 0 20px;
color: #9a9a9a;
}
.side-menu ul li i {
float: right;
line-height: 50px;
}
</style>
这里解释一下文件里面的内容:
文件分为三大块
template
script
style
这些内容通过script中node的export方法推出去
其中template渲染了几个router-link,用来跳转路由
script定义了data和method
style写了样式
然后打开src/app.vue，修改里面的内容，追加下图内容：
好的，我们的sidemenu组件就注册完成了。
搭建router-view内容
好的，我们接下来做router-view的内容
bus-中央总线
在做之前，我们需要了解一个新的概念-bus，又称中央总线
好的，又是之前那张思维导图，不过是不是多出了三台车呢？
没错，这就是我们的bus。
当appheader想加载侧边栏时，是不能穿越徒步穿越山和大海的，老司机还是要开车的是不是
这个时候我们坐公交就行了，告诉app，把我给拉出来
当然，side-menu和app之间相距不远，父子组件是可以直接绑定的
在src目录下创建bus.js,内容为
这是我们的bus，说白了就是一个对象，只不过借用了vue的消息管道，大家也可以自己写个管道
制造home主页路由
在src目录下创建pages目录，这个目录我们用来存放router-vue的内容
然后我们在src/pages/下创建一个home.vue组件，用来做home的内容,写下以下内容：
<template lang="html">
<div class="mr-root">
<app-header>
<p class = "title">斗鱼tv</p>
</app-header>
<loading v-if="showloading"></loading>
</div>
</template>
<script>
import public from "../public"
export default {
mixins : [
public
],
data(){
return {
showloading : true
}
}
}
</script>
<style lang="css" scoped>
</style>
解释一下，这里使用了app-header和loading组件，由public导入（等会写）。
mixins是一个混合物，能够自动把模组分析，加载到当前实例中。
data中 showloading和v-if配合使用，用来关闭loading效果
如果不清楚的话可以看下思维导图
public公用模组
public是一个模组集合，我们在开发的时候可能不同页面要使用相同的组件，这时就需要public打包处理了。
在src中新建public.js,内容如下：
import appheader from './components/appheader'
import loading from './components/loading'
export default{
components: {
appheader,
loading
}
}
上文我们导入了appheader和loading模块，并设置了默认导出
好，那么我们来写两个子模组,
appheader
在components中新建一个文件appheader.vue,代码如下
<template lang="html">
<header>
<i class = "icon-reorder" @click = "showslide"></i>
<slot></slot>
<i class = "icon-user"></i>
</header>
</template>
<script>
import bus from "../bus"
export default {
methods : {
showslide(){
bus.$emit('showside')
}
}
}
</script>
<style lang="css" scoped>
header {
height: 44px;
background: #333;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 100;
padding: 0 15px;
color: #fff;
line-height: 44px;
font-size: 16px;
}
header i {
color: #999;
}
.title {
margin-left: 15px;
display: inline-block;
}
.icon-user {
float: right;
line-height: 44px;
}
</style>
定义了基本的头部，给加载更多绑定了一个事件，通过bus进行传递，由app.vue来实现
loading组件
src/components/里面新建一个loading.vue,代码如下：
<style lang="css">
.loading {
height: 100%;
position: fixed;
z-index: 10;
width: 100%;
background: #062734;
opacity: .4;
}
.loading img {
width: 100%;
height: auto;
position: absolute;
top: calc(50% - 140px);
}
</style>
就添加了一张gif图而已，非常简单的
bus事件的处理
好的，既然我们的appheader已经发车了，那么应该在app.vue根路由里面开个公交车站，来接收巴士:
修改app.vue:
<template>
<div id="app">
<transition name = "side">
<side-menu v-show = "show" @hide = "hideside"></side-menu>
</transition>
<router-view/>
</div>
</template>
<script>
import sidemenu from "./components/sidemenu"
import bus from "./bus"
export default {
name: 'app',
components : {
sidemenu
},
created(){
this.$http.get(`/douyuapi/roomapi/live?offset=1&limit=20`).then(res=>{
console.log(res.data.data);
})
},
data(){
return {
show : false
}
},
mounted () {
bus.$on("showside",this.side)
},
methods : {
side(){
this.show = !this.show
},
hideside(){
this.show = false
}
}
}
</script>
<style>
#app {
font-family: 'avenir', helvetica, arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
修改路由
修改根路由/src/router/index.js为：
import vue from 'vue'
import router from 'vue-router'
import home from '@/pages/home'
vue.use(router)
export default new router({
routes: [
{
path: '/',
name: 'home',
component: home
}
]
})
增加homeitem
好的，我们有了以上功能以后呢，还需要在斗鱼主页中增加聊天室列表，在components目录中新建文件homeitem.vue
<template lang="html">
<div class="mr-item">
<router-link :to="'/room/'+room.room_id">
<img :src="room.room_src" alt="">
<div class="room-info">
<span class = "nickname">{{room.nickname}}</span>
<span class = "count">
<i class = "icon-group"></i>
{{room.online || number}}
</span>
</div>
<div class="room-title">
<i class = "icon-desktop"></i>
{{room.room_name || message}}
</div>
</router-link>
</div>
</template>
<script>
export default {
props : ["room"]
}
</script>
<style lang="css" scoped>
.mr-item {
margin-top: 10px;
float: left;
width: 4.4rem;
margin-right: .3rem;
position: relative;
}
.mr-item img {
width: 100%;
height: 2.6rem;
border-radius: 5px;
}
.room-info {
position: absolute;
bottom: 33px;
color: #fff;
padding: 0 5px;
left: 0;
right: 0;
overflow: hidden;
background: rgba(10,10,10,.5);
line-height: 24px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.room-info .count {
float: right;
}
.room-title {
line-height: 30px;
}
</style>
home.vue中加载homeitem
我们需要在home.vue中加载homeitem,修改home.vue为
<template lang="html">
<div class="mr-root">
<app-header>
<p class = "title">斗鱼tv</p>
</app-header>
<loading v-if="showloading"></loading>
<home-item v-for = "(room,index) in roomlist" :room = "room" :key = "index">
</home-item>
<p v-if = "error">加载失败，请稍后再试...</p>
<div class="clear"></div>
<div class="load-more">
<span @click = "loadmore">点击加载更多</span>
</div>
</div>
</template>
<script>
import public from "../public"
import homeitem from "../components/homeitem"
export default {
mixins : [
public
],
data(){
return {
showloading : true,
error : false,
roomlist : [],
page : 0
}
},
components : {
homeitem
},
created(){
this.getinfo(this.page)
},
methods : {
getinfo(page){
this.$http.get(`/douyuapi/roomapi/live?offset=1&limit=20`).then(res=>{
this.error = false
this.roomlist = this.roomlist.concat(res.data.data)
settimeout(()=>{
this.showloading = false
},1000)
})
.catch(err=>{
this.error = true
this.showloading = false
})
},
loadmore(){
this.page++
this.getinfo(this.page)
}
}
}
</script>
<style lang="css">
.mr-content {
padding: 44px 0 0 .3rem;
overflow: hidden;
}
.load-more {
margin: 10px;
text-align: center;
}
.load-more span {
display: inline-block;
line-height: 30px;
padding: 0 20px;
border-radius: 10px;
border: 1px solid #000;
}
</style>
现在看下页面，是不是已经出来了呢？
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论