Vue2.5 去哪儿App 项目学习总结（3）——项目实战 - 旅游网站城市列表页面开发

1 路由配置

（1）在router路径下的index.js文件中，配置city页面的路由

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'

Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    name: 'Home',
    component: Home
  }, {
    path: '/city',
    name: 'City',
    component: City
  }],  
})

（2）创建city组件

（3）在header组件中，点击city跳转到city页面

<!-- 路由跳转到city页面中 -->
<router-link to='/city'>
	<div class="header-right">
		<!-- this.city在vuex中，由mapState映射进该组件中 -->
		{{this.city}}
		<!-- {{$store.state.city}} -->
		<span class="iconfont arrow-icon">&#xe64a;</span>
	</div>
</router-link>

2 搜索框布局

在City的Search.vue文件中：

<template>
  <div>
    <div class="search">
      <input class="search-input" type="text" placeholder="输入城市名或拼音" />
    </div>
  </div>
</template>

布局如下：

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .search
    height: .72rem
    padding: 0 .1rem
    background: $bgColor
    .search-input
      // 设置box-sizing为border-box是让padding生效
      // 告诉浏览器设置的border和padding的值是包含在width内的
      box-sizing: border-box
      width: 100%
      height: .62rem
      padding: 0 .1rem
      line-height: .62rem
      text-align: center
      border-radius: .06rem
      color: #666
</style>

box-sizing: border-box，告诉浏览器设置的border和padding的值是包含在width内的

3 列表布局

4 BetterScroll 的使用和字母表布局

（1）安装BetterScroll插件

npm install better-scroll --save

（2）插件的使用方式，组件的dom结构必须符合规定要求

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- you can put some other DOMs here, it won't affect the scrolling -->
</div>

（3）使用插件

<script>
  import Bscroll from 'better-scroll' // 步骤一
  export default{
    name: 'CityList',
    mounted(){
      this.scroll = new Bscroll(this.$refs.wrapper); // 步骤二
    }
  }
</script>

字母表布局：

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
  .list
    // 设置竖直方向上的居中显示
    display: flex
    flex-direction: column
    justify-content: center
    position: absolute
    top: 1.58rem
    right: 0
    bottom: 0
    width: .4rem
    .item
      line-height: .4rem
      text-align: center
      color: $bgColor
</style>

6 兄弟组件数据传递

处理点击字母的事件
（1）在Alphabet组件中，点击字母，向city父组件触发change事件，并传递字母数据

handleLetterClick(e) {
	// 触发change事件，该事件在City.vue中被监听
	this.$emit('change', e.target.innerText)
}

（2）通过city父组件将其传递给list组件

<template>
  <div>
    <city-header></city-header>
    <city-search :cities="cities"></city-search>
    <city-list
      :cities="cities"
      :hot="hotCities"
      :letter="letter"
    ></city-list>
    <city-alphabet
      :cities="cities"
      @change="handleLetterChange"
    ></city-alphabet>
  </div>
</template>

handleLetterChange(letter) {
	this.letter = letter
}

（3）在list组件中，监听letter，获取字母对应的区域的元素，通过better-scroll插件，滚动到对应区域。

<!-- 城市列表 -->
<!-- 因为cities是对象，所以用key进行遍历而不是数组中的index -->
<!-- :ref="key"中ref用来获取dom元素 -->
<!-- 因为key是变量，所以绑定ref的时候，需要加上冒号 -->
<div 
	class="area" 
	v-for="(item, key) of cities" 
	:key="key" 
	:ref="key"
>
	<div class="title border-topbottom">{{key}}</div>
	<div class="item-list">
		<!-- 遍历abc各项中的城市 -->
		<!-- click事件点击列表中的城市也能实现切换 -->
		<div 
			class="item border-bottom" 
			v-for="innerItem of item" 
			:key="innerItem.id" 
			@click="handleCityClick(innerItem.name)"
		>
			{{innerItem.name}}
		</div>
	</div>
</div>

// 监听letter的变化
watch: {
	letter() {
		if (this.letter) {
			// 获取字母对应的区域的元素
			// this.$refs[this.letter]返回的是数据，此处选择数组的首项
			const element = this.$refs[this.letter][0]
			// 滚动到对应的元素
			this.scroll.scrollToElement(element)
		}
	}
},
mounted() {
	// 创建better-scroll实例
	this.scroll = new Bscroll(this.$refs.wrapper)
}

（4）上下滑动字母表组件，list组件也随之滚动，需绑定3个事件

<template>
  <ul class="list">
    <!-- touchstart.prevent中的prevent修饰符可以阻止该事件的默认行为 -->
    <!-- :ref="item"是为了获取dom元素 -->
    <li
      class="item"
      v-for="item of letters"
      :key="item"
      :ref="item"
      @touchstart.prevent="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      @click="handleLetterClick"
    >
      {{item}}
    </li>
  </ul>
</template>

handleTouchStart() {
	this.touchStatus = true
},
handleTouchMove(e) {
	if (this.touchStatus) {
		if (this.timer) {
			clearTimeout(this.timer)
		}
		// 通过函数节流，减少过高频次的操作，提高性能
		this.timer = setTimeout(() => {
			// 当前手指滑动的位置（离顶部的距离）
			const touchY = e.touches[0].clientY - 79
			// 当前手指滑动位置所对应的字母下标
			const index = Math.floor((touchY - this.startY) / 20)
			if (index >= 0 && index < this.letters.length) {
				// 触发change事件，该事件在City.vue中被监听
				this.$emit('change', this.letters[index])
			}
		}, 16)
	}
},
handleTouchEnd() {
	this.touchStatus = false
}

