我们小组仿了今日头条的几个页面,因为时间比较紧,优先实现功能,UI比较搓,大家见谅。
本次作业由 小胡(组长),紫阳,酱,九彩拼盘共同完成,我们每人做了一个页面。
我们用了以下几个框架:
下面来一一介绍我们实现的页面。
首页
实现了获取分类,以及分类下文章类别的功能。
核心代码如下
// 获取分类下的所有文章
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
})
},
造模拟数据如下
// 所有类型
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
})
})
列表页
核心代码
axios.get(BASE_URL + '/topics',{
params:{
page:1,
tab:'all',
limit:10
}
}).then(function(res){
console.log(res.data.data);
_this.dataList = res.data.data;
}).then(function(err){
console.log(err)
})
评论部分
支持输入用户名,内容来发表评论。
核心代码
publicDiscuss(){
var obj = {
userinfo:this.userinfo,
content:this.content
}
this.discuss.unshift(obj)
this.modalFalg = false
},
// 显示评论框
openModal(){
this.modalFalg = true
},
// 隐藏评论框
closeModal(){
this.modalFalg = false
console.log(this.modalFalg);
}
详情页
支持点赞,取消点赞,获取更多内容等功能。
核心代码如下
addAgree(item){
item.agree++;
},
backAgree(item){
item.agree--;
},
getmore(){
this.moreContent = true;
}