外卖webAPP(一)

一，首页页面情况

 

1.底部四个切换栏路由组件路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
// 引入路由组件
import Msite from '@/views/Msite'
import Order from '@/views/Order'
import Profile from '@/views/Profile'
import Search from '@/views/Search'

const routes = [
  {
    path: '/msite',
    component: Msite
  },
  {
    path: '/order',
    component: Order
  },
  {
    path: '/profile',
    component: Profile
  },
  {
    path: '/search',
    component: Search
  },
  {
    path: '/',
    redirect: '/msite'
  }
]

const router = new VueRouter({
  routes
})

export default router

在app.vue入口组件引入路由

<template>
  <div>
    <h3>app</h3>
    <router-view></router-view>
    <FooterGuide></FooterGuide>
  </div>
</template>

二，在footerGuider组件中

2.1，在底部的切换栏标签中有个on类名，渲染颜色，我们需要点击底部的四个切换栏（导航式路由），然后颜色也会跟着变化（根据路由的路径来判断）

    <footer class="footer_guide border-1px">
    <a href="javascript:;" class="guide_item " :class="{on:$route.path ==='/msite'}" @click="goTo('/msite')">
      <span class="item_icon">
        <i class="iconfont icon-waimai"></i>
      </span>
      <span>外卖</span>
    </a>
    <a href="javascript:;" class="guide_item" :class="{on:$route.path ==='/search'}" @click="goTo('/search')">
      <span class="item_icon">
        <i class="iconfont icon-search"></i>
      </span>
      <span>搜索</span>
    </a>
    <a href="javascript:;" class="guide_item"  :class="{on:$route.path ==='/order'}"   @click="goTo('/order')">
      <span class="item_icon">
        <i class="iconfont icon-dingdan"></i>
      </span>
      <span>订单</span>
    </a>
    <a href="javascript:;" class="guide_item"  :class="{on:$route.path ==='/profile'}"   @click="goTo('/profile')">
      <span class="item_icon">
        <i class="iconfont icon-geren"></i>
      </span>
      <span>我的</span>
    </a>
  </footer>

  .guide_item
      display flex
      flex 1
      text-align center
      flex-direction column
      align-items center
      margin 5px
      color #999999
      &.on
        color blue

 // 点击底部切换栏，跳转到对应的路由组件 
    goTo(path){
      this.$router.replace(path)
    }

三，定义公共headerTop组件

首页，搜索，订单，我的这四个路由组件页面顶部是一样的，我们需要将header抽离出来定义公共组件,但是我们发现首页组件顶部左边多了一个搜索图标，右边多个登录|注册

此时我们需要用到作用域插槽，子组件headerTop利用slot组件占位，父组件传入结构

首页组件（miste）顶部样式

搜索组件（search）顶部样式

订单（order）顶部样式

我的(profile)顶部样式

3.1，定义公共组件HeaderTop,利用具名插槽

<template>
  <header class="header">
    <!--插槽作用域，子组件占位，父组件传入结构 -->
    <slot name="left"></slot>
    <span class="header_title">
      <span class="header_title_text ellipsis"
        >{{title}}</span
      >
    </span>
    <!--插槽作用域，子组件占位，父组件传入结构 -->
    <slot name="right"></slot>

  </header>
</template>

接收父组件传递过来的属性

