【FCC系列教程】随机名言获取器

FreeCodeCamp系列教程,使用Vue开发的随机名言获取器。

题目:

Build a Random Quote Machine

目标:

  1. 设计一个功能类似于: http://codepen.io/FreeCodeCamp/full/bELoPJ的应用。
  2. 点击刷新按钮可以获取一条新的名言。
  3. 点击分享按钮可以把这条名言分享到社交网络。

思路:

第一步:设计好页面的基本元素。名言获取器的页面至少要包含:

  1. 显示名言的标签,HTML专门有一个用来表示引用的标签blockquote
  2. 刷新按钮以及分享按钮

第二步:寻找可用的随机名言获取API

你可以自己用一段JSON来模拟:

当然最好还是使用正式的API,假如你还没有掌握后端的知识,可以使用网上已有的一些第三方服务,例如:

  1. 一言(ヒトコト)
  2. 宅言

当然上述两个都是比较适合我这种中二青年的,你也可以以API等关键词搜索适合你自己的服务。网上有许多专门的API服务商,例如:

  1. SDK.CN
  2. 聚合数据

第三步,搜索社交网站分享接口。你可以以微博分享API/twitter share api等关键词进行搜索,会找到很多相关的内容,绝大多数的社交网站全部都提供分享内容的url接口。例如新浪微博的分享url:

或者是使用一些已有的第三方服务:

JiaThis

又或者是一些封装好的库:

Share.js

第四步,编写代码。你可以从零开始,完全手写所有的代码。当然,为了更快捷的开发,以快速实现需求为目标,也可以使用一些现有的框架帮助你快速开发。比如我在这个小的项目中就使用了很多现有的框架:

  1. Bootstrap (构建页面基本样式)
  2. jQuery (发起ajax请求API)
  3. VueJS (页面数据事件交互)

效果预览:

同样的,希望你不要直接“参考”我的代码,而是根据已有的思路,自己开动脑筋,编写实现自己的作品袄~

Mr.Ggrass会在接下来的一段时间里发布一系列的FCC重难点题目教程,欢迎持续关注袄~