Vue外卖项目的学习（2）

最新推荐文章于 2022-06-01 08:43:33 发布

写bug的小气球

最新推荐文章于 2022-06-01 08:43:33 发布

阅读量203

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46013619/article/details/104123277

版权

Vue 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

使用Swiper轮播

详细可以去看Swiper中文网的例子，很全面，出现了一个问题，3和4版本都有dist文件，5没有，直接引入就行了，需要引入一个方法也就是js以及一个css，功能比较好玩
在这里插入图片描述

基本结构就是3个div 包括class名字都是固定的，参考官网

<div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <a href="javascript:" class="link_to_food">
              <div class="food_container">
                <img src="./images/nav/1.jpg">
              </div>
              <span>甜品饮品</span>
            </a>
            <a href="javascript:" class="link_to_food">
              <div class="food_container">
                <img src="./images/nav/2.jpg">
              </div>
              <span>商超便利</span>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>

让页面加载完就执行轮播

<script>
  import HeaderTop from '../../components/HeaderTop/HeaderTop'
  import Swiper from 'swiper'
  import 'swiper/css/swiper.min.css'
  export default {
    mounted(){
      //创建一个Swiper实例对象，来实现轮播
      new Swiper('.swiper-container', {
        loop:true, //可以循环轮播
        pagination:{
          el:'.swiper-pagination',
          //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
          clickable :true
        },
        autoplay: {
          delay: 3000,//3秒切换一次
        },
      })
    },

登入界面的实现（实现回退以及隐藏foot）

这里给路由器增加了一个meta属性，$route（表示当前路由）是自带的,只是平常不写而已，使用v-show进行显示隐藏，值得注意的是，dom元素已经被创建出来了，只是隐藏了而已
meta字段(元数据)直接在路由配置的时候,给每个路由添加一个自定义的meta对象,在meta对象中可以设置一些状态,来进行一些操作。
在这里插入图片描述

routes:[
    {
      path:'/msite',
      component:MSite,
      meta:{
        showFooter:true
      }
    },

<template>
  <div class="app">
    <router-view></router-view>
    <FooterGuide v-show="$route.meta.showFooter"/>
  </div>
</template>

回退

<a href="javascript:" class="go_back" @click="$router.back()">

Vuex

通过发送异步ajax请求，异步获取数据
首先封装了ajax，这里大概的意思是返回response.data,因为有印象再之前的学习中axios返回的是promise对象，想要获取到data，就要response.data.data，这一步骤的意义就是要简化操作，方便在之后直接.data，就得到data数据

/*
ajax请求函数模块
 */
import axios from 'axios'
export default function ajax (url, data={}, type='GET') {

  return new Promise(function (resolve, reject) {
    // 执行异步ajax请求
    let promise
    if (type === 'GET') {
      // 准备url query参数数据
      let dataStr = '' //数据拼接字符串
      Object.keys(data).forEach(key => {
        dataStr += key + '=' + data[key] + '&'
      })
      if (dataStr !== '') {
        dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
        url = url + '?' + dataStr
      }
      // 发送get请求
      promise = axios.get(url)
    } else {
      // 发送post请求
      promise = axios.post(url, data)
    }
    promise.then(function (response) {
      // 成功了调用resolve()
      resolve(response.data)
    }).catch(function (error) {
      //失败了调用reject()
      reject(error)
    })
  })
}

/*
const response = await ajax()
const result = response.data

const resule = await ajax()
 */

/*
包含n个接口请求函数的模块
函数的返回值: promise对象
 */
import ajax from './ajax'
// const BASE_URL = 'http://localhost:4000'
const BASE_URL = '/api'

// 1、根据经纬度获取位置详情
export const reqAddress = (geohash) => ajax(`${BASE_URL}/position/${geohash}`)

这里有跨域的问题，在config下的index中修改

proxyTable: {
      '/api': { // 匹配所有以 '/api'开头的请求路径
        target: 'http://localhost:4000', // 代理目标的基础路径
        changeOrigin: true, // 支持跨域
        pathRewrite: {// 重写路径: 去掉路径中开头的'/api'
          '^/api': ''
        }
      }
    },

之后就是对vuex进行配置，然后对应的模块写对应的功能代码
在这里插入图片描述
index 这里别忘了基本套路写好之后在在main中映射出来 老容易忘记

/*
vuex最核心的管理对象store
 */
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

main

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
new Vue({
  el:'#app',
  render:h => h(App),
  router,
  store
})

state

/*
状态对象
 */

export default {
  latitude: 40.10038, // 纬度
  longitude: 116.36867, // 经度
  address: {}, //地址相关信息对象
  categorys: [], // 食品分类数组
  shops: [], // 商家数组
}

mutations


/*
直接更新state的多个方法对象
 */
  import {
    RECEIVE_ADDRESS,
    RECEIVE_CATEGORYS,
    RECEIVE_SHOPS,
} from './mutatins-types'
export default {
  [RECEIVE_ADDRESS](state, {address}){
    state.address = address
  },
  [RECEIVE_CATEGORYS](state, {categorys}){
    state.categorys = categorys
  },
  [RECEIVE_SHOPS](state, {shops}){
    state.shops = shops
  },
}

mutations-type

/*
包含多个mutations的type名称常量
 */
/*
包含n个mutation的type名称常量
 */
export const RECEIVE_ADDRESS = 'receive_address' // 接收地址
export const RECEIVE_CATEGORYS = 'receive_categorys' // 接收食品分类数组
export const RECEIVE_SHOPS = 'receive_shops' // 接收商家数组

actions 这里注意的是这个传参问题async getAddress({commit, state})，容易写成async getAddress({commit}, state)，而且从这里就可以看出是直接.data,印证了我上面的想法，
在此我想可以参考前面ES6的学习（3），这里的我突然更加清晰了一些，在actions中使用了
const result = await reqAddress(geohash)，其实就是借助了index传了一个地址值，然后在ajax进行了请求，ajax里面就采用了

async function getNews(url) {
      return new Promise((resolve, reject) => {
        $.ajax({
          method: 'GET',
          url,
          success: data =>  resolve(data),
          error: error => reject(error)
        })
      })
    }

这样的方式，只不过这次用到的是axios，将response.data作为返回值返回给actions中的result

/*
通过mutations间接更新state的多个方法的对象
 */
import {
  RECEIVE_ADDRESS,
  RECEIVE_CATEGORYS,
  RECEIVE_SHOPS,
} from './mutatins-types'
import {
  reqAddress,
  reqFoodCategorys,
  reqShops
} from '../api'
export default {
  //异步获取地址
  async getAddress({commit, state}){
    //发送异步ajax请求
    const geohash = state.latitude + ',' + state.longitude
    const result = await reqAddress(geohash)
    //根据结果提交一个mutation
    if (result.code===0){
      const address = result.data
      commit(RECEIVE_ADDRESS, {address})
    }
  },
  //异步获取食品分类列表
  async getCategorys({commit}){
    //发送异步ajax请求
    const result = await reqFoodCategorys()
    //根据结果提交一个mutation
    if (result.code===0){
      const categorys = result.data
      commit(RECEIVE_CATEGORYS, {categorys})
    }
  },
  //异步获取商家列表
  async getShops({commit, state}){
    //发送异步ajax请求
    const {longitude, latitude} = state
    const result = await reqShops(longitude, latitude)
    //根据结果提交一个mutation
    if (result.code===0){
      const shops = result.data
      commit(RECEIVE_SHOPS, {shops})
    }
  }
}

努力

写bug的小气球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue外卖项目的学习（2）

使用Swiper轮播详细可以去看Swiper中文网的例子，很全面，出现了一个问题，3和4版本都有dist文件，5没有，直接引入就行了，需要引入一个方法也就是js以及一个css，功能比较好玩基本结构就是3个div 包括class名字都是固定的，参考官网<div class="swiper-container"> <div class="swiper-wrap...
复制链接

扫一扫