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

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

}

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

最后附上项目源码:

https://github.com/xinhua6/gshop.git

未完待续,敬请期待

以上是 基于vue来开发一个仿饿了么的外卖商城(二) 的全部内容, 来源链接: utcz.com/z/375326.html

回到顶部