Skip to content

Commit

Permalink
新增三个页面
Browse files Browse the repository at this point in the history
  • Loading branch information
@BoBoooooo
BoBoooooo committed Jan 12, 2018
1 parent 79647e1 commit 4971cc3
Show file tree
Hide file tree
Showing 5 changed files with 317 additions and 0 deletions.
Binary file added logo.ico
View file
Binary file not shown.
Binary file added src/assets/401.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
112 changes: 112 additions & 0 deletions src/views/DouBan/book.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<template>
<div class="app-container" id="movie">
<h2>图书查询</h2>
<el-input @keyup.enter.native="search" placeholder="请输入图书名" v-model="criteria" style="padding-bottom:10px;">

<el-button slot="append" icon="el-icon-search" v-on:click="search"></el-button>
</el-input>
<el-table empty-text="暂无数据" :data="tableData" v-loading.body="listLoading" element-loading-text="拼命加载中" fit highlight-current-row>

<el-table-column label="图书名" align="center">
<template slot-scope="scope">
<a :href="scope.row.alt" target="_blank" id="name">{{scope.row.title}}</a>
</template>
</el-table-column>


<el-table-column label="作者" align="center">
<template slot-scope="scope">
<el-tag type="danger" style="margin-right:5px;margin-top:5px">{{scope.row.author}}</el-tag>

</template>
</el-table-column>
<el-table-column label="发行日期" align="center">

<template slot-scope="scope">
{{scope.row.pubdate}}
</template>
</el-table-column>
<el-table-column label="售价" align="center">

<template slot-scope="scope">

{{scope.row.price}}
</template>
</el-table-column>

<el-table-column label="豆瓣评分" align="center">

<template slot-scope="scope">

<el-rate v-model="scope.row.rating.average" disabled show-score text-color="#ff9900" score-template="{value}">
</el-rate>
</template>
</el-table-column>
<el-table-column label="海报" align="center">
<template slot-scope="scope">
<img :src="getImage(scope.row.image)" style="height:100px">
</template>
</el-table-column>

</el-table>

</div>
</template>

<script>
import axios from "axios";
export default {
data() {
return {
//表格当前页数据
tableData: null,
//请求的URL
url: "/douban/book/search",
//下拉菜单选项
select: "",
//默认每页数据量
pagesize: 10,
//当前页码
currentPage: 1,
//查询的页码
criteria:"",
start: 1,
//默认数据总数
totalCount: 1000,
listLoading: false
};
},
methods: {
//从服务器读取数据
loadData: function (criteria,pageNum, pageSize) {
axios
.get(this.url+"?q="+criteria+"&count=20")
.then(
response => {
console.log(response.data)
this.tableData = response.data.books;
this.listLoading = false;
this.totalCount = response.data.total;
},
function () {
console.log("failed");
}
);
},
getImage(url) {
if (url !== undefined) {
return url.replace('http:\/\/', 'https://images.weserv.nl/?url=');
}
},
search: function() {
this.loadData(this.criteria, this.currentPage, this.pagesize);
}
}
};
</script>
100 changes: 100 additions & 0 deletions src/views/DouBan/movie.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<template>
<div class="app-container" id="movie">
<h2>近期热映电影</h2>
<el-table :data="tableData" v-loading.body="listLoading" element-loading-text="拼命加载中" fit highlight-current-row>
<el-table-column align="center" label='上映年份' width="95">
<template slot-scope="scope">
{{scope.row.year}}
</template>
</el-table-column>
<el-table-column label="电影名" align="center">
<template slot-scope="scope">
<a :href="scope.row.alt" target="_blank" id="name">{{scope.row.title}}</a>
</template>
</el-table-column>
<el-table-column label="类型" align="center">
<template slot-scope="scope">
<el-tag :key="index" type="primary" v-for="(item,index) in scope.row.genres" style="margin-right:5px">{{item}}</el-tag>

</template>
</el-table-column>

<el-table-column label="主演" align="center">
<template slot-scope="scope">
<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>

