外卖APP项目—No.4header组件开发

2023-11-21 22:20
文章标签 组件 项目 app 开发 header 外卖 no.4

本文主要是介绍外卖APP项目—No.4header组件开发，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

外卖APP项目—No.4header组件开发

  • 外卖APP项目—No.4header组件开发
    • axios应用
    • 外部组件
      • 渲染效果如下：
    • 详情弹层页
      • sticky footers布局实现
      • StarVue.vue组件实现及应用（五星评价组件）
      • flex布局实现
      • 完整的HeaderVue.vue组件内容如下：
      • 渲染效果如下：

外卖APP项目—No.4header组件开发

本文重点跟大家介绍外卖APP项目的header组件开发，主要包括三部分：axios应用、外部组件、详情弹层页。废话不多说，正文马上开始！

axios应用

  • header组件涉及很多商家数据，这些数据需要发送请求来获取，本项目使用axios来发送异步请求。
  • axios使用前需要手动安装，安装命令如下：

npm install axios

  • 在main.js中引入axios，具体如下：
    import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'import './common/stylus/index.styl';axios.defaults.baseURL = 'http://localhost:8080/'const app = createApp(App)
app.config.globalProperties.$http = axios
app.use(store).use(router).mount('#app')
  • 在App.vue中发送请求，获取商家数据，并赋值给data中的seller对象，具体如下：
    import Header from './components/header/HeaderVue'
