十次方项目前端，吐槽列表与详细页（十五）
一、吐槽列表页
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">×</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">×</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