(六) -示例：Nuxt.js ——realworld-在线全套测试应用，含页面展示、接口api、样式代码

最新推荐文章于 2022-12-31 01:05:57 发布

viceen

最新推荐文章于 2022-12-31 01:05:57 发布

阅读量716

点赞数

分类专栏： vue.js进阶文章标签： vue js

本文链接：https://blog.csdn.net/weixin_44867717/article/details/105021562

版权

vue.js进阶专栏收录该内容

47 篇文章 5 订阅

订阅专栏

示例：Nuxt.js ——realworld-在线全套测试应用，含页面展示、接口api、样式代码

视图

模板

布局

Vuex 状态树

经典方式
模块方式

插件

配置

命令和部署

Nuxt.js 提供了一系列常用的命令, 用于开发或发布部署。

命令	描述
nuxt	启动一个热加载的Web服务器（开发模式） localhost:3000。
nuxt build	利用webpack编译应用，压缩JS和CSS资源（发布用）。
nuxt start	以生产模式启动一个Web服务器 (`nuxt build` 会先被执行)。
nuxt generate	编译应用，并依据路由配置生成对应的HTML文件 (用于静态站点的部署)。

package.json

"config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": 3000
    }
  }

RealWorld 案例

账号—— xxxyyy123a@xxxyy.cn 12345678

在线示例：
- https://demo.realworld.io/
接口文档：
- https://github.com/gothinkster/realworld/tree/master/api
Postman 接口：
- https://raw.githubusercontent.com/gothinkster/realworld/master/api/Conduit.postman_collection.json
页面模板：
- https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INSTRUCTIONS.md

所需资源
- https://github.com/gothinkster/realworld-starter-kit

需求说明

首页
- 展示文章列表
  - Your Feed
  - Global Feed
- 展示标签列表
- 文章列表分页
用户登录
用户注册
设置
发布文章
文章详情
- 基本数据展示
  - 日期
  - markdown
- 关注
- 喜欢
- 封装作者组件
- 评论
  - 加载评论列表
  - 发布评论
编辑文章

创建项目

用户注册/登录

首页模块

文章详情模块（上）

从首页文章列表跳转到文章详情：

<nuxt-link class="preview-link" :to="{ name: 'article', params: { slug: article.slug } }">
  <h1>{{ article.title }}</h1>
  <p>{{ article.description }}</p>
  <span>Read more...</span>
</nuxt-link>

获取路由参数：

async asyncData ({ params }) {
	console.log(params)
},

封装请求方法：

/**
 * Get Article
 */
export const getArticle = slug => {
  return request({
    method: 'GET',
    url: `/api/articles/${slug}`
  })
}

获取文章详情：

async asyncData ({ params }) {
  const { data } = await getArticle(params.slug)
  return {
    article: data.article
  }
},

展示基本数据

如果文章作者是当前登录用户，则展示编辑、删除，否则展示关注、喜欢

日期处理

Markdown 处理

marked

ArticleMeta 组件

<template>
  <div class="article-meta">
    <a href>
      <img :src="article.author.image" />
    </a>
    <div class="info">
      <a href class="author">{{ article.author.username }}</a>
      <span class="date">{{ article.createdAt | relativeTime }}</span>
    </div>
    <button class="btn btn-sm btn-outline-secondary">
      <i class="ion-plus-round"></i>
      &nbsp;
      Follow Eric Simons
      <!-- <span class="counter">(10)</span> -->
    </button>
    &nbsp;&nbsp;
    <button class="btn btn-sm btn-outline-primary">
      <i class="ion-heart"></i>
      &nbsp;
      Favorite Post
      <span class="counter">({{ article.favoritesCount }})</span>
    </button>
  </div>
</template>

<script>
  export default {
    name: 'ArticleMeta',
    props: {
      article: {
        type: Object,
        default: () => {}
      }
    }
  }
</script>

关注|取消关注用户

处理关注按钮的显示状态：

已关注状态
未关注状态

关注用户|取消关注：

async onFollow () {
  try {
    this.followLoding = true
    
    const { following, username } = this.article.author

    let res = null
    if (following) {
      res = await unFollowUser(username)
    } else {
      res = await followUser(username)
    }

    this.article.author.following = res.data.profile.following
  } catch (err) {
    console.log(err)
  }

  this.followLoding = false
}

点赞|取消点赞文章

文章详情模块（下）

接口封装

import request from '@/utils/request'

/**
 * Add Comments to an Article
 */
export const createComment = (slug, body) => {
  return request({
    method: 'POST',
    url: `/api/articles/${slug}/comments`,
    data: {
      comment: {
        body
      }
    }
  })
}

/**
 * Get Comments from an Article
 */
export const getComments = slug => {
  return request({
    method: 'GET',
    url: `/api/articles/${slug}/comments`
  })
}

/**
 * Delete Comment
 */
export const deleteComments = slug => {
  return request({
    method: 'DELETE',
    url: `/api/articles/${slug}/comments/:id`
  })
}