正文 

当前位置： 首页 > 技术 > java教程

基于vue来开发一个仿饿了么的外卖商城(代码片段)

lanhuo666 lanhuo666     2022-11-24     585

关键词：

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

技术点：使用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

 



一个基于springboot+redis+vue仿饿了么外卖系统（后台+移动端），可二次开发接私活！...(代码片段)

...完整的外卖系统，包括手机端，后台管理，api基于springboot和vue的前后端分离的外卖系统包含完整的手机端，后台管理功能本项目主要供交流学习，不建议商用02技术栈核心框架：SpringBoot数据库层：Spring... 查看详情

vue.js高仿饿了么外卖app

1.架构从传统的MVC向RESTAPI+前端MV*迁移参考链接：http://blog.csdn.net/broadview2006/article/details/8615055http://blog.csdn.net/u013628152/article/details/42709033MV*包括：MVC、MVP、MVVMvue.js是MVVM框架 2.Iconmoon制作图标字体2 查看详情

基于vue2+nuxt构建的高仿饿了么（2018版）(代码片段)

...预览）移动端扫描下方二维码API接口文档接口文档地址（基于apidoc）技术栈vue2+vuex+vue-router+mint-ui+nuxt项目运行gitclone[email protec 查看详情

基于springboot+redis+vue仿饿了么外卖系统（后台+移动端）

优质文章，第一时间送达 六、运行效果前端展示（点击图片查看大图）后台管理（点击图片查看大图） 七、源码下载源码下载云盘链接:链接：https://pan.baidu.com/s/1djb2BmP3S6l9OfzT62Nd6A提取码：lry9复制这... 查看详情

vue.js高仿饿了么外卖app2016最火前端框架百度云

...快20%-50%，尽管在某些情况下还要更快）。我们可以提供一个到这个参照项目的链接，但是坦率的说，所有的参照在某些方面是有缺陷的，很少有像你所写的一个真实应用。那么，让我们详细了解下吧。渲染性能在渲染用户界面... 查看详情

仿饿了么首页导航栏（viewpager）

...了么首页中我们能看到这样的布局（如下图）。红框内是一个可以左右滑动的页面，每一个页面类似于九宫格，都有可供点击图标。对于这样的布局，我在网上找了很久都没有找到相关的名称，所以我这里暂时叫它导航页吧。最... 查看详情

仿饿了么购物车下单效果

仿饿了么购物车下单效果前一段由于新项目需要，开发一个类似饿了么购物车下单效果，电商类、外卖类、点餐类项目都可以用的上,废话不多说请看效果。效果图如下:主要的功能：就是左侧展示分类，右侧展示分类下商品的，... 查看详情

饿了么购物车动画(代码片段)

...是怎么实现的，但是看了很多仿饿了么的demo都是实现了一个完整的大的项目，要找到那个小模块很麻烦，所以自己将联动菜单和动画提取出来写了一个demo，方便学习。目的只是想突出功能所以界面细节很relax，大家也relax的看看... 查看详情

经典文摘：饿了么的pwa升级实践（结合vue.js）

...内web与浏览器生态的发展。您可能感兴趣的相关文章网站开发中很有用 查看详情

高仿饿了么mock本地数据(代码片段)

新版webpack.dev.conf.js配置本地数据访问：//引入express模块constexpress=require(‘express‘)//创建express对象constapp=express()//引入请求文件加载本地数据文件constappData=require(‘../data.json‘)//获取对应的本地数据constseller=appData.sellerconstg 查看详情

vue2高仿饿了么app

Github地址: https://github.com/ccyinghua/appEleme-project 一、构建项目所用：vueinitwebpackappEleme-projectnpmrundevcnpminstallnode-sass--save-devcnpminstallsass-loader--save-dev//sass-loader依赖于node-sas 查看详情

vue饿了么的技术点

一：项目目录设计。1：制作矢量图片的图标字体。打开icomoon.io网站,点击importicons，上传自己的svg图片，制作自己的图片，上传之后点击generatefont图标，下载然后把其中的font文件夹复制，style.css复制到style文件夹，修改为icom.styl... 查看详情

前端实战项目：vue.js实现外卖平台webapp,饿了么项目的翻版

...相应的商品分类也会跟着跳转。2.用户评价页面主要包括一个TAB栏，包括三部分：全部、有图和评价三个模块3.商家信息页面主要介绍一些商家基本信息，可以通过better-scroll插件，进行左右滑动图片。效果预览：再说一篇，是饿... 查看详情

饿了么订单记录怎么删除

...之后，我们就能够看到自己在饿了么订过的单了哦。找到一个我们需要删除的订单。左滑3、左滑后会出现一个删除的字样，点击4、自动弹出框框显示是否确认删除订单哦，点击继续删除就可以了呢。参考技术A饿了么是一个点外... 查看详情

外卖订单爬虫（美团，饿了么，百度外卖）

...是用来抓取外卖平台（美团，饿了么，百度）的商户订单开发，并不是一个通用库，而是为这个特定场景进行开发的。适用场景：餐饮企业拥有多家外卖门店，订单量非常大，有对订单进行数据分析的需求。主要功能：每天定时... 查看详情

饿了么的架构设计及演进之路

网站在刚开始的时候大概只是一个想法：一个产业的模型，快速地将它产生出来。“快”是第一位的，不需要花太多精力在架构设计上。在网站进入扩张期才需要对架构投入更多的精力来承载网站在爆发时的流量。饿了么成立已... 查看详情

仿饿了么项目-vue-cli开启项目

环境搭建安装nodeJs在用vue-cli开启项目之前，首先我们需要安装Node环境，安装Node很简单，只需要去官网下载http://nodejs.cn/download/，下载完成后点击安装，安装过程很简单，一直next即可，安装完成会自动添加node及npm环境变量。检... 查看详情

美团饿了么外卖点菜界面联动菜单性能优化(代码片段)

...骤3采用的是实时遍历，现在抛弃这种做法。而是，生产一个跳转函数，可以使用if...else也可以使用switch...case，这里选用后者，因为性能更加出众。注：生成的jumpFunc是字符串，需要使用eval()来进行函数转换。5.代码示例(vue)计算... 查看详情