十次方项目前端，问答频道（十七）

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/Eknaij/article/details/97638418

页面代码均为最终代码

嵌套布局与标签导航

嵌套布局

（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'
        })
    }
}