标签:script 引入 a10 bsp substring lis return .com pre
一、抽出头部作为一个组件,在底部导航的时候可以相应的显示不同的标题
技术点:使用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 } }
<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>
<template> <HeaderTop title="订单列表"></HeaderTop> </template> <script> import HeaderTop from ‘../../components/HeaderTop/HeaderTop.vue‘ export default { components: { HeaderTop } } </script>
<template> <HeaderTop title="搜索"></HeaderTop> </template> <script> import HeaderTop from ‘../../components/HeaderTop/HeaderTop.vue‘ export default { components: { HeaderTop } } </script>
<template> <HeaderTop title="我的"></HeaderTop> </template> <script> import HeaderTop from ‘../../components/HeaderTop/HeaderTop.vue‘ export default { components: { HeaderTop } } </script>
二、抽出商家列表编辑成单独组件
三、编辑登录界面
提示:返回前面的路由使用 $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路由
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>
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 } ] })
从这开始做后台数据交互应用
五、封装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‘: ‘‘ } } },
标签:script 引入 a10 bsp substring lis return .com pre
原文地址:https://www.cnblogs.com/lanhuo666/p/10139879.html