十次方项目前端，吐槽列表与详细页（十五）

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

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

一、吐槽列表页

1.吐槽列表页数据渲染

吐槽列表页已经构建，我们现在来实现数据的渲染
（1）easyMock模拟数据
URL: spit/search/{page}/{size}
Method: post

{
	"code": 20000,
	"flag": true,
	"message": "查询成功",
	"data": {
		"total": "@integer(60, 100)",
		"rows|10": [{
			"id": "@string",
			"content": "@cword(100,300)",
			"publishtime": "@datetime",
			"userid": "@string",
			"nickname": "小雅",
			"visits": "@integer(60, 100)",
			"thumbup": "@integer(60, 100)",
			"share": "@integer(60, 100)",
			"comment": "@integer(60, 100)",
			"state": "@string",
			"parentid": "@string"
		}]
	}
}

（2）api目录下创建spit.js

import request from '@/utils/request'
const api_name = 'spit'
export default {
search(page, size, searchMap) {
    return request({
        url: `/${api_name}/search/${page}/${size}`,
        method: 'post',
        data: searchMap
        })
    },
    findById(id){
    return request({
        url: `/${api_name}/${id}`,
        method: 'get'
        })
    },
    commentlist(id){
        return request({
        url: `/${api_name}/commentlist/${id}`,
        method: 'get'
        })
    },
    thumbup(id) {
        return request({
        url: `/${api_name}/thumbup/${id}`,
        method: 'put'
        })
    }
}

（3）pages/spit/index.vue

<template>
<div>
    <div class="wrapper tag-item">
        <div class="fl left-list">
          <div class="tc-data-list">
            <div class="tc-list" v-infinite-scroll="loadMore">
              <ul class="detail-list">
                <li class="qa-item" v-for="(item,index) in items" :key="index">
                  <div class="fl record">
                    <div class="number">
                      <div class="border useful">
                        <p class="usenum" @click="thumbup(index)"><a href="#" class="zan"><i :class="'fa fa-thumbs-up '+item.zan" aria-hidden="true"></i></a></p>
                        <p class="zannum"> {{item.thumbup}} </p>
                      </div>
                      <div class="border answer">
                        <a href="#" class="star"><i class="fa fa-star-o" aria-hidden="true"></i></a>
                      </div>
                    </div>
                  </div>
                  <div class="info">
                    <p class="text"> <a :href="'spit/'+item.id" target="_blank"> {{item.content}} </a> </p>
                    <div class="other">
                      <div class="fl date">
                        <span>{{item.publishtime}}</span>
                      </div>
                      <div class="fr remark">
                        <a href="#" data-toggle="modal" data-target="#shareModal" class="share"><i class="fa fa-share-alt" aria-hidden="true"></i> 分享</a>
                        <a href="#" data-toggle="modal" data-target="#remarkModal" class="comment"><i class="fa fa-commenting" aria-hidden="true"></i> 回复</a>
                      </div>
                    </div>
                  </div>
                  <div class="clearfix"></div>
                </li>
              </ul>
              <div class="modal fade" id="shareModal" tabindex="-1"role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">分享到</h4>
                  </div>
                  <div class="modal-body" style="overflow:hidden">
                    <div class="jiathis_style_32x32">
                      <a class="jiathis_button_qzone"></a>
                      <a class="jiathis_button_tsina"></a>
                      <a class="jiathis_button_weixin"></a>
                      <a class="jiathis_button_cqq"></a>
                    </div>
                  </div>
                  </div>
                </div>
              </div>
              <div class="modal fade" id="remarkModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" id="myModalLabel">发表评论</h4>
                    </div>
                    <div class="modal-body">
                      <div class="comment">
                        <span class="who"><img src="~/assets/img/asset-photo.png" />
                        匿名评论</span>: 今天入职腾讯，产品岗，普通非985211大学，上家是不到五十人创业小
                        公司！16年毕业！找内推腾讯给的面试机会，五轮面试！可能是我把运气攒一起了！
                      </div>
                      <div class="form">
                        <textarea class="form-control" rows="5" placeholder="匿名评论"></textarea>
                        <div class="remark">
                          <button class="sui-btn btn-info">发表</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="fl right-tag">
          <div class="block-btn">
            <p>来个匿名吐槽，发泄一下你心中的怒火吧！</p>
            <a class="sui-btn btn-block btn-share" href="~/assets/spit-submit.html" target="_blank">发吐槽</a>
          </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
</template>