export default {
data() {return {seller: {},}
},
created() {this.getSeller()
},
methods: {getSeller(){this.$http.get('/api/data.json').then((res) => {// axios.get('http://localhost:8080/mock/data.json').then((res) => {console.log(res)if(res.status === 200) {this.seller = res.data.seller}}, err => {console.log(err);});},},
components: { Header
}
}

外部组件

  • 父子组件传值：通过props实现
    • App.vue通过v-bind将seller传给HeaderVue.vue
    • HeaderVue.vue通过以下方式接收seller
    props: {seller: {type: Object}}
  • 将resource目录中的img子目录的所有图片复制到common目录的stylus子目录下
  • 通用样式实现
    • 清除浮动：使用after伪元素（修改common目录的stylus子目录下的base.stylus文件，具体如下：）
    body,htmlline-height: 1font-weight: 200font-family: 'PingFang SC', 'STHeitisc-Light', 'Helvetica-Light', arial, sans-serif.clearfixdisplay: inline-block&:afterdisplay: blockcontent: "."height: 0line-height: 0clear: bothvisibility: hidden@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5).border-1px&::after-webkit-transform: scaleY(0.7)transform: scaleY(0.7)@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2).border-1px&::after-webkit-transform: scaleY(0.5)transform: scaleY(0.5)
    • 根据设备的dpr设置背景图片（修改common目录的stylus子目录下的mixin.stylus文件，具体如下：）
    border-1px($color)position:relative&:afterdisplay:blockposition:absoluteleft:0bottom:0width:100%border-top:1px solid $colorcontent:''border-none()&:afterdisplay: nonebg-image($url)background-image: url($url + "@2x.png")@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)background-image: url($url + "@3x.png")

渲染效果如下：

在这里插入图片描述

详情弹层页

sticky footers布局实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>sticky-footers布局</title><style>body {width: 100vw;height: 100vh;}.top {/* 关键点1：设置内容元素的父容器的min-height: 100%; */min-height: 100%;width: 100%;}.footer {position: relative;width: 100px;height: 32px;/* 关键点3：设置底部元素的margin-top: -64px;，也就是等于内容元素的padding-bottom属性值，从而把底部元素提到内容元素的padding-bottom里 */margin: -64px auto 0 auto;clear: both;font-size: 32px;}.main {margin-top: 64px;/* 关键点2：设置内容元素的padding-bottom: 64px;，为底部元素预留位置 */padding-bottom: 64px;}.clearfix {display: inline-block;}.clearfix:after {display: block;content: ".";height: 0;line-height: 0;clear: both;visibility: hidden;}</style>
</head>
<body><div class="top clearfix"><div class="main">This is the main content.This is the main content.This is the main content.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreetdolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velitesse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odiodignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.This is the main content.This is the main content.This is the main content.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreetdolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velitesse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odiodignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.This is the main content.This is the main content.This is the main content.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreetdolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velitesse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odiodignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</div></div><div class="footer">close</div>
</body>
</html>

渲染效果如下：
在这里插入图片描述

StarVue.vue组件实现及应用（五星评价组件）

  • 在components目录下新建star子目录，并在该子目录下新建StarVue.vue文件，文件内容具体如下：
    <template><div class="star" :class="starType"><span v-for="(itemClass, index) in itemClasses" :key="index" :class="itemClass" class="star-item"></span></div>
</template><script type="text/ecmascript-6">const LENGTH = 5const CLS_ON = 'on'const CLS_HALF = 'half'const CLS_OFF = 'off'export default {data () {return {}},props:{size:{type: Number},score:{type: Number}},computed:{starType(){return 'star-' + this.size;},itemClasses(){let result = [];let score = Math.floor(this.score * 2) / 2;let hasDecimal = score % 1 !== 0;let integer = Math.floor(score);for(let i = 0; i < integer; i++){result.push(CLS_ON);}if(hasDecimal){result.push(CLS_HALF);}while(result.length < LENGTH){result.push(CLS_OFF);}return result;}},methods: {},}
</script><style lang="stylus" rel="stylesheet/stylus">@import "../../common/stylus/mixin.styl";.starz-index: 200font-size: 0px.star-itemdisplay: inline-blockbackground-repeat: no-repeat&.star-48.star-itemwidth: 20pxheight 20pxmargin-right: 22pxbackground-size: 20px 20px&:last-childmargin-right: 0&.onbg-image('star48_on')&.halfbg-image('star48_half')&.offbg-image('star48_off')&.star-36.star-itemwidth: 15pxheight 15pxmargin-right: 16pxbackground-size: 15px 15px&:last-childmargin-right: 0&.onbg-image('star36_on')&.halfbg-image('star36_half')&.offbg-image('star36_off')&.star-24.star-itemwidth: 10pxheight 10pxmargin-right: 3pxbackground-size: 10px 10px&:last-childmargin-right: 0&.onbg-image('star24_on')&.halfbg-image('star24_half')&.offbg-image('star24_off')
</style>
  • 在HeaderVue.vue中引入组件，具体如下：
    import Star from '../star/StarVue.vue'

flex布局实现

Flex 布局教程：语法篇
Flex 布局教程：实例篇

完整的HeaderVue.vue组件内容如下：

<template><div class="header"><div class="content-wrapper"> <div class="avater"><img width="64" :src="seller.avater" alt="商家头像"><!-- <img width="64" src="../../../static/img/01_seller_avater.png" alt="商家头像"> --></div><div class="content"><div class="title"><span class="brand"></span><span class="name">{{seller.name}}</span></div><div class="description">{{seller.description}}/{{seller.deliveryTime}}分钟送达</div><div v-if="seller.supports" class="support"><span class="icon" :class="classMap[seller.supports[0].type]"></span><span class="text">{{seller.supports[0].description}}</span></div></div><div v-if="seller.supports" class="support-count" @click="showDetail()"><span class="count">{{seller.supports.length}}个</span><i class="icon-circle-right"></i></div></div>    <div class="bulletin-wrapper"  @click="showDetail()"><span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span><i class="icon-circle-right"></i></div><div class="background"><img :src="seller.avater" alt="商家头像" width="375" height="132"></div><transition name="fade"><div v-show="detailShow" class="detail"><div class="detail-wrapper clearfix"><div class="detail-main"><h1 class="name">{{seller.name}}</h1><div class="star-wrapper"><Star :size="48" :score="seller.score"></Star></div><div class="title"><div class="line"></div><div class="text">优惠信息</div><div class="line"></div></div><ul v-if="seller.supports" class="supports"><li class="support-item" v-for="(item, i) in seller.supports" :key="i"><span class="icon" :class="classMap[seller.supports[i].type]"></span><span class="text">{{seller.supports[i].description}}</span></li></ul><div class="title"><div class="line"></div><div class="text">商家公告</div><div class="line"></div></div><div class="bulletin"><p class="content">{{seller.bulletin}}</p></div></div></div><div class="detail-close" @click="hideDetail"><i class="icon-cancel-circle"></i></div></div></transition></div>
</template><script >import Star from '../star/StarVue.vue'export default {data() {return {detailShow: false}},props: {seller: {type: Object}},created(){this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']},components:{Star},methods: {showDetail(){this.detailShow = true},hideDetail(){this.detailShow = false}},}
</script><style lang="stylus" rel="stylesheet/stylus">@import "../../common/stylus/mixin.styl";.headerposition: relativeoverflow: hiddencolor:#fffbackground: rgba(7, 17, 27, 0.5).content-wrapperposition relativepadding: 24px 12px 18px 24pxfont-size: 0.avaterdisplay: inline-blockvertical-align: topimgborder-radius: 2px.contentdisplay: inline-blockmargin-left: 16px.titlemargin: 2px 0 8px 0.branddisplay: inline-blockvertical-align: topwidth: 30pxheight: 18pxbg-image('brand')background-size: 30px 18pxbackground-repeat: no-repeat.namemargin-left: 6pxfont-size: 16pxline-height: 18pxfont-weight: bold.descriptionmargin-bottom: 10pxline-height: 12pxfont-size: 12px.support.icondisplay: inline-blockvertical-align: topwidth: 12pxheight: 12pxmargin-right: 4pxbackground-size: 12px 12pxbackground-repeat: no-repeat&.decreasebg-image('decrease_1')&.discountbg-image('discount_1')&.guaranteebg-image('gurantee_1')&.invoicebg-image('invoice_1')&.specialbg-image('special_1').textline-height: 12pxfont-size: 10px.support-countposition: absoluteright: 12pxbottom: 18pxpadding: 0 8pxheight 24pxline-height: 24pxborder-radius: 14pxbackground-color: rgba(0, 0, 0, 0.2)text-align: center.countvertical-align: topfont-size: 10px.icon-circle-rightdisplay: inline-blockmargin-left: 6pxline-height: 24pxfont-size: 10px.bulletin-wrapperposition: relativeheight: 28pxline-height: 28pxpadding: 0 22px 0 12pxwhite-space: nowrapoverflow: hiddentext-overflow: ellipsisbackground: rgba(7, 17, 27, 0.2).bulletin-titledisplay: inline-blockvertical-align: topmargin-top: 8pxwidth: 22pxheight: 12pxbg-image('bulletin')background-size: 22px 12pxbackground-repeat: no-repeat.bulletin-textvertical-align: topmargin:0 4px font-size: 10px.icon-circle-rightposition: absolutefont-size: 10px right: 12pxtop: 8px.backgroundposition: absolutetop: 0left: 0width: 100%height: 100%z-index: -1filter: blur(10px).detailposition: fixedz-index: 100top: 0left: 0width: 100%height: 100%overflow: auto// transition: all 0.5sbackground: rgba(7, 17, 27, 0.8)backdrop-filter: blur(10px)&.fade-enter-active, &.fade-leave-activetransition: all  0.5s&.fade-enter, &.fade-leave-toopacity: 0background: rgba(7, 17, 27, 0.8)// &.fade-transition//     opacity: 1//     background: rgba(7, 17, 27, 0.8)// &.fade-enter, &.fade-leave//     opacity: 0//     background: rgba(7, 17, 27, 0).detail-wrappermin-height: 100%width: 100%.detail-mainmargin-top: 64pxpadding-bottom: 64px.nameline-height: 16pxtext-align: centerfont-size: 16pxfont-weight: 700.star-wrappermargin-top: 18pxpadding: 2px 0text-align-last: center.titledisplay: flexwidth: 80%margin: 28px auto 24px auto.lineflex: 1position: relativetop:-6pxborder-bottom: 1px solid rgba(255, 255, 255, 0.2).textpadding: 0 12pxfont-weight: 700font-size: 14px.supportswidth: 80%margin: 0 auto.support-itempadding: 0 12pxmargin-bottom: 12pxfont-size: 0&:last-childmargin-bottom: 0.icondisplay: inline-blockwidth: 16pxheight: 16pxvertical-align: topmargin-right: 6pxbackground-size: 16px 16pxbackground-repeat: no-repeat&.decreasebg-image('decrease_2')&.discountbg-image('discount_2')&.guaranteebg-image('gurantee_2')&.invoicebg-image('invoice_2')&.specialbg-image('special_2').textline-height: 16pxfont-size: 12px.bulletinwidth: 80%margin: 0 auto.contentpadding: 0 12pxline-height: 24pxfont-size: 12px.detail-closeposition: relativewidth: 32pxheight: 32pxmargin: -64px auto 0 autoclear: bothfont-size: 32px
</style>

渲染效果如下：

在这里插入图片描述

这篇关于外卖APP项目—No.4header组件开发的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/405487。

相关文章

深度解析Java项目中包和包之间的联系

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次，点赞13次，收藏8次。本文详细介绍了Java分层架构中的几个关键包：DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1
阅读更多...
如何在Spring Boot项目中集成MQTT协议

如何在Spring Boot项目中集成MQTT协议

《如何在SpringBoot项目中集成MQTT协议》本文介绍在SpringBoot中集成MQTT的步骤,包括安装Broker、添加EclipsePaho依赖、配置连接参数、实现消息发布订阅、测试接口... 目录1. 准备工作2. 引入依赖3. 配置MQTT连接4. 创建MQTT配置类5. 实现消息发布与订阅
阅读更多...
springboot项目打jar制作成镜像并指定配置文件位置方式

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》：本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文
阅读更多...
SpringBoot开发中十大常见陷阱深度解析与避坑指南

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错？是不是同时用了.properties和.yml？二、换个位置配置就失效？搞清楚加
阅读更多...
怎么用idea创建一个SpringBoot项目

怎么用idea创建一个SpringBoot项目

《怎么用idea创建一个SpringBoot项目》本文介绍了在IDEA中创建SpringBoot项目的步骤,包括环境准备（JDK1.8+、Maven3.2.5+）、使用SpringInitializr... 目录如何在idea中创建一个SpringBoot项目环境准备1.1打开IDEA，点击New新建一个项
阅读更多...
Python中对FFmpeg封装开发库FFmpy详解

Python中对FFmpeg封装开发库FFmpy详解

《Python中对FFmpeg封装开发库FFmpy详解》：本文主要介绍Python中对FFmpeg封装开发库FFmpy,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、FFmpy简介与安装1.1 FFmpy概述1.2 安装方法二、FFmpy核心类与方法2.1 FF
阅读更多...
基于Python开发Windows屏幕控制工具

基于Python开发Windows屏幕控制工具

《基于Python开发Windows屏幕控制工具》在数字化办公时代,屏幕管理已成为提升工作效率和保护眼睛健康的重要环节,本文将分享一个基于Python和PySide6开发的Windows屏幕控制工具,... 目录概述功能亮点界面展示实现步骤详解1. 环境准备2. 亮度控制模块3. 息屏功能实现4. 息屏时间
阅读更多...
springboot项目中整合高德地图的实践

springboot项目中整合高德地图的实践

《springboot项目中整合高德地图的实践》：本文主要介绍springboot项目中整合高德地图的实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一：高德开放平台的使用二：创建数据库（我是用的是mysql）三：Springboot所需的依赖（根据你的需求再
阅读更多...
一文详解如何在idea中快速搭建一个Spring Boot项目

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热
阅读更多...
Python实例题之pygame开发打飞机游戏实例代码

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,：本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2