Skip to content

Commit 4971cc3

Browse files
BoBooooooBoBoooooo
committed
新增三个页面
1 parent 79647e1 commit 4971cc3

File tree

5 files changed

+317
-0
lines changed

5 files changed

+317
-0
lines changed

‎logo.ico

19.5 KB
Binary file not shown.

‎src/assets/401.gif

160 KB
Loading

‎src/views/DouBan/book.vue

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<template>
2+
<div class="app-container" id="movie">
3+
<h2>图书查询</h2>
4+
<el-input @keyup.enter.native="search" placeholder="请输入图书名" v-model="criteria" style="padding-bottom:10px;">
5+
6+
<el-button slot="append" icon="el-icon-search" v-on:click="search"></el-button>
7+
</el-input>
8+
<el-table empty-text="暂无数据" :data="tableData" v-loading.body="listLoading" element-loading-text="拼命加载中" fit highlight-current-row>
9+
10+
<el-table-column label="图书名" align="center">
11+
<template slot-scope="scope">
12+
<a :href="scope.row.alt" target="_blank" id="name">{{scope.row.title}}</a>
13+
</template>
14+
</el-table-column>
15+
16+
17+
<el-table-column label="作者" align="center">
18+
<template slot-scope="scope">
19+
<el-tag type="danger" style="margin-right:5px;margin-top:5px">{{scope.row.author}}</el-tag>
20+
21+
</template>
22+
</el-table-column>
23+
<el-table-column label="发行日期" align="center">
24+
25+
<template slot-scope="scope">
26+
{{scope.row.pubdate}}
27+
</template>
28+
</el-table-column>
29+
<el-table-column label="售价" align="center">
30+
31+
<template slot-scope="scope">
32+
33+
{{scope.row.price}}
34+
</template>
35+
</el-table-column>
36+
37+
<el-table-column label="豆瓣评分" align="center">
38+
39+
<template slot-scope="scope">
40+
41+
<el-rate v-model="scope.row.rating.average" disabled show-score text-color="#ff9900" score-template="{value}">
42+
</el-rate>
43+
</template>
44+
</el-table-column>
45+
<el-table-column label="海报" align="center">
46+
<template slot-scope="scope">
47+
<img :src="getImage(scope.row.image)" style="height:100px">
48+
</template>
49+
</el-table-column>
50+
51+
</el-table>
52+
53+
</div>
54+
</template>
55+
56+
<script>
57+
import axios from "axios";
58+
export default {
59+
data() {
60+
return {
61+
//表格当前页数据
62+
tableData: null,
63+
//请求的URL
64+
url: "/douban/book/search",
65+
//下拉菜单选项
66+
select: "",
67+
//默认每页数据量
68+
pagesize: 10,
69+
//当前页码
70+
currentPage: 1,
71+
//查询的页码
72+
criteria:"",
73+
start: 1,
74+
//默认数据总数
75+
totalCount: 1000,
76+
listLoading: false
77+
};
78+
},
79+
80+
methods: {
81+
//从服务器读取数据
82+
loadData: function (criteria,pageNum, pageSize) {
83+
axios
84+
.get(this.url+"?q="+criteria+"&count=20")
85+
.then(
86+
response => {
87+
88+
console.log(response.data)
89+
this.tableData = response.data.books;
90+
this.listLoading = false;
91+
this.totalCount = response.data.total;
92+
},
93+
function () {
94+
console.log("failed");
95+
}
96+
);
97+
},
98+
getImage(url) {
99+
if (url !== undefined) {
100+
return url.replace('http:\/\/', 'https://images.weserv.nl/?url=');
101+
}
102+
},
103+
search: function() {
104+
this.loadData(this.criteria, this.currentPage, this.pagesize);
105+
}
106+
107+
108+
109+
}
110+
};
111+
112+
</script>

