supermallagain-学习记录

项目目录搭建

安装vue以及整理目录

样式初始化

引入assets/css/normalize.css文件
在实际开发中，经常会将浏览器默认的样式进行重置

*{margin:0;padding:0;border:0;}

但是*是通配符，需要把所有的标签都遍历一遍，当网站较大时，样式比较多，会加大网站运行的负载。
normalize.css：保留有用的默认值，更正了常见浏览器不一致性等错误
直接在github中下载normalize.css文件放入对应的文件夹中。再在App.vue中使用：

问题

重复点击导航时，控制台会报错：

**因此需要判断当前的路径是否等于当前的path，如果不等于的时候，再进行跳转：**同时isActive可以定义一个计算属性

 
computed: {isActive() {return this.path==this.$route.path}},props: {path: {type: String,default:'/home'}},methods: {boxclick() {if(this.$route.path!==this.path) //当不等于的时候才进行跳转this.$router.replace(this.path)//路由跳转}
}

总结：点击后变色

通过v-for遍历产生

此时在进行遍历的时候可以获取被遍历数组的index和item
可以在data中定义一个currentindex来存储当前的index，只有项目被标记的index和当前currentindex相同时，才有效
通过点击改变当前currentindex的值，点击的时候将改index传入，并赋值给currentindex

并不是遍历产生，比如上面的情况

添加一个属性，props到子组件，然后通过路由path来判断

首页

顶部导航栏

需要多次使用，因此放到common中

轮播图部分

根据网络请求回来的数据，整理出轮播图需要的数据

使用swipper插件实现轮播效果

安装swipper

npm install vue-awesome-swiper@3 --save -dev

创建swiper子组件

公用的组件

创建HomeSwiper组件

在Home中使用

    购物街import HomeSwipper from 'views/home/childcomponent/HomeSwipper'
export default {name: 'View-Home',components: { NavBar,HomeSwipper },

问题

用fixed定义但又不希望元素脱离标准流

可以在flex元素外面再套一个相对定位的盒子
重新修改navbar的组件

.content{width:100%;height:48px;background-color: rgb(247, 29, 66);font-size:25px;font-weight: 600;color:#fff;text-align: center;line-height: 48px;position:fixed;top:0px;
}
#navbar{position:relative;height:48px;top:0px;z-index:999
}

或者只需要使用一个div去占位，用一个空的div，把他放在fixed固定的元素的位置，让他拥有和fixed元素一样的宽高

声明.d.ts文件

 Try `npm i --save-dev @types/swiper` if it exists or add a new declaration (.d.ts) file containing `declare module 'swiper';

新建文件

// shengmi.d.ts
declare module 'swiper'

引入文件

pakage.json:

    "includes": ["shengmi.d.ts"],

组件名字报错

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.

检查代码规范，模块引入是否加{}

import语句导入组件时from后面的路径写错

注册组件时括号内的组件名写错，与import声明不一致

注册组件关键字components写错

使用组件错误

swiper有时候无法滚动

需要重新初始化
添加观察参数，进行自动更新

export default {mounted() {new Swiper('.swiper-container', {autoplay: 1000,//可选选项，自动滑动direction: 'horizontal',autoplayDisableOnInteraction: false,grabCursor: true,roundLengths: true, pagination: '.swiper-pagination',loop: true,//循环模式选项observer: true,//修改swiper自己或子元素，自动初始化swiperobserverParents: true,//修改swiper的父元素，自动初始化swiper})}

推荐部分

因为仅有home页面需要，因此不需要再单独抽取组件

//home.vueimport HomeRecommend from 'views/home/childcomponent/HomeRecommend'
export default {name: 'View-Home',components: { NavBar,HomeSwipper,HomeRecommend },data() {return {HomeImageBanner: [],HomeRecomenddata: []}},getmultidata().then(res => {let data = res.data.dataconsole.log(data);this.HomeImageBanner = data.banner.listthis.HomeRecomenddata=data.recommend.list})

本周流行部分

此时出现与之前一样的问题
这是由于tabbar是使用flex布局的，因此脱离了文档流

 
#tabbar{width:100%;height:58px;/* background-color: red; */position:fixed;bottom:0px;left:0px;right:0px;display: flex;justify-content: space-around;border-top:1px solid rgba(100,100,100,0.2);background-color: #fff
}
#box-tabbar{width:100%;height:58px;position:relative;top:0px;z-index:999
}

控制栏部分

需求

点击字体变色，以及添加相同颜色的下划线；同时面展示相对应的图片

监听点击

类似于导航栏效果，这里生成的三个元素，最好使用for循环生成

显示响应的数据

封装请求–需要携带参数

//network/home.js
export function getdata(type, page) {///home/data?type=sell&page=1return request({url: '/home/data',params: {type,page}})
}

使用

//home.vue
import {getmultidata,getdata} from 'network/home.js'getdata('sell',1).then(res=>{console.log(res);})//created阶段

展示

监听点击事件

在tab-control中点击元素的时候，向父组件发射点击事件，并将点击的index传递过去

itemclick(index) {this.currentindex = indexthis.$emit('itemclick',index)}

样式

//home
import GoodsItem from 'components/content/homegoods/GoodsItem'data() {return {HomeImageBanner: [],HomeRecomenddata: [],tabitem: ['流行', '新款', '精选'],currentindex: 0,goodsmessage:[]}},
created(){// request({url:'/home/multidata'}).then(res=>{console.log(res);}) 进一步封装到一个单独的文件中getmultidata().then(res => {let data = res.data.datathis.HomeImageBanner = data.banner.listthis.HomeRecomenddata=data.recommend.list})getdata('pop', 1).then(res => {console.log(res.data.data);let data=res.data.datathis.goodsmessage=data.list})}, methods: {clickchose(index) {if (this.currentindex === index) { console.log('数据已经请求过了'); }if (this.currentindex != index) {console.log('将会重新请求数据');this.currentindex = indexswitch (index) {case '0':getdata('pop', 1).then(res => {console.log(res.data.data)let data=res.data.datathis.goodsmessage = data.list})break;case '1':getdata('new', 1).then(res => {console.log(res.data.data)let data=res.data.datathis.goodsmessage = data.list})break;case '2':getdata('sell', 1).then(res => {console.log(res.data.data)let data=res.data.datathis.goodsmessage = data.list})break;}}}
}

请求相应数据

默认情况下，显示的是流行的数据，因此在created阶段先将流行的数据请求过来并进行保存
点击之后，如果需要重新请求的话，就重新请求数据，并展示。需要重新修改home组件中的数据请求部分的代码

不能这样子写，只要点击不同的元素，就发一次请求，这个是没有必要的。如果之前已经获取数据了，那就不用重新获取

数据处理

先一次性获取所有的数据

  totalmessage: {'pop': {page: 1,list:[]},'new': {page: 1,list:[]},'sell': {page: 1,list:[]}}//created阶段getdata('pop', 1).then(res => {console.log(res.data.data);let data = res.data.datathis.totalmessage.pop.list=data.listthis.goodsmessage=data.list})getdata('new', 1).then(res => {let data = res.data.datathis.totalmessage.new.list=data.list})getdata('sell', 1).then(res => {let data = res.data.datathis.totalmessage.sell.list=data.list})

在根据点击的元素，动态修改goodsmessage的数据

    clickchose(index) {if (this.currentindex === index) { console.log('数据已经请求过了'); }if (this.currentindex != index) {this.currentindex = indexswitch (index) {case 0:this.goodsmessage =  this.totalmessage.pop.listbreak;case 1:this.goodsmessage = this.totalmessage.new.listbreak;case 2:this.goodsmessage =  this.totalmessage.sell.listbreak;}}}

axios请求

需要再次梳理

better-scroll 解决移动端的滚动效果

安装betterscroll

 cnpm install better-scroll --save

创建scroll的公共子组件

使用scroll

//home组件中
import BScroll from 'better-scroll'
import scroll from 'components/common/scroll/scroll'

better-scroll问题

真的是服了，昨晚还好好的可以滚动，今天一看就不能滚动，去调式
1、wrapper高度已经给定，content的高度也有，而且也满足比wrapper的高度大
2、想是不是因为图片加载问题，需要去refresh一下，然后就去调用better-scroll的插件–使用oberver-DOM和observer-Image，结果还是不行
3、去增加imageload时间，当图片加载完成后，自动refresh，但此时使用this.refs.scroll.scroll.refresh()或者this.refs.scroll.scroll.refresh()或者this.refs.scroll.scroll.refresh()或者this.refs.scroll.refresh()也会报错
4、发现content元素并没有添加相关的样式

但又不知道怎么解决
没办法，直接关机重启，再打开
发现又解决了

怎么查看scrollHeight值

实现上拉加载更多

//home中
data() {return {HomeImageBanner: [],HomeRecomenddata: [],tabitem: ['流行', '新款', '精选'],currentindex: 0,goodsmessage: [],totalmessage: {'pop': {page: 1,list:[]},'new': {page: 1,list:[]},'sell': {page: 1,list:[]}}}},created(){// request({url:'/home/multidata'}).then(res=>{console.log(res);}) 进一步封装到一个单独的文件中getmultidata().then(res => {let data = res.data.datathis.HomeImageBanner = data.banner.listthis.HomeRecomenddata=data.recommend.list})getdata('pop', 1).then(res => {let data = res.data.datathis.totalmessage.pop.list=data.listthis.goodsmessage=data.list})getdata('new', 1).then(res => {let data = res.data.datathis.totalmessage.new.list=data.list})getdata('sell', 1).then(res => {let data = res.data.datathis.totalmessage.sell.list=data.list})}, methods: {clickchose(index) {if (this.currentindex != index) {this.currentindex = indexswitch (index) {case 0:this.goodsmessage =  this.totalmessage.pop.listbreak;case 1:this.goodsmessage = this.totalmessage.new.listbreak;case 2:this.goodsmessage =  this.totalmessage.sell.listbreak;}}},scrollToEnd() {console.log('到底啦');//到底之后需要加载更多的数据，将page+1，并且重新调用getdata，以及将加载到的数据添加到原来的数组中console.log(this.currentindex);if (this.currentindex == '0') {this.totalmessage.pop.page += 1let page=this.totalmessage.pop.pagegetdata('pop', page).then(res => {let data = res.data.datathis.totalmessage.pop.list.push(...data.list)//为什么这里用 this.totalmessage.pop.list.concat(data.list)就不能实现页面的增加数据this.goodsmessage=this.totalmessage.pop.list})}if (this.currentindex == '1') {this.totalmessage.new.page += 1let page=this.totalmessage.new.pagegetdata('new', page).then(res => {console.log(2);let data = res.data.datathis.totalmessage.new.list.push(...data.list)//为什么这里用 this.totalmessage.pop.list.concat(data.list)就不能实现页面的增加数据this.goodsmessage=this.totalmessage.new.list})}}},mounted(){}

这样写获取数据会特别慢
这是因为，鼠标一到底部的时候，就会触发上拉加载时间，就会触发这个函数，导致多次触发，从而多次请求，因此就会出现一直请求的原因–解决：加节流
多次用到getdata发网络请求，因此可以对其进行封装

修改后：

  data() {return {HomeImageBanner: [],HomeRecomenddata: [],tabitem: ['流行', '新款', '精选'],chose:'pop',totalmessage: {'pop': {page: 0,list:[]},'new': {page:0,list:[]},'sell': {page: 0,list:[]}}}},computed: {goodsmessage() {return this.totalmessage[this.chose].list
}},created(){// request({url:'/home/multidata'}).then(res=>{console.log(res);}) 进一步封装到一个单独的文件中getmultidata().then(res => {let data = res.data.datathis.HomeImageBanner = data.banner.listthis.HomeRecomenddata=data.recommend.list})
//页面开始先把第一页的数据获取过来this.getdata('pop')this.getdata('new')this.getdata('sell')}, methods: {getdata(type) {const page=this.totalmessage[type].page+1getdata(type, page).then((res) => {this.totalmessage[type].list.push(...res.data.data.list)this.totalmessage[type].page+=1})},clickchose(index) {switch (index) {case 0:this.chose = 'pop'break;case 1:this.chose = 'new'break;case 2:this.chose = 'sell'break;
}},scrollToEnd() {//到底之后需要加载更多的数据，将page+1，并且重新调用getdata，type就是当前的chosethis.getdata(this.chose)}},

数组的拼接

concat

//concat（）把两个或者多个数组拼接在一起，但是不改变已经存在的数组，并将拼接后的结果返回给一个新数组
a=[1,2,3,4]
a2=[1,2]
a.concat(a2)
console.log(a)//[1,2,3,4]
let b=a.concat(a2)
console.log(b)//[1,2,3,4,1,2]

扩展运算符…

a=[1,2,3,4]
a2=[1,2]
a.push(...a2)
console.log(a)//[1,2,3,4,1,2]

控制栏的吸顶效果

监听滚动事件

    
//methods中scroll(pos) {console.log(pos.y);}

实现吸顶

在应用了属性transform的父元素上，如果其拥有fixed属性的子元素，则该子元素的fixed属性将会失效，并将以其父元素为定位基准
因此这里不能直接对tab-control采用fixed的定位来实现吸顶效果

使用sticky粘滞定位：

但是其父元素（不单单指元素直系的父元素，任意引用了次组件的父组件也包括）设置了overflow属性，因此也会失效

新增一个组件放到scroll的上面，通过isshow的显示和隐藏来实现吸顶效果

//home组件
//data中isshow:false
//methods中scroll(pos) {console.log(pos.y);if (-pos.y > 598) {console.log(55);this.isshow=true}else {this.isshow=false}}.ishowtab{position:fixed;top:48px;z-index:99;
height:40px
}

问题

新增的tabcontrol里面无法实现点击

说明这两个组件里面的currentindex并不是相同的
相同的组件，但是使用两次，里面的数据不共享，（这不就是因为组件里面的data是一个函数，所以重复使用组件，里面的数据本身就不是共享的）
那么现在需要共享，可以通过vuex状态管理器，添加一个公共的currentindex

安装vuex

cnpm install vuex@3.0.1 --save

配置

//src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({state: {currentindex: ''},mutations: {Currentindex(state, payload) {state.currentindex = payload}}
})
export default store//src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
Vue.prototype.$bus = new Vue()
new Vue({router,store,render: h => h(App),
}).$mount('#app')

TabControl使用vuex里面的currentindex

但是此时又有一个问题，一个tabcontrol里面的元素可以监听点击事件，而另外一个就无法监听点击事件，也不知道为什么
原因：

//之前在做tabbar组件的时候，外面是套了一层box-tabbar的；当时设置的z-index是999
//而当前tabcontrol设置的z-index是99  因此就会覆盖，显示fixed后的tabcontrol，那么久无法实现点击效果
//修改 box-tabbar属性
#box-tabbar{width:100%;height:58px;position:relative;bottom:0px;z-index:9
}
//其实，此时使用了better-scroll后，没有必要再在外面套一层box-tabbar来占位了
//修改后的TabBar

总结：在使用z-index的时候，不要设置的太大

WebSocketClient报错

WebSocketClient.js?5586:16 WebSocket connection to 'ws://192.168.43.86:8080/ws' failed: 

直接cnpm install 安装依赖，然后重新npm run serve 启动项目

项目保存后浏览器不自动刷新

//vue.config.js增加module.exports = {lintOnSave: false,chainWebpack: config => {config.resolve.alias.set('@', resolve('src')).set('assets', resolve('src/assets')).set('components', resolve('src/components')).set('network', resolve('src/network')).set('views', resolve('src/views'))},devServer: {port: 3000,open: true,hot: true}
}

keep-alive的使用