10天完成民猫电商毕设——搜索&购物车实现（8th day）

1.关键技术点回顾

• 分页查询
  
• 分页显示
  思路：页面变化时，携带当前页码作为参数向后台发送分页数据请求，将响应结果存入vuex，而页面渲染的数据是从vuex中获得的，这样页面数据随着变化，实现了翻页的效果
  
  
• el-upload上传一张图片后让上传框消失

<style lang="less">
.hide .el-upload--picture-card {
  display: none;
}
</style>

data() {
	return{
		hideUploadEdit: false, // 是否隐藏上传按钮
	}
}

   handleRemove(file) {
      this.fileList.shift();
      this.hideUploadEdit = this.fileList.length >= 1;
    },
   handlePicChange(file, fileList) {
      // 大于1张隐藏
      this.hideUploadEdit = fileList.length >= 1;
    },

2.首页的最新发布和猜你喜欢

• 最新发布(保存到redis,设置redis的生命周期为10分钟)
  需求：把所有发布的商品按照时间排序，选择最新的六个显示
  实现思路：将所有商品按照发布时间降序排列，分页返回前六条
  
• 猜你喜欢
  根据用户的身份进行推荐
  学生/游客/其他：随机推荐六个显示，可以刷新，重新进行随机返回
  老师：推荐电子设备和生活娱乐六个显示，可以刷新
  

3.美化原生滚动条

效果：

其实我想它更加贴近视图边界的，可是当我为Home组件设置滚动条时，会出现神秘bug，比如表格在设置边框后会慢慢变宽恢复到原先样式
所以最后只能为Home组件的Mian区域设置滚动条了，导致滚动条与视图边界有一些距离，不太完美。

4.搜索功能实现

感觉可以把那个商品卡片抽出成一个组件，然后把数据给他，就可以渲染出商品卡片了，不过懒得搞了，我直接复制粘贴，哈哈哈

• 接口设计
  思路：根据参数keyword，进行模糊查询，返回查询结果
  报错解决：Uncaught (in promise) NavigationDuplicated
  router/index.js中使用Router前添加如下代码

const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

• 组件得到数据
  
• 组件渲染数据
  套用商品卡片实现

5.两个组件间数据同步变化实现总结

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//对外暴露store类的一个实例
export default new Vuex.Store({
    state: {
        searchRes: '',
    },
    mutations: {
        searchRes(state, searchRes) {
            state.searchRes = searchRes
        }
    },
    getters: {
        searchRes: (state) => {
            return state.searchRes
        }
    }
})

假设现在Home组件是数据提供方，而Search组件是数据接收方，要求我们当数据提供方提供的数据发生变化时，数据接收方马上能够同步响应这个变化。
Home:

this.searchRes(res);

Search:

 computed: {
    searchRes() {
      return this.$store.getters.searchRes;
    },
  },

查询结果数组为空时，显示无结果提示，这里判断数组为空是关键
设置搜索按钮的快捷键为Enter键

6.添加购物车实现

感觉现在需要自定义全局公共函数，多个组件需要使用公共函数了，不然每个组件都定义实现相同的加入购物车函数，太麻烦了，
不过还是因为前面没有把商品卡片组件化，导致现在的麻烦，看来可能还是需要重构一下代码，现在首页展示，分类展示和搜索结果展示都是使用商品卡片渲染数据的，需要全部抽出成为一个商品卡片组件
两种方法实现自定义全局公共函数：

• 针对单独零散的函数
  main.js中：Vue.prototype.ajax= function (){}
  组件中：this.ajax()
• 针对多个函数
  定义实现

// xx.js文件
var tools = {}
tools.addNum = function (x, y) {
  return x * y
} // 还可以在这个文件里面添加多个函数
tools.install = function (Vue, options) {
  Vue.prototype.$tools = tools
  Vue.tools = tools
}
export default tools

全局注册

// main.js
import tools from 'xx'
Vue.use(tools)

组件中使用

// 子组件
let yy = this.$tools.addNum(6, 9)
console.log(yy) // 54

需要传入的参数为：商品ID，用户ID
接口设计：
思路：需要实现两个接口，分别先后在t_order和t_order_product表中插入记录


返回的订单id需要作为t_order_product的外键插入

7.解决datetime勾选了根据当前时间戳更新却为null的问题（Navicat）

默认：CURRENT_TIMESTAMP
如果设置了CURRENT_TIMESTAMP为默认值，勾选了根据当前时间更新,表示每次更新这条数据的时候，该字段都会更新成当前时间
不勾选则表示当插入数据的时候，该字段默认值为当前时间
可以根据这个特性来生成【创建时间】和【更新时间】两个字段，且不需要代码来维护

8.解决this.$confirm弹窗导致页面左移抖动问题

原因是有弹窗后增加了一个padding-right:17px的样式
在App.vue的样式中增加如下样式：

body {
  padding-right: 0 !important;
}
/* 页面防抖 */
.fade-leave-to {
  display: none;
}

参考文章：
Vue怎么判断数组、对象（集合）是否为空、属性是否为空字符传、json字符串，数组，对象的相互转换
vue自定义全局公共函数
Java 生成订单号（唯一id）方案
vue中使用Element组件el-dialog导致页面偏移——解决方法