Vue练手项目:PC手机商城

本项目是本人2018年学习vue的练手项目，此文记录项目练习过程中的的一些细节和难点。（文章最后更新时间：2018/2/17）

本文目录

1.创建项目
2.项目文件夹
3.MOCK数据
4.设置代理服务器
5.src文件夹
6.配置路由
7.全局使用css样式文件
8.创建和使用vHeader组件
9.在组件中发请求拿数据
10.鼠标悬停展现对应数据
11.使用动画插件操作v-for循环出的元素
12.轮播图组件
13.主图组件
14.筛选框组件
15.排序组件
16.推荐组件
17.通过vuex响应式操作全选框

1.创建项目

注意：本项目的构建是基于vue-cli2.x版本进行的
去要创建项目的文件夹下执行命令
vue init webpack shoppingMall
执行之后系统会自动远程下载项目模板文件，
接下来会出现一些选填项
因为我们的项目都是写在.vue文件中的，所以编译器选择用Runtime-only即可
如果我们用的是less来写样式代码的话，需要手动去安装less和less-loader
npm install less less-loader --save-dev
项目的启动命令是在package.json文件中的scripts中的start配置的
手动安装axios
npm install axios --save

2.项目文件夹

image.png

bulid文件夹=》存放的是webpack配置文件
config文件夹=》自己做项目时手动增加的一些对项目的配置文件，比如说项目运行端口、静态文件默认存放目录等等
node_modules=》第三方依赖
src=》项目的真正源码存放处
static=》静态资源文件夹

使用vue+webpack开发项目时，小图片可以不用使用精灵图，因为我们可以通过设置让小图片都转化成base64代码，从而使项目运行速度更快。

3.MOCK数据

在现在的SPA项目或者前后端分离项目中，前端人员都是通过ajax向后端获取数据的，现实中，前后端人员往往都是同时接到项目需求，这时候我们前端人员可以自己先通过mock数据来模拟API获得数据。
1.在项目中新建一个mock-server文件夹，然后cd到文件夹中
2.通过npm init将mock-server初始化成一个npm项目，所有选填项都可以回车。
3.安装json-server模块npm install json-server --save
4.至此，我们的项目框架已有，此时mock-server文件中有三个文件，一个是node_modules文件夹，一个是package.json，另一个是package-lock.json
5.在项目文件下新建一个db.js文件
在文件中创建一个变量，用来存放我们的数据
const data = {}
别忘了将data导出
module.exports = data
6.创建一个server.js文件 =>这是我们的项目服务文件

//创建一个变量，引入json-server模块
const JsonServer = require('json-server')
//将data数据也引入进来
const data = require('./db.js')
//通过json-server的create方法来实例化一个server服务器
const server = JsonServer.create()
//用json-server自带的router方法，并依赖data来创建一个router中间件
const router =JsonServer.router(data)
//创建middleware中间件
const middleware = JsonServer.defaults()
//使用中间件
server.use(middleware)
server.use(router)
//这个中间件是专门用来解析请求体的
server.use(JsonServer.bodyParser)
//启动服务
server.listen({
    host:'127.0.0.1',
    port:'8858'
},function(){
    console.log('json-server is running on 8858...')
})

7.刚才创建的db.js中的data是没数据的，接下来我们就把事先准备好的数据放入data对象中
8.接下来通过node server就可以启动服务
9.通过浏览器对应地址就可以对mock-server项目进行访问，其中的Resources就是数据的接口API地址

4.设置代理服务器

mack数据情况下解决跨域的方法
在项目目录中的config文件夹中的index.js中=》

module.exports = {
    dev:{
        proxyTable: {
            '/api':{
                 target:'http://localhost:8858',
                   changeOrigin:true,
                   pathRewrite:{
                        '/api':'/'
                      }
                 }
           }
    }
}

这样的话，直接在项目中用axios发请求就可以了，API接口前面加上/api

5.src文件夹

首先是assets文件夹，这文件是专门用来存放我们项目所需的静态资源的，为了分类，我们在assets文件夹中新建几个文件夹，如css、fonts、images

一般情况下我们需要在css中先存放一个reset.css用来重置一个样式
将从字体网站下载下来的图标文件都放入到fonts文件件中
将项目所需图片都放入到images中

