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

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

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

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

注意：此时底部导航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)
        })
    })
}

然后根据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‘)

六、配置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‘: ‘‘
      }
      }
    },

原文地址：https://www.cnblogs.com/lanhuo666/p/10139879.html

时间： 2024-10-11 05:35:58

基于vue来开发一个仿饿了么的外卖商城（二）的相关文章

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

一.准备工作 1.大前提:已安装好node. npm. vue. vue-cli.stylus(此项目使用stylus来编译) 2.开发软件:Google Chrome(建议安装插件vue-devtools,方便调试),webstorm / sublime Text / VS Code (推荐使用webstorm,sublime 和 VS Code需要安装相应的插件) 3.项目结构: 4.项目结构分析: 5. 图标准备 推荐在阿里巴巴矢量图库查找需要的图标,官网地址:https://www.ic

基于Vue框架开发的仿饿了么前端小应用

主要使用vue框架进行开发.使用最新的框架版本,修正了vue1.0到vue2.0过度过程出现的几处bug. 视频教程则是黄轶老师的<vuejs高仿饿了么APP>. 源代码地址:https://github.com/waihoyu/sell 原文地址:https://www.cnblogs.com/waihoyu/p/9350175.html

基于Vue 2.0高仿 &lt;今日头条&gt; 单页应用。

这是用 vue.js 2.0 高仿 今日头条 的移动端项目,结合了原生app的部分功能以及网页版. 技术栈 vue.js 2.0全家桶(vue.vuex.vue-router) axios.jsonp element-ui.iview vue-lazyload.animate.css.moment.flexible.js 在线地址 线上地址(预览地址) GitHub源码地址 说明 项目内定死 账号: admin, 密码: admin. 因为数据原因,首页请求的数据接口来自网页版今日头条,修改了一

使用vue来开发一个下拉菜单组件(1)

一.新建demo工程 vue init webpack-simple demo 添加src/mixins/emitter.js文件(见前几篇博文) 安装font-awesome字体库: cnpm install font-awesome --save 配置webpack.config.js,引入字体文件: { test: /\.(otf|eot|ttf|woff|woff2)$/, loader: 'file-loader' } 在src/main.js中引入font-awesome: impo

【Vue.js】高仿饿了么外卖App（一）

1.架构从传统的MVC向REST API+前端MV*迁移 参考链接: http://blog.csdn.net/broadview2006/article/details/8615055 http://blog.csdn.net/u013628152/article/details/42709033 MV*包括:MVC.MVP.MVVM vue.js是MVVM框架 2.Iconmoon制作图标字体 2.1 点击IconMoon App 2.2点击import icons,导入svg图片 2.3选

Yii 2.0开发一个仿京东商城平台

课程目录及下载地址: 第1章 课程简介介绍了课程内容.背景和案例展示.第2章 项目的准备工作介绍了如何使用PHP依赖管理工具Composer安装Yii2框架,模拟配置真实企业开发项目运行环境和编辑器.第3章 项目前台页面的搭建介绍了如何使用Yii2框架的页面布局管理完成前台首页.商品分类.商品详情.购物车.收银台.订单中心.用户注册登录页面的搭建和渲染.第4章 项目后台页面的搭建介绍了如何使用Yii2框架的脚手架Gii模块创建后台功能模块,完成后台页面的搭建及前后台页面的调优处理.第5章 管理员

基于vue脚手架开发

1.安装node 2.安装淘宝镜像 //国内镜像npm下载速度会比较快npm install cnpm -g --registry=https://registry.npm.taobao.org安装完成: cnpm -v3.安装vue-cli 4.vue init webpack5.npm install //此步骤尽量不要用cnpm 原文地址:https://www.cnblogs.com/blog-note/p/12132149.html

用vue + leancloud开发一个免费的博客

项目地址 https://github.com/Fee-ing/Fe... 在线预览 在线预览地址: 搭建免费博客 原文地址:https://www.cnblogs.com/baimeishaoxia/p/12210615.html

VBox 一款基于vue开发的音乐盒 序章

之前自己基于vue写了一个 Mplayer, github地址:https://github.com/xiangwenhu/MPlaer, 演示地址:http://babydairy2017.cloudapp.net:3000/index#/index 只有简单的搜索播放随心听功能,样式适配上也很差, 路由就两个,数据都走vuex,数据转发是用nodejs自己转发,而且只是PC能比较好的展现,之后不了了之,偶尔也自己上来听听歌曲. 有一天,抬头看,有一片云,特别的蓝,风一吹,一阵花香飘来,美好,