基于vue来开发一个仿饿了么的外卖商城

Posted 2021-01-28 lanhuo666

一、抽出头部作为一个组件，在底部导航的时候可以相应的显示不同的标题

技术点：使用slot进行组件间的通信；父组件给子组件传值（子组件里面通过props接收父组件传过来的数据）

查看链接：https://blog.csdn.net/sinat_17775997/article/details/52484072

//components/HeaderTop/HeaderTop.vue
<template>
    <header class="header">
            <slot name="search"></slot>
            <a class="header_title">
                <span class="header_title_text ellipsis">{{title}}</span>
            </a>
            <slot name="login"></slot>
        </header>
</template>

<script>
export default {
  props: {
    title: String
  }
}

HeaderTop.vue

<template>
    <HeaderTop title="南昌市华东交通大学南区">
            <router-link slot="search" to="/search" class="header_search">
                <i class="iconfont icon-sousuo"></i>
            </router-link>
            <router-link slot="login" to="/login" class="header_login">
                <span class="header_login_text">登录|注册</span>
            </router-link>
        </HeaderTop>
</template>

<script>
import HeaderTop from ‘../../components/HeaderTop/HeaderTop.vue‘
import ShopList from ‘../../components/ShopList/ShopList.vue‘
export default {
  components: {
    HeaderTop,
    ShopList
  }
</script>

Msite.vue

<template>
<HeaderTop title="订单列表"></HeaderTop>
</template>
<script>
import HeaderTop from ‘../../components/HeaderTop/HeaderTop.vue‘
export default {
  components: {
    HeaderTop
  }
}
</script>

Order.vue

<template>
<HeaderTop title="搜索"></HeaderTop>
</template>
<script>
import HeaderTop from ‘../../components/HeaderTop/HeaderTop.vue‘
export default {
  components: {
    HeaderTop
  }
}
</script>

Search.vue

<template>
<HeaderTop title="我的"></HeaderTop>
</template>
<script>
import HeaderTop from ‘../../components/HeaderTop/HeaderTop.vue‘
export default {
  components: {
    HeaderTop
  }
}
</script>

Profile.vue

 

二、抽出商家列表编辑成单独组件

三、编辑登录界面

提示：返回前面的路由使用 $router.back()

<template>
    <div class="loginContainer">
        <div class="loginInner">
            <div class="login_header">
                <h2 class="login_logo">饿了么</h2>
                <div class="login_header_title">
                    <a href="javascript:;" class="on">短信登录</a>
                    <a href="javascript:;">密码登录</a>
                </div>
            </div>
            <div class="login_content">
                <form>
                    <div :class="on">
                        <section class="login_message">
                            <input type="tel" maxlength="11" placeholder="手机号">
                            <button disabled="disabled" class="get_verification">获取验证码</button>
                        </section>
                        <section class="login_verification">
                            <input type="tel" maxlength="8" placeholder="验证码" v-model="code">
                        </section>
                        <section class="login_hint">
                            温馨提示：未注册饿了么帐号的手机号，登录时将自动注册，且代表已同意
                            <a href="javascript:;">《用户服务协议》</a>
                        </section>
                    </div>
                    <div>
                        <section>
                            <section class="login_message">
                                <input type="text" maxlength="11" placeholder="手机/邮箱/用户名">
                            </section>
                            <section class="login_verification">
                                <input type="text" maxlength="8" placeholder="密码">
                                <div class="switch_button off">
                                    <div class="switch_circle"></div>
                                    <span class="switch_text">...</span>
                                </div>
                            </section>
                            <section class="login_message">
                                <input type="text" maxlength="11" placeholder="验证码">
                                <img class="get_verification" src="./images/captcha.svg" alt="captcha">
                            </section>
                        </section>
                    </div>
                    <button class="login_submit">登录</button>
                </form>
                <a href="javascript:;" class="about_us">关于我们</a>
            </div>
            <span href="javascript:" class="go_back" @click="$router.back()">
                <i class="iconfont icon-fanhuijiantou"></i>
            </span>
        </div>
    </div>
</template>

<script>
export default {}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixins.styl"
  .loginContainer
    width 100%
    height 100%
    background #fff
    .loginInner
      padding-top 60px
      width 80%
      margin 0 auto
      .login_header
        .login_logo
          font-size 40px
          font-weight bold
          color #0090ff
          text-align center
        .login_header_title
          padding-top 40px
          text-align center
          >a
            color #333
            font-size 14px
            padding-bottom 4px
            &:first-child
              margin-right 40px
            &.on
              color #0090ff
              font-weight 700
              border-bottom 2px solid #0090ff
      .login_content
        >form
          >div
            display none
            &.on
              display block
            input
              width 100%
              height 100%
              padding-left 10px
              box-sizing border-box
              border 1px solid #ddd
              border-radius 4px
              outline 0
              font 400 14px Arial
              &:focus
                border 1px solid #0090ff
            .login_message
              position relative
              margin-top 16px
              height 48px
              font-size 14px
              background #fff
              .get_verification
                position absolute
                top 50%
                right 10px
                transform translateY(-50%)
                border 0
                color #ccc
                font-size 14px
                background transparent
                &.right_phone
                  color black
            .login_verification
              position relative
              margin-top 16px
              height 48px
              font-size 14px
              background #fff
              .switch_button
                font-size 12px
                border 1px solid #ddd
                border-radius 8px
                transition background-color .3s,border-color .3s
                padding 0 6px
                width 30px
                height 16px
                line-height 16px
                color #fff
                position absolute
                top 50%
                right 10px
                transform translateY(-50%)
                &.off
                  background #fff
                  .switch_text
                    float right
                    color #ddd
                &.on
                  background #0090ff
                >.switch_circle
                  position absolute
                  top -1px
                  left -1px
                  width 16px
                  height 16px
                  border 1px solid #ddd
                  border-radius 50%
                  background #fff
                  box-shadow 0 2px 4px 0 rgba(0,0,0,.1)
                  transition transform .3s
                  &.right
                    transform translateX(30px)
            .login_hint
              margin-top 12px
              color #999
              font-size 14px
              line-height 20px
              >a
                color #0090ff
          .login_submit
            display block
            width 100%
            height 42px
            margin-top 30px
            border-radius 4px
            background #0090ff
            color #fff
            text-align center
            font-size 16px
            line-height 42px
            border 0
        .about_us
          display block
          font-size 12px
          margin-top 20px
          text-align center
          color #999
      .go_back
        position absolute
        top 5px
        left 5px
        width 30px
        height 30px
        >.iconfont
          font-size 20px
          color #999
</style>

Login.vue

然后注册Login路由

router/index.js

//引入组件
import Login from ‘../pages/Login/Login.vue‘

 {
      path: ‘/login‘,
      component: Login
    }

View Code

 

四、控制底部导航的显示隐藏。

注意：此时底部导航FooterGuide仅仅在Msite，Order，Search，Profile才显示，Login上不会显示。

技术点：v-show="$route.meta.show"

查看链接：http://www.cnblogs.com/nns4/p/8589539.html

https://segmentfault.com/q/1010000007648124

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

App.vue

router/index.js

export default new Router({
  routes: [
    {
      path: ‘/‘,
      redirect: ‘/msite‘
    },
    {
      path: ‘/msite‘,
      component: Msite,
      meta: {
        showFooter: true
      }
    },
    {
      path: ‘/search‘,
      component: Search,
      meta: {
        showFooter: true
      }
    },
    {
      path: ‘/order‘,
      component: Order,
      meta: {
        showFooter: true
      }
    },
    {
      path: ‘/profile‘,
      component: Profile,
      meta: {
        showFooter: true
      }
    },
    {
      path: ‘/login‘,
      component: Login
    }
  ]
})

index.js

 

从这开始做后台数据交互应用

 

五、封装ajax请求。

api/ajax.js

提示：使用axios

import axios from ‘axios‘

export default function ajax(url = ‘‘, data = {}, type = ‘GET‘){
    return new Promise(function (resolve, reject) {
        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(response => {
            resolve(response.data)
        })
        .catch(error => {
            reject(error)
        })
    })
}

View Code

然后根据api接口类型设置请求函数的路由

api/index.js

import ajax from ‘./ajax.js‘

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

// 获取食品的分类列表
export const reqFoodCategories = () => ajax(‘/index_category‘)

// 根据经纬度获取商铺列表
export const reqShops = (longitude,latitude) => ajax(‘/shops‘,{longitude,latitude})

// 账号密码登录
export const reqPwdLogin = (name,pwd,captcha) => ajax(‘/api/login_pwd‘,{
    name,
    pwd,
    captcha
},‘POST‘)

// 获取短信验证码
export const reqSendCode = phone => ajax(‘/api/sendcode‘,{phone})

// 手机号验证码登录
export const reqSmsLogin = (phone,code) => ajax(‘/api/login_sms‘,{phone,code},‘POST‘)

// 获取用户信息
export const reqUser = () => ajax(‘/api/userinfo‘)

// 请求登出
export const reqLogout = () => ajax(‘/api/logout‘)

View Code

 

六、配置webpack实现跨域

查看链接：https://www.cnblogs.com/zishang91/p/8909900.html

https://segmentfault.com/a/1190000011007043

config/index.js

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

View Code