</template>
</el-table-column>
<el-table-column label="豆瓣评分" align="center">

<template slot-scope="scope">

<el-rate v-model="scope.row.rating.average" disabled show-score text-color="#ff9900" score-template="{value}">
</el-rate>
</template>
</el-table-column>
<el-table-column label="海报" align="center">
<template slot-scope="scope">
<img :src="getImage(scope.row.images.small)" style="height:200px">
</template>
</el-table-column>

</el-table>

</div>
</template>

<script>
import axios from "axios";
export default {
data() {
return {
//表格当前页数据
tableData: null,
//请求的URL
url: "/douban/movie/in_theaters?city=南京&count=100",
//下拉菜单选项
select: "",
//默认每页数据量
pagesize: 10,
//当前页码
currentPage: 1,
//查询的页码
start: 1,
//默认数据总数
totalCount: 1000,
listLoading: true
};
},
created() {
this.loadData(this.currentPage, this.pagesize);
},
methods: {
//从服务器读取数据
loadData: function (pageNum, pageSize) {
axios
.get(this.url)
.then(
response => {
console.log(response.data)
this.tableData = response.data.subjects;
this.listLoading = false;
this.totalCount = response.data.total;
},
function () {
console.log("failed");
}
);
},
getImage(url) {
if (url !== undefined) {
return url.replace('http:\/\/', 'https://images.weserv.nl/?url=');
}
}
}
};
</script>
105 changes: 105 additions & 0 deletions src/views/DouBan/music.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<template>
<div class="app-container" id="movie">
<h2>音乐查询</h2>
<el-input @keyup.enter.native="search" placeholder="请输入歌名" v-model="criteria" style="padding-bottom:10px;">

<el-button slot="append" icon="el-icon-search" v-on:click="search"></el-button>
</el-input>
<el-table empty-text="暂无数据" :data="tableData" v-loading.body="listLoading" element-loading-text="拼命加载中" fit highlight-current-row>

<el-table-column label="歌名" align="center">
<template slot-scope="scope">
<a :href="scope.row.alt" target="_blank" id="name">{{scope.row.title}}</a>
</template>
</el-table-column>
<el-table-column label="歌手" align="center">
<template slot-scope="scope">
<el-tag :key="index" type="primary" v-for="(item,index) in scope.row.attrs.singer" style="margin-right:5px">{{item}}</el-tag>

</template>
</el-table-column>

<el-table-column label="描述" align="center">
<template slot-scope="scope">
<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>

</template>
</el-table-column>


<el-table-column label="豆瓣评分" align="center">

<template slot-scope="scope">

<el-rate v-model="scope.row.rating.average" disabled show-score text-color="#ff9900" score-template="{value}">
</el-rate>
</template>
</el-table-column>
<el-table-column label="封面" align="center">
<template slot-scope="scope">
<img :src="getImage(scope.row.image)" style="height:100px">
</template>
</el-table-column>

</el-table>

</div>
</template>

<script>
import axios from "axios";
export default {
data() {
return {
//表格当前页数据
tableData: null,
//请求的URL
url: "/douban/music/search",
//下拉菜单选项
select: "",
//默认每页数据量
pagesize: 10,
//当前页码
currentPage: 1,
//查询的页码
criteria:"",
start: 1,
//默认数据总数
totalCount: 1000,
listLoading: false
};
},
methods: {
//从服务器读取数据
loadData: function (criteria,pageNum, pageSize) {
axios
.get(this.url+"?q="+criteria+"&count=100")
.then(
response => {
console.log(response.data)
this.tableData = response.data.musics;
this.listLoading = false;
this.totalCount = response.data.total;
},
function () {
console.log("failed");
}
);
},
getImage(url) {
if (url !== undefined) {
return url.replace('http:\/\/', 'https://images.weserv.nl/?url=');
}
},
search: function() {
this.loadData(this.criteria, this.currentPage, this.pagesize);
}
}
};
</script>

0 comments on commit 4971cc3

Please sign in to comment.