<script>
  import '~/assets/css/page-sj-spit-index.css'
  import spitApi from '@/api/spit'
  import {getUser} from '@/utils/auth'
  export default {
    asyncData(){
      return spitApi.search(1,10, {state:'1'} ).then( res=> {
        let tmp = res.data.data.rows.map(item=>{
          return{
            ...item,
            zan:''
          }
        })
        return {items:tmp}
      })
    },
    data(){
      return {
        pageNo: 1
      }
    },
    methods:{
      loadMore(){
        this.pageNo++
        spitApi.search( this.pageNo,10,{state:'1'} ).then( res=>{
          let tmp= res.data.data.rows.map( item=>{
            return {
              ...item,
              zan: ''
            }
          })
          this.items=this.items.concat( tmp )
        })
      },
      thumbup(index){
        if(getUser().name===undefined){
          this.$message({
            message:'必须登陆才可以点赞哦~',
            type:"warning"
          })
          return
        }
        if( this.items[index].zan==='color'){
          this.$message({
            message:'不可以重复点赞哦~',
            type:"warning"
          })
          return
        }
        this.items[index].zan='color'
        spitApi.thumbup(this.items[index].id).then( res=>{
          if(res.data.flag){
            this.items[index].thumbup++
          }
        })
      }
    }
  }
</script>

二、吐槽详情页

1.构建吐槽详情页

（1）创建pages/spit/_id.vue

<template>
<div class="wrapper tc-detail">
    <div class="fl left-list">
      <div class="tc-detail">
        <!-- 标题区 -->
        <div class="detail-tit">
          <div class="detail-author">
           <a href="javascript:;">{{pojo.nickname}}</a> 发布于{{pojo.publishtime}}
          </div>
          <div class="detail-content">
            <p>{{pojo.content}}</p>
          </div>
          <div class="detail-tool">
            <ul>
            <li><span class="star"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> {{pojo.thumbup}}</span></li>
            <li><a href="#" data-toggle="modal" data-target="#shareModal"><i class="fa fa-share-alt" aria-hidden="true"></i> {{pojo.share}}</a></li>
            <li><a data-toggle="modal" data-target="#remarkModal"><i class="fa fa-commenting" aria-hidden="true"></i> {{pojo.comment}}</a></li>
            </ul>
          </div>
        </div>
        <!-- 评论区 -->
        <div class="comment-area">
          <div class="comment-tit">
            <span>评论</span>
          </div>
          <ul class="comment-list">
            <li v-for="(item,index) in commentlist" :key="index">
              <div class="item-photo">
                <img src="~/assets/img/widget-widget-photo.png" alt="" />
              </div>
              <div class="item-content">
                <p class="author"><a href="javascript:;">{{item.nickname}}</a>评论于  {{item.publishtime}}</p>
                <p class="content">{{item.content}}</p>
              </div><div class="item-thumb">
              <div>
                <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> {{item.thumbup}}
              </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="fl right-tag">
      <div class="block-btn">
        <p>来个匿名吐槽，发泄一下你心中的怒火吧！</p>
        <a class="sui-btn btn-block btn-share" href="~/assets/spit-submit.html" target="_blank">发吐槽</a>
      </div>
    </div>
    <div class="clearfix"></div>
</div>
</template>
<script>
import '~/assets/css/page-sj-spit-detail.css'
import spitApi from '@/api/spit'
import axios from 'axios'
export default {
    date(){
        return {
            pojo:{}
        }
    },
    asyncData({params}){
        return axios.all( [
        spitApi.findById(params.id),spitApi.commentlist(params.id) ] ).then(
            axios.spread( function( pojo,commentlist ){
                return {
                    pojo: pojo.data.data,
                    commentlist: commentlist.data.data
                }
            })
        )
    }
} 
</script>

（2）修改pages/spit/index.vue 页面链接

<router-link :to="'/spit/'+item.id"> {{item.content}} </router-link>

2.吐槽详情页数据渲染

（1）easyMock模拟数据
URL: spit/{id}
Methos: GET

{
	"code": 20000,
	"flag": true,
	"message": "@string",
	"data": {
		"id": "@string",
		"nickname": "小雅",
		"content": "@cword(100,300)",
		"publishtime": "@datetime",
		"thumbup": "@integer(60, 100)",
		"share": "@integer(60, 100)",
		"comment": "@integer(60, 100)"
	}
}

URL: spit/commentlist/{id}
Method: GET

{
	"code": 20000,
	"flag": true,
	"message": "@string",
	"data|10": [{
		"id": "@string",
		"content": "我要评论我要评论我要评论我要评论我要评论我要评论",
		"nikename": "小雅",
		"publishtime": "@datetime",
		"thumbup": "@integer(60, 100)"
	}]
}

3.吐槽点赞

（1）easyMock模拟数据
URL: spit/thumbup/{id}
Method: put

{
	"code": 20000,
	"flag": true,
	"message": "执行成功"
}

（2）提交token
修改utils/request.js ,每次请求将token添加到header里

import axios from 'axios'
import {getUser} from '@/utils/auth'
// 创建axios实例
const service = axios.create({
    baseURL: 'http://192.168.192.130:7300/mock/5d120b475ed8ef4c615f2d60',
    // api的base_url
    timeout: 30000, // 请求超时时间
    headers: { 'Authorization': 'Bearer '+getUser().token }
})
export default service