首页-新书推荐

.env.development

@@ -3,17 +3,12 @@ ENV = 'development'
 # 接口地址
 
 #内网服务地址
-VUE_APP_BASE_API  = 'http://192.168.99.107:7070'
-VUE_APP_WS_API = 'ws://192.168.99.107:7071'
-VUE_APP_CAMERA_API = '192.168.99.107'
-
-# 刘力-本地服地址
-#VUE_APP_BASE_API  = 'http://192.168.99.65:7070'
-#VUE_APP_WS_API = 'ws://192.168.99.65:7071'
+#VUE_APP_BASE_API  = 'http://120.76.47.59:8080'
+#VUE_APP_WS_API = 'ws://120.76.47.59:8080'
 
 # 许镇-本地服地址
-#VUE_APP_BASE_API  = 'http://192.168.99.84:7070'
-#VUE_APP_WS_API = 'ws://192.168.99.84:7070'
+VUE_APP_BASE_API  = 'http://192.168.99.84:8080'
+VUE_APP_WS_API = 'ws://192.168.99.84:8080'
 
 # 是否启用 babel-plugin-dynamic-import-node插件
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/api/bookshelf.js

@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 数字资源
+export function initNumberResoures(params) {
+  return request({
+    url: '/dxhtsg/initNumberResoures',
+    method: 'get',
+    params: params
+  })
+}
+
+// 新书推荐
+export function FetchNewBookRecommend(params) {
+  return request({
+    url: '/dxhtsg/newBookRecommend',
+    method: 'get',
+    params: params
+  })
+}
+
+// 通过isbn获取图书封面
+export function FetchCoverByISBN(params) {
+  return request({
+    url: '/dxhtsg/getCoverByISBN',
+    method: 'get',
+    params: params,
+    responseType: 'blob'
+  })
+}
+
+export default {
+  FetchNewBookRecommend,
+  FetchCoverByISBN,
+  initNumberResoures
+}

src/assets/styles/index.scss

