mpvue實現圖書小程序

時間 2019-11-16

標籤 mpvue 實現圖書程序简体版

原文原文鏈接

爲何選擇mpvuejavascript

在比較了原生開發小程序和wepy以及mpvue以後，因爲mpvue是一個基於Vue的框架，裏面可使用Vue的各類語法，因爲本身也學習了Vue因此學習成本也不高，能夠說是無縫對接了。php

整體概述html

小程序使用的是先後分離的開發模式，後端構造接口，而後前端請求接口拿到數據後進行頁面的渲染。後臺採用的是騰訊雲官方提供的例子。採用的是Node.js和Mysql。下載以後須要作一些簡單的配置，網上也有不少教程。這裏後端大部分代碼不須要本身寫，這須要寫一些本身須要用到的接口。小程序前端封裝了須要常常用到的函數，在utils目錄下，因此在代碼中若是看到utils就表示使用的是utils中的方法。前端

目錄結構vue

小程序的主要代碼都寫在src目錄下。

補充一點java

因爲如今豆瓣的圖書API已經不能用了，可是在網上看到了一片文章，我就是使用的這種方法來獲取圖書的詳情，可是獲取的圖書資料不是和完整，但也仍是湊合着用吧，後端代碼實現見：server/controllers/addbook.js。git

下面給你們講一講主要頁面的代碼github

1、我的中心頁面

核心代碼；這裏採用了小程序提供的wafer2-client-sdk庫，在使用以前咱們要先引入import qcloud from "wafer2-client-sdk"sql

async login() {
    let user = wx.getStorageSync("userinfo");
    if (!user) {
    wx.showLoading({
      title: "登陸中",
      mask: true
    })
    qcloud.setLoginUrl(config.loginUrl);
    qcloud.login({
      success: (res) => {
        wx.hideLoading()
        console.log("success:", res);
        wx.setStorageSync("userinfo", res);
        this.userinfo = res
        utils.showSuccess("登陸成功");
      },
      fail: function(err) {
        console.log("fail:", err);
      }
    });
}
}
複製代碼

在登陸成功以後咱們把數據存儲到本地，下次進入小程序的時候先判斷本地是否有數據，若是有就直接獲取，數據庫

onShow() {
    let userinfo = wx.getStorageSync("userinfo")
    if (userinfo) {
      this.userinfo = userinfo
    }
  }
複製代碼

登陸成功以後會有添加圖書的按鈕

scanBook() {
      wx.scanCode({
        success: res => {
          console.log(res)
          if(res.result) {
            this.addBook(res.result)      
          }
        }
      });
    },
    async addBook(isbn) { // 掃碼成功後添加書籍
      const res = await utils.post('/weapp/addbook', {
        isbn,
        openid: this.userinfo.openId
      })
      console.log(res)
      if (res.code === 0) {
        utils.showModal('提示',`添加成功${res.title}`)
      } else {
        utils.showModal('提示', `添加失敗${res.msg}`)
      }
    },
複製代碼

這裏調用了微信小程序自帶的API，獲得掃描的結果以後向後臺發送數據（server.controllers/addbooks.js），後臺獲得ISBN編碼後查詢結果，而後存入數據庫。存入數據庫的信息包括isbn, openid, title, image, alt, publisher, summary, price, rate, tags, author。

2、圖書列表頁面

獲取圖書列表代碼

async getList(init) { // 獲取圖書列表
      if (init) { // init表明初始化數據的時候
        this.page = 0
        this.more = true
      }
      wx.showNavigationBarLoading()
      let res = await utils.get('/weapp/booklist', {page: this.page})
      if (res.list.length < 10 && this.page > 0) {
        this.more = false

      }
      if (init) {
        this.books = res.list
        wx.stopPullDownRefresh()
      } else {
        this.books = this.books.concat(res.list)
      }
      wx.hideNavigationBarLoading()
    },
    
複製代碼

這裏採用的是分頁查詢（後端：server/controllers/booklist），每次只加載十條數據而後當觸發onReachBottom()事件後就把當前的數據拼接上獲取到的數據。這裏在獲取圖書列表的時候會使用聯表查詢：根據圖書信息中的openid去查找對應的用戶信息。

.select('books.*', 'cSessionInfo.user_info')
.join('cSessionInfo', 'books.openid', 'cSessionInfo.open_id')
複製代碼

這裏的評分是一個單獨的組件src/components/Rate.vue，

<div class='rate'>
    <span>☆☆☆☆☆</span>
    <div class="hollow" :style='style'>
      ★★★★★
    </div>
  </div>
複製代碼

設置hollow爲絕對定位，而後根據圖書的評分設置它的寬度。

3、圖書詳情頁面

在進入圖書詳情頁的時候會把當前圖書的 id作爲參數傳給下一個頁面，在進入下一個頁面的時候能夠經過 this.$root.$mp.query.id獲取到。

在進入圖書詳情頁以後先經過this.$root.$mp.query獲取當前圖書的id，而後在數據庫中根據id查找圖書的詳情信息。而後根據id在數據庫評論表中查找評論。這裏在查找的時候也會使用聯表查詢獲取圖書添加者的信息（根據圖書信息的openid獲取用戶信息）。

一本書一位用戶只能評價一次，若是用戶評價了就不能再次評價，相應的評論框也會被隱藏。

判斷用戶是否能夠評價

computed: {
    showAdd() { // 是否展現發表評論按鈕
      if (!this.userinfo.openId) { // 未登陸
        return false
      }
      if (this.comments.some(v => v.openid = this.userinfo.openId)) { // 已經評論了
        return false
      }
      return true
    }
  },
複製代碼

若是用戶尚未評價則顯示評價框：

獲取手機型號

getPhone(e) {
  if (e.target.value) {
    let systemInfo = wx.getSystemInfoSync();
    this.phone = systemInfo.model;
  } else {
    this.phone = "";
  }
},
複製代碼

獲取地址位置

getGeo(e) {
  if (e.target.value) {
    wx.getLocation({
      success: geo => {
        console.log(geo)
        wx.request({
          url: config.baiduURL,
          data: {
            ak: config.baiduAK,
            location: `${geo.latitude},${geo.longitude}`,
            output: "json"
          },
          success: res => {
            if (res.data.status === 0) {
              this.location = res.data.result.addressComponent.city;
            } else {
              this.location = "外太空";
            }
          }
        });
      }
    });
  } else {
    this.location = "";
  }
},
複製代碼