書到用時(shí)方恨少

這個(gè)階段涉及到了vuex,本來想著不慌美莫，用起來，使用的過程中問題還真不少
本篇涉及到的內(nèi)容：
---postman 測(cè)試數(shù)據(jù)
---封裝 ajax 請(qǐng)求函數(shù)
---封裝接口請(qǐng)求函數(shù)
---使用 vuex 管理狀態(tài)
---獲取首頁相關(guān)數(shù)據(jù)

0. 其它

vue實(shí)戰(zhàn)（1）：準(zhǔn)備與資料整理
vue實(shí)戰(zhàn)（2）：初始化項(xiàng)目窝撵、搭建底部導(dǎo)航路由
vue實(shí)戰(zhàn)（3）：底部導(dǎo)航顯示忿族、搭建各模塊靜態(tài)頁面蝌矛、添加登錄頁頁面與路由
vue實(shí)戰(zhàn)（4）：postman測(cè)試數(shù)據(jù)、封裝ajax隆豹、使用vuex管理狀態(tài)
vue實(shí)戰(zhàn)（5）：總結(jié)一
vue實(shí)戰(zhàn)（6）：異步顯示數(shù)據(jù)璃赡、開發(fā)Star組件
vue實(shí)戰(zhàn)（7）：完整開發(fā)登錄頁面（一）
vue實(shí)戰(zhàn)（8）：完整開發(fā)登錄頁面（二）
vue實(shí)戰(zhàn)（9）：總結(jié)二
vue實(shí)戰(zhàn)（10）：開發(fā)店鋪詳情（一）
vue實(shí)戰(zhàn)（11）：開發(fā)店鋪詳情（二）
vue實(shí)戰(zhàn)（12）：完結(jié) + 附學(xué)習(xí)視頻

1. 安裝 MongoDB 献雅，啟動(dòng)后臺(tái)

• 這個(gè)小練習(xí)項(xiàng)目是一個(gè)前后臺(tái)分離的項(xiàng)目挺身，后臺(tái)應(yīng)用負(fù)責(zé)處理前臺(tái)應(yīng)用提交的請(qǐng)求, 并給前臺(tái)應(yīng)用返回 json 數(shù)據(jù)，前臺(tái)應(yīng)用負(fù)責(zé)展現(xiàn)數(shù)據(jù), 與用戶交互, 與后臺(tái)應(yīng)用交互墙贱。
  • 后臺(tái)應(yīng)用是用nodejs寫的惨撇，數(shù)據(jù)庫需要用到mongodb
  • 暫時(shí)不會(huì)nodejs和mongodb，不過沒關(guān)系魁衙，照著文檔先用起來剖淀，問題不大。
  • MongoDB 官方網(wǎng)站鏈接 和 教程與安裝鏈接

1.1 到MongoDB官網(wǎng)茅撞，下載適合的版本米丘，安裝好
1.2 到后臺(tái)項(xiàng)目文件夾下糊啡，cmd，用npm start啟動(dòng)數(shù)據(jù)庫

啟動(dòng)數(shù)據(jù)庫

2. 使用 postman 測(cè)試數(shù)據(jù)

• 數(shù)據(jù)庫打開以后堕扶，進(jìn)一步去測(cè)試是否打開成功稍算，是否能取到數(shù)據(jù)役拴，這里就要用到接口測(cè)試工具 postman
• postman 可以獲取數(shù)據(jù)河闰、可以檢測(cè)API文檔中的接口是否有問題
• 項(xiàng)目重點(diǎn)也不在這里，可以去 postman 官方網(wǎng)站鏈接 下載客戶端 和 很厲害的教程鏈接
• 查看API接口文檔

1.1 根據(jù)經(jīng)緯度獲取位置詳情(例子)
    --請(qǐng)求URL：http://localhost:3000/position/:geohash
    --示例：http://localhost:3000/position/40.10038,116.36867
    --請(qǐng)求方式：GET
    --參數(shù)類型：param
    |參數(shù)       |是否必選   |類型       |說明
    |geohash    |Y         |string    |經(jīng)緯度
    --返回示例：
    {
      "code": 0,
      "data": {
        "address": "北京市昌平區(qū)337省道",
        "city": "北京市",
        "geohash": "40.10038,116.36867",
        "latitude": "40.10038",
        "longitude": "116.36867",
        "name": "昌平區(qū)北七家宏傅苫郏科技園(337省道北)"
        }
     }
1.2 接口輸入postman中弃酌，查看結(jié)果
1.3 輸出與文檔相同，獲取數(shù)據(jù)成功

數(shù)據(jù)獲取成功

3. 封裝 ajax 請(qǐng)求函數(shù)

• 這里的異步交互使用的是axios,需要在項(xiàng)目中添加依賴 npm install --save axios
• 這里的封裝非常重要门驾，雖然代碼不是很難懂，但是感覺是 知其然而不知其所以然 楣责，這也是貫徹了模塊化開發(fā)的思想秆麸，還是先用起來，會(huì)熟能生巧的屯烦。
  • 在 api 文件夾下創(chuàng)建 ajax.js 房铭，引入 axios：import axios from 'axios'

