VUE前台项目day_04

最新推荐文章于 2024-05-30 11:27:58 发布

郝丽友巧克力派

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量72

点赞数

文章标签： vue.js 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/m0_61235042/article/details/128775113

版权

一、swiper轮播图的使用

(一)mock.js的基本使用

先安装npm i mockjs

新建mock/index.js

import Mock from 'mockjs'

3.在main.js中引入，使mock参与到项目当中

(二)模拟轮播图和楼层数据

从这里我就开始疯狂踩坑，一直涉及跨域问题，但是用了对应的方法解决也不顶事。

接下来就是在index.js文件中编写代码

先在mock文件夹中引入两个json文件

import Mock from 'mockjs'
import floor from './floor'
import slide from './slide'

Mock.mock('/mock/slide',{code:200,data:slide})
Mock.mock('/mock/floor',{code:200,data:floor})

为mock封装axios，api文件夹中copy一下ajax.js文件夹，改文件名为mAjax.js,在文件中修改路径（踩坑一）

去src/api/index.js中追加两个请求函数，分别用于请求楼层数据，请求轮播图数据

export const reqSlideList = () => mAjax.get('/slide')

export const reqFloorList = () => mAjax.get('/floor')

(三)将轮播图数据存入vuex

ListContainer组件一挂载，就分发一个getslideList获取轮播图数据

mounted(){
  this.$store.dispatch('getslideList')
}

2.编写store/home.js文件（踩坑二）

const actions = {
  async getSlideList({commit}){
     let result = await reqSlideList()
     if(result.code === 200){
       commit('SAVE_SLIDE_LIST',result.data)
     }
  }
}
const mutations = {
  SAVE_SLIDE_LIST(state,slideList){
      state.slideList = slideList
  }
}
const state = {
  slideList:[]
}

(四)制作ListContainer轮播图

控制台npm i swiper@4 （很奇怪的一个点，除了5版本，其余版本都能够安装成功，浏览过很多大佬的文章，这个问题还是没有解决，有好的办法欢迎后台踢踢我）

swiper的基本用法：

a.先引入相关的包；
b.页面结构必须要有（先获取轮播图的静态效果）；
c.再new swiper（获取轮播图的动态效果）

2.ListContainer文件中引入swiper和swiper样式

3.搭建swiper结构，利用v-for遍历mock

4.给轮播图添加动态数据，但不能直接存入mounted中

解决方法一：在外层包一个定时器，但是由于发送ajax请求的时间不确定，所以定时器的时间也不好确定

解决方法二：利用watch($nextTick)监听事件

watch:数据监听，监听已有数据的变化

$nextTick：在等下次DOM更新，循环结束之后执行延迟回调。在修改数据之后，立即执行回调函数

5.轮播图的注意事项：

必须先准备好结构，再去new Swiper

Swiper实例和容器必须要一一对应

有些配置直接到官网搜索就好了

(五)制作Floor楼层

将楼层数据存入vuex中

到mock中模拟楼层数据

二、Search搜索模块的业务

(一)准备静态组件

ctrl CV静态组件到项目当中

到route/routes.js中配置路由

import Search from '/Search'

{
  name:'search',
  path:'/search',
  components:Search
}

(三)面包屑部分的开发

分类名的面包屑

要从searchParams中得到CategoryName，然后展示到页面；

利用v-show做判断，避免在没有携带参数的情况下出现bug

实现移除分类名（x）功能

依赖watch对$route监视的写法

利用methods方法

/*
分析：
第一件事：路径得改，去掉分类名、分类编号
第二件事：将searchParams里的category?Id、categoryName置空
第三件事：去掉分类名、分类编号，重新搜索一下
*/

2.关键词的面包屑

要从searchParams中得到keyword，然后展示到页面；

利用v-show做判断，避免在没有携带参数的情况下出现bug

实现移除分类名（x）功能

和分类名不同的是，要清空搜索框，所以这时要利用全局事件总线来处理问题

安装全局事件总线，编辑main.js

搜索框属于Header组件，所以要通知Header组件

之后在removeKeyword补一句代码

this.$bus.$emit("clear-keyword")

3.品牌名的面包屑

要从SearchSelector组件文件中传数据给Search组件，由于品牌名不需要存入路径当中，所以要用自定义事件来完成功能。

Search组件中：

<template>
  <SearchSelector @send-trademark="saveTrademark">
</template>

methods:{
  saveTrademark(trademark){
    //将获取到的数据存入Search中
    this.searchParams.trademark = trademark.tmId + ":" + trademark.tmName
   //重新搜索
    this.store.$dispatch('getSearchInfo',this.searchParams)
  }
}

补充自定义事件：子组件给父组件传递参数（顾名思义就是自己创建一个事件，比如事件名，事件回调，然后给自己的组件使用）

父组件给子组件传递参数可以使用props来实现，要想给子组件传值时，需要给子组件引入的地方绑定一个属性，属性值就是要传入的数据，并且要在父组件中引入子组件，子组件要用props来接收数据，之后就可以使用插值语法在页面实现。

父组件代码如下：

<template>
  <div>
    父组件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <child :inputName="name"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>

子组件代码如下：

<template>
  <div>
    子组件:
    <span>{{inputName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      inputName: String,
      required: true
    }
  }
</script>

通过自定义事件来实现子给父传递值

自定义事件要用到v-on，也就是v-on用在谁身上，就是在谁的组件实例上绑定了事件，v-on的简写形式是@。

在父组件中给子组件绑定一个自定义事件