components文件夹是用来存放组件的，项目模块最开始展现的内容基本都是HelloWorld.vue展现出来的，图标和一些css样式是在App.vue中
router文件夹是用来存放路由配置的
我们再手动创建一个view文件夹，用来存放页面文件
App.vue是项目的根组件
main.js是项目的入口文件，这里面的配置都是全局生效的

6.配置路由

在router文件夹中的index.js中将HelloWorld组件的引入改成我们在view文件夹中新建的index.vue

import Index from '../view/index'
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    }
 }

路由里面对页面的引入和使用，我们可以选择使用开头字母大写的形式
接来下所有页面都是现在view文件夹中创建页面文件，然后在router文件夹中的index.js进行引入和使用，然后就可以在App.vue中的进行展现。

7.全局使用css样式文件

直接引用在main.js中引用，就可以全局生效

//大神写好的清除浏览器自带样式的文件
import './assets/css/reset.css'
//字体的样式文件
import './assets/fonts/style.css'
//我们自己手写的一些想要全局使用的样式文件
import './assets/css/common.css'

字体图标的使用：
全局引用style.css文件后，我们在要使用字体图标的标签中添加指定样式即可，如span标签

8.创建和使用vHeader组件

首先，在conponents文件夹中创建vHeader.vue
然后在index.vue页面文件中引入vHeader组件
import vHeader form '@/components/vHeader.vue'
进行注册

components:{
    vHeader
}

接下来在页面的template标签中的对应位置就可以通过进行使用。

9.在组件中发请求拿数据

以刚创建的vHeader组件为例
在组件中引入axios
import axios from "axios";
先在data中定义一个变量

  data() {
    return {
      navData: [],
    }
  }

发请求的方法

methods: {
  async getNavDate() {
     const { data } = await axios.get("./api/nav");
     this.navData = data
  }
}

在合适的地方调用方法

mounted() {
   this.getNavDate();
}

10.鼠标悬停展现对应数据

首先给对应的元素绑定事件

当鼠标悬浮在上面的里的时候，触发showChildrenData，获取对应item下面的数据

showChildrenData(item) {
   this.childrenData = item.children
}

然后再将数据渲染到悬浮数据展示框中


      
      {{item.name}}
      {{item.price}}

11.使用动画插件操作v-for循环出的元素

vue提供了一个来对v-for循环出来的元素进行动画操作


    
              
              {{item.name}}
              {{item.price}}

注意：在这里li的key值绑定的不是index，因为如果绑定index的话，多个悬浮列表对应的数据都是相同的，vue经过检测后发现key相同，就不会灵敏的渲染悬浮列表的数据，所以我们要给key值绑定更加唯一化的数据
@enter触发的enter事件

enter(el){
}

事件函数的参数el就代表v-for循环的每一项元素
怎么去操作我们的el呢，我们这里选择用js的方法，比如用velocity
npm install velocity-animate --save
在页面引用
import Velocity from 'velocity-animate'
接下来我们就可以用velocity提供的方法来写动画了

 enter(el){
   const timeOut = el.dataset.index*100
   setTimeout(function () {
     Velocity(el,{
       'opacity':1,
       'translateX':'-50px'
     })
   },timeOut)
 }

悬浮列表的隐藏与显示我们是设置一个flag来通过v-show控制，另外悬浮列表的隐藏也应该加上一个数据的清空，这样下次再展现数据会重新渲染，动画才会重新做。

 gethidden() {
   this.isshow = false,
   this.childrenData= []
 }

12.轮播图组件

由于轮播图组件肯定会在项目的多个地方使用，同时轮播图的数据、宽度、高度、延迟时间在每个地方肯定都不同，所以我们在轮播图组件swiper.vue中设置一个props用来接收父组件传递过来的数据。

props:{
    data:{
        type:Array,
        default(){
            return[]
        }
    },
    height:{
        type:Number,
        default:500
    },
    width:{
        type:Number,
        default:1240
    },
    delay:{
        type:Number,
        default:1500
    }
}

swiper.vue组件的template代码

父组件中引入和调用swiper组件

组件中通过computed来设置一个swiperSize，并将其动态绑定到对应的元素上，父组件没有传对应的值过来，就取props里的默认值，传值过来了，就以传值为准

