1、创建组件并配置路由
创建 views/article/index.vue 组件
然后将该页面配置到根级路由
找到首页文章列表项组件配置路由跳转
2、页面布局
3、实现功能
获取文章数据：
在 api/article.js 中新增封装接口方法
export const getArticleById = articleId => {
return request({
method: 'GET',
url: `/v1_0/articles/${articleId}`
})
}/
export const getArticleById = articleId => {
return request({
method: 'GET',
url: `/v1_0/articles/${articleId}`
})
}
在组件article/index.vue中调用获取文章详情
// 1.导入请求方法
import { getArticleById } from '@/api/article'
export default {
name: 'ArticlePage',
components: {},
props: {
articleId: {
type: String,
required: true
}
},
data () {
return {
article: {} // 2.定义变量存储文章详情
}
},
computed: {},
watch: {},
created () {
// 4. 调用方法
this.loadArticle()
},
mounted () {},
methods: {
// 3. 定义获取数据请求方法
async loadArticle () {
try {
// 3.1 发送请求
const { data } = await getArticleById(this.articleId)
// 3.3 成功赋值
this.article = data.data
console.log(this.article) // 控制台查看数据输出
} catch (err) {
// 3.2 失败处理
console.log(err)
}
}
}
}
展示文章详情
处理内容加载状态
//
加载中，显示 loading
加载成功，显示文章详情
加载失败，显示错误提示
如果 404，提示资源不存在
其它的，提示加载失败，用户可以点击重试重新加载 //
// data定义变量
loading: true, // 加载中的 loading 状态
errStatus: 0 // 失败的状态码
处理正文样式：文章正文包括各种数据：段落、标题、列表、链接、图片、视频等资源。这里我们是直接将将 github-markdown-css样式文件下载到项目中直接导入使用的。
图片点击预览：vant里面有个ImagePreview 图片预览。
1、从文章内容中获取到所有的 img DOM 节点
2、获取文章内容中所有的图片地址
3、遍历所有 img 节点，给每个节点注册点击事件
4、在 img 点击事件处理函数中，调用 ImagePreview 预览
async loadArticle () {
// 数据驱动视图这件事儿不是立即的
this.article = data.data
// 初始化图片点击预览
console.log(this.$refs['article-content']) // 这里没有内容
// 这个时候其实找不到 这个refs引用的，原因是因为v-if的渲染其实需要时间，我们视图还没有立即更新完成。
// 使用定时器，延迟更新( setTimeout 0 会把要做的事情放在异步队列的最后面执行！ )
setTimeout(() => {
console.log(this.$refs['article-content']) // 这里有内容
this.previewImage()
}, 0)
// 不使用定时器可以使用nextTick这个api方法
/*
this.loading = false
this.$nextTick(()=>{
this.previewImage()
})
*/
},
// 预览图片处理事件函数
previewImage () {
// 得到所有的 img 节点
const articleContent = this.$refs['article-content'] // 获取到了容器节点
const imgs = articleContent.querySelectorAll('img')
// 获取所有 img 地址
const images = []
imgs.forEach((img, index) => {
images.push(img.src)
// 给每个 img 注册点击事件，在处理函数中调用预览
img.onclick = () => {
ImagePreview({
// 预览的图片地址数组
images,
// 起始位置，从 0 开始
startPosition: index
})
}
})
}
————————————————