‎src/views/DouBan/movie.vue

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<template>
2+
<div class="app-container" id="movie">
3+
<h2>近期热映电影</h2>
4+
<el-table :data="tableData" v-loading.body="listLoading" element-loading-text="拼命加载中" fit highlight-current-row>
5+
<el-table-column align="center" label='上映年份' width="95">
6+
<template slot-scope="scope">
7+
{{scope.row.year}}
8+
</template>
9+
</el-table-column>
10+
<el-table-column label="电影名" align="center">
11+
<template slot-scope="scope">
12+
<a :href="scope.row.alt" target="_blank" id="name">{{scope.row.title}}</a>
13+
</template>
14+
</el-table-column>
15+
<el-table-column label="类型" align="center">
16+
<template slot-scope="scope">
17+
<el-tag :key="index" type="primary" v-for="(item,index) in scope.row.genres" style="margin-right:5px">{{item}}</el-tag>
18+
19+
</template>
20+
</el-table-column>
21+
22+
<el-table-column label="主演" align="center">
23+
<template slot-scope="scope">
24+
<el-tag :key="index" type="danger" v-for="(item,index) in scope.row.casts" style="margin-right:5px;margin-top:5px">{{item.name}}</el-tag>
25+
26+
</template>
27+
</el-table-column>
28+
<el-table-column label="豆瓣评分" align="center">
29+
30+
<template slot-scope="scope">
31+
32+
<el-rate v-model="scope.row.rating.average" disabled show-score text-color="#ff9900" score-template="{value}">
33+
</el-rate>
34+
</template>
35+
</el-table-column>
36+
<el-table-column label="海报" align="center">
37+
<template slot-scope="scope">
38+
<img :src="getImage(scope.row.images.small)" style="height:200px">
39+
</template>
40+
</el-table-column>
41+
42+
</el-table>
43+
44+
</div>
45+
</template>
46+
47+
<script>
48+
import axios from "axios";
49+
export default {
50+
data() {
51+
return {
52+
//表格当前页数据
53+
tableData: null,
54+
//请求的URL
55+
url: "/douban/movie/in_theaters?city=南京&count=100",
56+
//下拉菜单选项
57+
select: "",
58+
//默认每页数据量
59+
pagesize: 10,
60+
//当前页码
61+
currentPage: 1,
62+
//查询的页码
63+
start: 1,
64+
//默认数据总数
65+
totalCount: 1000,
66+
listLoading: true
67+
};
68+
},
69+
created() {
70+
this.loadData(this.currentPage, this.pagesize);
71+
},
72+
methods: {
73+
//从服务器读取数据
74+
loadData: function (pageNum, pageSize) {
75+
axios
76+
.get(this.url)
77+
.then(
78+
response => {
79+
80+
console.log(response.data)
81+
this.tableData = response.data.subjects;
82+
this.listLoading = false;
83+
this.totalCount = response.data.total;
84+
},
85+
function () {
86+
console.log("failed");
87+
}
88+
);
89+
},
90+
getImage(url) {
91+
if (url !== undefined) {
92+
return url.replace('http:\/\/', 'https://images.weserv.nl/?url=');
93+
}
94+
}
95+
96+
97+
}
98+
};
99+
100+
</script>

‎src/views/DouBan/music.vue

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<template>
2+
<div class="app-container" id="movie">
3+
<h2>音乐查询</h2>
4+
<el-input @keyup.enter.native="search" placeholder="请输入歌名" v-model="criteria" style="padding-bottom:10px;">
5+
6+
<el-button slot="append" icon="el-icon-search" v-on:click="search"></el-button>
7+
</el-input>
8+
<el-table empty-text="暂无数据" :data="tableData" v-loading.body="listLoading" element-loading-text="拼命加载中" fit highlight-current-row>
9+
10+
<el-table-column label="歌名" align="center">
11+
<template slot-scope="scope">
12+
<a :href="scope.row.alt" target="_blank" id="name">{{scope.row.title}}</a>
13+
</template>
14+
</el-table-column>
15+
<el-table-column label="歌手" align="center">
16+
<template slot-scope="scope">
17+
<el-tag :key="index" type="primary" v-for="(item,index) in scope.row.attrs.singer" style="margin-right:5px">{{item}}</el-tag>
18+
19+
</template>
20+
</el-table-column>
21+
22+
<el-table-column label="描述" align="center">
23+
<template slot-scope="scope">
24+
<el-tag type="danger" v-if="scope.row.alt_title.length>0" style="margin-right:5px;margin-top:10px">{{scope.row.alt_title}}</el-tag>
25+
26+
</template>
27+
</el-table-column>
28+
29+
30+
<el-table-column label="豆瓣评分" align="center">
31+
32+
<template slot-scope="scope">
33+
34+
<el-rate v-model="scope.row.rating.average" disabled show-score text-color="#ff9900" score-template="{value}">
35+
</el-rate>
36+
</template>
37+
</el-table-column>
38+
<el-table-column label="封面" align="center">
39+
<template slot-scope="scope">
40+
<img :src="getImage(scope.row.image)" style="height:100px">
41+
</template>
42+
</el-table-column>
43+
44+
</el-table>
45+
46+
</div>
47+
</template>
48+
49+
<script>
50+
import axios from "axios";
51+
export default {
52+
data() {
53+
return {
54+
//表格当前页数据
55+
tableData: null,
56+
//请求的URL
57+
url: "/douban/music/search",
58+
//下拉菜单选项
59+
select: "",
60+
//默认每页数据量
61+
pagesize: 10,
62+
//当前页码
63+
currentPage: 1,
64+
//查询的页码
65+
criteria:"",
66+
start: 1,
67+
//默认数据总数
68+
totalCount: 1000,
69+
listLoading: false
70+
};
71+
},
72+
73+
methods: {
74+
//从服务器读取数据
75+
loadData: function (criteria,pageNum, pageSize) {
76+
axios
77+
.get(this.url+"?q="+criteria+"&count=100")
78+
.then(
79+
response => {
80+
81+
console.log(response.data)
82+
this.tableData = response.data.musics;
83+
this.listLoading = false;
84+
this.totalCount = response.data.total;
85+
},
86+
function () {
87+
console.log("failed");
88+
}
89+
);
90+
},
91+
getImage(url) {
92+
if (url !== undefined) {
93+
return url.replace('http:\/\/', 'https://images.weserv.nl/?url=');
94+
}
95+
},
96+
search: function() {
97+
this.loadData(this.criteria, this.currentPage, this.pagesize);
98+
}
99+
100+
101+
102+
}
103+
};
104+
105+
</script>

0 commit comments

Comments
 (0)