文章目錄

要點說明

三、首頁mock數據

首頁開發 | 「小慕讀書」官網

一、Banner組件

展示用戶信息、簽到、書架圖書和書架入口

組件名稱	屬性	參數	用途	默認值
Banner	props	img	banner圖片	(空)
		title	標題	(空)
		subTitle	副標題	(空)
	method	onClick	banner點擊事件	-

新建src\components\home\HomeBannner.vue：

<template>
  <div class="home-banner" @click="onClick">
    <div
      class="bg-img"
      :style="{backgroundImage: bgImage}"
    >
      <div class="title">{{title}}</div>
      <div class="sub-title">{{subTitle}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    subTitle: String,
    img: String
  },
  computed: {
    bgImage() {
      return 'url(' + this.img + ')'
    }
  },
  methods: {
    onClick() {
      this.$emit('onClick')
    }
  }
}
</script>

<style lang="scss" scoped>
  .home-banner {
    margin-top: 20px;
    padding: 0 20px;

    .bg-img {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 125px;
      border-radius: 10px;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .title {
        font-size: 18px;
        font-weight: 500;
        color: #FFF;
      }

      .sub-title {
        padding: 5px 15px;
        background: #4585FF;
        border: 1px solid #CCC;
        border-radius: 50px;
        margin-top: 10px;
        font-size: 14px;
        color: #FFF;
      }
    }
  }
</style>

要點：

在:style中少用字符串連接（其中的變量會報undefined），可將包含變量的字符串連接放到computed定義的方法返回值中：

<div
  class="bg-img"
  :style="{backgroundImage: bgImage}"
>

computed: {
  bgImage() {
    return 'url(' + this.img + ')'
  }
},

預覽效果：

測試背景圖片地址：http://www.youbaobao.xyz/book/res/bg.jpg

二、圖書推薦組件

適配多場景的圖書推薦組件

1.準備工作

組件名稱	屬性	參數	用途	默認值
HomeBook	props	title	標題欄	(空)
		data	圖書列表	[]
		btnText	按鈕文本	(空)
		row	行數	0
		col	列數	1
		mode	顯示模式，row - 按行顯示，col - 按列顯示，category - 分類顯示	row
		showTitle	是否顯示標題	true
		showBtn	是否顯示按鈕	true
		linearBg	是否顯示背景	false
	method	onMoreClick	點擊更多按鈕事件	-
	method	onBookClick	圖書點擊事件	-

2.const.js

新建src\utils\const.js，用來存放枚舉值

export const HOME_BOOK_MODE = {
  ROW: 'row',
  COL: 'col',
  CATEGORY: 'category'
}
// 分類英文名稱和中文的映射
export const CATEGORY = {
  computerscience: '計算機科學',
  socialsciences: '社會科學',
  economics: '經濟學',
  education: '教育學',
  engineering: '工程學',
  environment: '環境學',
  geography: '地理學',
  history: '歷史學',
  laws: '法學',
  lifesciences: '生命科學',
  literature: '文學',
  biomedicine: '生物醫學',
  businessandmanagement: '工商管理',
  earthsciences: '地球科學',
  materialsscience: '材料科學',
  mathematics: '數學',
  medicineandpublichealth: '公共衛生',
  philosophy: '哲學',
  physics: '物理',
  politicalscienceandinternationalrelations: '國際關係',
  psychology: '心理學',
  statistics: '統計學'
}

3.HomeBook.vue

新建：src\components\home\HomeBook.vue

