Vue实战项目day02--电商后台管理系统(Element-ui)

最新推荐文章于 2023-08-09 22:38:13 发布

不忘初心L

最新推荐文章于 2023-08-09 22:38:13 发布

阅读量640

点赞数

分类专栏： Vue项目文章标签： vue

本文链接：https://blog.csdn.net/weixin_46379498/article/details/106878012

版权

本文详述了使用Vue和Element-UI构建电商后台管理系统的实践过程，包括后台首页布局、axios请求拦截器、菜单设置、用户列表展示、分页、状态更新、搜索功能以及添加用户功能的实现。

摘要由CSDN通过智能技术生成

Vue实战项目day02--电商后台管理系统Element-ui

今日目标

1.实现后台首页的基本布局
2.实现左侧菜单栏
3.实现用户列表展示
4.实现添加用户

效果如图
在这里插入图片描述

后台首页基本布局

打开Home.vue组件，进行布局：

<el-container class="home-container">
  <!-- 头部区域 -->
  <el-header>Header<el-button type="info" @click="logout"> 退出 </el-button></el-header>
  <!-- 页面主体区域 -->
  <el-container>
    <!-- 侧边栏 -->
    <el-aside width="200px">Aside</el-aside>
    <!-- 主体结构 -->
    <el-main>Main</el-main>
  </el-container>
</el-container>

默认情况下，跟element-ui组件同名的类名可以帮助我们快速的给对应的组件添加样式，如：

.home-container {
   
  height: 100%;
}
.el-header{
   
  background-color:#373D41;
}
.el-aside{
   
  background-color:#333744;
}
.el-main{
   
  background-color:#eaedf1;
}

顶部布局，侧边栏布局

<template>
    <el-container class="home-container">
      <!-- 头部区域 -->
      <el-header>
        <div>
          <!-- logo -->
          <img src="../.png" alt="">
          <!-- 顶部标题 -->
          <span>电商后台管理系统</span>
        </div>
        <el-button type="info" @click="logout"> 退出 </el-button>
      </el-header>
      <!-- 页面主体区域 -->
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px">
          <!-- 侧边栏菜单 -->
          <el-menu
            background-color="#333744"
            text-color="#fff"
            active-text-color="#ffd04b">
            <!-- 一级菜单 -->
            <el-submenu index="1">
              <!-- 一级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-location"></i>
                <!-- 文本 -->
                <span>导航一</span>
              </template>
              <!-- 二级子菜单 -->
              <el-menu-item index="1-4-1">
                <!-- 二级菜单模板 -->
                <template slot="title">
                  <!-- 图标 -->
                  <i class="el-icon-location"></i>
                  <!-- 文本 -->
                  <span>子菜单一</span>
                </template>
              </el-menu-item>
            </el-submenu>
            
          </el-menu>
        </el-aside>
        <!-- 主体结构 -->
        <el-main>Main</el-main>
      </el-container>
    </el-container>
</template>

axios请求拦截器

后台除了登录接口之外，都需要token权限验证，我们可以通过添加axios请求拦截器来添加token，以保证拥有获取数据的权限
在main.js中添加代码，在将axios挂载到vue原型之前添加下面的代码

//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config=>{
   
  //为请求头对象，添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem("token")
  return config
})

请求侧边栏数据

<script>
export default {
   
  data() {
   
    return {
   
      // 左侧菜单数据
      menuList: null
    }
  },
  created() {
   
    // 在created阶段请求左侧菜单数据
    this.getMe