（5）通过截留函数，管理滑动事件

7 列表性能优化

在页面更新完之后，在计算距离

8 搜索逻辑实现

（1）v-model对输入的关键字进行双向绑定
（2）通过输入的关键字管理是否显示搜索结果

<template>
  <div>
    <div class="search">
      <!-- v-model对关键字进行双向绑定 -->
      <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音" />
    </div>
    <div
      class="search-content"
      v-show="keyword"
      ref="search"
    >
      <!-- 将搜索后的结果渲染出来 -->
      <ul>
        <li
          class="search-item border-bottom"
          v-for="item of list"
          :key="item.id"
          @click="handleCityClick(item.name)"
        >
          {{item.name}}
        </li>
        <!-- 没有匹配数据的情况 -->
        <li class="search-item border-bottom" v-show="hasNoData">
          没有找到匹配数据
        </li>
      </ul>
    </div>
  </div>
</template>

（3）监听关键字，运用截留函数，在city中查找数据，并将结果添加到list数组中。
（4）当list中无数据时，显示没有找到匹配数据

9 Vuex实现数据共享（重点）

（1）安装vuex

npm install vuex –save

（2）Vuex可以看做一个仓库store，有State，Mutations组成。
1）State存储所有的公用数据，组件使用数据时，调动State即可。
2）Mutations中放置的是一个个对State同步的修改方法。

（3）在src目录下，新建store文件夹，在store文件夹下新建index.js文件。

// store文件夹下index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
 
export default new Vuex.Store({
  state: {
    city: '北京'
  },
  mutations: {
    changeCity(state, city){
      state.city = city;
    }
  }
})

（4）在main.js中引入store并使用。这样每个组件中都可以访问到store中管理的数据

import Vue from 'vue'
import App from './App'
import router from './router'
// 作用是引入vuex，vuex在该文件夹下被引用
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

（5）添加点击城市事件，通过路由的push方法跳转到首页

methods: {
	// 将city作为参数
	handleCityClick (city) {
		// 直接通过commit调用mutations方法，而不使用actions方法
		// this.$store.commit('changeCity', city)
		// 直接使用vuex中mutation暴露出来的changeCity方法
		this.changeCity(city)
		// 改变城市后，跳转到首页
		this.$router.push('/')
	},
	...mapMutations(['changeCity'])
}

10 Vuex的高级使用及localStorage（重点）

（1）使用localStorage功能记录之前操作的内容

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex);
let defaultCity = '北京';
try {
  if (localStorage.city) {
    defaultCity = localStorage.city;
  }
} catch (e) {
}
export default new Vuex.Store({
  state: {
    city: defaultCity
  },
  mutations: {
    changeCity(state, city){
      state.city = city;
      try {
        if (localStorage.city) {
          defaultCity = localStorage.city;
        }
      } catch (e) {
      }
    }
  }
})

（2）store中的内容变多，有必要对其进行拆分
1）创建state.js文件

// 建议在使用localStorage的时候，就要使用try-catch
let defaultCity = '深圳'
try {
  if (localStorage.city) {
    defaultCity = localStorage.city
  }
} catch (e) {}

export default {
  city: defaultCity
}

2）创建mutations.js文件

export default {
  changeCity (state, city) {
    state.city = city
    // 使用localStorage记录数据
    try {
      localStorage.city = city
    } catch (e) {}
  }
}

3）在index.js中引入state.js和mutations.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations
})

（3）mapState是vuex的高级用法，将vuex中的数据映射到city计算属性中
1）在home的header组件中，将vuex组件中的数据映射到该组件的计算属性中

<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeHeader',
  // 将city放到vuex中，此处无需接收
  // props: {
  //   city: String
  // }
  // 将vuex组件中的数据映射到该组件的计算属性中
  computed: {
    ...mapState(['city'])
  }
}
</script>

2）其它相关组件同理也如此。

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'CityList',
  props: {
    hot: Array,
    cities: Object,
    letter: String
  },
  computed: {
    // mapState也可以放对象
    ...mapState({
      currentCity: 'city'
    })
  }
</script>

（4）mapMutations是vuex的高级用法，将changeCity方法映射到各组件中
1）List组件和Search组件

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'CityList',
  props: {
    hot: Array,
    cities: Object,
    letter: String
  },
  methods: {
    // 将city作为参数
    handleCityClick (city) {
      this.changeCity(city)
      this.$router.push('/')
    },
    // mapMutations将changeCity方法映射到该组件中
    ...mapMutations(['changeCity'])
  }
}
</script>

11 使用keep-alive优化网页性能（重点）

（1）每次切换页面，ajax都会发送请求，可以使用keep-alive，路由中的内容被加载之后，就放到内存中，供下次使用

<template>
  <div id="app">
    <!-- 使用keep-alive，路由中的内容被加载之后，就放到内存中，供下次使用 -->
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

（2）但重新选择城市，发现因为keep-alive缓存的原因，并没有发起任何ajax请求。
解决方法：
1）使用keep-alive时，会多出个生命周期函数，当页面重新显示的时候，会执行activated函数
2）在该mounted生命周期函数内，记录当前城市

mounted () {
    // 记录当前的城市
    this.lastCity = this.city
    // 发送ajax请求
    this.getHomeInfo()
  }

3）重新回到首页时，在activated生命周期函数中，判断当前城市与之前城市是否相同，如果不同，重新请求数据

activated () {
    // 当城市列表中选择的城市与之前的城市不一致时，重新请求ajax数据
    if (this.lastCity !== this.city) {
      // 先记录城市
      this.lastCity = this.city
      this.getHomeInfo()
    }
  }