电商后台管理4-商品列表及添加商品(list.vue和add.vue)

1、商品列表页面
商品列表的页面如图：这个页面其实比较简单，面包屑导航、搜索框、添加商品按钮，以及下面的表格，代码如图：


基本比较容易，就一个过滤器需要实现，本身的创建时间是以毫秒显示出来，这里需要格式化为年月日时分秒的格式。

首先在main.js中注册了全局过滤器（以下出自vue.js官网）

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

{ { message | capitalize }}

< div v-bind:id=“rawId | formatId”>

你可以在一个组件的选项中定义本地的过滤器

filters: {
capitalize: function (value) {
if (!value) return ‘’
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}

或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter(‘capitalize’, function (value) { if (!value) return ‘’
value = value.toString() return value.charAt(0).toUpperCase() +
value.slice(1) })

new Vue({ // … })

也就是说在对文本格式化式，定义一个过滤器，可以对文本实现过滤的效果。
这里我们考虑定义一个全局的格式化时间的过滤器，以便多次用到。以下为我的代码：
dataFormat为过滤器的名字，originVal为传进的值，首先需要将毫秒数据转换成Data型，获取月份时记得加1，因为它本身获取的是0-11，月份只比本身的少1，要了解es2017的padStart的可以看这里
就是说要将字符串不足2位的在前面补0，但是由于该函数只接收字符串，所以+‘’将Number转换成String才可以。

Vue.filter('dataFormat', function(originVal) {
   
    const dt = new Date(originVal)
    const y = dt.getFullYear()
    const m = (dt.getMonth() + 1 + '').padStart(2, '0')
    const d = (dt.getDay() + '').padStart(2, '0')
    const hh = (dt.getHours() + '').padStart(2, '0')
    const mm = (dt.getMinutes() + '').padStart(2, '0')
    const ss = (dt.getSeconds() + '').padStart(2, '0')
    return `${
   y}-${
   m}-${
   d}