文章详情模块
配置文章详情路由
目标：配置文章详情组件路由
- 路由配置
import Detail from '@/views/detail/index.vue'
{ path: '/detail', component: Detail }
- 控制路由跳转
<!-- van-cell组件支持路由跳转，类似于router-link标签的to属性 -->
<van-cell :to='{path: "/detail", query: {id: item.art_id.toString()}}' v-for='item in list' :key='item.art_id.toString()'>
<!-- 基于传统的编程式导航也可以跳转 -->
<van-cell @click='$router.push("/detail?id="+item.art_id.toString())' v-for='item in list' :key='item.art_id.toString()'>
总结：
- 基于问号方式传递路由参数
- vant-cell组件支持路由跳转
获取文章详情数据
目标：获取文章详情数据
- 封装接口调用方法
// 获取文章的详情数据
export const getDetailById = (articleId) => {
return request({
method: 'get',
url: 'v1_0/articles/' + articleId
})
}
- 调用接口获取文章详情数据
data () {
return {
article: {}
}
},
methods: {
async getDetailById () {
const ret = await getDetailById(this.$route.query.id)
this.article = ret.data
}
},
created () {
this.getDetailById()
}
- 渲染文章内容
<div class='container' ref="container">
<van-nav-bar fixed title="文章详情" left-arrow @click-left="$router.back()" />
<div class="detail" v-if="article">
<h3 class="title">{{article.title}}</h3>
<div class="author">
<van-image round width="1rem" height="1rem" fit="fill" :src="article.aut_photo" />
<div class="text">
<p class="name">{{article.aut_name}}</p>
<p class="time">{{article.pubdate|relativeTime}}</p>
</div>
<van-button round size="small" type="info">
{{article.is_followed?'已关注':'+ 关注'}}
</van-button>
</div>
<div class="content" v-html="article.content"></div>
<div class="zan">
<van-button round size="small" :class="{active:article.attitude===1}" plain icon="like-o">点赞</van-button>
<van-button round size="small" :class="{active:article.attitude===0}" plain icon="delete">不喜欢</van-button>
</div>
</div>
</div>
- 详情样式
.container {
height: 100%;
overflow-y: auto;
box-sizing: border-box;
}
.detail {
padding: 92px 20px 88px;
// height: 1000%;
.title {
font-size: 36px;
line-height: 2;
}
.zan {
text-align: center;
padding: 20px 0;
.active {
border-color: red;
color: red;
}
}
.author {
padding: 20px 0;
display: flex;
.text {
flex: 1;
padding-left: 20px;
line-height: 1.5;
.name {
font-size: 28px;
margin: 0;
}
.time {
margin: 0;
font-size: 24px;
color: #999;
}
}
}
.content {
padding: 40px 0;
overflow: hidden;
white-space: pre-wrap;
word-break: break-all;
/deep/ img {
max-width: 100%;
background: #f9f9f9;
}
/deep/ code {
white-space: pre-wrap;
}
/deep/ pre {
white-space: pre-wrap;
}
}
}
总结：
- 数据动态填充（工作量）
- 关注功能/点赞功能
文章关注与取消关注
目标：实现关注与取消关注文章
- 绑定事件
<van-button @click="followed()" round size="small" type="info">
{{article.is_followed?'已关注':'+ 关注'}}
</van-button>
- 封装关注与取消关注接口
// 关注文章接口
export const followArticle = (userId) => {
return request({
method: 'post',
url: 'v1_0/user/followings',
data: {
target: userId
}
})
}
// 关注文章接口
export const unFollowArticle = (userId) => {
return request({
method: 'delete',
url: 'v1_0/user/followings/' + userId
})
}
- 实现功能
import { followArticle, unFollowArticle } from '@/api/api-article.js'
// 关注或者取消关注文章
async toggleFocus () {
// 判断关注和取消关注的操作
if (this.article.is_followed) {
// 已经关注了，此时需要取消关注
try {
await unFollowArticle(this.article.aut_id)
this.article.is_followed = !this.article.is_followed
} catch {
this.$toast('取消关注失败')
}
} else {
// 尚未关注，此时需要进行关注
try {
await followArticle(this.article.aut_id)
this.article.is_followed = !this.article.is_followed
} catch {
this.$toast('关注失败')
}
}
},
总结：
- 调用接口实现功能
- async函数的异常处理必须有await，否则catch无法执行，因为Promise会使用catch方法处理异常。
文章点赞与不喜欢
目标：实现文章点赞与不喜欢功能
- 绑定事件
<div class="zan">
<van-button @click="praise(1)" round size="small" :class="{active:article.attitude===1}" plain icon="like-o">点赞</van-button>
<van-button @click="praise(0)" round size="small" :class="{active:article.attitude===0}" plain icon="delete">不喜欢</van-button>
</div>
- 封装点赞与不喜欢接口
// 点赞接口
export const likes = (articleId) => {
return request({
method: 'post',
url: 'v1_0/article/likings',
data: {
target: articleId
}
})
}
// 取消点赞接口
export const unlikes = (articleId) => {
return request({
method: 'delete',
url: 'v1_0/article/likings/' + articleId
})
}
// 添加【不喜欢】接口
export const dislikes = (articleId) => {
return request({
method: 'post',
url: 'v1_0/article/dislikes',
data: {
target: articleId
}
})
}
// 取消【不喜欢】接口
export const undislikes = (articleId) => {
return request({
method: 'delete',
url: 'v1_0/article/dislikes/' + articleId
})
}
- 实现功能
// 实现点赞效果(4种操作：点赞和取消点赞，不喜欢和取消不喜欢)
async toggleStatus (type) {
// 判断点击的是第几个按钮？
if (type === 1) {
// 点击了第一个按钮：点赞/取消点赞
if (this.article.attitude === 1) {
// 取消点赞
try {
await unlikes(this.article.art_id.toString())
this.article.attitude = -1
} catch {
this.$toast('取消点赞失败')
}
} else {
// 点赞
try {
await likes(this.article.art_id.toString())
this.article.attitude = 1
} catch {
this.$toast('点赞失败')
}
}
} else {
// 点击了第二个按钮：不喜欢/取消不喜欢
if (this.article.attitude === 0) {
// 取消不喜欢
try {
await undislikes(this.article.art_id.toString())
this.article.attitude = -1
} catch {
this.$toast('取消不喜欢失败')
}
} else {
// 不喜欢
try {
await dislikes(this.article.art_id.toString())
this.article.attitude = 0
} catch {
this.$toast('不喜欢失败')
}
}
}
},
总结：
- 逻辑分支比较多，先宏观再微观（先做大的分支处理，再做细节）
文章评论模块
评论组件拆分
目标：拆分文章评论组件并实现功能
- 组件基本布局
<div class="comment">
<!-- 评论列表 -->
<van-list v-model="loading" :finished="finished" finished-text="没有更多了">
<div class="item van-hairline--bottom van-hairline--top" v-for="index in 5" :key="index">
<van-image round width="1rem" height="1rem" fit="fill" src="https://img.yzcdn.cn/vant/cat.jpeg" />
<div class="info">
<p>
<span class="name">一阵清风</span>
<span style="float:right">
<span class="van-icon van-icon-good-job-o zan"></span>
<span class="count">10</span>
</span>
</p>
<p>评论的内容，。。。。</p>
<p>
<span class="time">两天内</span>
<van-tag plain @click="showReply=true">4 回复</van-tag>
</p>
</div>
</div>
</van-list>
<!-- 底部输入框 -->
<div class="reply-container van-hairline--top">
<van-field v-model="value" placeholder="写评论...">
<span class="submit" slot="button">提交</span>
</van-field>
</div>
</div>
- 布局样式
.comment {
margin-top: 20px;
/deep/ .item {
display: flex;
padding: 20px 0;
.info {
flex: 1;
padding-left: 20px;
.name {
color: #069;
}
.zan {
vertical-align: middle;
padding-right: 4px;
}
.count {
vertical-align: middle;
font-size: 20px;
color: #666;
}
.time {
color: #666;
}
p {
padding: 10px 0;
margin: 0;
}
}
}
/deep/ .van-button:active::before {
background: transparent;
}
}
.reply-container {
position: fixed;
left: 0;
bottom: 0;
height: 88px;
width: 100%;
background: #f5f5f5;
z-index: 9999;
.submit {
font-size: 24px;
color: #3296fa;
}
}
- 评论相关数据
data () {
return {
value: '',
loading: false,
finished: false
}
}
总结：评论列表和评论表单基本布局。
- 局部组件的基本使用：先导入；再配置，最后使用
评论列表渲染
目标：实现评论列表数据动态渲染
- 获取文章的评论列表数据
- 获取评论的回复的列表数据
- 封装列表数据接口
// 获取文章的评论
export const getComments = (articleId, offset) => {
return request({
method: 'get',
url: 'v1_0/comments',
params: {
// a表示文章的评论;c表示回复评论的数据
type: 'a',
// 评论的文章的id或者，回复的评论的id
source: articleId,
// 分页参数（评论的id）
offset: offset,
// 每页的条数
limit: 10
}
})
}
总结：熟悉基于offset的分页策略：根据文章评论的id进行排序和分页，类似于基于时间戳的分页方式。
- 动态加载评论列表数据
async onLoad () {
// 调用接口获取评论数据
const ret = await getComments(this.articleId, this.offset)
this.list.push(...ret.data.results)
// 修改本次加载的状态位
this.loading = false
// 判断结束的条件
if (ret.data.last_id === ret.data.end_id) {
// 列表数据已经全部加载完成
this.finished = true
} else {
// 记录查询下一页数据开始的位置
this.offset = ret.data.last_id
}
}
- 列表数据动态渲染
<div class="item van-hairline--bottom van-hairline--top" v-for="comment in list" :key="comment.com_id.toString()">
<van-image round width="1rem" height="1rem" fit="fill" :src="comment.aut_photo" />
<div class="info">
<p>
<span class="name">{{comment.aut_name}}</span>
<span style="float:right">
<span class="van-icon van-icon-good-job-o zan"></span>
<span class="count">{{comment.like_count}}</span>
</span>
</p>
<p>{{comment.content}}</p>
<p>
<span class="time">{{comment.pubdate|formatTime}}</span>
<van-tag plain @click="showReply=true">{{comment.reply_count}} 回复</van-tag>
</p>
</div>
</div>
总结：
- 调用接口；获取数据；填充页面
- 判断分页结束的条件（理解），类似于基于时间戳的分页策略
文章评论功能
目标：实现评论功能
- 封装接口
// 评论接口
export const comment = (options) => {
return request({
method: 'post',
url: 'v1_0/comments',
data: {
// 文章的id
target: options.target,
// 评论内容
content: options.content,
// 如果参数target是文章id，那么这个参数不需要
// 如果参数target是评论id，那么这个参数表示文章id
art_id: options.articleId
}
})
}
- 绑定事件
<span class="submit" @click="handleSubmit()" slot="button">提交</span>
- 实现评论回复功能
async sendComment () {
// 发表评论功
try {
await comment({
target: this.articleId,
content: this.value
})
this.list = []
this.offset = null
this.onLoad()
this.value = ''
} catch {
this.$toast('评论文章失败')
}
},
总结：
- 调用接口，处理异常
- try catch 处理async函数，await是必要的
扫一扫
5132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
