十次方项目前端，问答频道（十七）
页面代码均为最终代码
嵌套布局与标签导航
嵌套布局
（1）创建pages/qa.vue
<template>
<div>
<div class="tab-nav ">
<div class="wrapper">
<ul class="fl sui-nav nav-tabs navbar-dark">
<router-link tag="li" to="/qa" active-class="active" exact >
<a> 首页</a></router-link>
<router-link tag="li" :to="'/qa/label/'+item.id" active-class="active" v-for="(item,index) in labelList" :key="index" >
<a>{{item.labelname}}</a>
</router-link>
</ul>
<span class="fr more"><a href="./qa-allTag.html" target="_blank">更多</a></span>
<div class="clearfix"></div>
</div>
</div>
<nuxt-child/>
</div>
</template>
<script>
import '~/assets/css/page-sj-qa-logined.css'
import labelApi from '@/api/label'
export default {
asyncData ({ params, error}) {
return labelApi.toplist().then((res) => {
return {labelList: res.data.data}
})
}
}
</script>
（2）创建pages/qa/label/_label.vue
<template>
<div class="wrapper qa-content">
<div class="fl left-list">
<div class="tab-content">
<div id="index" class="tab-pane active">
<div class="tab-bottom-line">
<ul class="sui-nav nav-tabs">
<li :class="type=='new'?'active':''"><a @click="type='new'">最新回答</a></li>
<li :class="type=='hot'?'active':''"><a @click="type='hot'">热门回答</a></li>
<li :class="type=='wait'?'active':''"><a @click="type='wait'">等待回答</a></li>
</ul>
<div class="qa-list" v-infinite-scroll="loadMore">
<div class="tab-content">
<div id="new" :class="'tab-pane '+(type=='new'?'active':'')">
<ul class="detail-list">
<li class="qa-item" v-for="(item,index) in newlist" :key="index">
<div class="fl record">
<div class="number">
<div class="border useful">
<p class="usenum">{{item.thumbup}}</p>
<p>有用</p>
</div>
<div class="border answer">
<p class="ansnum">{{item.reply}}</p>
<p>回答</p>
</div>
</div>
</div>
<div class="fl info">
<div class="question">
<p class="author"><span class="name">{{item.replyname}}</span>
<span>{{item.replytime}}</span>分钟前回答</p>
<p class="title"><a href="./qa-detail.html" target="_blank">{{item.title}}</a></p>
</div>
<div class="other">
<ul class="fl sui-tag">
<li>Php</li>
<li>Javascript</li></ul>
<div class="fr brower">
<p>浏览量 {{item.visits}} | {{item.createtime}} 来自 <a href="#">{{item.nickname}} </a></p>
</div>
</div>
</div>
<div class="clearfix"></div>
</li>
</ul>
</div>
<div id="hot" :class="'tab-pane '+(type=='hot'?'active':'')">
<ul class="detail-list">
<li class="qa-item" v-for="(item,index) in hotlist" :key="index">
<div class="fl record">
<div class="number">
<div class="border useful">
<p class="usenum">{{item.thumbup}}</p>
<p>有用</p>
</div>
<div class="border answer">
<p class="ansnum">{{item.reply}}</p>
<p>回答</p>
</div>
</div>
</div>
<div class="fl info">
<div class="question">
<p class="author"><span class="name">{{item.replyname}}</span>
<span>{{item.replytime}}</span>分钟前回答</p>
<p class="title"><a href="./qa-detail.html" target="_blank">{{item.title}}</a></p>
</div>
<div class="other">
<ul class="fl sui-tag">
<li>Php</li>
<li>Javascript</li></ul>
<div class="fr brower">
<p>浏览量 {{item.visits}} | {{item.createtime}} 来自 <a href="#">{{item.nickname}} </a></p>
</div>
</div>
</div>
<div class="clearfix"></div>
</li>
</ul>
</div>
<div id="wait" :class="'tab-pane '+(type=='wait'?'active':'')">
<ul class="detail-list">
<li class="qa-item" v-for="(item,index) in waitlist" :key="index">
<div class="fl record">
<div class="number">
<div class="border useful">
<p class="usenum">{{item.thumbup}}</p>
<p>有用</p>
</div>
<div class="border answer">
<p class="ansnum">{{item.reply}}</p>
<p>回答</p>
</div>
</div>
</div>
<div class="fl info">
<div class="question">
<p class="author"><span class="name">{{item.replyname}}</span>
<span>{{item.replytime}}</span>分钟前回答</p>
<p class="title"><a href="./qa-detail.html" target="_blank">{{item.title}}</a></p>
</div>
<div class="other">
<ul class="fl sui-tag">
<li>Php</li>
<li>Javascript</li></ul>
<div class="fr brower">
<p>浏览量 {{item.visits}} | {{item.createtime}} 来自 <a href="#">{{item.nickname}} </a></p>
</div>
</div>
</div>
<div class="clearfix"></div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="php" class="tab-pane">
php
</div>
<div id="js" class="tab-pane">
Javascript
</div>
<div id="python" class="tab-pane">
python
</div>
<div id="java" class="tab-pane">
java
</div>
</div>
</div>
<div class="fl right-tag">
<div class="block-btn">
<p>今天，有什么好东西要和大家分享么?</p>
<a class="sui-btn btn-block btn-share" href="./qa-submit.html" target="_blank">发布问题</a>
</div>
<div class="hot-tags">
<div class="head">
<h3 class="title">热门标签</h3>
</div>
<div class="tags">
<ul class="sui-tag">
<li>Php</li>
<li>Javascript</li>
<li>Gif</li>
<li>Java</li>
<li>C#</li>
<li>iOS</li>
<li>C++</li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</template>
<script>
import problemApi from '@/api/problem'
import axios from 'axios'
export default {
data(){
return {
type:'new',
page_new: 1,//记录最新问题列表的页码
page_hot: 1,//记录热门问题列表的页码
page_wait: 1//记录等待回答列表的页码
}
},
asyncData({params}){
return axios.all([problemApi.list('newlist',params.label,1,10),
problemApi.list('hotlist',params.label,1,10),
problemApi.list('waitlist',params.label,1,10) ] ).then(
axios.spread(function(newlist,hotlist,waitlist ){
return {
newlist:newlist.data.data.rows,
hotlist:hotlist.data.data.rows,
waitlist:waitlist.data.data.rows,
label:params.label //标签ID，我们需要记录下来
}
}))
},
methods:{
loadMore(){
if(this.type==='new'){
this.page_new++
problemApi.list('newlist',this.label,this.page_new,10).then(res=>{
this.newlist=this.newlist.concat( res.data.data.rows )
})
}
if(this.type==='hot'){
this.page_hot++
problemApi.list('hotlist',this.label,this.page_hot,10).then(res=>{
this.hotlist=this.hotlist.concat( res.data.data.rows )
})
}if(this.type==='wait'){
this.page_wait++
problemApi.list('waitlist',this.label,this.page_wait,10).then(res=>{
this.waitlist=this.waitlist.concat( res.data.data.rows )
})
}
}
}
}
</script>
（3）创建pages/qa/index.vue
<template>
<div></div>
</template>
<script>
export default {
created(){
this.$router.push('/qa/label/0')
}
}
</script>
标签导航
（1）easyMock模拟数据
URL: base/label/toplist
Method: GET
{
"flag": true,
"code": 20000,
"data": [{
"id": "1",
"labelname": "JAVA"
},
{
"id": "2",
"labelname": "PHP"
},
{
"id": "3",
"labelname": "前端"
},
{
"id": "4",
"labelname": "Python"
}
]
}
（2）编写标签API 创建api/label.js
import request from '@/utils/request'
const api_group = 'base'
const api_name = 'label'
export default {
toplist() {
return request({
url: `/${api_group}/${api_name}/toplist`,
method: 'get'
})
}
}
问答列表
最新问答列表
（1）easy-mock模拟数据
URL:/problem/newlist/{label}/{page}/{size}
Method:GET
{
"code": "@integer(60, 100)",
"flag": "@boolean",
"message": "@string",
"data": {
"total": "@integer(60, 100)",
"rows|10": [{
"id": "@integer(1, 1000)",
"title": "@cword(20,30)",
"content": "@string",
"createtime": "@datetime",
"updatetime": "@datetime",
"userid": "@integer(1, 1000)",
"nickname": "小马",
"visits": "@integer(60, 100)",
"thumbup": "@integer(60, 100)",
"reply": "@integer(60, 100)",
"solve": "@string",
"replyname": "小牛",
"replytime": "@datetime"
}]
}
}
（2）API编写 创建api/problem.js
import request from '@/utils/request'
const api_name = 'problem'
export default {
list(type,label,page,size){
return request({
url:`/${api_name}/${type}/${label}/${page}/${size}`,
method: 'get'
})
}
}