import axios from 'axios'
/*
 ajax請(qǐng)求模塊
 封裝ajax請(qǐng)求函數(shù)
 */
export default function ajax (url = '', data = {}, type = 'GET') { // type 默認(rèn)傳 get
  return new Promise(function (resolve, reject) { // 返回 new promise缸匪，后面會(huì)用到 async 和 await
    let promise
    if (type === 'GET') { // 判斷 get
      let dataStr = '' // 數(shù)據(jù)拼接字符串
      Object.keys(data).forEach(key => {
        dataStr += key + '=' + data[key] + '&'
      })
      if (dataStr !== '') { // 拼接成 url 地址
        dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
        url = url + '?' + dataStr
      }
      // 發(fā)送get請(qǐng)求
      promise = axios.get(url)
    } else {
      // 發(fā)送post請(qǐng)求
      promise = axios.post(url)
    }
    promise.then(response => {
      resolve(response.data)
    })
      .catch(error => {
        reject(error)
      })
  })
}

4. 封裝接口請(qǐng)求函數(shù)

• ajax 請(qǐng)求封裝完成之后凌蔬，就是開始封裝各個(gè)接口請(qǐng)求函數(shù)
  • 在 api 文件夾下創(chuàng)建 index.js ，引入 ajax：import ajax from './ajax'
• 這個(gè)就好理解的多懈词，根據(jù)項(xiàng)目需求的不同辩诞，需要的接口會(huì)非常的多躁倒，這樣做也是模塊化的體現(xiàn)，便于管理和維護(hù)

/* 包含多個(gè)模塊ajax函數(shù)
* 封裝接口請(qǐng)求函數(shù)(一部分例子)
* */
import ajax from './ajax'
const BASE_URL = '/api'  // 關(guān)于跨域

// 1褐桌、根據(jù)經(jīng)緯度獲取位置詳情
// 此處直接這么寫象迎，當(dāng)請(qǐng)求時(shí)會(huì)出錯(cuò)，因?yàn)楹笈_(tái)代碼的端口是4000（或域名）啦撮，與本地的請(qǐng)求端口不一致赃春，自然無法實(shí)現(xiàn)跨域ajax請(qǐng)求，需要代理配置
// export const reqAddress = (geohash) => ajax(`/position/${geohash}`) 
export const reqAddress = (geohash) => ajax(`${BASE_URL}/position/${geohash}`)
// 2锥涕、獲取食品分類列表
export const reqCategorys = () => ajax(`${BASE_URL}/index_category`)
// 3狭吼、根據(jù)經(jīng)緯度獲取商鋪列表
export const reqShops = (latitude, longitude) => ajax(`${BASE_URL}/shops`, { latitude, longitude })

• 此處涉及到跨域的問題刁笙，需要進(jìn)行一些配置
  • 因?yàn)楸卷?xiàng)目使用vue-cli3腳手架搭建，沒有現(xiàn)成的配置文件座每，現(xiàn)在需要在根目錄下創(chuàng)建 vue.config.js尺栖，查了一些資料烦租，有點(diǎn)雜而且比較落后，其中一些參數(shù)已經(jīng)被棄用了挫以，配置了一個(gè)簡潔的掐松，其它配置可以看 官方文檔

// vue.config.js
module.exports = {
  // 修改的配置
  publicPath: '/',
  devServer: {
    proxy: {
      '/api': { // 匹配所有以 '/api'開頭的請(qǐng)求路徑
        target: 'http://localhost:4000', // 代理目標(biāo)的基礎(chǔ)路徑
        changeOrigin: true, // 支持跨域
        // ws: true,
        pathRewrite: { // 重寫路徑: 去掉路徑中開頭的'/api'
          '^/api': ''
        }
      }
    }
  }
}

• 配置完成粪小，測(cè)試一下是否能夠取到數(shù)據(jù)探膊，可以在 App.vue 中引入 import { reqCategorys } from './api'，添加mounted方法

async mounted () {  // 例子
    const result = await reqCategorys()
    console.log(result) // 打印輸出
  }

數(shù)據(jù)獲取成功

5. 創(chuàng)建 vuex 整體結(jié)構(gòu)流济，管理狀態(tài)

關(guān)于vuex的學(xué)習(xí)绳瘟，起初不是怎么會(huì)用，看了官方文檔也沒怎么懂斤彼，看了幾篇博客知道了一些使用方法姨丈，視頻中對(duì)這部分的構(gòu)建還是去年的形式蟋恬，我照著現(xiàn)在的形式搭建了一下趁冈，因?yàn)橹恢湟徊恢涠保@也造成一些問題，好在目前遇到的問題都解決了乔遮，問題不大取刃，后面還需要繼續(xù)深入學(xué)習(xí)璧疗。

modules文件夾里面放模塊崩侠，更便于管理與維護(hù)

• 首先是下載依賴，并且在main.js中配置好 import store from './store/store'改抡，并且在store.js中引用import Vuex from 'vuex'和使用Vue.use(Vuex)
  • 如果在創(chuàng)建項(xiàng)目時(shí)已經(jīng)配置好 vuex 系瓢，則無需在main.js中配置八拱，已經(jīng)是配置好的了