export default {
  name:'HeaderTop',
  props:['title'],

3.2，在首页msite组价，插入子组件，需要两个结构给子组件

    <HeaderTop title="昌平区北七家宏福科技园(337省道北)">
      <template>
        <span class="header_search" slot="left">
          <i class="iconfont icon-sousuo"></i>
        </span>

        <span class="header_login" slot="right">
          <span class="header_login_text">登录|注册</span>
        </span>
      </template>
    </HeaderTop>

 在搜索组件（search）插入子组件，不需要结构给子组件

<HeaderTop title="搜索"></HeaderTop>

在订单组件（order）插入子组件，不需要结构给子组件

 <HeaderTop title="订单列表"></HeaderTop>

3.3，在msite首页组件添加轮播图插件swiper,

1.安装5版本的swiper,  npm  i swiper@5  -S     目前最新是6，不稳定

//swiper引入js和css

// import Swiper from "swiper";

// import "swiper/css/swiper.min.css";

<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/9.jpg" />
              </div>
              <span>甜品饮品</span>
            </a>
            <a href="javascript:" class="link_to_food">
              <div class="food_container">
                <img src="./images/nav/10.jpg" />
              </div>
              <span>商超便利</span>
            </a>
            <a href="javascript:" class="link_to_food">
              <div class="food_container">
                <img src="./images/nav/11.jpg" />
              </div>
              <span>美食</span>
            </a>
            <a href="javascript:" class="link_to_food">
              <div class="food_container">
                <img src="./images/nav/12.jpg" />
              </div>
              <span>简餐</span>
            </a>
            <a href="javascript:" class="link_to_food">
              <div class="food_container">
                <img src="./images/nav/13.jpg" />
              </div>
              <span>新店特惠</span>
            </a>
            <a href="javascript:" class="link_to_food">
              <div class="food_container">
                <img src="./images/nav/14.jpg" />
              </div>
              <span>准时达</span>
            </a>
            <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>
            </a>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>

 mounted() {
    new Swiper('.swiper-container', {
      loop: true, // 可以循环轮播
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination'
      }
    })
  }

3.4，在msite首页组件拆分shoplist组件，html,css，图片拆分

3.5，在我的组件（profile）,点击登录|注册链接，跳转到登录页面

 

配置登录路由组件对象

import Login from '@/views/Login'

const routes = [
  {
    path: '/msite',
    component: Msite,
    meta: {
      showFooterGuider: true
    }
  },
  {
    path: '/order',
    component: Order,
    meta: {
      showFooterGuider: true
    }
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      showFooterGuider: true
    }
  },
  {
    path: '/search',
    component: Search,
    meta: {
      showFooterGuider: true
    }
  },
  {
    path: '/',
    redirect: '/msite'
  },
  {
    path: '/login',
    component: Login,
    meta: {
      showFooterGuider: false
    }
  }
]

  <section class="profile-number">
        <!-- 路由链家登录 -->
        <router-link to="/login"  class="profile-link">
            <div class="profile_image">
            <i class="iconfont icon-person"></i>
          </div>
          <div class="user-info">
            <p class="user-info-top">登录/注册</p>
            <p>
              <span class="user-icon">
                <i class="iconfont icon-shouji icon-mobile"></i>
              </span>
              <span class="icon-mobile-number">暂无绑定手机号</span>
            </p>
          </div>
          <span class="arrow">
            <i class="iconfont icon-jiantou1"></i>
          </span>
        </router-link>

两个细节问题

1.在登录组件，点击左上角的返回图标，返回到我的组件，利用路由返回函数

       <button class="login_submit">登录</button>
          </form>
          <a href="javascript:;" class="about_us">关于我们</a>
        </div>
        <a href="javascript:" class="go_back" @click="$router.back()">
          <i class="iconfont icon-jiantou2"></i>
        </a>
      </div>

2.在登录页面底部的四个切换栏需要影藏，在路由对象中配置meta属性，布尔值，然后在app组件中v-if判断下

在app.vue中判断判断是否显示footer切换栏

<template>
  <div>
    <router-view></router-view>
    <FooterGuide v-if="$route.meta.showFooterGuider"></FooterGuide>
  </div>
</template>

3.6,axios二次封装，接口函数书写以及发送请求

新建api文件夹，新建ajax.js文件，axios二次封装 Ajax.js, 后台服务器地址http://localhost:4000

 

// 对axios的二次封装
import axios from 'axios'
const service = axios.create({
 
  baseURL: 'http://localhost:4000',
  timeout: 2000
})

