《vue教程课件》-《vue教程课件》-9综合案例开发1

综合案例开发1-万家鲜果APP本章运用前面所学知识进行案例开发，内容包括vue-cli初始化项目目录，vant插件的使用、创建router对象及配置路由，在项目添加路由及localStorage的使用等。通过“万家鲜果APP”案例学习Vue开发单页面应用。学习目标：掌握项目的创建方法了解项目的整体结构掌握项目中代码的实现掌握项目的打包及发布9.1项目前期准备工作前面学习vue数据绑定、Vue组件、Vue路由、vuex以及开发相关的基础知识，本章将利用所学知识进行一个小型案例开发，通过实践项目的学习，加深对Vue前端开发有更深刻的认识。本章选用“万家鲜果APP”前端案例，在这个案例中，所有数据均来自本地，不涉及服务器端及第三方数据，这样的好处是将更多的精力集中到前端开发上。项目共五个页面，分别是首页、商品页、购物车、订单页及我的页面。如图9-1-9-5所示。图9-1万家水果-首页图9-2万家水果-商品页图9-3万家水果--购物车页面图9-4万家水果-订单页面图9-5万家水果-我的页面9.1.1准备数据常用网站APP分为前台和后台，前台用来展示商品，购买商品和订单处理，后台用来提供API接口。本项目由于简单，项目所需数据由本地提供，数据文件为data.js，存放在项目的src目录下，内容如下：exportdefault{goods:[{name:'orange',title:'四川爱媛橙子',text:'四川爱媛38号果冻橙10斤爱媛橙子新鲜水果当季时令应季甜橙现摘手剥桔橙整箱桔橘子',address:'四川奉节',type:'包邮',price:'120.00',onlinePrice:'98.00',cover:require("@/assets/img/cz1.png"),poster:require("@/assets/img/cz2.png"),color:'#e8e8e8',images:[require("@/assets/img/cz1.png"),require("@/assets/img/cz2.png"),require("@/assets/img/cz3.png"),require("@/assets/img/cz4.png")],thumbnails:[require("@/assets/img/cz1.png"),require("@/assets/img/cz2.png"),require("@/assets/img/cz3.png"),require("@/assets/img/cz4.png")]},]}9.1.2项目创建及插件安装打开命令行工具，切换到需要创建项目的路径，使用vuecreate命令创建项目，它会自动创建新的文件夹，根据选项进行配置所需文件、目录、配置和依赖文件，实现快速创建项目。例如，在e:\vue\chat9目录下创建fresh项目，命令如下：E:\vue\chat9>vuecreatefresh(1)出现如图9-6，提示用户选取一个预设，用户可根据需要进行选择，此处选取手动配置，并按回车。图9-6选择预设方式在图9-6中，根据项目需要进行选取。图9-6手动选择特性手动选择相关选项，程序会询问一些详细配置，用户可根据需要配置，如图9-7所示。图9-7相关选项配置项目创建完成后，执行以下命令进入项目目录，并启动项目：cdfreshnpmrunserve若出现如图9-8所示，说明vue项目创建成功。图9-8创建完成项目中为了搭出风格统一的页面，提升开发效率，因此需要安装vant插件。在命令行执行以下命令：npmivant@next-S在浏览器中打开http://localhost:8080,生成页面如图9-9所示。图9-9vue项目初始页面9.1.3项目目录根据项目功能，需要在fresh/src/views目录下创建5个页面组件文件,分别是首页（Index.vue)、商品页(Goods.vue)、购物车(Cart.vue)、订单页(Order.vue)及我的(About.vue)。需要在fresh/src/components目录下创建3个公共组件文件，分别是头部组件件(Header.vue),轮播组件(Swiper.vue)及底部导航组件Footer.vue)。需要在fresh/src/assets目录下创建img目录存放项目图片文件，项目结构如图9-10所示。图9-10改造后的项目结构9.2公共组件的设计与制作项目中5个页面中都包括头部、轮播图及导航，为了减少重复开发，提高工作效率。我们把头部、轮播图及导航制作为公共组件。9.2.1头部组件头部组件中用来显示当前页面的标题，如图9-11所示。图9-11头部组件头部组件(Header.vue)代码如下：<template><divid="header"><h4>万家水果--{{$route.meta.title}}</h4></div></template><script>exportdefault{name:"Header"};</script><style>#header{height:30px;line-height:30px;background-color:rgb(236,165,10);color:#fff;border-bottom:yellow2pxsolid;}</style>代码中第3行{{$route.meta.title}}来自于fresh/src/router/index.js文件中的routes选项。9.2.2轮播图组件轮播图通过丰富的动画效果，给浏览者提供视觉新鲜感，同时给提供方起到宣传效果。本项目的轮播图组件采用vant组件实现。如图9-12所示。图9-12轮播图组件首先，在main.js文件中引入以下代码：import'vant/lib/index.css';import{Swipe,SwipeItem}from'vant';createApp(App).use(Swipe).use(SwipeItem)其次，在fresh/src/components/Swiper.vue文件编写以下代码。<template><divid="swiper"><van-swipe:autoplay="3000"><van-swipe-itemv-for="(image,index)inimages":key="index"><img:src="image"/></van-swipe-item></van-swipe></div></template><script>exportdefault{data(){return{images:[require("../assets/img/swiper1.png"),require("../assets/img/swiper2.png"),require("../assets/img/swiper3.png"),require("../assets/img/swiper4.png"),],};},};</script><style>.swiper{width:100%;border:1pxsolid#ccc;}img{width:100%;}</style>9.2.3导航组件导航组件实现页面之间的跳转(路由)，效果如图9-13所示。图9-13导航组件首先，在main.js文件中引入以下代码：import{NavBar,Tabbar,TabbarItem}from'vant';createApp(App).use(NavBar).use(Tabbar).use(TabbarItem)其次，在fresh/src/components/Footer.vue文件中编写以下代码。<template><divid="header"><van-tabbarv-model="active"><van-tabbar-itemname="home"icon="home-o"><router-linkto="/index">首页</router-link></van-tabbar-item><van-tabbar-itemname="search"icon="search"><router-linkto="/cart">购物车</router-link></van-tabbar-item><van-tabbar-itemname="friends"icon="friends-o"><router-linkto="/order">订单</router-link></van-tabbar-item><van-tabbar-itemname="setting"icon="setting-o"><router-linkto="/about">我的</router-link></van-tabbar-item></van-tabbar></div></template><script>exportdefault{data(){return{active:"home",};},};</script><stylelang="scss"scoped></style>代码中的<router-linkto=””></router-link>实现路由导航，to属性指向fresh/src/router/index.js文件中的routes选项。9.3main.js、App.vue及router/index.js项目文件在初始化的Vue项目中，我们最先接触到的文件是main.js，App.vue，router/index.js，Main.js是项目的入口文件，app.vue是根组件文件，router/index.js文件是路由存储文件，这三个文件是项目的基本文件，其它文件会依赖这些文件。9.3.1main.jsMain.js文件是项目的入口文件，项目中所有的页面都会加载main.js,它的主要作用有(1)实例化Vue、(2)放置项目中经常会用到的插件和CSS样式。例如：网络请求插件:axios和vue-router、vant插件、(3)存储全局变量。本项目中main.js的代码如下：import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'import'vant/lib/index.css';import{Button}from'vant';import{Swipe,SwipeItem}from'vant';import{NavBar,Tabbar,TabbarItem}from'vant';createApp(App).use(store).use(router).use(Button).use(Swipe).use(SwipeItem).use(NavBar).use(Tabbar).use(TabbarItem).mount('#app')9.3.2App.vueapp.vue文件是vue项目的主组件，页面入口文件,可以认为是网站首页，所有页面都是在App.vue下进行切换的，是整个项目的关键，app.vue负责构建定义及页面组件归集。本项目中App.vue代码如下：<template><divid="nav"><Header/><Swiper/><router-view/><Footer/></div></template><script>//引入公共组件importHeaderfrom"@/components/Header.vue";importSwiperfrom"@/components/Swiper.vue";importFooterfrom"@/components/Footer.vue";exportdefault{//注册组件components:{Header,Swiper,Footer,},};</script><stylelang="scss">#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;}#nav{a{font-weight:bold;color:#2c3e50;&.router-link-exact-active{color:#42b983;}}}</style>代码中分别引入三个公共组件，<router-view/>用来显示路由信息。

