xuhuajiao
/
demo-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

图书推荐api调试

master
xuhuajiao 2 years ago
parent
62cae81c84
commit
4bbe28fa7e
5 changed files with 183 additions and 139 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      selfServiceMachine/src/api/book.js
  2. 12
      selfServiceMachine/src/assets/styles/index.scss
  3. 1
      selfServiceMachine/src/main.js
  4. 283
      selfServiceMachine/src/views/bookRecommend.vue
  5. 2
      selfServiceMachine/src/views/onlineBookSelection.vue

14
selfServiceMachine/src/api/bookshelf.js → selfServiceMachine/src/api/book.js
View File

@ -4,16 +4,18 @@ import request from '@/utils/request'
// 书单推荐二级页面 // 书单推荐二级页面
export function FetchBookRecommendList(params) { export function FetchBookRecommendList(params) {
return request({ return request({
url: '/frontDemoApi/bookRecommendList',
url: 'frontDemoApi/bookRecommendList',
method: 'get', method: 'get',
params: params params: params
}) })
} }
export function FetchbookOnlineList(params) {
//书单推荐-书籍详情
export function FetchBookRecommendDetails(parameter) {
return request({ return request({
url: '/frontDemoApi/bookOnlineList',
method: 'get',
params: params
url: 'frontDemoApi/bookRecommendDetails',
method: 'post',
data: parameter
}) })
} }
@ -22,5 +24,5 @@ export function FetchbookOnlineList(params) {
export default { export default {
FetchBookRecommendList, FetchBookRecommendList,
FetchbookOnlineList
FetchBookRecommendDetails
} }

12
selfServiceMachine/src/assets/styles/index.scss
View File

@ -154,8 +154,12 @@
.ranking-img{ .ranking-img{
width: 140px; width: 140px;
height: 200px; height: 200px;
background-color: red;
background-color: #f1f1f1;
overflow: hidden; overflow: hidden;
img{
display: block;
width: 100%;
}
} }
.ranking-book-detail{ .ranking-book-detail{
margin-top: 10px; margin-top: 10px;
@ -339,6 +343,7 @@
background-color: #fff; background-color: #fff;
border-radius: 8px; border-radius: 8px;
height: calc(100vh - 698px); height: calc(100vh - 698px);
// height: calc(100vh - 20px);
overflow: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
.result{ .result{
@ -532,3 +537,8 @@
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
} }
.load-data{
padding: 15px 0;
text-align: center;
}

1
selfServiceMachine/src/main.js
View File

@ -20,6 +20,7 @@ Vue.prototype.$axios = axios
import echarts from 'echarts' import echarts from 'echarts'
Vue.prototype.$echarts = echarts Vue.prototype.$echarts = echarts
Vue.prototype.coverUrl = 'http://192.168.99.67:8080'
Vue.config.productionTip = false Vue.config.productionTip = false
new Vue({ new Vue({

283
selfServiceMachine/src/views/bookRecommend.vue
View File

@ -13,7 +13,7 @@
<div class="filter-item-title">出版社</div> <div class="filter-item-title">出版社</div>
<ul class="publish-list"> <ul class="publish-list">
<li v-for="(item,index) in publish" :key="index" @click="selectPublic(index)" :class="{ 'active': selectedIndex === index }"> <li v-for="(item,index) in publish" :key="index" @click="selectPublic(index)" :class="{ 'active': selectedIndex === index }">
<p>{{ item.name }}</p>
<p>{{ item.publish }}</p>
<span>{{ item.num }}</span> <span>{{ item.num }}</span>
</li> </li>
</ul> </ul>
@ -35,43 +35,33 @@
height="200px" height="200px"
@change="carouselChange" @change="carouselChange"
> >
<el-carousel-item>
<div class="ranking-img"></div>
</el-carousel-item>
<el-carousel-item>
<div class="ranking-img"></div>
</el-carousel-item>
<el-carousel-item>
<div class="ranking-img"></div>
<el-carousel-item v-for="(item,index) in topThree" :key="index">
<div class="ranking-img">
<img :src="coverUrl+'/demoOnlineSelect/getBookCover.do?id='+item.id" alt="" />
</div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<div class="ranking-book-detail">
<div v-if="i === carIndex" class="ranking-book-detail" v-for="(item,i) in topThree" :key="i">
<div class="book-info"> <div class="book-info">
<h5>AI超入门</h5>
<h5 class="title-item-only">{{ item.bookName }}</h5>
<div class="book-author"> <div class="book-author">
<span>秋叶 刘进新</span>
<span>机械工业出版社</span>
<span>{{ item.author }}</span>
<span>{{ item.publish }}</span>
</div> </div>
<p class="book-intro title-item"> <p class="book-intro title-item">
图书简介图书简介图书简介图书简介图书简介图书简介图书
{{ item.introduce }}
</p> </p>
<div :class="carClass"></div> <div :class="carClass"></div>
</div> </div>
<div class="book-click-num"> <div class="book-click-num">
<span class="click-num">100次</span>
<span class="detail-btn" @click="detailShow=true">查看详情</span>
<span class="click-num">{{item.clickNum}}次</span>
<span class="detail-btn" @click="getBookDetail(item)">查看详情</span>
</div> </div>
</div> </div>
<ul class="ranking-list-bottom"> <ul class="ranking-list-bottom">
<li>
<li v-for="(item,index) in rankingOther" :key="index" @click="getBookDetail(item)">
<span>TOP4</span> <span>TOP4</span>
<p class="title-item-only">秒懂AI写作</p>
</li>
<li>
<span>TOP5</span>
<p class="title-item-only">
ChatGPT:AI革命AI革命AI革命
</p>
<p class="title-item-only">{{ item.bookName }}</p>
</li> </li>
</ul> </ul>
</div> </div>
@ -97,9 +87,9 @@
placeholder="请输入关键词进行检索" placeholder="请输入关键词进行检索"
style="width: 300px" style="width: 300px"
></el-input> ></el-input>
<el-button type="primary">搜索</el-button>
<el-button type="primary" @click="toSearch">搜索</el-button>
</div> </div>
<el-button>重置</el-button>
<el-button @click="resetSearch">重置</el-button>
</div> </div>
<div class="hot-keyword"> <div class="hot-keyword">
<p>热门检索</p> <p>热门检索</p>
@ -109,31 +99,31 @@
</div> </div>
</div> </div>
<div class="recommend-list" @scroll="listenScroll"> <div class="recommend-list" @scroll="listenScroll">
<div class="result">检索结果：<span>121</span>册</div>
<div class="recommend-item" v-for="item in count">
<div class="result">检索结果：<span>{{ totalNum }}</span>册</div>
<div class="recommend-item" v-for="(item,index) in bookList" :key="index">
<div class="book-detail"> <div class="book-detail">
<div class="book-img"> <div class="book-img">
<img src="" alt="" />
<img :src="coverUrl+'/demoOnlineSelect/getBookCover.do?id='+item.id" alt="" />
</div> </div>
<div class="book-txt"> <div class="book-txt">
<h4> <h4>
{{item}}秒懂AI提问：秒懂AI提问：让人工智能成为你的效率神器
{{item.bookName}}
</h4> </h4>
<div class="book-autor"> <div class="book-autor">
<span>秋叶 刘进新 姜梅 定秋枫</span>
<span>2023年07月</span>
<span>{{item.author}}</span>
<span>{{item.createdDate}}</span>
</div> </div>
<div class="book-publish"> <div class="book-publish">
<span>人民邮电出版社</span>
<span>ISBN：950146556432</span>
<span>{{item.publish}}</span>
<span>ISBN：{{item.isbn}}</span>
</div> </div>
<div class="book-intro title-item"> <div class="book-intro title-item">
精心提炼20种GPT提问方法及指令，从入到进阶再到精通，100个案例带你玩转100个案例带你玩转G
{{item.introduce}}
</div> </div>
</div> </div>
</div> </div>
<div class="book-eval"> <div class="book-eval">
<span class="eval-num">100次</span>
<span class="eval-num">{{item.clickNum}}次</span>
<div class="eval-star"> <div class="eval-star">
<span class="active"></span> <span class="active"></span>
<span class="active"></span> <span class="active"></span>
@ -141,11 +131,11 @@
<span></span> <span></span>
<span></span> <span></span>
</div> </div>
<div class="to-book-more" @click="detailShow=true">查看详情</div>
<div class="to-book-more" @click="getBookDetail(item)">查看详情</div>
</div> </div>
</div> </div>
<div v-if="!hasNextPage">人家是有底线的</div>
<div v-else>加载中...</div>
<div class="load-data" v-if="!hasNextPage">暂无更多数据</div>
<div class="load-data" v-else>加载中...</div>
</div> </div>
</div> </div>
</div> </div>
@ -155,27 +145,27 @@
<div class="dialog-book"> <div class="dialog-book">
<div class="book-detail"> <div class="book-detail">
<div class="book-img"> <div class="book-img">
<img src="" alt="" />
<img :src="coverUrl+'/demoOnlineSelect/getBookCover.do?id='+detailData.id" alt="" />
</div> </div>
<div class="book-txt"> <div class="book-txt">
<h4> <h4>
秒懂AI提问：秒懂AI提问：让人工智能成为你的效率神器
{{ detailData.bookName }}
</h4> </h4>
<div class="book-autor"> <div class="book-autor">
<span>秋叶 刘进新 姜梅 定秋枫</span>
<span>2023年07月</span>
<span>{{ detailData.author }}</span>
<span>{{ detailData.createdDate }}</span>
</div> </div>
<div class="book-publish"> <div class="book-publish">
<span>人民邮电出版社</span>
<span>ISBN：950146556432</span>
<span>{{ detailData.publish }}</span>
<span>ISBN：{{ detailData.isbn }}</span>
</div> </div>
<div class="book-intro title-item"> <div class="book-intro title-item">
精心提炼20种GPT提问方法及指令，从入到进阶再到精通，100个案例带你玩转100个案例带你玩转G
{{ detailData.introduce }}
</div> </div>
</div> </div>
</div> </div>
<div class="book-eval"> <div class="book-eval">
<span class="eval-num">100次</span>
<span class="eval-num"> {{ detailData.clickNum }}次</span>
<div class="eval-star"> <div class="eval-star">
<span class="active"></span> <span class="active"></span>
<span class="active"></span> <span class="active"></span>
@ -208,65 +198,59 @@
</template> </template>
<script> <script>
import { FetchBookRecommendList } from '@/api/bookshelf'
import { FetchBookRecommendList, FetchBookRecommendDetails } from '@/api/book'
export default { export default {
name: 'BookRecommend', name: 'BookRecommend',
data() { data() {
return { return {
selectValue: '1',
selectValue: 'title',
keyword: '', keyword: '',
detailShow: false, detailShow: false,
detailData: {},
options: [ options: [
{ {
value: '1',
value: 'title',
label: '题名', label: '题名',
}, },
{ {
value: '2',
value: 'isbn',
label: 'ISBN', label: 'ISBN',
}, },
{ {
value: '3',
value: 'author',
label: '著者', label: '著者',
}, },
{ {
value: '4',
value: 'publish',
label: '出版社', label: '出版社',
}, },
{ {
value: '5',
value: 'createdDate',
label: '出版时间', label: '出版时间',
}, },
], ],
publish:[
{
num: '100册',
name: '人民文学出版社',
},
{
num: '96册',
name: '商务印书馆',
},
{
num: '80册',
name: '人民出版社',
},
{
num: '43册',
name: '上海译文出版社',
}
],
publishDate:[2023,2022,2021,2020,2019,2018],
publish:[],
publishDate:[],
topThree: [],
rankingOther: [],
keywordData:['人工智能','遥遥领先','ChatAPT','5G'], keywordData:['人工智能','遥遥领先','ChatAPT','5G'],
selectedIndex: null, selectedIndex: null,
selectedDateIndex: null, selectedDateIndex: null,
keyWordIndex: null, keyWordIndex: null,
carIndex: 0, carIndex: 0,
count: 10,
scrolly: '', // 上拉加载
bookList:[],
pageIndex: 1, pageIndex: 1,
pageSize: 10,
hasNextPage: false, hasNextPage: false,
totalPages: 0
totalPages: 0,
totalNum: 0,
query: {
title: null,
isbn: null,
author: null,
publish: null,
createdDate: null,
}
} }
}, },
computed: { computed: {
@ -287,54 +271,102 @@ export default {
this.getBookRecommendList() this.getBookRecommendList()
}, },
methods: { methods: {
resetData(){
this.query = {
title: null,
isbn: null,
author: null,
publish: null,
createdDate: null
}
this.pageIndex = 0
this.hasNextPage = true
this.keyword = ''
this.bookList = []
},
resetSearch(){
this.resetData()
this.addMoreData()
},
toSearch(){
this.query = {
title: null,
isbn: null,
author: null,
publish: null,
createdDate: null
}
this.pageIndex = 0
this.hasNextPage = true
this.bookList = []
switch(this.selectValue){
case 'title' :
this.query.title = this.keyword
break;
case 'isbn' :
this.query.isbn = this.keyword
break;
case 'author' :
this.query.author = this.keyword
break;
case 'publish' :
this.query.publish = this.keyword
break;
case 'createdDate' :
this.query.createdDate = this.keyword
break;
}
this.addMoreData()
},
getBookRecommendList() { getBookRecommendList() {
const params = { const params = {
'pageNo': 0,
'pageSize': 10
'recommendId': null,
'pageNo': this.pageIndex,
'pageSize': this.pageSize,
'title':this.query.title,
'isbn':this.query.isbn,
'author':this.query.author,
'publish':this.query.publish,
'createdDate':this.query.createdDate
} }
console.log(params)
FetchBookRecommendList(params).then(res => { FetchBookRecommendList(params).then(res => {
console.log(res) console.log(res)
this.publish = res.publishGroup
this.publishDate = res.createdDateGroup
this.topThree = res.clickTop10.slice(0, 3)
this.rankingOther = res.clickTop10.slice(3, 5)
let resData = res.bookList;
if(resData.length === 0){
this.hasNextPage = false
}else{
this.hasNextPage = true
}
this.totalNum = res.page.totalRows
this.totalPages = res.page.totalPages;
if (this.pageIndex < 1) {
this.bookList = resData;
} else {
this.bookList = this.bookList.concat(resData)
}
}).catch(() => { }).catch(() => {
this.$message.error('接口错误') this.$message.error('接口错误')
}) })
}, },
getBookDetail(item){
FetchBookRecommendDetails({bookId: item.id}).then(res => {
console.log(res)
this.detailShow = true
if(Object.keys(res).length !== 0){
GetBookBasePages(ClassId,Order,pageIndex) {
// const that = proxy;
// that.ClassId = ClassId;
// that.Order = Order;
// that.pageIndex = pageIndex;
// that.$http.get(proxy.$API.GETBOOKBASEPAGES, {
// params: {
// ClassId: ClassId, // 类别编号
// MarkRec: '',
// Where: '',
// Order: Order,
// pageIndex: pageIndex,
// pageSize: 20
// }
// })
// .then(res => {
// if (res.type == 200) {
// let resData = res.data;
// that.hasNextPage = res.hasNextPage;
// that.totalPages = res.pages;
// if (that.pageIndex <= 1) {
// that.bookList = resData;
// // if (resData.length < 20) {
// // that.hasNextPage = true
// // }
// } else {
// that.bookList = that.bookList.concat(resData)
// }
// } else {
// Toast(res.content);
// }
// })
// .catch(res => {
// console.log(res);
// });
}else{
this.detailData = item
}
}).catch(() => {
this.$message.error('接口错误')
})
}, },
//监听滚动 //监听滚动
listenScroll (e) { listenScroll (e) {
@ -342,40 +374,41 @@ export default {
if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 100) { //监听滚动到div底部 if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 100) { //监听滚动到div底部
this.addMoreData(); this.addMoreData();
} }
//判断滚动-是否显示breadcrumb2
if (this.scrolly != ele.scrollTop) {
this.isScroll = false;
}
this.scrolly = ele.scrollTop;
if (ele.scrollTop == 0) {
this.isScroll = true;
}
}, },
//加载更多 //加载更多
addMoreData() { addMoreData() {
if (this.hasNextPage) { if (this.hasNextPage) {
this.pageIndex ++; this.pageIndex ++;
if(this.pageIndex > this.totalPages){ if(this.pageIndex > this.totalPages){
return false;
this.hasNextPage = false
} }
this.GetBookBasePages()
this.getBookRecommendList()
} }
}, },
selectPublic(index){ selectPublic(index){
this.resetData()
if (this.selectedIndex === index) { if (this.selectedIndex === index) {
this.selectedIndex = null;
this.selectedIndex = null
this.query.publish = null
} else { } else {
this.selectedIndex = index; this.selectedIndex = index;
this.query.publish = this.publish[index].publish
} }
this.addMoreData()
}, },
selectDate(index){ selectDate(index){
this.resetData()
if (this.selectedDateIndex === index) { if (this.selectedDateIndex === index) {
this.selectedDateIndex = null; this.selectedDateIndex = null;
this.query.createdDate = null
} else { } else {
this.selectedDateIndex = index; this.selectedDateIndex = index;
this.query.createdDate = this.publishDate[index]
} }
this.addMoreData()
}, },
selectKeyWord(index){ selectKeyWord(index){
this.addMoreData()
if (this.keyWordIndex === index) { if (this.keyWordIndex === index) {
this.keyWordIndex = null; this.keyWordIndex = null;
} else { } else {

2
selfServiceMachine/src/views/onlineBookSelection.vue
View File

@ -8,11 +8,9 @@
</template> </template>
<script> <script>
// import { bookListCrud } from './mixins/booklist.js'
export default { export default {
name: 'OnlineBookSelection', name: 'OnlineBookSelection',
components: {}, components: {},
// mixins: [bookListCrud],
data() { data() {
return { return {
} }

Write Preview
Loading…
Cancel
Save