电商后台管理系统商品商品列表
程序员文章站
2024-03-26 08:52:41
...
一 代码
1 新建 List.vue 组件
<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>
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getGoodsList">
<el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary">添加商品</el-button>
</el-col>
</el-row>
<!-- table 表格区域-->
<el-table :data="goodslist" border stripe>
<el-table-column type="index"></el-table-column>
<el-table-column label="商品名称" prop="goods_name"></el-table-column>
<el-table-column label="商品价格(元)" prop="goods_price" width="90px"></el-table-column>
<el-table-column label="商品重量" prop="goods_weight" width="70px"></el-table-column>
<el-table-column label="创建时间" prop="add_time" width="140px">
<template slot-scope="scope">
{{scope.row.add_time | dateFormat}}
</template>
</el-table-column>
<el-table-column label="操作" width="230px">
<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-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>
</el-card>
</div>
</template>
<script>
export default {
name: "List",
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.$message.success('获取商品列表成功')
console.log(res.data)
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()
}
}
}
</script>
<style scoped>
</style>
2 修改路由 index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入登录组件
import Login from "../components/Login";
// 导入Home 组件
import Home from "../components/Home";
// 导入Welcome 组件
import Welcome from "../components/Welcome";
// 导入 Users 组件
import Users from "../components/user/Users";
// 导入权限列表 组件
import Rights from "../components/power/Rights";
// 导入角色列表 组件
import Roles from "../components/power/Roles";
// 导入商品分类 组件
import Cate from "../components/goods/Cate";
// 导入商品分类参数 组件
import Params from "../components/goods/Params";
// 导入商品列表组件
import GoodsList from "../components/goods/List";
import {renderThumbStyle} from "element-ui/packages/scrollbar/src/util";
Vue.use(VueRouter)
const routes = [
// 路由重定向,当访问/,就会重定向到/login
{
path: '/',
redirect: '/login'
},
// 定义登录路由规则
{
path: '/login',
component: Login
},
// 定义Home的路由规则
{
path: '/home',
component: Home,
redirect: '/welcome',
children: [
{
path: '/welcome',
component: Welcome
},
/* 用户管理 */
{
path: '/users',
component: Users
},
/* 权限管理 */
{
path: '/rights',
component: Rights
},
/* 角色管理 */
{
path: '/roles',
component: Roles
},
/* 商品分类 */
{
path: '/categories',
component: Cate
},
/* 商品分类参数 */
{
path: '/params',
component: Params
},
/* 商品列表 */
{
path: '/goods',
component: GoodsList
},
]
}
]
const router = new VueRouter({
routes
})
// 挂载路由导航守卫
// to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是个函数,表示放行 next() 放行 next('/login') 强制跳转
router.beforeEach((to, from, next) => {
// 如果用户访问的登录页,直接放行
if (to.path === '/login') return next();
// 从 sessionStorage 中获取到保存的 token 值
const tokenstr = window.sessionStorage.getItem('token')
// 没有 token,强制跳转到登录页
if (!tokenstr) return next('/login')
next()
})
export default router
3 给 main.js 增加时间过滤器
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// 导入阿里的字体图标
import './assets/fonts/iconfont.css'
// 导入全局样式表,使得全局样式生效
import './assets/css/global.css'
// 全局导入axios
import axios from 'axios'
// 导入TreeTable 插件
import TreeTable from 'vue-table-with-tree-grid'
// 设置axios请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// axios请求拦截
axios.interceptors.request.use(config => {
// 为请求头对象,添加 Token 验证的 Authorization 字段
config.headers.Authorization = window.sessionStorage.getItem('token')
return config
})
Vue.prototype.$http = axios
Vue.config.productionTip = false
// 注册 TreeTable 组件
Vue.component('tree-table', TreeTable)
// 添加时间过滤器
Vue.filter('dateFormat', function (originVal) {
const dt = new Date(originVal)
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}`
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
二 效果