<template>
  <div class="home-book">
    <div class="home-book-header">{{title}}</div>
    <div class="home-book-content">
      <div class="home-book-row" v-for="(item, index) in bookData" :key="index">
        <div
          class="home-book-col"
          v-for="(book, bookIndex) in item"
          :key="bookIndex"
          :style="{flex: '0 0 ' + (100/col) + '%'}"><!--控制每列水平平分-->
          <div class="book-wrapper"
               :style="{flexDirection: mode === HOME_BOOK_MODE.COL ? 'column' : 'row'}"
               @click="onBookClick"
               v-if="mode === HOME_BOOK_MODE.COL || mode === HOME_BOOK_MODE.ROW">
            <ImageView :src="book.cover"/>
            <div class="book-title-wrapper book-title-col" v-if="mode === HOME_BOOK_MODE.COL">
              <div class="book-title">{{book.title}}</div>
            </div>
            <div class="book-title-wrapper book-title-row" v-else>
              <div class="book-title">{{book.title}}</div>
              <div class="book-title-author-wrapper">
                <div class="book-title book-author">{{book.author}}</div>
                <div class="book-title book-author">{{book.categoryText}}</div>
              </div>
            </div>
          </div>
          <div class="category-wrapper" v-else>
            <div class="category-text">{{book.text}}</div>
            <div class="category-num">{{book.num}}本書</div>
            <div class="category-img-wrapper">
              <div class="category-img1">
                <ImageView :src="book.cover"></ImageView>
              </div>
              <div class="category-img2">
                <ImageView :src="book.cover2"></ImageView>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-book-footer" @click="onMoreClick">
      <van-button round custom-class="home-book-btn">
        {{btnText}}
      </van-button>
    </div>
  </div>
</template>

<script>
import {HOME_BOOK_MODE, CATEGORY} from '@/utils/const'
import ImageView from '../base/ImageView'

