商品列表

创建分支

  • 开发新功能,创建goods_list分支
1
2
3
git branch
git checkout -b goods_list
git push -u origin goods_list

商品路由

  • 创建Goods.vue组件,并配置好路由。发送请求获取商品数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export default {
name: 'Goods',
data() {
return {
// 查询参数对象
queryInfo: {
query: '',
pagenum: 1,
pagesize: 10,
},
// 商品列表
goodsList: [],
// 商品总数
total: 0,
}
},
created() {
this.getGoodsList()
},
methods: {
// 获取商品列表
async getGoodsList() {
const { data: res } = await this.$http.get('goods', {
params: this.queryInfo,
})
if (res.meta.status !== 200) {
return this.$message.error('获取商品列表信息失败')
}
this.goodsList = res.data
this.total = res.data.total
},
},
}

渲染视图

  • 使用到了表格组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<template>
<div>
<!--面包屑导航区-->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
<el-breadcrumb-item>商品列表</el-breadcrumb-item>
</el-breadcrumb>
<!--卡片视图区-->
<el-card class="box-card">
<!--搜索框-->
<el-row :gutter="20">
<el-col :span="7">
<el-input placeholder="请输入内容">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary">添加商品</el-button>
</el-col>
</el-row>
<!--talbe表格-->
<el-table :data="goodsList" border stripe>
<el-table-column label="#" type="index"></el-table-column>
<el-table-column label="商品名称" prop="goods_name"></el-table-column>
<el-table-column label="商品价格" prop="goods_price" width="95px"></el-table-column>
<el-table-column label="商品重量" prop="goods_weight" width="70px"></el-table-column>
<el-table-column label="创建时间" prop="add_time" width="140px"></el-table-column>
<el-table-column label="操作" width="200px">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>

  • 可用看到时间是毫秒格式,需要自定义时间格式。可以通过定义全局过滤器实现,在main.js中定义dateFormat过滤器
1
2
3
4
5
6
7
8
9
10
11
Vue.filter('dateFormat', function(originVal) {
const dt = new Date(originVal)
const y = dt.getFullYear()
// 月份 不足两位用0填充,通过 + '' 转为字符串
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}`
})
  • 然后在创建时间那一列使用模板列自定义数据,通过过滤器格式化日期
1
2
3
4
5
<el-table-column label="创建时间" width="170px">
<template slot-scope="scope">
{{scope.row.add_time | dateFormat}}
</template>
</el-table-column>

分页功能

  • 通过添加background属性可以添加背景
1
2
3
4
5
6
7
8
9
10
11
12
<!--分页-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[5,10,15,20]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
background
>
</el-pagination>
  • 编写回调函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
export default {
name: 'Goods',
data() {
return {
// 查询参数对象
queryInfo: {
query: '',
pagenum: 1,
pagesize: 5,
},
// 商品列表
goodsList: [],
// 商品总数
total: 0,
}
},
created() {
this.getGoodsList()
},
methods: {
// 获取商品列表
async getGoodsList() {
const { data: res } = await this.$http.get('goods', {
params: this.queryInfo,
})
if (res.meta.status !== 200) {
return this.$message.error('获取商品列表信息失败')
}
this.goodsList = res.data.goods
this.total = res.data.total
},
handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize
this.getGoodsList()
},
// 页码值发现变化
handleCurrentChange(newPage){
this.queryInfo.pagenum = newPage
this.getGoodsList()
}
},
}

删除功能

  • 给删除按钮绑定事件,通过ID删除商品
1
<el-button @click="removeById(scope.row.goods_id)">删除</el-button>
  • 编写函数发送请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 根据ID删除商品
async removeById(id) {
const confirmResult = await this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).catch(err => err)
if(confirmResult !== 'confirm'){
return this.$message.info('已取消删除')
}
// 发送请求删除
const { data: res } = await this.$http.delete(`goods/${id}`)
if(res.meta.status !== 200){
this.$message.error('删除失败')
}
this.$message.success('删除成功')
this.getGoodsList()
}