9.3.3router/index.jsVue-router用来实现vue中页面之间的跳转（路由）,主要包括route(一条路由）、routes（一组路由）、router(路由机制）、<router-link>(路由导航)及<router-view>（路由显示）。router/index.js文件用来定义router及routes。本项目中index.js文件代码如下：import{createRouter,createWebHistory}from'vue-router'constroutes=[{path:'/',redirect:'/index'},{path:'/index',name:'Index',component:()=>import('../views/Index.vue'),meta:{title:'首页'}},{path:'/goods',name:'Goods',component:()=>import('../views/Goods.vue'),meta:{title:'商品'}},{path:'/cart',name:'Cart',component:()=>import('../views/Cart.vue'),meta:{title:'购物车'}},{path:'/order',name:'Order',component:()=>import('../views/Order.vue'),meta:{title:'订单'}},{path:'/about',name:'About',component:()=>import('../views/About.vue'),meta:{title:'我的'}}]constrouter=createRouter({history:createWebHistory(process.env.BASE_URL),routes})exportdefaultrouter9.4首页组件(Index.vue)首页组件主要用来展示商品简要信息，方便用户选择商品，如图9-14所示。图9-14首页组件首页组件Index.vue文件代码如下：<template><divid="index"><liv-for="(item,index)ingoods":key="index"@click="goodsPage(item)"><img:src="item.cover"/><p>{{item.title}}</p><p>原价：<spanclass="price">{{item.price}}</span><br/>爱心价：<spanclass="onlinePrice">{{item.onlinePrice}}</span></p></li></div></template><script>importdatafrom"@/data";exportdefault{computed:{goods(){returndata.goods;},},methods:{goodsPage(item){this.$router.push({path:"goods",query:{name:}});},},};</script><stylescoped>#index{display:flex;flex-wrap:wrap;}li{justify-content:space-around;padding:2px;box-sizing:border-box;width:50%;list-style:none;border:2pxsolid#ccc;border-radius:5px;margin-bottom:2px;}liimg{height:156px;}.price{color:#ccc;text-decoration:line-through;}.onlinePrice{color:red;}</style>代码中第2行~第11行通过v-for展示商品图片、商品名称、商品价格，数据来自本地数据文件data.js。第15行引入本地数据文件data.js,第17行~第20行通过计算属性获取商品信息goods。第20行~第26行通过goodsPage(item)方法跳转到商品页。9.5商品页组件(Goods.vue)从首页中单击需要的商品，进入商品页，商品页组件分为上下两部分，上半部分为商品图片，如图9-15所示，下半部分展示商品信息、“立即购买”及“加入购物车”按钮，如图9-16所示。图9-15商品页组件上半部分图9-16商品页组件下半部分9.5.1商品页组件(Goods.vue)结构代码<template><divclass="container"><!--上半部分--><divclass="up"><divclass="actor"><img:src="actorC"/></div><ulclass="thumbnail-list"><liclass="thumbnail-item"v-for="(thumbnail,index)inthumbnails":key="index"@click="toggleActor(index)"><imgclass="thumbnail":src="thumbnail"/></li></ul></div><!--下半部分--><divclass="down"><h2>{{item.text}}</h2><divclass="banner-price"><pclass="params-item"><spanclass="params-label">价格</span><spanclass="price-delete">￥{{item.price}}</span></p><pclass="params-item"><spanclass="params-label">促销价</span><spanclass="price-strong">￥{{item.onlinePrice}}</span></p><pclass="params-item"><spanclass="params-label">发货地</span>{{item.address}}<br/><spanclass="params-label">快递方式</span>{{item.type}}</p></div><divclass="banner-operate"><spanclass="btn-operatebtn-buy"@click="addInOrder">立即购买</span><p></p><spanclass="btn-operatebtn-cart"@click="addInCart"><iclass="fafa-shopping-cart"></i> 加入购物车</span></div><br/><divclass="banner-state"><p><spanclass="params-label">服务承诺</span><spanclass="params-labeldeep-gray">正品保证</span><spanclass="params-labeldeep-gray">极速退款</span><spanclass="params-labeldeep-gray">赠运费险</span></p></div></div></div></template>结构代码中第5行~第7行用来显示大图，第8行~第17行代码用来显示缩略图，单击缩略图可切换大图。单击“立即购买”切换至订单页面，单击“加入购物车”切换至网盘车页面。9.5.2商品页组件(Goods.vue)逻辑代码商品页组件中逻辑代码如下：<script>importdatafrom"@/data.js";exportdefault{name:"Goods",data(){return{actorIndex:0,//初始缩略图quantity:1,//初始数据cart:[],//购物车order:[],//订单};},mounted(){this.getStore();},computed:{//查看的商品item(){returndata.goods.find((item)=>===this.$);},//缩略图thumbnails(){returnthis.item.thumbnails;},//商品图片actorC(){returnthis.item.images[this.actorIndex];},result(){return{title:this.item.title,cover:this.item.cover,text:this.item.text,type:this.item.type,price:this.item.onlinePrice,quantity:this.quantity,};},},methods:{//读取本地存储购物车商品getStore(){letgsStore=window.localStorage.getItem("gsStore");if(gsStore){gsStore=JSON.parse(gsStore);this.cart=gsStore.cart||[];this.order=gsStore.order||[];}},//设置本地存储购物车setStore(){letgsStore={cart:this.cart,order:this.order,};window.localStorage.setItem("gsStore",JSON.stringify(gsStore));},//改变缩略图toggleActor(index){this.actorIndex=index;},//检查数量checkQuantity(){if(this.quantity<1||isNaN(this.quantity)){this.quantity=1;}},//添加到购物车addInCart(){this.cart.push(this.result);this.setStore();},//添加到订单addInOrder(){this.order.push(this.result);this.setStore();},},};</script>首先通过getStore()方法实现读取本地存储window.localStorage.getItem(gsStore)中的数据并加入mounted生命周期钩子函数。由于本地存储中是字符串，所示读取时，需要用JSON.parse()转换为对象，写入时需要用JSON.stringify()把对象转换为字符串。setStore()方法实现写入本地存储中windos.localStorage.setItem("gsStore",JSON.stringify(gsStore))。计算属性item()计算选定商品，thumbnails()属性计算选定商品的缩略图，actorC()属性计算当前选定的缩略图，result()属性计算选定商品的相于属性。toggleActor()方法改变缩略图，addInCart()方法实现加入购物车功能，addInOrder()方法实现立即购买功能。9.6购物车组件(Cart.vue)购物车组件用来展示已选购的商品，可以添加或减少购买数据，同时页面中可以实现结算或删除功能，如图9-17所示。图9-17购物车组件9.6.1购物车组件(Cart.vue)结构代码<template><divclass="content"><tableclass="table-goods"v-if="cart.length"><thead><tr><thclass="col01"><inputtype="checkbox"class="checkbox"v-model="isAllChecked"@change="onAllCheckChanged"/>商品</th><thclass="col02">单价</th><thclass="col03">数量</th><thclass="col04">金额</th><thclass="col05">操作</th></tr></thead><tbody><trv-for="(item,index)incart":key="index"><tdclass="col01one-line":title="item.text"><inputtype="checkbox"class="checkbox"v-model="checkedArray[index]"@change="onCheckChanged"/>{{item.title}}</td><tdclass="col02">￥{{item.price}}</td><tdclass="col03"><inputclass="ipt-quantity"type="number"v-model="item.quantity"@change="toggleQuantity"min="1"/></td><tdclass="col04">￥{{item.price*item.quantity}}</td><tdclass="col05"><spanclass="btn-text"@click="drop(index)">删除</span></td></tr></tbody></table><divclass="placeholder"v-else>购物车里还没有东西哦！快去添加吧~~</div><divclass="banner-pay"><spanref="cartNum"></span><span>￥ {{getTotalPrice()}}</span>    <spanclass="btn-pay"@click="payAll">结  算</span></div></div></template>结构中通过v-if和v-else指令实现已购物或未购物的展示。通过“复选框”实现是否结算，通过“数字框”改变商品数量，通过“删除”按钮取消已选购商品，通过“结算”把选购商品加入订单中。9.6.2购物车组件(Cart.vue)逻辑代码<script>exportdefault{name:"Cart",data(){return{isAllChecked:false,checkedArray:[],cart:[],order:[],};},mounted(){this.$nextTick(function(){this.getStore();});},methods:{//读取本地存储getStore(){letgsStore=window.localStorage.getItem("gsStore");if(gsStore){gsStore=JSON.parse(gsStore);this.cart=gsStore.cart||[];this.order=gsStore.order||[];}},//设置本地存储setStore(){letgsStore={cart:this.cart,order:this.order,};window.localStorage.setItem("gsStore",JSON.stringify(gsStore));},//计算总价getTotalPrice(){letbalance=this.cart.filter((item,index)=>this.checkedArray[index]);returnbalance.reduce((sum,item)=>sum+item.price*item.quantity,0);},//复选框改变onCheckChanged(){this.checkedArray.every((item)=>item)&&(this.isAllChecked=true);this.checkedArray.some((item)=>!item)&&(this.isAllChecked=false);},//全选与取消onAllCheckChanged(){this.checkedArray.fill(this.isAllChecked);},//数量统计toggleQuantity(){this.setStore();},//结算payAll(){letinCart=[];this.checkedArray.forEach((item,index)=>{item?this.order.push(this.cart[index]):inCart.push(this.cart[index]);});this.cart=inCart;this.setCheckedArray();this.setStore();},},};</script>代码中mounted生命周期钩子函数调用getStore()计算属性加载已选购的商品，调用setCheckedArray()计算属性设置未选定已选定的商品。方法onCheckChanged()实现已选购商品是否结算，方法onAllCheckChanged()实现已选商品全部选定或取消，方法getTotalPrice()实现要结算商品的费用。方法drop(index)取消已选购的商品，方法payAll()实现结算并把已结算商品添加至已购订单中。9.7订单组件(order.vue)订单组件用来展示已付款后的订单信息或提示无订单，如图9-18所示。图9-18订单组件9.7.1订单组件(order.vue)结构代码<template><divclass="content"><tableclass="table-goods"v-if="order.length"><thead><tr><thclass="col01">商品</th><thclass="col02">单价</th><thclass="col03">数量</th><thclass="col04">金额</th><thclass="col05">操作</th></tr></thead><tbody><trv-for="(item,index)inorder":key="index"><tdclass="col01one-line":title="item.text"><imgclass="thumbnail-goods":src="item.cover"style="width:50px"/> </td><tdclass="col02">￥{{item.price}}</td><tdclass="col03">{{item.quantity}}</td><tdclass="col04">￥{{item.price*item.quantity}}</td><tdclass="col05"><spanclass="btn-text"@click="drop(index)">退款</span></td></tr></tbody></table><divclass="placeholder"v-else>当前并无订单！快去下单吧~~</div></div></template>结构中通过v-if和v-else指令实现订单或当前无订单的展示。通过“退款”按钮实现退款功能。9.7.2订单组件(order.vue)逻辑代码<script>exportdefault{name:"Order",data(){return{order:[],cart:[],};},mounted(){this.$nextTick(function(){this.getStore();});},methods:{//获取本地存储getStore(){letgsStore=window.localStorage.getItem("gsStore");if(gsStore){gsStore=JSON.parse(gsStore);this.cart=gsStore.cart||[];this.order=gsStore.order||[];}},//设置本地存储setStore(){letgsStore={cart:this.cart,order:this.order,};window.localStorage.setItem("gsStore",JSON.stringify(gsStore));},//退款drop(index){this.order.splice(index,1);this.setStore();},},};</script>代码中通过drop()方法实现退款，删除订单功能。9.8我的（about.vue)组件我的组件实现带校验功能的注册表单，如图9-19所示。图9-19我的组件9.8.1我的组件(about.vue)结构代码<template><div><divclass="login-box"><h3class="title">注册</h3><formmethod="post"><divclass="user-email"><inputtype="email"v-model="email"id="email"placeholder="请输入邮箱账号"/></div><divclass="user-pass"><inputtype="password"v-model="password"id="password"placeholder="设置密码"/></div><divclass="user-pass"><inputtype="password"v-model="passwordRepeat"id="passwordRepeat"placeholder="确认密码"/></div><divclass="user-pass"><inputtype="text"v-model="tel"id="tel"placeholder="请输入手机号"/></div></form><divclass="login-links"><labelfor="reader-me"><inputid="reader-me"type="checkbox"v-model="checked"/>点击表示您同意商城《服务协议》</label></div><divclass=reg>