登录页链接:实现后台管理系统的业务逻辑（登录页）

一、配置路由

 {
   name: 'index',
   path: '/index',
   // 异步引入组件
   component: () => import('@/views/index.vue'),
        },

二、制作首页组件

2.1整体结构

整体结构为左边侧边栏放置导航菜单,右边分上头部下主题结构. element组件:Container 布局容器 <el-container>：外层容器。 <el-header>：顶栏容器。 <el-aside>：侧边栏容器。 <el-main>：主要区域容器。

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>

2.2左侧菜单栏添加

element组件: 1.NavMenu 导航菜单>侧栏 2.icon图标 实现思路: 1.删除不需要的代码 2.添加icon图标,该组件添加的方式为<组件><i class='icon'><span>文字</span></i><组件> 3.展开子菜单时,其余子菜单收起。unique-opened:true为只保持一个子菜单展开

<template>
  <div class="index">
    <!-- 外层容器 -->
    <el-container>
      <!-- 侧边栏容器 -->
      <el-aside width="200px">
        <!-- el-menu:整个菜单结构 -->
        <!-- unique-opened:true为只保持一个子菜单展开 -->
        <!-- router:启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
        <el-menu
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :unique-opened="true"
          :router="true"
        >
          <!-- el-submenu:一级菜单项 -->
          <!-- index:唯一标识,如果标识一样会同时展开和收起 -->
          <el-submenu index="1">
            <template slot="title">
              <!-- i:存放字体图标 -->
              <i class="el-icon-location"></i>
              <span>用户管理</span>
            </template>
            <!-- el-menu-item-group:二级菜单项 -->
            <el-menu-item-group>
              <!-- index:已启动router模式,这里可以当path进行跳转页面 -->
              <el-menu-item index="1-1"
                ><i class="el-icon-user"></i>
                <span>用户列表</span></el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>文章管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="postList"
                ><i class="el-icon-user"></i>
                <span>文章列表</span></el-menu-item
              >
              <el-menu-item index="2-2"
                ><i class="el-icon-user"></i>
                <span>文章发布</span></el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>栏目管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1"
                ><i class="el-icon-user"></i>
                <span>栏目列表</span></el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
    </el-container>
  </div>
</template>

样式

<style lang="less" scoped>
.index {
  height: 100%;

  .el-menu-admin:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-container {
    height: 100%;
  }
  .el-aside {
    background-color: #545c64;
  }
  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #545c64;
  }
  .logo {
    height: 60px;
    background: url(../assets/logo.png);
    background-size: cover;
    background-color: #fff;
  }
  .toggle-btn {
    padding: 0 15px;
    margin-left: -20px;
    font-size: 36px;
    color: white;
    cursor: pointer;
    line-height: 60px;
    &:hover {
      background-color: #4292cf;
    }
  }
  .system-title {
    font-size: 28px;
    color: white;
  }
  .welcome {
    color: white;
  }
}
</style>

效果

2.3顶部

1.头部登录时调出登录时存储的用户信息，渲染用户昵称 2.点击退出时触发exit事件,删除存储的用户信息，给出提示，并跳转至登录页 注意:写在<el-header>结构里面

<el-header>
          <span class="el-icon-s-fold toggle-btn"></span>
          <span class="system-title">阴间论坛后台管理系统</span>
          <div class="welcome">
            <span>恭迎{{ nickname }}降临</span> &nbsp;&nbsp;
            <!-- click:点击触发事件 -->
            <span @click="exit"> 退出</span>
          </div>
        </el-header>

<script>
export default {
  data() {
    return {
      nickname: "",
    };
  },
  methods: {
    /*点击退出时触发事件,先用$message给出用户提示操作成功,随后删除存储信息
    并跳转至登录页*/
    exit() {
      this.$message({
        message: "退出成功，有空再来",
        type: "success",
      });
      localStorage.removeItem("usermanager");
      this.$router.push({ path: "/login" });
    },
  },
  mounted() {
    // 页面加载完毕调出登录时储存的用户信息,这是个对象,解析后找到存放昵称的位置
    // 渲染到顶部
    this.nickname = JSON.parse(
      localStorage.getItem("usermanager")
    ).user.nickname;
  },
};
</script>