// 请求拦截器
service.interceptors.request.use(config => {
  return config
})

// 响应拦截器
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    alert('请求出错' + error.message || '未知错误')
    //以后不允许用户继续处理： 中断promise链
    return new Promise(() => {}) //返回pending状态的promise 中断
  }
)

export default service

新建index.js文件，编写接口函数

import ajax from './ajax.js'

// 1、根据经纬度获取位置详情
export const reqAddress = (geohash) => ajax.get(`/position/${geohash}`)
// 2、获取食品分类列表
export const reqFoodCategorys = () => ajax.get('/index_category')
// 3、根据经纬度获取商铺列表
export const reqShops = (longitude, latitude) => ajax.post('/shops', {params:{longitude, latitude}})
// 4、根据经纬度和关键字搜索商铺列表
export const reqSearchShop = (geohash, keyword) => ajax.post('/search_shops', {params:{geohash, keyword}})
// 6、用户名密码登陆
export const reqPwdLogin = ({name, pwd, captcha}) => ajax.post('/login_pwd', {name, pwd, captcha})
// 7、发送短信验证码
export const reqSendCode = (phone) => ajax.get('/sendcode', {params:{phone}})
// 8、手机号验证码登陆
export const reqSmsLogin = (phone, code) => ajax.post('/login_sms', {phone, code})
// 9、根据会话获取用户信息
export const reqUserInfo = () => ajax.get('/userinfo')
// 10、用户登出
export const reqLogout = () => ajax.get('/logout')

/**
 * 获取商家信息
 */
export const reqShopInfo = () => ajax.get('/info')

/**
 * 获取商家评价数组
 */
export const reqShopRatings = () => ajax.get('/ratings')

/**
 * 获取商家商品数组
 */
export const reqShopGoods = () => ajax.get('/goods')

在main.js中测试接口数据

import * as API from '@/api'
API.reqAddress(('40.10038,116.36867')).then(r => {
  console.log(r)
})

此时，控制台报错了，请求跨域了，本机浏览器端口8080请求4000端口，我们需要在vue.config.js 配置代理proxy

module.exports = {
  lintOnSave: false,
  devServer: {
    //需要转发路由的路径
    proxy: {
      '/api': {
        target: 'http://localhost:4000',
        pathRewrite: { '^/api': '' },
        changeOrigin: true
      }
    }
  }
}

然后在封装的ajax中修改下路径，此时再次请求数据，是OK的

// 对axios的二次封装
import axios from 'axios'
const service = axios.create({
  baseURL: 'http://localhost:8080/api',
  // baseURL: 'http://localhost:4000',
  timeout: 2000
})

3.7，利用vuex,发送ajax,状态管理

1.新建store文件夹，新建index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 引入接口函数
import {
  reqAddress,
  reqFoodCategorys,
  reqShops,
  reqUserInfo,
  reqLogout,
  reqShopRatings,
  reqShopGoods,
  reqShopInfo,
  reqSearchShop
} from '@/api'

const state = {
  latitude: 40.10038, // 纬度
  longitude: 116.36867, // 经度
  address: {}, //地址相关信息对象

}

const mutations = {
  RECEIVE_ADDRESS(state, address) {
    state.address = address
  },


}

const actions = {
  // 异步获取地址
  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)
    }
  },



}

const getters = {}

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

在main.js中引入store，并注册

import store from '@/store'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
  store
}).$mount('#app')

在msite首页组件中从store中获取数据

除了dispatch到store中actions的函数，还可以用mapActions中触发

  mounted(){
    this.$store.dispatch('getAddress')
  },

或者

import { mapActions, mapState } from 'vuex'

  methods:{
    ...mapActions(['getAddress'])
  },

 mounted(){
    // this.$store.dispatch('getAddress')
    this.getAddress()
  },

从store中的获取数据

computed:{

    // address(){
    //   return this.$store.state.address
    // }
    ...mapState(['address'])
  },

