基于VUE的喵喵电影（学习）

前端板块★

1.城市列表

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

　　var hotList=[];//热门数据

　　遍历获得的cities数组，判断cities[i].isHot===1 返回true时，hotList.push(cities[i]);

　　var cityList=[];//所有城市数据

　　由于从接口获取的数据是混乱的，所以要自己从新排序城市列表，来渲染页面。

　　遍历cities，

　　第一步：获取第一个字符，var firstLetter = cities[i].py.substring(0,1).toUpperCase();

　　第二步：cityList.push({index:firstLetter,list:[{nm:cities[i].nm,id:cities[i].id}]})创建一个A-Z的index，每个里面有个数组存着每个的城市名和Id;

　　第三步：当获取到的第一个字符和cityList[i].index相同时，遍历cityList判断cityList[i].index===firstLetter相等时，往list里面push城市的名字和ID；

　　第四步：给index排序让其使a->z排列；

　　第五步：返回cityList和hotList;

2.正在热映，即将上映列表

　　过滤器:全局过滤器Vue.filter('setWH',(url,arg)=>{return url.replace(/w\.h/,arg);});渲染图片的时候，设置宽高setWH(x.x);

　　判断是否为3D<img v-if="item.version" src="@/assets/maxs.png" alt>；

3.搜索页面

　　使用watch监听，监听异步.

　　　　　　　　　　　　 watch擅长处理的场景： 一个数据影响多个数据 　　　　　　　　　　　　 computed擅长处理的场景： 一个数据受多个数据影响

　　函数防抖：取消多次请求，当要查找的关键字为aaa时，输入aa的时候会取消a的请求,输入aaa的时候会取消aaa的请求。

　　在methods里面定义:

　　　　　　　　　　　　cancelRequest(){ 　　　　　　　　　　　　if(typeof this.source ==='function'){ 　　　　　　　　　　　　this.source('终止请求')}} 　　在watch监听里面axios里面作为第二个参数 　　　　　　　　　　　　cancelToken: new this.axios.CancelToken(function(c){ 　　　　　　　　　　　　that.source = c;}) 　　再抛出错误 　　 　　　　　　　　　　　　.catch((err) => { 　　　　　　　　　　　　if (this.axios.isCancel(err)) { 　　　　　　　　　　　　console.log('Rquest canceled', err.message); //请求如果被取消，这里是返回取消的message 　　　　　　　　　　　　} else { 　　　　　　　　　　　　//handle error 　　　　　　　　　　　　console.log(err);}}) 4.影院页面 　　两个过滤器，一个过滤数据绑定的值，收到不同的key会有不同的value， 　　　　　　　　另一个过滤器是class过滤器，不同的key会有不同的样式。   插曲 　　1.模拟tap事件，触摸事件touchstart,滑动时会触发，click事件移动端延迟，所以模拟tap事件 模拟tap事件:1.zepto,  2:vue-touch, 3:better-scroll.   　　把better-scroll做成一个全局组件 　　　　import Scroller from '@/components/Scroller' 　　　　Vue.component('Scroller' , Scroller); 　　定义的Scroller作为父组件通过props给要使用better-scroll组件的子组件通信，定义两个函数在props里面，一个touchToScroll()l另一个touchToScroll()     　　
mounted(){ var scroll = new BScroll( this.$refs.wrapper , { tap : true,//开启tap事件 probeType: 1//滚动的时候会派发scroll事件，会截流 });  
this.scroll = scroll;
scroll.on('scroll',(pos)=>{ this.handleToScroll(pos); });
scroll.on('touchEnd',(pos)=>{ this.handleToTouchEnd(pos); }); }, methods : { toScrollTop(y){ this.scroll.scrollTo(0,y);//城市列表点击字母表跳转到当前城市。 } }
　　　　 　　　　 2.Loading组件，菜鸟教程里面CSS Rainbow Loader，封装成全局组件。   5.当前城市本地保存和状态管理 　　在城市列表里面获取数据的时候使用h5的winodw.localStorage.setItem("cityList",JSON.stringify(cityList)),hotList同样。在开始的时候先获取本地的缓存数据：window.localStorage.getItem("cityList"),如果存在时候直接解析，如果不存在正常流程获取数据。 　　VUEX<　　
 　　　　　　　　　　　　　　　　　　　　　　　　　　　　

在store中创建city user,在city中，状态存储。

const state = { nm : window.localStorage.getItem('nowNm') || '北京', id : window.localStorage.getItem('nowId') || 1 };
const actions = {
};
const mutations = { CITY_INFO(state , payload){ state.nm = payload.nm; state.id = payload.id; } };
export default { namespaced : true, state, actions, mutations }
在显示定位城市的组件中设置本地存储， window.localStorage.setItem("nowNm", nm); window.localStorage.setItem("nowId", id);     {{$store.state.city.nm}}获取城市。
　 　　 在正在热映和即将上映页面使用了keep-alive，使用activated生命周期获取数据，这样数据会存储，多次反复进入页面也不会重复请求。 只在切换城市的时候才会重新请求，在data中定义一个字段，在请求数据的时候会把这个字段的值定义为cityId的值，再还没请求数据的时候判断这个字段和cityId的值是否一样，如果不一样就请求，一样的话就返回。   6.定位弹窗组件 　　绝对定位居中显示，写了一个接口js文件，可以把MessageBox作为一个类输出，var MyComponent = Vue.extend(MessageBox)在返回一个vm对象，两个函数，一个取消，一个确定，这两个函数运行时都会移除vm的挂载。 　　在一开始进入APP的页面 挂载这个messageBox，在第一次挂载的时候会本地存储这个城市的ID和名称，如果VUEX里面的城市和本地存储的城市一样的话就不会弹出城市定位框。   7.详情页 　　使用动态路由以及命名视图，一个页面有两个路由，一个默认，一个其他的，默认情况下显示默认的，另一个设置名字，需要的就加载。路由传参，使用路由传参可以获取动态路由的值，来渲染不同的详情页。正在热映和即将上映页面都可以进入详情页，这就需要有两个路径进入详情页，设置两个不同的路由地址。 　　            
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