[IMWeb训练营作业] Vue.js 仿今日头条 首页

这次作业模仿今日头条Web版本的首页，因为时间比较紧，优先实现功能，UI和头条的首页有点差距。

实现功能

• 获取所有分类
• 点击某个分类，显示该分类下所有文章
• 点击某个文章，alert 文章的某些信息

在线预览地址，点这里,所有源码,见这里。

示意图如下：
进入首页的默认内容：

点击某篇文章

实现这些功能，用了以下几个框架：

• Vue.js
• axios 与服务器端交互的工具库。
• Mock.js 用来模拟服务器端返回的数据和造随机数据。

核心代码如下：

// 获取分类下的所有文章
fetchArticles(typeId) {
  this.currType = typeId
  return axios.get(`/type/${typeId}`).then(response => {
    this.articles = response.data
  })
},
// 获取所有分类
fetchTypes() {
  return axios.get(`/allTypes`).then(response => {
    this.types = response.data
  })
},
// 查看某篇文章
viewArticle(article) {
  alert(`查看name为${article.title},id为${article.id}的文章`)
}

造的模拟数据如下

// 所有类型
var allTypes = [{
  name: '娱乐',
  id: 'fun'
}, {
  name: '游戏',
  id: 'game'
}, {
  name: '汽车',
  id: 'car'
}]
Mock.mock(new RegExp('/allTypes'), options => {
  return allTypes
})

// 按类型分类的所有文章
var allArticles = [{
  id: 1,
  title: '3岁无脸孩子的cosplay 吓坏昆凌孟非 卸妆后全场尖叫',
  time: '10分钟前',
  author: '头条娱乐',
  type: 'fun'// 娱乐
}, {
  id: 2,
  title: '赵四刘小光睡粉让女孩刷礼物，2万不还直接拉黑！',
  time: '32分钟前',
  author: '星探光光',
  type: 'fun' // 娱乐
},
{
  id: 3,
  title: '3岁无脸孩子的cosplay 吓坏昆凌孟非 卸妆后全场尖叫',
  time: '1小时前',
  author: '头条娱乐',
  type: 'fun' // 娱乐
},
{
  id: 4,
  title: '猫娘游戏《NEKO-NIN exHeart》上架Steam 爱猫人士的新选择',
  time: '10分钟前',
  author: ' 游民星空 ⋅',
  type: 'game'// 游戏
},
{
  id: 5,
  title: ' 央视直播失误集锦第三季！“一本正经地胡言乱语”是种怎样的体验',
  time: '1小时前',
  author: 'xxx',
  type: 'game'// 游戏
},
{
  id: 6,
  title: ' A1、A2、A3、B1、B2驾驶证“降级”新规定(2017)',
  time: '10分钟前',
  author: '女司机谈车',
  type: 'car'// 汽车
}]
Mock.mock(new RegExp('/type'), options => {
  var typeId = /^\/type\/(.*)/.exec(options.url)[1]
  // debugger
  return allArticles.filter(article => {
    return typeId === article.type
  })
})