首页 > 其他分享> 文章详细

Vue项目之硅谷外卖

2021-06-26 14:31:28 阅读：185 来源： 互联网

标签：npm Vue const tops scrollY 外卖硅谷列表 scs

Vue项目之硅谷外卖

1、API重要概念：

API接口、对接口、联调、前后台分离、mock数据

2、测试编码

npm run dev —在内存中将我们的项目进行编译打包，并且还打开了浏览器

访问：http://localhost:8080

编码，自动编译打包（HMR），查看效果

3、打包发布

npm run bulid打包生成的资源在dist里面

npm i -g serve

serve dist

访问：http://loaclhost:5000

4、图片Base64：样式中引用的小图片，在webpack打包会自动处理转化为样式内部的Base64编码字符串

5、项目源码目录设计

src

api 与后台交互模块文件夹

common通用资源文件夹，如：fonts/img/stylus

components非路由组件文件夹

filters自定义过滤器模块文件夹

mock模拟数据接口文件夹

pages路由组件文件夹

router路由器组件文件夹

store状态管理文件夹

App.vue应用组件

main.js入口JS

6、安装stylus依赖包

npm i stylus stylus-loader --save-dev

编写样式：

7、显示省略号

.ellipsis{

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

8、当点击切换的时候，自动添加on类名

<div @click='goTo('/search')' class='guide_item' :class='{on : '/search' === $route.path}'></div>
goTo(path){
   this.$router.replace(path)
}

9、界面更新就立即创建swiper对象

this是原型对象，里面有个$nextTick，这个回调函数就是一旦完成界面更新，立即调用;

this.$nextTick(()=>{
//创建一个Swiper实例对象，来实现轮播
new Swiper('.swiper-container',{
loop:true//可以循环轮播
//如果需要分页器
pagination:{
el:'.swiper-pagination',}
  })
})

10、actions的参数问题

里面有个系统自动注入的参数context里面有两个属性一个是state,commit；

第二个参数即为我们传递过来的参数；

11、当数据没有请求回来的时候，页面显示问题

在数据没有之前，使用背景图片去代替，利用v-if与v-else来实现，为了用户更好的体验

12、星星评分显示组件封装

props:{
 score:Number,
 size:Number
}
computed:{
//算法：3.2：3+0+2；3.5：3+1+1
startClasses(){
const {score} = this;
const scs = [];
//向scs中添加n个on；
const scoreInteger = Math.floor(score);
for(let i = 0; i<scoreInteger;i++ ){
scs.push(on)
}
//向scs中添加0/1个half
if(score*10-scoreInteger*10 >=5){
scs.push(hale)
}
//向scs中添加n个off
while(scs.length < 5){
  scs.pusk(off)
    }
  }
}
<div class='star' :class='"start-"+size'>
<span class='start-item on'></span>
<span class='start-item on'></span>
<span class='start-item on'></span>
<span class='start-item half'></span>
<span class='start-item off'></span>
</div>

//循环遍历
<div class='star' :class='"start-"+size'>
<span class='start-item' v-for='(sc,index) in startClasses' :class='sc' :key='index'></span>
</div>

13、登录功能

export default{
data(){
return {
loginWay:true,//true代表短信登录，false代表密码登录}
time:0

}}
//固定的类名，只是确定要不要
<div :class='{on:loginWay}' @click='loginWay = true'>短信登录</div>
<div :class='{on:!loginWay}' @click='loginWay = false'>密码登录</div>

//在标签中添加一个类名，这个类名有或者没有，根据条件来判断的
<button
:class='{right_phone:rightPhone}'
:disabled='!right_phone'
@click.prevent='getCode'>{{time?`已发送（${time}s）`:'获取验证码'}}
</button>
methods:{
//启动倒计时
getCode(){
//如果当前没有计时
if(!this.time){
 this.time = 30;
  let intervalId =  setInterval(()=>{
    this.time --;
    if(this.time==0) {
     clearInterval(intrvalId)
    }
    },1000) 
  }
  //发送请求（向指定手机号发送验证码短信）
 } 
}

14、模板中显示数据的来源

data:自身的数据（内部改变）

props:外部传入的数据（外部改变）

computed:根据data/props别的computed/state/getters

15、动态一次性图形验证码

//每次指定的src要不一样

event.target.src = ‘http://local:4000/captcha?time=’+Date.now()；//在这里携带参数的含义是什么？

16、发送短信验证码

容联.云通信（注册、登录）

17、当前分类（外卖点餐页面）

(1)功能：

实现两个列表滑动；

当滑动右侧列表时，更新当前分类；

当点击某个分类项，右侧列表滑动到对应的位置；

（2）分析：

类名：current标识当前分类

设计一个计算属性：currentIndex

根据哪些数据计算？

scrollY:右侧滑动的Y轴坐标（滑动过程时实时变化）；

tops:所有右侧分类li的top组成的数组；

（3）编码：

在滑动过程中，实时收集scrollY的值

在列表第一次显示后，收集tops

实现currentIndex的计算逻辑

实现列表的滑动：better-scroll
使用：
npm i better-scroll --save;
import BScroll from 'better-scroll';
data(){
return {
 scrollY:0;
 tops:[]
}
}

mounted(){


 this.$store.dispatch('getShopGoods',()=>{
   //列表数据更新显示后执行
   this.$nextTick(()=>{
   this._initScroll();
 })
 
 
}


computed:{


//计算得到当前分类的下标
  currentIndex(){//初始和相关数据发生了变化
  //先得到相关的条件数据
  const {scrollY,tops} = this;
  //根据条件计算产生一个结果
  const index = tops.findIndex((top,index)=>{
     return scrollY >= top && scrollY < tops[index+1]
  })
  //返回结果
  return index
  }
}

methods:{


//初始化滚动
_initScroll(){
    //列表显示之后创建
    new BScroll('.menu-wrapper'，{
    click:true
    });
    this.foodsScroll = new BScroll('.foods-wrapper',{
    probeType:2//惯性的滑动不会触发
    click:true
    })
   })
   //给右侧绑定scroll监听
   this.foodsScroll.on('scroll',({x,y})=>{
   //console.log(x,y);//x,y,代表横轴和纵轴的坐标
   this.scrollY = Math.abs(y);
   })
   
   //给右侧列表绑定scroll结束的监听
  this.foodsScroll.on('scrollEnd',({x,y})=>{
   console.log(1111,x,y);
   this.scrollY = Math.abs(y)
   })
}


//初始化tops
const tops = [];
let top = 0;
tops.push(top);
//找到所有分类的li
const lis =this.$refs.foodsUl.getElementByClassName('food-list-hook');
Array.prototype.slice.call(lis).foeEach(li=>{
top += li.clientHeight;
tops.push(top);
})
//更新数据
this.tops = tops;


//左侧点击事件
cilckMenuItem(index){
   //右侧列表滑动到对应的位置,编码的方式滑动
   //得到目标位置的scrollY
   const scrollY = this.tops[index];
   //立即更新scrollY（让点击的分类项，成为当前分类）
   this.scrollY = scrollY;
   //平滑滚动右侧列表
   this.foodsScroll.scrollTo(0,-scrollY,300)
   }
}

18、已经有数据绑定的数据中添加一个新的属性，让其也有数据绑定，利用Vue.set（）方法可以实现

19、界面不正常去看数据，看看数据是不是和我们想的是不是一样的；

20、移动端的组件库：mint-ui

21、评价列表中过滤得到新数组

（1）条件1

selectType:0/1/2/

rateType:0/1

selectType === 2||selectType === rateType

(2)条件2

onlyShowText : true/false

text:有值/没值

!onlyShowText || text.length > 0

return rating.filter(rating =>{
  const {rateType,text} = rating
  return (selectType === 2 || selectType === rateType ) && (!onlyShowTxt || text.lenngth >0)
})

22、图片懒加载

下载npm i --save vue-lazyload

23、日期格式化过滤器

npm i --save moment

filters.js
import Vue from 'vue'
import moment from 'moment'
Vue.filter('date-format',funtion(value)={
return moment(value).format('YYYY-MM-DD HH:mm:ss')
})

24、打包文件分析与优化

（1）vue脚手架提供了一个用于可视化分析打包文件的包webpack-bundle-analyzer和配hi

（2）启用打包可视化：npm run build --report

（3）npm i --save date-fns

标签：npm,Vue,const,tops,scrollY,外卖,硅谷,列表,scs
来源： https://blog.csdn.net/yangyanqin2545/article/details/118248735

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue项目之硅谷外卖