@@ -205,17 +205,23 @@
 
 .list-small{
   display: flex;
-  justify-content: space-between;
   justify-items: center;
+  margin-left: -40px;
   .list-item{
     width: 200px;
     border: none;
-    img{
-      display: block;
+    margin-left: 40px;
+    .book-img{
+      display: flex;
+      align-items: center;
       width: 100%;
       height: 240px;
       margin-bottom: 10px;
     }
+    img{
+      display: block;
+      width: 100%;
+    }
     .book-title{
       margin-bottom: 0;
     }

src/main.js

@@ -18,6 +18,9 @@ import './assets/fonts/fonts.css'
 import axios from 'axios'
 Vue.prototype.$axios = axios
 
+// 馆代码 1201为东西湖馆代码 / 本地测试用FTZN
+Vue.prototype.libcode = '1201'
+
 // 引入echart
 import echarts from 'echarts'
 Vue.prototype.$echarts = echarts

src/utils/request.js

@@ -29,14 +29,20 @@ service.interceptors.request.use(
 // response 拦截器
 service.interceptors.response.use(
   response => {
-    const errorMsg = response.data.message
-    if (response.data.code === 200) {
+    const errorMsg = response.data.errMsg
+    if (response.status === 200) {
+      // console.log(response.data.data)
+      if (response.data instanceof Blob) {
+        return response.data
+      } else {
         return response.data.data
+      }
     } else {
       Message.error({
         message: errorMsg,
         duration: 5000
       })
+      Promise.reject()
     }
   },
   error => {

src/views/data.json

@@ -1,53 +1,53 @@
 {
   "bookList":[
     {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定1",
+      "cover":"https://qiniu.aiyxlib.com/bg.png",
+      "nbName": "大个子狗与小个子猫",
+      "nbAuthor": "高小定1",
       "ranking": 1,
       "num": 2000
     },
     {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定2",
+      "cover":"https://qiniu.aiyxlib.com/bg.png",
+      "nbName": "大个子狗与小个子猫",
+      "nbAuthor": "高小定2",
       "ranking": 2,
       "num": 1200
     },
     {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定3",
+      "cover":"https://qiniu.aiyxlib.com/bg.png",
+      "nbName": "大个子狗与小个子猫",
+      "nbAuthor": "高小定3",
       "ranking": 3,
       "num": 1100
     }
   ],
   "newList":[
     {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定1",
+      "cover":"https://qiniu.aiyxlib.com/bg.png",
+      "nbName": "大个子狗与小个子猫",
+      "nbAuthor": "高小定1",
       "ranking": 1,
       "num": 2000
     },
     {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定2",
+      "cover":"https://qiniu.aiyxlib.com/bg.png",
+      "nbName": "大个子狗与小个子猫",
+      "nbAuthor": "高小定2",
       "ranking": 2,
       "num": 1200
     },
     {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定3",
+      "cover":"https://qiniu.aiyxlib.com/bg.png",
+      "nbName": "大个子狗与小个子猫",
+      "nbAuthor": "高小定3",
       "ranking": 3,
       "num": 1100
     },
     {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定4",
+      "cover":"https://qiniu.aiyxlib.com/bg.png",
+      "nbName": "大个子狗与小个子猫",
+      "nbAuthor": "高小定4",
       "ranking": 4,
       "num": 1100
     }

src/views/index.vue

@@ -64,6 +64,7 @@
 <script>
 import data from './data'
 import BookListItem from '@/views/module/bookListItem.vue'
+import { FetchNewBookRecommend, FetchCoverByISBN } from '@/api/bookshelf'
 export default {
   name: 'Home',
   components: {
@@ -77,9 +78,10 @@ export default {
     }
   },
   created() {
+    this.getBookList()
     this.rackList = data.bookList.splice(0, 1)
     this.otherList = data.bookList.splice(-2)
-    this.newList = data.newList
+    // this.newList = data.newList
   },
   mounted() {
 
@@ -87,6 +89,27 @@ export default {
   methods: {
     toPath(path) {
       this.$router.push(path)
+    },
+    getBookList() {
+      FetchNewBookRecommend().then(res => {
+        let data = []
+        data = res
+        data.forEach(item => {
+          this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item)
+        })
+      }).catch(() => {
+        this.$message.error('接口错误')
+      })
+    },
+    getCoverByISBN(isbn, item) {
+      const params = {
+        isbn: isbn
+      }
+      FetchCoverByISBN(params).then((res) => {
+        item.cover = window.URL.createObjectURL(res)
+        this.newList.push(item)
+        // this.newList.slice(0, 4)
+      })
     }
   }
 }

src/views/module/bookListItem.vue

@@ -1,10 +1,12 @@
 <template>
   <div>
     <div v-for="item in listData" :key="item.ranking" class="list-item">
-      <img :src="item.img">
+      <div class="book-img">
+        <img :src="item.cover" :onerror="defaultImg">
+      </div>
       <div class="book-info">
-        <h4 :class="['book-title', {'title-item': !isOtherBook}]">{{ item.title }}</h4>
-        <p class="book-author">{{ item.author }}</p>
+        <h4 :class="['book-title', {'title-item': !isOtherBook}]">{{ item.nbName }}</h4>
+        <p class="book-author">{{ item.nbAuthor }}</p>
         <div v-if="!isNewBook" class="book-num">
           <svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-remen" />
@@ -41,6 +43,7 @@ export default {
   },
   data() {
     return {
+      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"'
     }
   },
   watch: {
@@ -52,7 +55,6 @@ export default {
     }
   },
   created() {
-    console.log(this.listData)
   },
   mounted() {
   },

vue.config.js

@@ -17,14 +17,14 @@ module.exports = {
       errors: true
     },
     proxy: {
-      '/api': {
+      '/dxhtsg/': {
         target: process.env.VUE_APP_BASE_API,
         changeOrigin: true,
         pathRewrite: {
-          '^/api': 'api'
+          '^/dxhtsg': 'dxhtsg'
         }
       },
-      '/auth': {
+      '/auth/': {
         target: process.env.VUE_APP_BASE_API,
         changeOrigin: true,
         pathRewrite: {