黑马】后台管理176-183

一、新建订单管理的分支

二、创建一个订单管理的vue文件

进行组件页面的路由配置

import Order from '../components/order/Order.vue'

{path:'/orders',component:Order},

注意上面的components不要忘记少加一个s！

三，获取后台数据

1. 面包屑导航

粘贴过来

2. 文本输入框，

添加一个卡片区域

<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><el-col :span="8"><el-input placeholder="请输入内容"><el-button slot="append" icon="el-icon-search"></el-button></el-input></el-col></el-row></el-card></div>
</template><script>
export default {data() {return {queryInfo: {query: '',pagenum: 1,pagesize: 10}}},created() {this.getOrderList()},methods: {async getOrderList() {const { data: res } = await this.$http.get('orders', {params: this.queryInfo})if (res.meta.status !== 200) {return this.$message.error('获取订单列表失败！')}console.log(res)}}
}
</script><style  lang="less" scoped></style>

可以看到后台数据中有total总数据条数，和goods

需要在代码中进行获取到动态的数据。

新增orderlist 订单列表，默认为空数组,存放goods

在数据获取回来之后，为这两个参数赋值

 this.total = res.data.totalthis.orderlist = res.data.goods

这样就获取到了订单列表数据

四、订单数据渲染到页面中

物流管理那块接口不能用了，直接把信息粘贴过来就可以。