效果

2.4主体

1.添加单独的组件
2.添加子路由，点击左侧子菜单时页面映射在主体位置，vue-router的嵌套使用（children），实现页中页效果

2.4.1文章列表组件

element组件:
1.Breadcrumb 面包屑
2.Card 卡片
3.table表格>自定义列模板
4.Pagination 分页>完整功能
5.Tooltip 文字提示
实现思路:
1.添加子路由配置
2.首页左侧二级菜单index的路由跳转(上面我先加了)
3.首页设置路由展示区域
4.文章列表页左上路径导航
5.使用Card把表格包起来,显示立体效果
6.自定义模板最前一排添加索引,最后一排添加字体图标,上移显示提示文字
7.使用date绑定数据
7.分页组件,mounted发送数据请求时需要带上参数

2.4.1.1添加子路由配置

vue-router的嵌套使用（children），实现页中页效果

 {
            name: 'index',
            path: '/index',
            // 异步引入组件
            component: () => import('@/views/index.vue'),
            redirect: { name: 'postList' },
            children: [
                {
                    name: 'postList',
                    path: 'postList',//无需添加斜杠
                    component: () => import('@/views/postList.vue')
                },
            ]
        },

2.4.1.3首页设置路由展示区域

在 <el-main>里面设置出口

 <el-main>
          <router-view></router-view>
        </el-main>

2.4.1.4文章列表代码

<template>
  <div class="postList">
    <!-- 面包屑:路径导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <!-- 表格 -->
      <!-- data：需要遍历的数组 -->
      <!-- prop：当前所展示的属性名称 -->
      <!-- width：当前列的宽度 -->
      <!-- label：列标题 -->
      <el-table :data="postList" border style="width: 100%">
        <!-- 索引部分 -->
        <el-table-column type="index" width="50"> </el-table-column>
        <!-- 标题 -->
        <el-table-column prop="title" label="标题" width="600">
        </el-table-column>
        <!-- 类型 -->
        <!-- scope就是当前的数据行对象，包含当前行数据，索引... -->
        <!-- scope.row就是当前的行数据， -->
        <!-- 拿到的数据是1和2,三元表达式判断类型 -->
        <el-table-column label="类型" width="100">
          <template slot-scope="scope"
            >{{ scope.row.type == 1 ? "文章" : "视频" }}
          </template>
        </el-table-column>
        <el-table-column prop="user.nickname" label="作者" width="100">
        </el-table-column>
        <el-table-column label="操作" width="250">
          <!-- 自定义模板:凡是涉及到数据的相关操作(新增，删除，修改，查询)，都应该添加自定义模板列 -->
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top"
            >
              <!-- click:点击触发事件,由于不是自己动手的,所以没法循环,需要带上scope -->
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="handleEdit(scope)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="分享"
              placement="top"
              ><el-button
                type="success"
                icon="el-icon-share"
                @click="handleEdit(scope)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
              ><el-button
                type="danger"
                icon="el-icon-delete"
                @click="handleEdit(scope)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- size-change:切换每页显示数量列表是触发 -->
      <!-- current-change:切换页码时触发 -->
      <!-- current-page:当前页码 -->
      <!-- page-sizes:可选择的每页显示的数量的列表 -->
      <!-- page-size:每页现实的数量 -->
      <!-- layout:分页组成部分 -->
      <!-- total:数据总数 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3, 4, 5, 6]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getPostList } from "@/apis/post";
export default {
  data() {
    return {
      postList: [],
      total: 0, //数据总数
      pageSize: 3, //每页显示数量
      pageIndex: 1, //当前页码
    };
  },
  methods: {
    //切换每页显示数量列表是触发
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.init(); //改造数据后调动函数刷新
    },
    //切换页码时触发
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.init();
    },
    async init() {
      let res = await getPostList({
        pageSize: this.pageSize,
        pageIndex: this.pageIndex,
      });
      this.postList = res.data.data;
      this.total = res.data.total;
    },
  },
  mounted() {
    this.init(); //加载完毕就渲染数据
  },
};
</script>

<style lang="less" scoped>
.box-card {
  margin-top: 20px;
}
</style>

2.4.2.5效果