vue_shop后台管理系统—商品列表

商品管理下的商品列表子菜单，其中添加商品也增加了一个组件Add.vue

商品列表

1. 创建分支

在master上创建出一个新的子分支goods_list

git checkout -b goods_list

将分支推送到码云上

 git push -u origin goods_list

2. 绘制页面结构

• BreadCrumb面包屑导航区域
• Card卡片视图区域
  1. 第一列是input输入框
  2. 一行中的第二列放置 “添加分类”按钮
  3. 商品列表 table 表格区域
  4. 底部 Pagination 分页区域

gutter：栅格间隔

span：栅格占据的列数

3. 请求获取商品列表数据

• 请求路径：goods

• 请求方法：get

• 请求参数

  query：查询关键字参数，query需要和页面上的文本输入框进行数据绑定

  data() {
   
    return {
   
      // 5.3 查询参数对象
      queryInfo: {
   
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 10
      },
      // 5.5 商品列表
      goodsList: [],
      // 5.6 商品总数据条数
      total: 0
    }
  },
  created() {
   
    // 5.1
    this.getGoodsList()
  },
  methods: {
   
    // 5.2 根据分页获取对应的商品列表
    async getGoodsList() {
   
      // 5.4 发起请求
      const {
    data: res } = await this.$http.get('goods', {
   
        params: this.queryInfo
      })
      if (res.meta.status !== 200) {
   
        return this.$message.error('获取商品列表数据失败')
      }
      this.$message.success('获取商品列表数据成功')
      // console.log(res.data)
      this.goodsList = res.data.goods
      this.total = res.data.total
    }
  }

4. 展示商品列表数

// 5. 商品列表区 -->
<el-table :data="goodsList" style="width: 100%" border stripe>
  <el-table-column type="index"></el-table-column>
	<el-table-column prop="goods_name" label="商品名称"> </el-table-column>
	<el-table-column prop="goods_price" label="商品价格(元)" width="90">
  </el-table-column>
  <el-table-column
  prop="goods_weight"
  label="商品重量"
  width="70"
  ></el-table-column>
  <el-table-column
  prop="add_time"
  label="创建时间"
  width="140"
  ></el-table-column>
  <el-table-column label="操作" width="180">
    <template>
      // 修改按钮 -->
      <el-button
        type="primary"
        icon="el-icon-edit"
        size="medium"
        ></el-button>
      // 删除按钮 -->
      <el-button
        type="danger"
        icon="el-icon-delete"
        size="medium"
      ></el-button>
		</template>
	</el-table-column>
</el-table>

此时创建时间是以毫秒形式展示在页面上的，我们需要把时间更改为：2022年6月16日11:41:47 的形式

业务逻辑：在入口文件main.js上注册一个全局过滤器，第一个参数为过滤器名称，第二个参数是过滤器的处理函数，指定一个形参为originVal，即需要处理的时间数据，

padStart(targetLength,padString) 方法用另一个字符串填充当前字符串 (如果需要的话，会重复多次)，以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充

• targetLength：当前字符串需要填充到的目标长度

• padString：填充字符串

// main.js
// 注册全局过滤器
Vue.filter('dateFormat', function(originVal) {
   
  const dt = new Date(originVal * 1000)

  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').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} ${
     hh}:${
     mm}:${
     ss}