vue实战（4）：postman测试数据、封装ajax、使用vu

2019-04-30  本文已影响0人  i摸鱼喵

书到用时方恨少

这个阶段涉及到了vuex,本来想着不慌，用起来，使用的过程中问题还真不少
本篇涉及到的内容：
---postman 测试数据
---封装 ajax 请求函数
---封装接口请求函数
---使用 vuex 管理状态
---获取首页相关数据

0. 其它

vue实战（1）：准备与资料整理
vue实战（2）：初始化项目、搭建底部导航路由
vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由
vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态
vue实战（5）：总结一
vue实战（6）：异步显示数据、开发Star组件
vue实战（7）：完整开发登录页面（一）
vue实战（8）：完整开发登录页面（二）
vue实战（9）：总结二
vue实战（10）：开发店铺详情（一）
vue实战（11）：开发店铺详情（二）
vue实战（12）：完结 + 附学习视频

1. 安装 MongoDB ，启动后台

1.1 到MongoDB官网，下载适合的版本，安装好
1.2 到后台项目文件夹下，cmd，用npm start启动数据库
启动数据库

2. 使用 postman 测试数据

1.1 根据经纬度获取位置详情(例子)
    --请求URL：http://localhost:3000/position/:geohash
    --示例：http://localhost:3000/position/40.10038,116.36867
    --请求方式：GET
    --参数类型：param
    |参数       |是否必选   |类型       |说明
    |geohash    |Y         |string    |经纬度
    --返回示例：
    {
      "code": 0,
      "data": {
        "address": "北京市昌平区337省道",
        "city": "北京市",
        "geohash": "40.10038,116.36867",
        "latitude": "40.10038",
        "longitude": "116.36867",
        "name": "昌平区北七家宏福科技园(337省道北)"
        }
     }
1.2 接口输入postman中，查看结果
1.3 输出与文档相同，获取数据成功
数据获取成功

3. 封装 ajax 请求函数

import axios from 'axios'
/*
 ajax请求模块
 封装ajax请求函数
 */
export default function ajax (url = '', data = {}, type = 'GET') { // type 默认传 get
  return new Promise(function (resolve, reject) { // 返回 new promise，后面会用到 async 和 await
    let promise
    if (type === 'GET') { // 判断 get
      let dataStr = '' // 数据拼接字符串
      Object.keys(data).forEach(key => {
        dataStr += key + '=' + data[key] + '&'
      })
      if (dataStr !== '') { // 拼接成 url 地址
        dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
        url = url + '?' + dataStr
      }
      // 发送get请求
      promise = axios.get(url)
    } else {
      // 发送post请求
      promise = axios.post(url)
    }
    promise.then(response => {
      resolve(response.data)
    })
      .catch(error => {
        reject(error)
      })
  })
}

4. 封装接口请求函数

/* 包含多个模块ajax函数
* 封装接口请求函数(一部分例子)
* */
import ajax from './ajax'
const BASE_URL = '/api'  // 关于跨域

// 1、根据经纬度获取位置详情
// 此处直接这么写，当请求时会出错，因为后台代码的端口是4000（或域名），与本地的请求端口不一致，自然无法实现跨域ajax请求，需要代理配置
// 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、根据经纬度获取商铺列表
export const reqShops = (latitude, longitude) => ajax(`${BASE_URL}/shops`, { latitude, longitude })

// vue.config.js
module.exports = {
  // 修改的配置
  publicPath: '/',
  devServer: {
    proxy: {
      '/api': { // 匹配所有以 '/api'开头的请求路径
        target: 'http://localhost:4000', // 代理目标的基础路径
        changeOrigin: true, // 支持跨域
        // ws: true,
        pathRewrite: { // 重写路径: 去掉路径中开头的'/api'
          '^/api': ''
        }
      }
    }
  }
}

async mounted () {  // 例子
    const result = await reqCategorys()
    console.log(result) // 打印输出
  }
数据获取成功

5. 创建 vuex 整体结构，管理状态

关于vuex的学习，起初不是怎么会用，看了官方文档也没怎么懂，看了几篇博客知道了一些使用方法，视频中对这部分的构建还是去年的形式，我照着现在的形式搭建了一下，因为只知其一不知其二，这也造成一些问题，好在目前遇到的问题都解决了，问题不大，后面还需要继续深入学习。


modules文件夹里面放模块，更便于管理与维护
// vuex最核心的管理对象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
})


// 内容比较多，这边可以把相似或者功能相同的组成一个模块，更方便维护
// 模块文件在store.js中引用

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

// 基础数据状态,现在在任何文件都可以引用，引用时 this.$store.xxx 即可
const state = {
  latitude: 40.10038, // 纬度
  longitude: 116.36867, // 经度
  address: {}, // 地址信息对象
  categorys: [], // 分类数组
  shops: [] // 商家数组
}

// 直接更改state的多个方法的对象，现在在任何文件都可以引用，引用时 this.$store.commit（'xxxx'）即可
const mutations = { 
  RECEIVE_ADDRESS: (state, { address }) => { // 接受地址
    state.address = address
  },
  RECEIVE_REQCATEGORYS: (state, { categorys }) => { // 接受食品分类数组
    state.categorys = categorys
  },
  RECEIVE_REQSHOPS: (state, { shops }) => { // 接受商家数组
    state.shops = shops
  }
}

// 与后台交互的数据，现在在任何文件都可以引用，引用时 this.$store.dispatch（'xxxx'）即可
const actions = {
  // 异步获取地址
  async getAddress ({ commit, state }) {
    // 发送ajax异步请求
    const geohash = state.latitude + ',' + state.longitude
    const result = await reqAddress(geohash)
    // 提交一个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
}


<script>
import FooterGuide from './components/FooterGuide/FooterGuide'
import { mapActions } from 'vuex'
export default {
  name: 'App',
  mounted () {
    // this.$store.dispatch('msite/getAddress')
    this.getAddress() // 这边调用的方法，在浏览器的插件中会有一个非常清楚的展示
  },
  methods: {
    ...mapActions('msite', ['getAddress'])
  },
  components: {
    FooterGuide
  }
}
</script>
getAddress方法更改数据后存在于mutation 
<!--首页头部-->
<!--此处title使用强制绑定，取出 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">登录|注册</span>
      </router-link>
    </HeaderTop>
state中的数据
取出name属性并显示

6. 结束

感觉这个部分是最难的部分了，还是不熟悉的原因，下面都是逻辑处理方面的内容了

点个赞呗！
上一篇下一篇

猜你喜欢

热点阅读