export default {
  components: {ImageView},
  mounted() {
    console.log(this.bookData)
  },
  props: {
    title: String,
    data: {
      type: Array,
      default: []
    },
    btnText: String,
    row: {
      type: Number,
      default: 0
    },
    col: {
      type: Number,
      default: 1
    },
    mode: {
      type: String,
      default: HOME_BOOK_MODE.ROW
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    showBtn: {
      type: Boolean,
      default: true
    },
    linearBg: {
      type: Boolean,
      default: false
    }
  },
  // 複用核心
  computed: {
    // 由於在渲染層中無法直接拿到枚舉數據，因此需要在計算屬性中做處理
    HOME_BOOK_MODE() {
      return HOME_BOOK_MODE
    },
    // 通過計算屬性來動態確定數組的數據結構：一維/二維數組,進行緩存，提高渲染效率
    bookData() {
      // 解構獲取
      const {data, row, col} = this
      if (data && data.length > 0) {
        data.forEach(book => {
          book.text = CATEGORY[book.categoryText.toLowerCase()]
        })
        const number = row * col
        // 數據截取
        const _bookData = data.slice(0, number)
        const _bookDataRow = []
        let _row = 0
        while (_row < row) { // 將數據截取爲對應格式的數組
          // 0 * 2 = 0, 0 * 2 +2 = 2
          // 1 * 2 = 0, 1 * 2 +2 = 4
          _bookDataRow.push(_bookData.slice(_row * col, _row * col + col))
          _row++
        }
        return _bookDataRow
      } else {
        return []
      }
    }
  },
  methods: {
    onMoreClick() {
      this.$emit('onMoreClick')
    },
    onBookClick() {
      this.$emit('onBookClick')
    }
  }
}
</script>

<style lang="scss" scoped>
  .home-book {
    .home-book-header {
      padding: 13px 0 0 20.5px;
    }

    .home-book-content {
      padding: 0 12px;
      margin-top: 10.5px;

      .home-book-row {
        display: flex;
        flex-flow: row nowrap; /*水平排列，且不換行*/
        margin-top: 12px;

        .home-book-col {
          padding: 0 8px;
          box-sizing: border-box;

          .book-wrapper {
            display: flex;

            .book-title-wrapper {
              &.book-title-col {
                .book-title {
                  font-size: 12px;
                  color: #212731;
                  line-height: 16.5px;
                  max-height: 33px;
                  font-weight: 500;
                  overflow: hidden;
                  word-break: break-word;
                }
              }

              &.book-title-row {
                flex: 0 0 50%;
                padding: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .book-title {
                  font-size: 14px;
                  color: #1F1F1F;
                  line-height: 18px;
                  max-height: 36px;
                  overflow: hidden;
                  word-break: break-word;
                }

                .book-author {
                  font-size: 12px;
                  color: #868686;
                  line-height: 14px;
                  max-height: 14px;
                }
              }
            }
          }

          .category-wrapper {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: #F8F9FB;
            border-radius: 10px;
            height: 96px;
            padding: 13px 0 14.5px 16px;
            box-sizing: border-box;

            .category-text {
              width: 150px;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #212832;
              font-size: 16px;
              line-height: 22.5px;
            }

            .category-num {
              color: #868686;
              font-size: 12px;
              line-height: 16.5px;
            }

            .category-img-wrapper {
              position: absolute;
              right: 0;
              bottom: 0;

              .category-img1 {
                position: absolute;
                right: 0;
                bottom: -5px;
                z-index: 100;
                width: 48px;
              }

              .category-img2 {
                position: absolute;
                right: 30px;
                bottom: -5px;
                z-index: 90;
                width: 36px;
              }
            }
          }
        }
      }
    }

    .home-book-footer {
      padding: 12px 20px 20px;
    }
  }
</style>
<style lang="scss">
  .category-img1 {
    .image {
      border-radius: 0 0 10px 0;
    }
  }

  .home-book-footer {
    .home-book-btn {
      width: 100%;
      font-size: 14px;
      color: #3696EF;
      border: 1px solid #EDEEEE;
    }
  }
</style>

要點說明

由於在渲染層中無法直接拿到枚舉數據，因此需要在計算屬性中做處理：

HOME_BOOK_MODE() {
  return HOME_BOOK_MODE
},

多層v-for嵌套需要index不同

<div v-for="(item, index) in bookData>
	<div v-for="(book, bookIndex) in item">
	....

控制每本書之間相對父容器水平平分

<div class="home-book-col" :style="{flex: '0 0 ' + (100/col) + '%'}">

需要兼容兩種佈局：
- 圖片與文字垂直（圖+title）
- 圖片與文字水平（圖+title+作者+出版社）
  (1) .book-wrapper 需要設置 display: flex;
  (2) flex-direction需要動態根據mode來決定：

<div class="book-wrapper"
  :style="{flexDirection: mode === HOME_BOOK_MODE.COL ? 'column' : 'row'}">

(3)兩種樣式各定義一個div，裏面具體的樣式需要靠v-if+v-else來動態選擇：

<div class="book-wrapper">
  <ImageView/>
  <div class="book-title-wrapper book-title-col" v-if="mode === HOME_BOOK_MODE.COL">
  ....
  </div>
  <div class="book-title-wrapper book-title-row" v-else>
  ....
  </div>
</div>

在修改組件庫中控件的樣式時，需要在全局狀態下，即放在不含 scoped 的style標籤下：

<style lang="scss">
  .home-book-footer {
    .home-book-btn {
      width: 100%;
    }
  }
</style>

同時這個組件要兼容圖書推薦和圖書分類兩個模塊，與上面類似，添加v-if規則：

<div class="book-wrapper" v-if="mode === HOME_BOOK_MODE.COL || mode === HOME_BOOK_MODE.ROW">
<div v-else></div>

由於mpvue在小程序中不支持過濾器，因此需要在計算屬性中加到data的處理之前：然後在渲染層中通過book.text來引用

if (data && data.length > 0) {
  data.forEach(book => {
    book.text = CATEGORY[book.categoryText.toLowerCase()]
  })
  ....

4.在index.vue中調用

<div :style="{marginTop: '23px'}">
   <HomeBook
     title="爲你推薦"
     :row="1"
     :col="3"
     :data="data"
     mode="col"
     btn-text="換一批"
     @onMoreClick="onBookMoreClick"
     @onBookClick="onHomeBookClick"/>   
   <HomeBook
     title="爲你推薦"
     :row="2"
     :col="2"
     :data="data"
     mode="row"
     btn-text="換一批"
     @onMoreClick="onBookMoreClick"
     @onBookClick="onHomeBookClick"/>
  <HomeBook
    title="圖書分類"
    :row="2"
    :col="2"
    :data="category"
    mode="category"
    btn-text="更多"
    @onMoreClick="onBookMoreClick"
    @onBookClick="onHomeBookClick"/>
</div>

5.實現效果

三、首頁mock數據

1.截取格式化版

	[
        {
          'id': 34,
          'fileName': '2018_Book_GeographiesOfTheUniversity',
          'cover': 'https://www.youbaobao.xyz/book/res/img/Geography/978-3-319-75593-9_CoverFigure.jpg',
          'title': 'Geographies of the University',
          'author': 'Peter Meusburger',
          'publisher': 'Springer International Publishing',
          'bookId': '2018_Book_GeographiesOfTheUniversity',
          'category': 7,
          'categoryText': 'Geography',
          'language': 'en',
          'rootFile': 'OEBPS/package.opf'
        },
        {
          'id': 59,
          'fileName': '2018_Book_DrinkingInVictorianAndEdwardia',
          'cover': 'https://www.youbaobao.xyz/book/res/img/History/978-3-319-92964-4_CoverFigure.jpg',
          'title': 'Drinking in Victorian and Edwardian Britain',
          'author': 'Thora Hands',
          'publisher': 'Springer International Publishing',
          'bookId': '2018_Book_DrinkingInVictorianAndEdwardia',
          'category': 8,
          'categoryText': 'History',
          'language': 'en',
          'rootFile': 'OEBPS/package.opf'
        },
        {
          'id': 60,
          'fileName': '2018_Book_HarnessingThePowerOfTheCrimina',
          'cover': 'https://www.youbaobao.xyz/book/res/img/History/978-3-319-77908-9_CoverFigure.jpg',
          'title': 'Harnessing the Power of the Criminal Corpse',
          'author': 'Sarah Tarlow',
          'publisher': 'Springer International Publishing',
          'bookId': '2018_Book_HarnessingThePowerOfTheCrimina',
          'category': 8,
          'categoryText': 'History',
          'language': 'en',
          'rootFile': 'OEBPS/package.opf'
        },
        {
          'id': 75,
          'fileName': '2018_Book_TheEuropeanBloodAndMarrowTrans',
          'cover': 'https://www.youbaobao.xyz/book/res/img/MedicineAndPublicHealth/978-3-319-50026-3_CoverFigure.jpg',
          'title': 'The European Blood and Marrow Transplantation Textbook for Nurses',
          'author': 'Michelle Kenyon',
          'publisher': 'Springer International Publishing',
          'bookId': '2018_Book_TheEuropeanBloodAndMarrowTrans',
          'category': 17,
          'categoryText': 'MedicineAndPublicHealth',
          'language': 'en',
          'rootFile': 'OEBPS/package.opf'
        }
      ]

[
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Biomedicine/978-3-319-25474-6_CoverFigure.jpg',
                'category':12,
                'categoryText':'Biomedicine',
                'num':14,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Biomedicine/978-3-319-72790-5_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/BusinessandManagement/978-3-319-33515-5_CoverFigure.jpg',
                'category':13,
                'categoryText':'BusinessandManagement',
                'num':16,
                'cover2':'https://www.youbaobao.xyz/book/res/img/BusinessandManagement/978-3-319-95261-1_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/ComputerScience/978-3-319-90415-3_CoverFigure.jpg',
                'category':1,
                'categoryText':'ComputerScience',
                'num':56,
                'cover2':'https://www.youbaobao.xyz/book/res/img/ComputerScience/978-3-319-96142-2_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/EarthSciences/978-981-10-3713-9_CoverFigure.jpg',
                'category':14,
                'categoryText':'EarthSciences',
                'num':16,
                'cover2':'https://www.youbaobao.xyz/book/res/img/EarthSciences/978-3-319-65633-5_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Economics/978-3-319-69772-7_CoverFigure.jpg',
                'category':3,
                'categoryText':'Economics',
                'num':30,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Economics/978-3-319-91400-8_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Education/978-3-319-39450-3_CoverFigure.jpg',
                'category':4,
                'categoryText':'Education',
                'num':60,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Education/978-3-319-52980-6_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Engineering/978-3-319-91707-8_CoverFigure.jpg',
                'category':5,
                'categoryText':'Engineering',
                'num':23,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Engineering/978-3-319-64816-3_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Environment/978-3-319-29671-5_CoverFigure.jpg',
                'category':6,
                'categoryText':'Environment',
                'num':42,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Environment/978-4-431-54895-9_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Geography/978-3-319-75593-9_CoverFigure.jpg',
                'category':7,
                'categoryText':'Geography',
                'num':7,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Geography/978-3-319-92813-5_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/History/978-3-319-64337-3_CoverFigure.jpg',
                'category':8,
                'categoryText':'History',
                'num':18,
                'cover2':'https://www.youbaobao.xyz/book/res/img/History/978-3-319-92964-4_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Laws/978-3-319-71087-7_CoverFigure.jpg',
                'category':9,
                'categoryText':'Laws',
                'num':13,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Laws/978-981-13-1232-8_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/LifeSciences/978-3-319-68152-8_CoverFigure.jpg',
                'category':10,
                'categoryText':'LifeSciences',
                'num':24,
                'cover2':'https://www.youbaobao.xyz/book/res/img/LifeSciences/978-3-319-69539-6_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Literature/2010_Book_CyborgsInLatinAmerica.jpeg',
                'category':11,
                'categoryText':'Literature',
                'num':6,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Literature/2010_Book_HistoryAndCulturalMemoryInNeo-.jpeg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/MaterialsScience/978-981-10-7617-6_CoverFigure.jpg',
                'category':15,
                'categoryText':'MaterialsScience',
                'num':2,
                'cover2':'https://www.youbaobao.xyz/book/res/img/MaterialsScience/2018_Book_ProceedingsOfTheScientific-Pra.jpeg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Mathematics/978-3-319-29439-1_CoverFigure.jpg',
                'category':16,
                'categoryText':'Mathematics',
                'num':9,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Mathematics/2015_Book_InnovationsInQuantitativeRiskM.jpeg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/MedicineAndPublicHealth/978-3-319-28624-2_CoverFigure.jpg',
                'category':17,
                'categoryText':'MedicineAndPublicHealth',
                'num':20,
                'cover2':'https://www.youbaobao.xyz/book/res/img/MedicineAndPublicHealth/978-3-319-75019-4_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Philosophy/978-3-319-26300-7_CoverFigure.jpg',
                'category':18,
                'categoryText':'Philosophy',
                'num':16,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Philosophy/978-3-319-94610-8_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Physics/978-3-319-42424-8_CoverFigure.jpg',
                'category':19,
                'categoryText':'Physics',
                'num':10,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Physics/978-3-662-57366-2_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/PoliticalScienceAndInternationalRelations/978-3-319-69929-5_CoverFigure.jpg',
                'category':20,
                'categoryText':'PoliticalScienceAndInternationalRelations',
                'num':26,
                'cover2':'https://www.youbaobao.xyz/book/res/img/PoliticalScienceAndInternationalRelations/978-981-10-7182-9_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Psychology/978-3-319-78160-0_CoverFigure.jpg',
                'category':21,
                'categoryText':'Psychology',
                'num':3,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Psychology/2015_Book_PromotingSocialDialogueInEurop.jpeg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/SocialSciences/978-3-319-72356-3_CoverFigure.jpg',
                'category':2,
                'categoryText':'SocialSciences',
                'num':51,
                'cover2':'https://www.youbaobao.xyz/book/res/img/SocialSciences/978-3-319-77991-1_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Statistics/2013_Book_ShipAndOffshoreStructureDesign.jpeg',
                'category':22,
                'categoryText':'Statistics',
                'num':1,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Statistics/2013_Book_ShipAndOffshoreStructureDesign.jpeg'
            }
        ]

2.完整版

{
    "error_code":0,
    "msg":"查詢成功",
    "data":{
        "hotSearch":{
            "num":22,
            "keyword":"Computer"
        },
        "shelf":[
            {
                "id":67,
                "fileName":"2018_Book_Nanoinformatics",
                "cover":"https://www.youbaobao.xyz/book/res/img/MaterialsScience/978-981-10-7617-6_CoverFigure.jpg",
                "title":"Nanoinformatics",
                "author":"Isao Tanaka",
                "publisher":"Springer Singapore",
                "bookId":"2018_Book_Nanoinformatics",
                "category":15,
                "categoryText":"MaterialsScience",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            },
            {
                "id":38,
                "fileName":"2018_Book_DesigningSustainableTechnologi",
                "cover":"https://www.youbaobao.xyz/book/res/img/Environment/978-3-319-66981-6_CoverFigure.jpg",
                "title":"Designing Sustainable Technologies, Products and Policies",
                "author":"Enrico Benetto",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_DesigningSustainableTechnologi",
                "category":6,
                "categoryText":"Environment",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            },
            {
                "id":12,
                "fileName":"2018_Book_RESTARTSustainableBusinessMode",
                "cover":"https://www.youbaobao.xyz/book/res/img/BusinessandManagement/978-3-319-91971-3_CoverFigure.jpg",
                "title":"RESTART Sustainable Business Model Innovation",
                "author":"Sveinung Jørgensen",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_RESTARTSustainableBusinessMode",
                "category":13,
                "categoryText":"BusinessandManagement",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            }
        ],
        "recommend":[
            {
                "id":225,
                "fileName":"2016_Book_MicrofinanceEUStructuralFundsA",
                "cover":"https://www.youbaobao.xyz/book/res/img/Economics/2016_Book_MicrofinanceEUStructuralFundsA.jpeg",
                "title":"Microfinance, EU Structural Funds and Capacity Building for Managing Authorities",
                "author":"Giovanni Nicola Pes",
                "publisher":"Palgrave Macmillan",
                "bookId":"2016_Book_MicrofinanceEUStructuralFundsA",
                "category":3,
                "categoryText":"Economics",
                "language":"en",
                "rootFile":"OEBPS/9781137536013.opf"
            },
            {
                "id":88,
                "fileName":"2018_Book_BetweenMobilityAndMigration",
                "cover":"https://www.youbaobao.xyz/book/res/img/SocialSciences/978-3-319-77991-1_CoverFigure.jpg",
                "title":"Between Mobility and Migration",
                "author":"Peter Scholten",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_BetweenMobilityAndMigration",
                "category":2,
                "categoryText":"SocialSciences",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            },
            {
                "id":24,
                "fileName":"2018_Book_SecurityInComputerAndInformati",
                "cover":"https://www.youbaobao.xyz/book/res/img/ComputerScience/978-3-319-95189-8_CoverFigure.jpg",
                "title":"Security in Computer and Information Sciences",
                "author":"Erol Gelenbe",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_SecurityInComputerAndInformati",
                "category":1,
                "categoryText":"ComputerScience",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            }
        ],
        "freeRead":[
            {
                "id":34,
                "fileName":"2018_Book_GeographiesOfTheUniversity",
                "cover":"https://www.youbaobao.xyz/book/res/img/Geography/978-3-319-75593-9_CoverFigure.jpg",
                "title":"Geographies of the University",
                "author":"Peter Meusburger",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_GeographiesOfTheUniversity",
                "category":7,
                "categoryText":"Geography",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            },
            {
                "id":59,
                "fileName":"2018_Book_DrinkingInVictorianAndEdwardia",
                "cover":"https://www.youbaobao.xyz/book/res/img/History/978-3-319-92964-4_CoverFigure.jpg",
                "title":"Drinking in Victorian and Edwardian Britain",
                "author":"Thora Hands",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_DrinkingInVictorianAndEdwardia",
                "category":8,
                "categoryText":"History",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            },
            {
                "id":60,
                "fileName":"2018_Book_HarnessingThePowerOfTheCrimina",
                "cover":"https://www.youbaobao.xyz/book/res/img/History/978-3-319-77908-9_CoverFigure.jpg",
                "title":"Harnessing the Power of the Criminal Corpse",
                "author":"Sarah Tarlow",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_HarnessingThePowerOfTheCrimina",
                "category":8,
                "categoryText":"History",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            },
            {
                "id":75,
                "fileName":"2018_Book_TheEuropeanBloodAndMarrowTrans",
                "cover":"https://www.youbaobao.xyz/book/res/img/MedicineAndPublicHealth/978-3-319-50026-3_CoverFigure.jpg",
                "title":"The European Blood and Marrow Transplantation Textbook for Nurses",
                "author":"Michelle Kenyon",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_TheEuropeanBloodAndMarrowTrans",
                "category":17,
                "categoryText":"MedicineAndPublicHealth",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            }
        ],
        "hotBook":[
            {
                "id":89,
                "fileName":"2018_Book_ContemporaryPerspectivesOnAgei",
                "cover":"https://www.youbaobao.xyz/book/res/img/SocialSciences/978-3-319-73820-8_CoverFigure.jpg",
                "title":"Contemporary Perspectives on Ageism",
                "author":"Liat Ayalon",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_ContemporaryPerspectivesOnAgei",
                "category":2,
                "categoryText":"SocialSciences",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            },
            {
                "id":218,
                "fileName":"2015_Book_PovertyReductionPoliciesAndPra",
                "cover":"https://www.youbaobao.xyz/book/res/img/Economics/2015_Book_PovertyReductionPoliciesAndPra.jpeg",
                "title":"Poverty Reduction Policies and Practices in Developing Asia",
                "author":"Almas Heshmati, Esfandiar Maasoumi and Guanghua Wan",
                "publisher":"Springer Singapore, Singapore",
                "bookId":"2015_Book_PovertyReductionPoliciesAndPra",
                "category":3,
                "categoryText":"Economics",
                "language":"en",
                "rootFile":"OEBPS/content.opf"
            },
            {
                "id":6,
                "fileName":"2018_Book_DronesAndTheCreativeIndustry",
                "cover":"https://www.youbaobao.xyz/book/res/img/BusinessandManagement/978-3-319-95261-1_CoverFigure.jpg",
                "title":"Drones and the Creative Industry",
                "author":"Virginia Santamarina-Campos",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_DronesAndTheCreativeIndustry",
                "category":13,
                "categoryText":"BusinessandManagement",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            },
            {
                "id":139,
                "fileName":"2018_Book_EvolutionMonitoringAndPredicti",
                "cover":"https://www.youbaobao.xyz/book/res/img/EarthSciences/2018_Book_EvolutionMonitoringAndPredicti.jpeg",
                "title":"Evolution, Monitoring and Predicting Models of Rockburst",
                "author":"Chunlai Wang",
                "publisher":"Springer Singapore, Singapore",
                "bookId":"2018_Book_EvolutionMonitoringAndPredicti",
                "category":14,
                "categoryText":"EarthSciences",
                "language":"en",
                "rootFile":"OEBPS/content.opf"
            }
        ],
        "category":[
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Biomedicine/978-3-319-25474-6_CoverFigure.jpg",
                "category":12,
                "categoryText":"Biomedicine",
                "num":14,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Biomedicine/978-3-319-72790-5_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/BusinessandManagement/978-3-319-33515-5_CoverFigure.jpg",
                "category":13,
                "categoryText":"BusinessandManagement",
                "num":16,
                "cover2":"https://www.youbaobao.xyz/book/res/img/BusinessandManagement/978-3-319-95261-1_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/ComputerScience/978-3-319-90415-3_CoverFigure.jpg",
                "category":1,
                "categoryText":"ComputerScience",
                "num":56,
                "cover2":"https://www.youbaobao.xyz/book/res/img/ComputerScience/978-3-319-96142-2_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/EarthSciences/978-981-10-3713-9_CoverFigure.jpg",
                "category":14,
                "categoryText":"EarthSciences",
                "num":16,
                "cover2":"https://www.youbaobao.xyz/book/res/img/EarthSciences/978-3-319-65633-5_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Economics/978-3-319-69772-7_CoverFigure.jpg",
                "category":3,
                "categoryText":"Economics",
                "num":30,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Economics/978-3-319-91400-8_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Education/978-3-319-39450-3_CoverFigure.jpg",
                "category":4,
                "categoryText":"Education",
                "num":60,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Education/978-3-319-52980-6_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Engineering/978-3-319-91707-8_CoverFigure.jpg",
                "category":5,
                "categoryText":"Engineering",
                "num":23,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Engineering/978-3-319-64816-3_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Environment/978-3-319-29671-5_CoverFigure.jpg",
                "category":6,
                "categoryText":"Environment",
                "num":42,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Environment/978-4-431-54895-9_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Geography/978-3-319-75593-9_CoverFigure.jpg",
                "category":7,
                "categoryText":"Geography",
                "num":7,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Geography/978-3-319-92813-5_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/History/978-3-319-64337-3_CoverFigure.jpg",
                "category":8,
                "categoryText":"History",
                "num":18,
                "cover2":"https://www.youbaobao.xyz/book/res/img/History/978-3-319-92964-4_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Laws/978-3-319-71087-7_CoverFigure.jpg",
                "category":9,
                "categoryText":"Laws",
                "num":13,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Laws/978-981-13-1232-8_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/LifeSciences/978-3-319-68152-8_CoverFigure.jpg",
                "category":10,
                "categoryText":"LifeSciences",
                "num":24,
                "cover2":"https://www.youbaobao.xyz/book/res/img/LifeSciences/978-3-319-69539-6_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Literature/2010_Book_CyborgsInLatinAmerica.jpeg",
                "category":11,
                "categoryText":"Literature",
                "num":6,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Literature/2010_Book_HistoryAndCulturalMemoryInNeo-.jpeg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/MaterialsScience/978-981-10-7617-6_CoverFigure.jpg",
                "category":15,
                "categoryText":"MaterialsScience",
                "num":2,
                "cover2":"https://www.youbaobao.xyz/book/res/img/MaterialsScience/2018_Book_ProceedingsOfTheScientific-Pra.jpeg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Mathematics/978-3-319-29439-1_CoverFigure.jpg",
                "category":16,
                "categoryText":"Mathematics",
                "num":9,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Mathematics/2015_Book_InnovationsInQuantitativeRiskM.jpeg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/MedicineAndPublicHealth/978-3-319-28624-2_CoverFigure.jpg",
                "category":17,
                "categoryText":"MedicineAndPublicHealth",
                "num":20,
                "cover2":"https://www.youbaobao.xyz/book/res/img/MedicineAndPublicHealth/978-3-319-75019-4_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Philosophy/978-3-319-26300-7_CoverFigure.jpg",
                "category":18,
                "categoryText":"Philosophy",
                "num":16,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Philosophy/978-3-319-94610-8_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Physics/978-3-319-42424-8_CoverFigure.jpg",
                "category":19,
                "categoryText":"Physics",
                "num":10,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Physics/978-3-662-57366-2_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/PoliticalScienceAndInternationalRelations/978-3-319-69929-5_CoverFigure.jpg",
                "category":20,
                "categoryText":"PoliticalScienceAndInternationalRelations",
                "num":26,
                "cover2":"https://www.youbaobao.xyz/book/res/img/PoliticalScienceAndInternationalRelations/978-981-10-7182-9_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Psychology/978-3-319-78160-0_CoverFigure.jpg",
                "category":21,
                "categoryText":"Psychology",
                "num":3,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Psychology/2015_Book_PromotingSocialDialogueInEurop.jpeg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/SocialSciences/978-3-319-72356-3_CoverFigure.jpg",
                "category":2,
                "categoryText":"SocialSciences",
                "num":51,
                "cover2":"https://www.youbaobao.xyz/book/res/img/SocialSciences/978-3-319-77991-1_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Statistics/2013_Book_ShipAndOffshoreStructureDesign.jpeg",
                "category":22,
                "categoryText":"Statistics",
                "num":1,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Statistics/2013_Book_ShipAndOffshoreStructureDesign.jpeg"
            }
        ],
        "banner":{
            "img":"https://www.youbaobao.xyz/book/res/bg.jpg",
            "title":"mpvue2.0多端小程序課程重磅上線",
            "subTitle":"馬上學習",
            "url":"https://www.youbaobao.xyz/book/#/book-store/shelf"
        },
        "shelfCount":0
    }
}

【筆記】實戰mpvue2.0多端小程序框架——首頁開發（中）

文章目錄

一、Banner組件

二、圖書推薦組件

1.準備工作

2.const.js

3.HomeBook.vue

要點說明

4.在index.vue中調用

5.實現效果

三、首頁mock數據

1.截取格式化版

2.完整版

【總結】Markdown使用筆記

【筆記】實戰mpvue2.0多端小程序框架-真香！！

【筆記】JavaScript版數據結構與算法——基礎算法之“排序類”（41. 缺失的第一個正數）

【筆記】JavaScript版數據結構與算法——基礎算法之“排序類”（215. 數組中的第K個最大元素）

【筆記】JavaScript版數據結構與算法——基礎算法之“排序類”(922. 按奇偶排序數組 II)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結