computed:{
    swiperSize () {
        return {
            width: `${this.width}px`,
            height:`${this.height}px`
        }
    }

在data中设置一个动态的值来记录我们现在滚动到哪个图片了
activeIndex:0,
设置一个listWrapper来动态的计算整个轮播图大容器的宽度、高度以及位移距离

listWrapper(){
    return{
        width:`${(this.data.length+1) * this.width}px`,
        height:`${this.data.height}px`,
        transform:`translateX(-${this.width * this.activeIndex}px)`,
        transitionDuration:this.haveDuration ? '.3s' : ''
    }
}

将listWrapper绑定到轮播图的大容器ul上之后我们手动修改activeIndex就会发现图片发生了改变。接下来我们需要设置定时器来实现图片的自动播放。
首先在data定义一个命名定时器timertimer:null,
去methods定义方法

setTimer(){
    clearInterval(this.timer)
    this.timer = setInterval( ()=>{
        if(this.activeIndex === this.data.length){
            this.activeIndex =0
            this.haveDuration = false
        }else{
            this.activeIndex ++
            this.haveDuration = true
        }
    }
   ,this.delay )
}

在mounted挂载上面这个方法

mounted(){
    this.setTimer()
    haveDuration:true
}

haveDuration:true这个变量是用来控制过渡动画时间的阈值
至此，轮播图已经实现了自动切换，但还有很多功能没有完善
如：点击小圆点，切换到对应图片，其实就是给小圆点添加点击事件，点击对应的点，传递圆点所在的index，并赋值给activeIndex
小圆点在v-for循环时所对应的index就是我们需要的数据
优化：当轮播图自动播放到最后一张时，再回到第一张时会有一个快速闪动的画面，给人的感觉不是很友好。
比如说图片原来有五张，我们写死第六张，内容是和第一张是一样，当图片轮播到第六张时，我们取消掉过渡动画时间，然后快速切换到第一张，这时候再恢复过渡动画。
···

···
当元素每次动画做完都会触发一个transitionend方法，给图片容器ul绑定事件

setDuration(){
    if(this.activeIndex === this.data.length){
        this.activeIndex = 0
        this.haveDuration = false
    }
}

13.主图组件

需求：上面一张显示的大图，下面有五个小的缩略图，点击对应的缩略图会显示对应的大图

组件在不同地方使用的时候，样式肯定会有所不同，所以我们可以选择给组件写几套不同的样式，然后根据父组件传递过来的数据来确定使用哪套数据

props:{
      imgdata:{
          type:Array,
          default(){
              return [];
          }
      },
      type:{
          type:String,
          default:'small'
      }
  }

imgdata是组件所用的数据，type决定了组件使用哪一套样式。
html结构：

父组件引用的时候，传递对应type值就可以实现不同样式的切换了。

14.筛选框组件

因为此处的筛选涉及到多个条件，在这里不能简单的只是给对应点击的index加高亮样式，而是要创建一个对象，选择的数据要动态的加入到这个对象中，我们先在data中定义一个activeFilter: {}
给每一个可以点击选择的项添加点击事件，将其key值和value值传递给事件
@click="changeFilter(item.key,info.value)"
将值赋值给activeFilter

changeFilter(key, val) {
    this.$set(this.activeFilter, key, val);
    this.$emit("filter", this.activeFilter);
}

其中this. $emit('filter',this.activeFilter)把选择好的值发射给父组件，父组件可以根据拿到的筛选数据进行筛选。注意：通过点击事件拿到的值不能这样赋给activeFilter，这样vue检测不到数据的改变，应该使用vue提供的this.$ set
父组件将引用组件，传递数据data并且接受子组件传递过来的已选中的筛选数据activeFilter

父组件的商品列表数据中有一项是features，专门存储商品的各项属性的，我们可以根据此属性进行过滤，最终把符合条件的数据筛选出来。但是每次筛选都会把原始数据给搞乱，所以我们在父组件一开始拿到完整的商品列表数据的时候就拷贝一份就复制一份数据，这里不能是简单的等号，否则会形成引用关系
this.categoryListCopy = [].concat(data);
自定义事件filter触发了getQuery事件

getQuery(val) {
  this.currentQuery = val;
  this.sortGoods();
}

我们之所以在这里设置了 this.currentQuery = val以及把筛选代码移到sortGoods方法里，是因为我们需要对currentQuery做更多业务逻辑的处理。
下面是sortGoods方法的代码（这个方法会集中存放筛选和排序商品的代码）

sortGoods() {
  // 在每次筛选数据之前，我们都把备份数据再复制给categoryListData
  this.categoryListData = [].concat(this.categoryListCopy);
  // 当currentQuery存在的时候我们再进行过滤;
  if (this.currentQuery) {
    // 拿到Object.keys(val)的每一项key，形成一个数组
    Object.keys(this.currentQuery).forEach(key => {
      if (this.currentQuery[key]) {
        this.categoryListData = this.categoryListData.filter(item => {
          return item.features.indexOf(this.currentQuery[key]) >= 0;
        });
      }
    });
  }
  if (this.currentStock) {
    this.categoryListData = this.categoryListData.filter(item => {
      return item.available;
    });
  }
  if (this.currentKey) {
......
  }
},

Object.keys(obj) :
参数：要返回其枚举自身属性的对象
返回值：一个表示给定对象的所有可枚举属性的字符串数组

15.排序组件

排序组件中点击高亮的效果和点击选定的值都是存储在data中的activeSortKey中activeSortKey: "",
每一个a点击都会触发改变activeSortKey值的事件，并且高亮效果动态绑定
推荐
setSortKey事件还负责把选好的activeSortKey值发射给父组件

setSortKey(val) {
  this.activeSortKey = val;
  this.$emit("getKey", this.activeSortKey);
}

父组件根据自定义事件拿到值

getSortKey(key) {
  this.currentKey = key;
  this.sortGoods();
}

然后进行排序，现在sortGoods多了以下代码

sortGoods() {
    if (this.currentKey) {
    if (this.currentKey === "recommend") {
      this.categoryListData.sort((a, b) => {
        return b.shelveTime - a.shelveTime;
      });
    } else if (this.currentKey === "new") {
      this.categoryListData.sort((a, b) => {
        return b.publishedTime - a.publishedTime;
      });
    } else if (this.currentKey === "low") {
      this.categoryListData.sort((a, b) => {
        return b.goodsPrice - a.goodsPrice;
      });
    } else if (this.currentKey === "high") {
      this.categoryListData.sort((a, b) => {
        return a.goodsPrice - b.goodsPrice;
      });
    }
  }
}

排序的后面有个上下箭头，点击可以切换
a标签中的代码
价格
a标签click触发的changePrice事件

changePrice() {
  if (this.activeSortKey === this.activePrice) {
    this.activePrice = this.activeSortKey === "low" ? "high" : "low";
  }
  this.setSortKey(this.activePrice);
}

箭头绑定的sortArrow是个computed属性

sortArrow() {
  if (this.activePrice === "low") {
    return "icon-down";
  } else {
    return "icon-up";
  }
}

仅显示有货商品：在checkbox上v-model有一个值ifchecked，设置这个ifchecked值初始为false，默认点击就可以自动实现true和false之间的切换（选中时是true，未选中时是false），这时候watched这个值的变化，就可以实现watched里面逻辑代码的点击触发。

16.推荐组件

最外面的盒子宽度是1240px，margin：0 auto，里面的ul的宽度是在computed根据数据的长度动态计算出来的。

computed: {
   listWrapper() {
     return {
       width: `${this.data.length * 250}px`,
       transform:`translateX(-${this.activeIndex * 1240}px)`,
       transitionDuration :`.3s`
     };
   }
}

给左右翻页的箭头动态的绑定disable属性
左箭头，右箭头
prev和next的事件代码：

prev(){
  if(this.activeIndex === 0) return
  this.activeIndex -= 1
},
next(){
  if(this.activeIndex === this.pageSize) return
  this.activeIndex += 1
}

17.通过vuex响应式操作全选框

首先在vuex中的getters中设置一个值

isAllChecked(state){
    let checked = true
    state.shopcartData.forEach(item =>{
       if(!item.checked){
           checked = false
       }
    })
    return checked
}

只要数据中有任何一个是false，isAllChecked都会变成false
在购物车界面引入getters（语法糖）
import { mapGetters } from 'vuex'
挂载到computed中

computed: {
   ...mapGetters([
       'isAllChecked',
   ])
}

接下来绑定到input全选框中
全选
接下来实现：点击全选框，改变所有商品的选择状态
首先在mutations中设置一个方法

CHECKED_ALL_GOODS(state,checked){
   state.shopcartData.forEach(item =>{
       item.checked = !checked
   })
}

在购物车界面引入mutations（语法糖）
import { mapMutations } from 'vuex'
挂载到methods中

...mapMutations([
   'CHECKED_ALL_GOODS'
])

将点击事件绑定到input全选框中
全选
点击事件触发的checkAllGoods代码

checkAllGoods(){
     this.CHECKED_ALL_GOODS(this.isAllChecked)
}