Vue.js 框架源码与进阶 - NuxtJS案例 - Realworld项目 - 文章/发布部署

11.5 文章详情

展示基本信息

请求方法：GET

请求地址：/api/articles/:slug

api/article.js

// 获取文章详情
export const getArticle = slug => {
   
  return request({
   
    method: 'GET',
    url: `/api/articles/${
     slug}`
  })
}

pages/article/index.vue

import {
    getArticles } from '@/api/article'

export default {
   
  name: 'ArticleIndex',
  async asyncData ({
    params }) {
   
    const {
    data } = await getArticles(params.slug)
    console.log(data)
  }
}

export default {
   
  name: 'ArticleIndex',
  async asyncData ({
    params }) {
   
    const {
    data } = await getArticles(params.slug)
    return {
   
      article: data.article
    }
  }
}

<h1>{
   {
    article.title }}</h1>

...
<div class="row article-content">
  <div class="col-md-12">{
   {
    article.body }}</div>
</div>

把Markdown转为HTML

markdown-it：将Markdown文档转换为Html

npm install markdown-it --save

在文章的详情页面加载包pages/article/index.vue

import MarkdownIt from 'markdown-it'

export default {
   
  name: 'ArticleIndex',
  async asyncData ({
    params }) {
   
    const {
    data } = await getArticle(params.slug)
    const {
    article } = data
    const md = new MarkdownIt
    article.body = md.render(article.body)
    return {
   
      article: article
    }
  }
}

<div class="row article-content">
  <div class="col-md-12" v-html="article.body"></div>
</div>

展示文章作者相关信息

效果图：

模板：

<div class="article-meta">
  <a href=""><img src="http://i.imgur.com/Qr71crq.jpg" /></a>
  <div class="info">
    <a href="" class="author">Eric Simons</a>
    <span class="date">January 20th</span>
  </div>
  <button class="btn btn-sm btn-outline-secondary">
    <i class="ion-plus