在 api/article.js
中新增封装接口方法
在组件article/index.vue
中调用获取文章详情
展示文章详情
先处理标题、作者信息、文章正文显示这几个部分,其他留到稍后处理
处理内容加载状态
需求:
- 加载中,显示 loading
- 加载成功,显示文章详情
- 加载失败,显示错误提示
- 如果 404,提示资源不存在
- 其它的,提示加载失败,用户可以点击重试重新加载
处理正文样式
文章正文包括各种数据:段落、标题、列表、链接、图片、视频等资源。
-
将 github-markdown-css (opens new window)样式文件下载到项目中
-
把 样式文件下载放在
views/article/github-markdown.css
-
在
article/index.vue
里面的style
标签里面导入
-
注:不介绍css怎么布局
给内容正文标签增加markdown-body
样式类
.postcssrc.js
中配置不要转换样式文件中的字号
图片点击预览
一、ImagePreview 图片预览 (opens new window)的使用
二、处理图片点击预览 (演示数据文章id: 135982 )
思路:
1、从文章内容中获取到所有的 img DOM 节点
2、获取文章内容中所有的图片地址
3、遍历所有 img 节点,给每个节点注册点击事件
4、在 img 点击事件处理函数中,调用 ImagePreview 预览