vue.js电商项目--美丽购物街day01首页制作

vue.js电商项目--美丽购物街day01

首页效果如图
划分目录结构
vue.config.js配置文件别名
App.vue文件
router文件下的index.js
封装网络请求
Home.vue文件
轮播图组件
推荐模块
本周流行
楼层商品模块
滚动组件better-scroll
防抖函数
Home.js网络请求
BackTop返回顶部

首页效果如图

下拉首页

划分目录结构

使用vue-cli3搭建脚手架

vue.config.js配置文件别名

vue-cli3没有vue.config.js,要自行新建此文件

module.exports={configureWebpack: {resolve: {alias: {'assets':'@/assets','common':'@/common','components':'@/components','network':'@/network','views':'@/views'}}}
}

App.vue文件

<template><div id="app">  //keep-alive保存组件状态<keep-alive><router-view/>  <keep-alive/>//底部tabbar<main-tab-bar/></div>
</template><script>import MainTabBar from 'components/content/mainTabbar/MainTabBar.vue'
export default {name: 'App',components:{MainTabBar}
}</script><style lang = "less" scoped>@import "assets/css/base.css";
</style>

router文件下的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'const Home=()=>import('../views/home/Home.vue')
const Category=()=>import('../views/category/Category.vue')
const Cart=()=>import('../views/cart/Cate.vue')
const Profile=()=>import('../views/profile/Profile.vue')
const Detail=()=>import ('../views/detail/Detail.vue')Vue.use(VueRouter)const routes = [{path:'/',redirect:'/home'},{path:'/home',component:Home},{path:'/category',component:Category},{path:'/cart',component:Cart},{path:'/profile',component:Profile},{//携带id跳转到详情页path:'/detail/:iid',component:Detail}
]const router = new VueRouter({routes
})export default router

封装网络请求

network文件夹专门用来处理网络请求相关的文件
request.js文件代码

import axios from'axios'export function request(config){//1.创建axios的实例const instance=axios.create({baseURL:'http://152.136.185.210:8000/api/n3',timeout:5000})//2.axios的拦截器//2.1请求拦截instance.interceptors.request.use(config=>{return config},err=>{})//2.2响应拦截instance.interceptors.response.use(res=>{return res.data},err=>{console.log(err);})//3.发送真正的网络请求return instance(config)}

home.js专门处理首页请求相关的

//home.js文件代码
import{request}from './request'
//获取轮播图推荐模块数据
export function getHomeMultidata(){return request({url:'/home/multidata'})
}//获取楼层区数据
export function getGoodsList(type,page){return request({url:'home/data',params:{type,page}})
}

Home.vue文件

<template><div id="home"><!-- 导航标题 --><nav-bar><div slot="center">美丽购物街</div></nav-bar><tab-control :titles="['流行','新款','精选']" @tabClick="tabClick"class="tab-control2"v-show="isTabFixed"ref="tabControl1" /><scroll class="home-content" :probeType="3" :pullUpLoad="true" @pullingUp="loadMore"ref="scroll"@scroll="contentScroll"><!-- 轮播图 --><home-swiper :banners="banners" @swiperImgLoad="swiperImgLoad"/><!-- 推荐模块 --><home-recommends :recommends="recommends"/><!-- 本周流行 --><home-fashion/><!-- tab模块 --><tab-control :titles="['流行','新款','精选']" @tabClick="tabClick"ref="tabControl2"/><!-- 商品楼层区 --><home-goods-list :goodsList="showGoods"/></scroll><!-- 吸顶 --><back-top v-show="isBackTopShow" @click.native="backClick"/></div>
</template><script>import NavBar from 'components/common/navbar/NavBar'import HomeSwiper from './childcomps/HomeSwiper'import HomeRecommends from './childcomps/HomeRecommends'import HomeFashion from './childcomps/HomeFashion'import TabControl from 'components/content/tabControl/TabControl'import HomeGoodsList from './childcomps/HomeGoodsList'import Scroll from 'components/common/scroll/Scroll'import BackTop from 'components/common/backTop/BackTop'import {getHomeMultidata,getGoodsList} from 'network/home.js'import {debounce} from 'common/utils.js'export default {name: 'Home',components: {NavBar,HomeSwiper,HomeRecommends,HomeFashion,TabControl,HomeGoodsList,Scroll,BackTop,},data () {return {banners:[],recommends:[],goodsList:{'pop':{page:1,list:[]},'new':{page:1,list:[]},'sell':{page:1,list:[]},},currentType:'pop',//控制吸顶图片的显示和隐藏isBackTopShow:false,isTabFixed:false,tabOffsetTop:0}},created() {this.getHomeMultidata()this.getHomeDate('pop')this.getHomeDate('new')this.getHomeDate('sell')},computed: {showGoods(){return this.goodsList[this.currentType].list}},mounted() {//监听goodsitem图片的加载完成,使用防抖函数const refresh=debounce(this.$refs.scroll.refresh,300)this.$bus.$on('itemImageLoad',()=>{refresh()})},methods: {// 事件监听相关的方法tabClick(index){if(index===0){this.currentType='pop';}else if(index===1){this.currentType='new';}else{this.currentType='sell';}this.$refs.tabControl1.currentIndex=indexthis.$refs.tabControl2.currentIndex=index},//上拉加载更多事件loadMore(){this.getHomeDate(this.currentType)},//监听滚动到某个位置显示吸顶图片contentScroll(position){this.isBackTopShow=-(position.y)>1000?true:falsethis.isTabFixed=-(position.y)>=this.tabOffsetTop?true:false},//点击返回顶部backClick(){this.$refs.scroll.scrollTo(0,0,500)},//轮播图加载了第一张图片后才计算tabcontrol的offsettopswiperImgLoad(){this.tabOffsetTop=this.$refs.tabControl2.$el.offsetTop},//------------------网络请求相关的方法-----------------------//请求轮播图和推荐模块数据getHomeMultidata(){getHomeMultidata().then(res=>{this.banners=res.data.banner.listthis.recommends=res.data.recommend.list})},//请求楼层区商品数据getHomeDate(type){getGoodsList(type,this.goodsList[type].page).then(res=>{const goodsList=res.data.listthis.goodsList[type].list.push(...goodsList)this.goodsList[type].page+=1//完成上拉加载更多this.$refs.scroll.finishPullup()})},},
}
</script><style lang = "less" scoped>.home-content{height: calc(100vh - 44px);position: relative;overflow: hidden;}
.tab-control2{position: fixed;top: 44px;left: 0;right: 0;z-index: 99;
}
</style>

nav组件

<template><div class="nav-bar"><div class="left"><slot name="left"></slot></div><div class="center"><slot name="center"></slot></div><div class="right"><slot name="right"></slot></div></div>
</template><script>
export default {name: 'NavBar',
}
</script><style lang = "less" scoped>
.nav-bar{position: relative;display: flex;height: 44px;line-height: 44px;text-align: center; background-color: var(--color-tint);font-weight: 700;color: #fff;
}
.left,
.right{flex: 1;
}
.center{flex: 3;
}
</style>

轮播图组件

使用了vue-awesome-swiper插件

<template><div class="home-swiper"><swiper :options="swiperOption"  ref="mySwiper" v-if="banners.length!=0"><swiper-slide v-for="(item,index) in banners" :key="index" ><img :src="item.image" alt="" @load="swiperImgLoad"/></swiper-slide><!-- 常见的小圆点 --><div class="swiper-pagination" v-for="(item,index) in banners" :key="index" slot="pagination" ></div>
</swiper></div>
</template><script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
require('vue-awesome-swiper/node_modules/swiper/dist/css/swiper.min.css')
export default {name: 'HomeSwiper',components:{swiper,swiperSlide},props:{banners:{type:Array,default(){return []}}},data() {return {swiperOption: {//分页器设置pagination: {el: ".swiper-pagination",clickable: true,type: "bullets"},autoplay: {delay: 1500,stopOnLastSlide: false,/* 触摸滑动后是否继续轮播 */disableOnInteraction: false},//滑动速度speed: 800,//滑动方向direction: "horizontal",},isLoad:false}},methods: {swiperImgLoad(){if(!this.isLoad){this.$emit('swiperImgLoad')this.isLoad=true}}},
}
</script><style lang = "less">
.home-swiper{height: 170px;overflow: hidden;img{width: 100%;}.swiper-pagination-bullet-active{background:#D43E2E;}
}
</style>

本周流行

<template><div class="home-recommends"><div class="recommends-item" v-for="(item,index) in recommends" :key="index" ><a :href="item.link"><img :src="item.image" alt=""><div>{{item.title}}</div></a></div></div>
</template><script>
export default {name: 'HomeRecommends',props:{recommends:{type:Array,default(){return[]}}}
}
</script><style lang = "less" scoped>
.home-recommends{display: flex;padding: 10px 0 30px;border-bottom: 10px solid#eee;.recommends-item{flex: 1;text-align: center;img{width: 80px;height: 80px;margin-bottom: 10px;}}
}
</style>

楼层商品模块

<template><div class="home-goods-list"><home-goods-list-item v-for="(item,index) in goodsList" :key="index" :goods="item"></home-goods-list-item></div>
</template><script>
import HomeGoodsListItem from './HomeGoodsListItem'
export default {name: 'HomeGoodsList',components:{HomeGoodsListItem},props:{goodsList:{type:Array,default(){return[]}}}
}
</script><style lang = "less" scoped>
.home-goods-list{padding: 8px;display: flex;flex-wrap: wrap;justify-content: space-between;
}
</style>

<template><div class="goods-list-item" @click="toDetailPage"><img :src="showImage" alt="" @load="imageLoad"><div class="goods-info"><p>{{goods.title}}</p><span class="goods-price">¥{{goods.price}}</span><i class="iconfont icon-shoucang"></i><span>{{goods.cfav}}</span></div></div>
</template><script>
export default {name: 'HomeGoodsListItem',props:{goods:{type:Object,default(){}}},methods: {//监听图片的加载完成imageLoad(){this.$bus.$emit('itemImageLoad')},//点击跳转到详情页toDetailPage(){this.$router.push('/detail/'+this.goods.iid)}},computed: {showImage(){return this.goods.image || this.goods.show.img}}
}
</script><style lang = "less" scoped>
.goods-list-item{width: 148px;margin-bottom: 10px;img{width: 100%;}.goods-info{font-size: 12px;text-align: center;p{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin: 5px 0;}.goods-price{color: var(--color-high-text);}.iconfont{margin-left: 5px;}}
}
</style>

滚动组件better-scroll

<template><div ref="wrapper"><div class="content"><slot></slot></div></div>
</template><script>
import BScroll from 'better-scroll'
export default {name: 'Scroll',components:{BScroll},props:{probeType:{type:Number,default:3},scrollX:{type:Boolean,default:false},scrollY:{type:Boolean,default:true},pullUpLoad:{type:Boolean,default:false}},mounted() {// 也可以使用nextTick来初始化setTimeout(() => {this.initScroll();}, 20);},methods: {//初始化initScroll() {if (!this.$refs.wrapper) {return;}//创建scroll对象this.scroll=new BScroll(this.$refs.wrapper,{click:true,probeType:this.probeType,pullUpLoad:this.pullUpLoad})//监听滚动的位置this.scroll.on('scroll',(position)=>{this.$emit('scroll',position)})//监听滚动到底部if(this.pullUpLoad){this.scroll.on('pullingUp',()=>{this.$emit('pullingUp')})}  },// 代理better-scroll的finishPullup方法finishPullup(){this.scroll&&this.scroll.finishPullUp()},// 代理better-scroll的refresh方法refresh() {this.scroll && this.scroll.refresh();},scrollTo(x,y,time){this.scroll&&this.scroll.scrollTo(x,y,time)}}
}
</script><style lang = "less" scoped></style>

防抖函数

//封装防抖函数
export function debounce(func,delay){let timer=nullreturn function(...args){if(timer) clearTimeout(timer)timer=setTimeout(() => {func.apply(this,args) }, delay);}
}

Home.js网络请求

import{request}from './request'
//获取轮播图推荐模块数据
export function getHomeMultidata(){return request({url:'/home/multidata'})
}//获取楼层区数据
export function getGoodsList(type,page){return request({url:'home/data',params:{type,page}})
}

BackTop返回顶部

<template><div class="back-top"><img src="~assets/img/common/top.png" alt=""></div>
</template><script>
export default {name: 'BackTop',
}
</script>
<style lang = "less" scoped>
.back-top{position: fixed;right: 10px;bottom: 60px;img{width: 43px;height: 43px;}
}
</style>

vue.js电商项目--美丽购物街day01首页制作相关推荐

[Vue]实战---电商项目(项目的概述及初始化)【一】
项目实战项目目录项目概述项目初始化登录/退出功能主页布局用户管理模块权限管理模块分类管理模块参数管理模块商品管理模块订单管理模块数据统计模块项目概述电商项目基本业务概述电 ...
Vue+ElementUI电商项目（一）
1.电商业务概述客户使用的业务服务:PC端,小程序,移动web,移动app 管理员使用的业务服务:PC后台管理端. PC后台管理端的功能:管理用户账号(登录,退出,用户管理,权限管理),商品管理(商 ...
【vue】【开源】vue开源电商项目hello-mall嗨喽商城
开源地址 https://github.com/zengxiaochao/hello-mall 觉得还行的小伙伴麻烦给个star,鼓励一下,非常感谢. hello-mall嗨喽商城基于Vue+Ele ...
前端学习之vue+element-ui电商项目（九）订单管理
文章目录 0. 准备工作 1.界面样式 1.1 界面布局 1.2 导航区 2.订单数据列表 2.1 界面样式 2.2 数据添加 2.3 方法实现 3.分页区 3.1 界面样式 3.2 数据添加 3.3 ...
前端学习之vue+element-ui电商项目（八）商品信息添加
文章目录 0. 准备工作 1.界面样式 1.1 界面布局 1.2 导航区视图 2.卡片视图区域 2.1 警示条 2.1.1 步骤条 3. 卡片视图的表单 3.1 tab 栏框架 3.1.2 tab 栏 ...
Java项目:网上电商项目(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
源码获取:博客首页 "资源" 里下载! 一.项目简述本系统功能包括: 一款基于Springboot+Vue的电商项目,前后端分离项目,前台后台都有,前台商品展示购买,购物车分类, ...
[Vue.js]实战 -- 电商项目(一)
项目目录项目概述项目初始化登录/退出功能主页布局用户管理模块权限管理模块分类管理模块参数管理模块商品管理模块订单管理模块数据统计模块项目概述电商项目基本业务概述电商后台管理 ...
vue尚品汇商城项目-day00【项目介绍：此项目是基于vue2的前台电商项目和后台管理系统】
文章目录本人其他相关文章链接项目介绍:此项目是基于vue2的前台电商项目和后台管理系统此项目为在线电商Web App (SPA) 包括首页, 搜索列表, 商品详情, 购物车, 订单, 支付, 用 ...
vue移动电商java_《Vue.js+Koa2移动电商实战》总结
跟着技术胖的教学文档,用Vue.js+Koa2+MongoDB技术栈大致上完成了指定的移动电商项目.虽然文档中有些许错误,但总体来说,里面的涵盖的内容比较广,讲得也比较透彻,对于新手来说十分友好.可以 ...

vue.js电商项目--美丽购物街day01首页制作

vue.js电商项目--美丽购物街day01

首页效果如图

划分目录结构

vue.config.js配置文件别名

App.vue文件

router文件下的index.js

封装网络请求

Home.vue文件

轮播图组件

推荐模块

本周流行

楼层商品模块

滚动组件better-scroll

防抖函数

Home.js网络请求

BackTop返回顶部

vue.js电商项目--美丽购物街day01首页制作相关推荐

最新文章

热门文章