基于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