写完这一篇vue仿豆瓣项目就完结了,在这个项目中有一个问题一直没解决,就是图片会丢失一部分,报错403,现在还没找到解决方法,如果有谁知道怎么解决或者知道原因,请告诉我。
项目地址是:GitHub - Ercyao/VUE-douban: 仿豆瓣vue项目
首页效果图
首页
首页home.vue,当数据加载完loading组件显示,通过修改日期beforeDate(),获取到this.next_date的值,然后再次请求数据,将数据添加到AllData数组中,由此实现加载更多数据
import loading from '@/components/loading'
import headerNav from '@/components/header'
import drownApp from '@/components/drownapp'
import {getBookData,getHotTopic,getFilmLive,getRecTopic,getRecommend,getQuickData} from '@/store/API'
export default{
data(){
return {
isShow:false,
showLoading:true,
downFlag:false,
next_date:'',
AllData:[],
Recommend:null,
QuickData:null,
QuickName:null,
QuickUrl:null,
}
},
components: {
headerNav,
drownApp,
loading,
},
created(){
this.getBookData();
this.beforeDate();
},
methods: {
async getBookData(){
let Recommend = await getRecommend(this.next_date).then(res => res.json());
this.Recommend = Recommend.recommend_feeds;
this.next_date = Recommend.date;
this.AllData.push({time: this.next_date, data: this.Recommend});
this.QuickData = await getQuickData().then(res => res.json());
let i = Math.floor(Math.random()*10);
this.QuickName= this.QuickData[i].name;
this.QuickUrl= this.QuickData[i].url;
this.hideLoading();
},
//加载更多
async loaderMore(){
this.downFlag=true;
this.beforeDate();
let Recommend = await getRecommend(this.next_date).then(res => res.json());
this.Recommend = Recommend.recommend_feeds;
this.AllData.push({time: this.next_date, data: this.Recommend});
},
changeRecData(){
this.rec_start = parseInt(10*Math.random());
this.getBookData();
},
hideLoading(){
this.showLoading = false;
},
beforeDate(){
let d = this.next_date;
d = new Date(d);
d = +d - 1000*60*60*24;
d = new Date(d);
this.next_date = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
}
}
}
@import '../../assets/style/less.less';
.quick-nav {
overflow: hidden;
padding: .5rem 0 2rem;
li {
float: left;
width: 50%;
padding: 5px;
box-sizing: border-box;
font-size: 15px;
a {
background-color: #f6f6f6;
color: #494949;
display: block;
text-align: center;
height: 3rem;
line-height: 3rem;
border-radius: 2px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
}
}
.recommend-box{
.time{
width: 100%;
height: 4rem;
line-height: 4rem;
text-align: center;
font-size: 18px;
color: #111;
.border(0,.1rem,0,0);
}
ul{
li{
padding: 2rem 0;
.border(0,.1rem,0,0);
}
}
.author{
display: flex;
justify-content: space-between;
font-size: 12px;
color: #CCCCCC;
padding-top: 1rem;
}
}
.recommend-content{
display: -webkit-flex;
display: flex;
width: 100%;
overflow: hidden;
.left{
-webkit-flex: 2;
flex: 2;
.title{
.ellipsis(2);
text-align: justify;
font-size: 17px;
font-weight: 500;
line-height: 1.41;
color: #494949;
margin-bottom: 6px;
};
.desc{
.ellipsis(3);
text-align: justify;
color: #aaa;
font-size: 12px;
line-height: 1.5;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
};
}
.right{
height: 7rem;
overflow: hidden;
img{
width: 5rem;
padding-left: 20%;
}
}
}
.load-more {
margin: 1rem 20%;
height: 3rem;
line-height: 3rem;
text-align: center;
color: #fff;
span{
background: #aaa;
width: 100%;
height: 100%;
}
.active{
opacity: 0.5;
}
}
电影的效果图
电影
电影movie.vue,因为电影页和图书页样式相似,所以将写成公共组件columnBox.vue,根据type值来使用哪一种,:items是绑定要渲染的数据
import columnBox from '@/components/column'
import Category from '@/components/Category'
import loading from '@/components/loading'
import headerNav from '@/components/header'
import drownApp from '@/components/drownapp'
import {getMovieShowing,getMovieFreeStream,getMovieLatest,getInterestsData,getMovieClass} from '@/store/API'
export default{
data(){
return {
showLoading:true,
MovieShowing:null,
MovieFreeStream:null,
MovieLatest:null,
movieInterests:null,
MovieClass:null,
}
},
components: {
headerNav,
drownApp,
loading,
Category,
columnBox,
},
created(){
this.getMovieData();
},
methods: {
async getMovieData(){
//影院热映
let MovieShowing = await getMovieShowing().then(res => res.json());
this.MovieShowing = MovieShowing.subject_collection_items;
//免费在线观影
let MovieFreeStream = await getMovieFreeStream().then(res => res.json());
this.MovieFreeStream = MovieFreeStream.subject_collection_items;
//新片速递
let MovieLatest = await getMovieLatest().then(res => res.json());
this.MovieLatest = MovieLatest.subject_collection_items;
//发现好电影
let InterestsData = await getInterestsData().then(res => res.json());
this.movieInterests = InterestsData[0].movie;
//分类浏览
this.MovieClass = await getMovieClass().then(res => res.json());
this.hideLoading();
},
hideLoading(){
this.showLoading = false;
}
}
}
图书的效果图
图书
图书books.vue
{{ProductBookHTitle}}¥ {{ProductBookHPrice}}
{{ProductBookHInfo}}
import columnBox from '@/components/column'
import Category from '@/components/Category'
import loading from '@/components/loading'
import headerNav from '@/components/header'
import drownApp from '@/components/drownapp'
import {getBookFiction,getBookNoFiction,getProductBook,getInterestsData,getBookClass} from '@/store/API'
export default{
data(){
return {
showLoading:true,
BookFiction:null,
BookNoFiction:null,
ProductBook:null,
ProductBookHUrl:null,
ProductBookHImg:null,
ProductBookHPrice:null,
ProductBookHTitle:null,
ProductBookHInfo:null,
booksInterests:null,
BookClass:null,
}
},
components: {
headerNav,
drownApp,
loading,
Category,
columnBox,
},
created(){
this.getMovieData();
},
methods: {
async getMovieData(){
//最受关注图书 | 虚构类
let BookFiction = await getBookFiction().then(res => res.json());
this.BookFiction = BookFiction.subject_collection_items;
//最受关注图书 | 非虚构类
let BookNoFiction = await getBookNoFiction().then(res => res.json());
this.BookNoFiction = BookNoFiction.subject_collection_items;
//豆瓣书店
let ProductBook = await getProductBook().then(res => res.json());
this.ProductBook = ProductBook.subject_collection_items;
let ProductBookHeader= ProductBook.header;
this.ProductBookHUrl = ProductBookHeader.url;
this.ProductBookHImg = ProductBookHeader.cover.url;
this.ProductBookHPrice = ProductBookHeader.price;
this.ProductBookHTitle = ProductBookHeader.title;
this.ProductBookHInfo = ProductBookHeader.info;
//发现好电影
let InterestsData = await getInterestsData().then(res => res.json());
this.booksInterests = InterestsData[0].books;
//分类浏览
this.BookClass = await getBookClass().then(res => res.json());
this.hideLoading();
},
hideLoading(){
this.showLoading = false;
}
}
}
.promItem{
display: block;
overflow: hidden;
margin-top: 15px;
.cover {
float: left;
width: 100px;
margin-right: 15px;
}
.content {
overflow: hidden;
.name {
font-size: 19px;
color: #494949;
margin-right: 40px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
.price {
float: right;
color: #E76648;
font-size: 16px;
line-height: 22px;
}
.info {
color: #AAAAAA;
margin-top: .8rem;
font-size: .9rem;
line-height: 1.4rem;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:4;
}
}
}
广播的效果图
广播
广播broadcast.vue,根据值来显示不同样式
-
{{item.status.create_time}}
{{item.status.text}}{{item.status.card.title}}
{{item.status.card.subtitle}}
import loading from '@/components/loading'
import headerNav from '@/components/header'
import drownApp from '@/components/drownapp'
import {getBroadcast} from '@/store/API'
export default{
data(){
return {
showLoading:true,
Broadcast:null
}
},
components: {
headerNav,
drownApp,
loading,
},
created(){
this.getMovieData();
},
methods: {
async getMovieData(){
let Broadcast = await getBroadcast().then(res => res.json());
this.Broadcast = Broadcast.items;
this.hideLoading();
},
hideLoading(){
this.showLoading = false;
}
}
}
.broadcast-box{
ul{
li{
margin: 1rem 0 1.5rem;
}
}
.broadcast-con{
display: flex;
justify-content: space-between;
.left{
width: 40px;
margin-right: 10px;
img{width: 35px;border-radius: 50%;}
}
.right{
width: 97%;
color: #000000;
padding-bottom: 30px;
border-bottom: .1rem solid #E8E8E8;
.author{font-size: 1.3rem;line-height: 2.2rem;}
.blod{font-weight: 600;margin-right: 5px;}
.said_des{
margin-top: 10px;
line-height: 22px;
color: #494949;
}
.said_img{
max-height: 300px;
overflow: hidden;
.smallimg{
width: 32.8%;
height: 6.5em;
margin-right: 0.1em;
margin-bottom: 0.1em;
float: left;
}
.smallimg:after{clear: both;}
.bigimg{
margin-top: 15px;
width: 99%;
}
}
.diary_des{
padding: 15px;
margin: 10px 0 20px;
border-radius: 2px;
background: #f9f9f9;
.diary_title{
font-size: 17px;
font-weight: 500;
line-height: 1.4;
color: #494949;
margin-bottom: 5px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.diary_content{
display: flex;
.diary_text{
flex: 2;
font-size: 12px;
line-height: 16px;
color: #aaa;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.diary_img{
height: 48px;
overflow: hidden;
img{
width: 75px;
margin-left: 10px;
}
}
}
}
}
.gray{color: #AAAAAA;}
}
}
.list-link{
color: #42bd56;
display: block;
padding: 15px 0;
font-size: 16px;
line-height: 18px;
text-align: center;
cursor: pointer;
}
小组的效果图
小组
小组group.vue
import teamBox from '@/components/team'
import loading from '@/components/loading'
import headerNav from '@/components/header'
import drownApp from '@/components/drownapp'
import {getGroups} from '@/store/API'
export default{
data(){
return {
showLoading:true,
Groups:[],
MovieFreeStream:null,
MovieLatest:null,
movieInterests:null,
MovieClass:null,
Groups1:null,
Groups2:null,
Groups3:null,
Groups4:null,
}
},
components: {
headerNav,
drownApp,
loading,
teamBox,
},
created(){
this.getGroupData();
},
methods: {
async getGroupData(){
let Groups = await getGroups().then(res => res.json());
this.Groups = Groups.rec_groups[0].classified_groups;
this.hideLoading();
},
hideLoading(){
this.showLoading = false;
}
}
}
搜索结果的效果图
搜索结果
搜索结果search.vue,
搜索
import teamBox from '@/components/team'
import headerNav from '@/components/header'
import {getMusicRoot,getBookRoot,getMovieRoot} from '@/store/API'
export default{
data(){
return {
keyword:'',
SearchClass:null,
MusicRoot:null,
BookRoot:null,
MovieRoot:null,
}
},
components: {
headerNav,
teamBox,
},
created(){
this.getSearchData();
},
methods: {
async getSearchData(){
this.keyword = this.$route.query.q;
if(this.keyword){
let MusicRoot = await getMusicRoot(this.keyword).then(res => res.json());
this.MusicRoot = MusicRoot.musics;
let BookRoot = await getBookRoot(this.keyword).then(res => res.json());
this.BookRoot = BookRoot.books;
let MovieRoot = await getMovieRoot(this.keyword).then(res => res.json());
this.MovieRoot = MovieRoot.subjects;
}
},
SearchResult(){
this.getSearchData();
this.ShowSearchClass = false;
}
}
}
.search_box{
.mtop{margin-top: 3.5rem;}
.search_team{
padding: 0 5%;
}
.search_input{
width: 100%;
height: 2.5rem;
padding: 15px;
border-bottom: 1px solid #f3f3f3;
input{
float: left;
width: 75%;
height: 2.5rem;
font-size: 14px;
background: #F1F1F1;
margin-right: 10px;
border: 0;
border-radius: 5px;
padding:0 10px;
}
.search{
font-size: 16px;
margin-top: 5px;
}
}
}