接第一周对接登录和获取个人信息接口实现登录后，下面继续来开发蓝桥到家后台管理
第一步：先新建【商品管理模块】/【商品列表页面】，配置路由
- 在
router/index.js文件内，删除多余的路由，新建我们所需的路由
{
path: '/shopModel',
component: Layout,
alwaysShow: true,//始终显示父节点
name: 'ShopModel',
meta: { title: '商品管理', icon: 'el-icon-s-help' },
children: [
{
path: '/shopModel/shopList',
name: 'ShopList',
component: () => import('@/views/shopModel/shopList/index'),
meta: { title: '商品列表', icon: 'table' }
},
]
},
- 然后，在
views目录下新建shopModel/shopList目录，在shopList目录下，新建index.vue
- ps：删除掉多余无用的页面
第二步：实现shopList页面内的折叠面板
image.png
- 通过分析设计图可以看出，整个页面是基于一个类似卡片的上面来实现，并且上下左右都有一些边距，
element-ui的el-card正好可以满足我们的需求
<template>
<div class="shopList">
<el-card>
卡片
</el-card>
</div>
</template>
//css
.shopList {
margin: 10px;
}
- 然后再来实现折叠面板，可以使用
element-ui的Collapse 折叠面板
<el-card>
<!-- 折叠面板 -->
<el-collapse v-model="activeNames">
<el-collapse-item title="商品列表" name="1">
<div class="tip">
操作提示
</div>
<div>
1. 该页面展示了商城所有的商品信息，可对商品进行编辑修改操作。
</div>
<div>
2. 商品下架后将无法在前台展示，请慎重操作。
</div>
</el-collapse-item>
</el-collapse>
</el-card>
//data
data(){
return{
activeNames:['1']
}
}
//css
.tip{
color: #55ca7d;
font-weight: bold;
}
// ::v-deep 样式穿透
::v-deep .el-collapse-item__header{
color: #55ca7d;
}
::v-deep .el-collapse-item__wrap{
border: 1px dashed #55ca7d;
background-color: #f0fdf5;
padding: 10px;
}
::v-deep .el-collapse-item__content{
padding-bottom: 0;
}
第三步：实现tabs标签页，使用到element-ui的el-tabs
<div class="tabs">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="商品列表" name="first">商品列表</el-tab-pane>
<el-tab-pane label="上架商品" name="second">上架商品</el-tab-pane>
<el-tab-pane label="下架商品" name="third">下架商品</el-tab-pane>
</el-tabs>
</div>
//data
data() {
return {
activeNames: ["1"],
activeName: "first",//默认选中first的tabs标签页
};
},
//methods
methods: {
/**
* 点击tabs标签触发
*/
handleClick() {},
},
//css
.tabs {
::v-deep .el-tabs__item.is-active {
color: #55ca7d;
}
::v-deep .el-tabs__item {
&:hover {
color: #55ca7d;
}
}
::v-deep .el-tabs__active-bar {
background-color: #55ca7d;
}
}
第四步：实现bar操作栏
image.png
el-tab-pane label="商品列表" name="first">
<!-- bar -->
<div class="bar">
<div class="left">
<el-button type="primary" size="small" icon="el-icon-plus"
>添加商品</el-button
>
<el-button type="danger" size="small" icon="el-icon-delete"
>批量删除</el-button
>
</div>
<div class="right">
<div class="flex">
<label>商品名称</label>
<el-input
placeholder="请输入商品名称"
size="small"
></el-input>
</div>
<div class="flex date">
<label>时间</label>
<el-date-picker
v-model="date"
type="date"
size="small"
placeholder="选择日期"
>
</el-date-picker>
</div>
<el-button type="primary" icon="el-icon-search" size="small">查询</el-button>
</div>
</div>
</el-tab-pane>
//data
data() {
return {
activeNames: ["1"],
activeName: "first",
date:""
};
},
//css
.bar {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #eee;
padding: 10px;
box-sizing: border-box;
.right {
display: flex;
.flex {
display: flex;
white-space: nowrap; //文字强制不换行
align-items: center;
label {
margin-right: 5px;
font-size: 14px;
}
}
.date{
margin: 0 10px;
}
}
}
第五步：实现table表格，使用到element-ui的el-table
<div class="table">
<el-table
ref="multipleTable"
:height="tableHeight"
:data="tableData"
size="small"
style="width: 100%"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="a" label="商品编号" align="center">
</el-table-column>
<el-table-column prop="b" label="商品分类" align="center">
</el-table-column>
<el-table-column prop="c" label="商品名称" align="center">
</el-table-column>
<el-table-column prop="d" label="价格" align="center">
</el-table-column>
<el-table-column prop="e" label="是否上架" align="center">
</el-table-column>
<el-table-column prop="f" label="库存" align="center">
</el-table-column>
<el-table-column prop="g" label="上架时间" align="center">
</el-table-column>
<el-table-column label="操作" align="center">
<template>
<el-button size="mini">编辑</el-button>
<el-button size="mini" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<div class="page">
<el-pagination
background
layout="prev, pager, next"
:total="1000"
>
</el-pagination>
</div>
</div>
//data
tableHeight: document.documentElement.clientHeight - 410,
tableData: [
{
a: 1,
b: "生活用品",
c: "被褥",
d: 59.9,
e: "是",
f: 100,
g: "2022-9-26 12:00",
},
],
//methods
/**
* 多选表格时触发
*/
handleSelectionChange() {},
//mounted
mounted() {
window.onresize = () => {
this.tableHeight = document.documentElement.clientHeight - 410
};
},
//css
.table {
.page {
text-align: right;
margin-top: 12px;
}
}
第五步：请求接口，替换掉我们定义的假数据
- 先看接口文档
https://www.showdoc.com.cn/2059631189527964/9359476396304708，找到获取商品列表接口/api/query/goods
- 在项目目录
src/api/user.js中新建一个获取商品列表的接口
/**
*
* @returns 获取商品列表
*/
export function getShopList(params) {
return request({
url: '/api/query/goods',
method: 'get',
params
})
}
import { getShopList } from "@/api/user";
- 再定义一个获取商品列表的方法，去调用getShopList接口
getShopListFun() {
let obj = {
page:this.page,
size:this.size
}
getShopList(obj).then((res) => {
console.log(res);
this.tableData = res.data
this.total = res.total
});
},
//data
data() {
return {
activeNames: ["1"],
activeName: "first",
date: "",
tableHeight: document.documentElement.clientHeight - 410,
tableData: [],
page:1,//第几页
size:5,//每页显示条数
total:0,//总条数
};
//mounted
mounted() {
window.onresize = () => {
this.tableHeight = document.documentElement.clientHeight - 410;
};
this.getShopListFun();
},
- 然后拿到后端的接口数据，替换 table 表格中的prop ，那些 abcdefg，替换成对应的值
- a => number 商品编号
- b => category 商品分类
- c => name 商品名称
- d => price 价格
- e = > status 是否上架
- f => stock 库存
- g => date上架时间
下面实现分页
- 完善下分页组件，total是总条数，page-size 是 每页显示几条数据，current-change是分页触发的函数方法
<el-pagination
background
layout="prev, pager, next"
:total="total"
:page-size="size"
@current-change="currentChangeFun"
>
</el-pagination>
//methods
/**
* 分页触发
*/
currentChangeFun(e){
console.log(e);
this.page = e
this.getShopListFun()
}
待续...
网友评论