// vuex最核心的管理對(duì)象store
import Vue from 'vue'
import Vuex from 'vuex'

// 引用模塊
import msite from './modules/msite' 
import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    msite // modules文件夾中的msite模塊
  },
  getters
})

• 模塊的編寫（例子）

// 內(nèi)容比較多涯塔，這邊可以把相似或者功能相同的組成一個(gè)模塊匕荸，更方便維護(hù)
// 模塊文件在store.js中引用

import { // 引用封裝好的接口
  reqAddress,
  reqCategorys,
  reqShops
} from '../../api/index'

// 基礎(chǔ)數(shù)據(jù)狀態(tài),現(xiàn)在在任何文件都可以引用枷邪，引用時(shí) this.$store.xxx 即可
const state = {
  latitude: 40.10038, // 緯度
  longitude: 116.36867, // 經(jīng)度
  address: {}, // 地址信息對(duì)象
  categorys: [], // 分類數(shù)組
  shops: [] // 商家數(shù)組
}

// 直接更改state的多個(gè)方法的對(duì)象东揣，現(xiàn)在在任何文件都可以引用，引用時(shí) this.$store.commit（'xxxx'）即可
const mutations = { 
  RECEIVE_ADDRESS: (state, { address }) => { // 接受地址
    state.address = address
  },
  RECEIVE_REQCATEGORYS: (state, { categorys }) => { // 接受食品分類數(shù)組
    state.categorys = categorys
  },
  RECEIVE_REQSHOPS: (state, { shops }) => { // 接受商家數(shù)組
    state.shops = shops
  }
}

// 與后臺(tái)交互的數(shù)據(jù)尔觉，現(xiàn)在在任何文件都可以引用侦铜，引用時(shí) this.$store.dispatch（'xxxx'）即可
const actions = {
  // 異步獲取地址
  async getAddress ({ commit, state }) {
    // 發(fā)送ajax異步請(qǐng)求
    const geohash = state.latitude + ',' + state.longitude
    const result = await reqAddress(geohash)
    // 提交一個(gè)mutations
    if (result.code === 0) {
      commit('RECEIVE_ADDRESS', { address: result.data })
    }
  },
  // 異步獲取分類列表
  async getCategorys ({ commit }) {
    const result = await reqCategorys()
    if (result.code === 0) {
      commit('RECEIVE_REQCATEGORYS', { categorys: result.data })
    }
  },
  // 異步獲取商家列表
  async getShops ({ commit, state }) {
    const { latitude, longitude } = state
    const result = await reqShops({ latitude, longitude })
    if (result.code === 0) {
      commit('RECEIVE_REQSHOPS', { shops: result.data })
    }
  }
}

export default { // 把方法暴露出去
  namespaced: true,
  state,
  mutations,
  actions
}

• vuex 構(gòu)建好钉稍，下面是使用測(cè)試棺耍，在需要的地方使用
  • 這里還涉及到了 vuex 的輔助函數(shù)蒙袍，mapState、mapMutations瘾蛋、mapAction矫限，vuex最簡單叼风、最詳細(xì)的入門文檔，這篇文章寫的非常好茵汰，具體的就不展開了孽鸡，直接使用起來栏豺，問題不大奥洼。
  • 首先在App.vue中引入import { mapActions } from 'vuex'晚胡，使用需要的方法

<script>
import FooterGuide from './components/FooterGuide/FooterGuide'
import { mapActions } from 'vuex'
export default {
  name: 'App',
  mounted () {
    // this.$store.dispatch('msite/getAddress')
    this.getAddress() // 這邊調(diào)用的方法估盘，在瀏覽器的插件中會(huì)有一個(gè)非常清楚的展示
  },
  methods: {
    ...mapActions('msite', ['getAddress'])
  },
  components: {
    FooterGuide
  }
}
</script>

getAddress方法更改數(shù)據(jù)后存在于mutation

• 現(xiàn)在我們需要其中的 name 屬性數(shù)據(jù)遣妥，在Msite.vue中引用import { mapState } from 'vuex',添加 computed 方法：computed: { ...mapState('msite', ['address'])}，然后就可以愉快的使用了

<!--首頁頭部-->
<!--此處title使用強(qiáng)制綁定沙咏，取出 address 中的 name-->
    <HeaderTop :title = "address.name"> 
      <router-link class="header_search" slot="left" to="">
        <i class="iconfont iconfangdajing"></i>
      </router-link>
      <router-link class="header_login" slot="right" to="">
        <span class="header_login_text">登錄|注冊(cè)</span>
      </router-link>
    </HeaderTop>

state中的數(shù)據(jù)

取出name屬性并顯示

• 遇到一個(gè) 大坑
  vuex 使用 ...mapState 獲取到 undefined故河，這是我遇到的一個(gè)坑，這篇文章正好解決了我的問題理盆。

6. 結(jié)束

感覺這個(gè)部分是最難的部分了凑阶，還是不熟悉的原因宙橱，下面都是邏輯處理方面的內(nèi)容了

點(diǎn)個(gè)贊唄师郑！