【愚公系列】《循序渐进Vue.js 3.x前端开发实践》068-商业项目：电商后台管理系统实战（主页模块开发）

愚公搬代码

发布于 2025-06-03 00:28:58

12600

代码可运行

文章被收录于专栏：循序渐进Vue.js 3.x前端开发实践循序渐进Vue.js 3.x前端开发实践

运行总次数：0

代码可运行

🚀前言

随着电子商务的蓬勃发展，电商后台管理系统的重要性愈发凸显。作为电商运营的核心，后台管理系统不仅需要提供全面的数据管理功能，还要确保用户体验流畅、界面友好。而主页模块作为用户首次接触系统的界面，其设计和功能实现直接影响着管理者的工作效率和用户的使用体验。

本文将以电商后台管理系统的主页模块开发为主题，带你深入探索如何构建一个功能丰富、界面美观的主页模块。我们将从需求分析开始，逐步引导你实现主页所需的各项功能，例如数据概览、快捷操作入口、实时统计图表等。

🚀一、主页模块开发

🔎1.主页框架搭建

电商后台管理系统包含多个管理模块，如商品管理、订单管理、店铺管理等。我们可以通过嵌套路由的方式来管理主页中的管理模块。

🦋1.1 路由定义

首先，修改 Router.js 文件，新增订单管理模块的路由。代码如下：

// Router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/components/home/Home.vue';
import Order from '@/components/order/Order.vue';

const routes = [
  {
    path: '/home',
    component: Home,
    name: 'home',
    children: [
      {
        path: 'order/:type', // 0是普通订单，1是秒杀订单
        component: Order,
        name: 'Order'
      }
    ],
    redirect: '/home/order/0'
  }
  // 其他路由...
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

🦋1.2 主页面模板

电商后台管理系统的主页需要包含一个侧边栏菜单和一个主体功能模块。侧边栏用来进行主体功能模块的切换。修改 Home.vue 中的模板代码如下：

<!-- Home.vue -->
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

// 根据选中的选项来跳转到对应组件
function selectItem(path) {
  router.push(path);
}
</script>

<template>
  <el-container id="container">
    <el-aside width="250px">
      <el-container id="top">
        <img style="width:25px;height:25px;margin:auto;margin-right:0;" src="/logo.png" />
        <div style="margin:auto;margin-left:10px;color:#ffffff;font-size:17px">
          电商后台管理
        </div>
      </el-container>
      <el-menu
        :default-active="$route.path"
        style="height:100%"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="selectItem"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><List/></el-icon>
            <span>订单管理</span>
          </template>
          <el-menu-item index="/home/order/0">普通订单</el-menu-item>
          <el-menu-item index="/home/order/1">秒杀订单</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><Shop/></el-icon>
            <span>商品管理</span>
          </template>
          <el-menu-item index="/home/goods/0">普通商品</el-menu-item>
          <el-menu-item index="/home/goods/1">秒杀商品</el-menu-item>
          <el-menu-item index="/home/goods/2">今日推荐</el-menu-item>
          <el-menu-item index="/home/category">商品分类</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><Avatar/></el-icon>
            <span>店长管理</span>
          </template>
          <el-menu-item index="/home/ownerlist">店长列表</el-menu-item>
          <el-menu-item index="/home/ownerreq">店长申请审批列表</el-menu-item>
          <el-menu-item index="/home/ownerorder">店长订单</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon><Ticket/></el-icon>
            <span>财务管理</span>
          </template>
          <el-menu-item index="/home/tradeinfo">交易明细</el-menu-item>
          <el-menu-item index="/home/tradelist">财务对账单</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon><Tools/></el-icon>
            <span>基础管理</span>
          </template>
          <el-menu-item index="/home/data">数据统计</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-main>
      <!-- 这里用来渲染具体的功能模块 -->
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<style scoped>
#container {
  height: 100%;
  width: 100%;
  position: absolute;
}

#top {
  background-color: #545c64;
  margin-right: 1px;
  text-align: center;
  height: 60px;
}
</style>

在 components 文件夹下，新建一个名为 order 的子文件夹，并在其内新建一个名为 Order.vue 的文件，用来简单演示本节所编写代码的效果。在 Order.vue 文件中编写如下代码：

<!-- Order.vue -->
<template>
  <h1>{{$route.path}}: {{ $route.params }}</h1>
</template>

在 Router.js 文件中引用此组件，运行工程代码，效果如图所示。

🔎2.完善注销功能

在主页添加一个公用的头视图，布局一个“注销”按钮。

修改 Home.vue 文件中的 el-main 组件如下：

<!-- Home.vue -->
<script setup>
import { useRouter } from 'vue-router';
import Storage from '../../tools/Storage.js';

const router = useRouter();
const store = Storage();

// 注销方法
function logout() {
  store.clearUserInfo();
  router.push({ name: 'login' });
}
</script>

<template>
  <el-main style="padding:0">
    <!-- 添加一个通用的头部 -->
    <el-header style="margin:0;padding:0;" height="80px">
      <el-container style="background-color:blanchedalmond;margin:0;padding:0;height: 80px">
        <div style="margin:auto;margin-left:100px">
          <h1>欢迎您登录后台管理系统，管理员</h1>
        </div>
        <div style="margin:auto;margin-right:50px">
          <el-button type="primary" @click="logout">注销</el-button>
        </div>
      </el-container>
    </el-header>
    <!-- 这里用来渲染具体的功能模块 -->
    <router-view></router-view>
  </el-main>
</template>