填充数据

<HeaderTop :title="address.name">
      <template>
        <span class="header_search" slot="left">
          <i class="iconfont icon-sousuo"></i>
        </span>

        <span class="header_login" slot="right">
          <span class="header_login_text">登录|注册</span>
        </span>
      </template>
    </HeaderTop>

3.8，在msite首页组件中的轮播图中获取动态数据，并填充数据

注：这个轮播图，应该是是一个双重数组遍历，一维数组是有几页，二维数组是有八个数据

然而我们后台返回的数据是一个数组数据，而不是一个二维数组。因此我们需要编写逻辑去实现两个数组嵌套

  mounted() {

    this.$store.dispatch('getCategorys')
  },

computed: {
 
    ...mapState(['address', 'categorys']),

返回的部分数据

{
  "code": 0,
  data: [
          {
            id: 1,
            is_in_serving: true,
            description: "0元早餐0起送，每天都有新花样。",
            title: "预订早餐",
            link: "",
            image_url: "/d/49/7757ff22e8ab28e7dfa5f7e2c2692jpeg.jpeg",
            icon_url: "",
            title_color: "",
            __v: 0
          },
          {
            id: 65,
            is_in_serving: true,
            description: "",
            title: "土豪推荐",
            image_url: "/d/49/7757ff22e8ab28e7dfa5f7e2c2692jpeg.jpeg",
            link: "",
            icon_url: "",
            title_color: "",
            __v: 0
          },
          ... 共n条数据
        ]
}

// 发送请求返回的数据categorys是一个数组，但是看html,应该要双重遍历，是一个二维数组，将categorys
    // 遍历下，需要将每一项对象添加到嵌套的小数组中
    // 思路；1.需要定义一个大数组，小数组，将小数组嵌套在大数组中，小数组添加categorys的每一个对象
    // 2.小数组只能有八项对象（页面只有八项标签），然后添加一个新的小数组

在computed中计算该数组，重要

categorysArr() {
      // 定义大数组
      let arr = []
      // 定义小数组
      let minArr = []
      this.categorys.forEach(item => {
        // 如果当前小数组已经满了, 创建一个新的
        if (minArr.length === 8) {
          minArr = []
        }

        // 如果minArr是空的, 将小数组保存到大数组中
        if (minArr.length === 0) {
          arr.push(minArr)
        }

        // 将每一项对象添加到小数组中
        minArr.push(item)
      })

      return arr
    }
  }

此时整理得到的数据

将数据填充到模板中

  data() {
    return {
      baseImageUrl: 'https://fuss10.elemecdn.com'
    }
  },

 <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(c1, index) in categorysArr"
            :key="index"
          >
            <a
              href="javascript:"
              class="link_to_food"
              v-for="(c2, index) in c1"
              :key="c2.id"
            >
              <div class="food_container">
                <img :src="baseImageUrl + c2.image_url" />
              </div>
              <span>{{ c2.title }}</span>
            </a>
          </div>
        </div>

此时有个bug,swiper轮播图并没有效果，如何有效果呢

1.监视异步请求获取的数据categorys，

2.此时数据回来了，但是页面还没有跟新，需要在下一次dom页面跟新完成执行

 watch: {
      categorys (value) { // categorys数组中有数据了, 在异步更新界面之前执行
        // 使用setTimeout可以实现效果, 但不是太好
        /*setTimeout(() => {
          // 创建一个Swiper实例对象, 来实现轮播
          new Swiper('.swiper-container', {
            loop: true, // 可以循环轮播
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            },
          })
        }, 100)*/

        // 界面更新就立即创建Swiper对象
        this.$nextTick(() => {// 一旦完成界面更新, 立即调用(此条语句要写在数据更新之后)
          // 创建一个Swiper实例对象, 来实现轮播
          new Swiper('.swiper-container', {
            loop: true, // 可以循环轮播
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            },
          })

        })

      }
    },