用Vue构建一个基于 Element-ui 的文章后台管理系统-day02

最新推荐文章于 2024-07-19 10:38:09 发布

qq_34206637

最新推荐文章于 2024-07-19 10:38:09 发布

阅读量2k

点赞数

分类专栏： Vue实战文章标签： javascript vue.js jquery

本文链接：https://blog.csdn.net/qq_34206637/article/details/109453664

版权

Vue实战专栏收录该内容

3 篇文章 1 订阅

订阅专栏

用Vue构建一个基于 Element-ui 的文章后台管理系统-day02

首页的添加

配置路由

{
	name:'Index',
	path:'/index',
	component:Index
}

使用Container布局容器进行布局

Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

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

添加左侧菜单栏

使用element的NavMenu导航菜单组件

el-menu:这个菜单结构

default-active:展开指定索引的菜单项，它应该设置了el-menu-item的索引值
unique-opened:是否保持一个菜单的展开
router：是否使用vue-router模式，启用该模式会再激活导航时以index作为path进行路由转跳

el-submenu:一级菜单项

index:唯一标志，如果这个标志一样，那么就会同时展开和合并

el-menu-item:二级菜单项

index:唯一标志，如果这个标志一样，那么就会同时添加样式

el-menu-item-group:二级菜单组

  <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :unique-opened="true"
          :router="true"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="1-1">
              <i class="el-icon-user"></i>
              <span>用户列表</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>文章管理</span>
            </template>
            <el-menu-item index="postList">
              <i class="el-icon-user"></i>
              <span>文章列表</span>
            </el-menu-item>
            <el-menu-item index="PostPublish">
              <i class="el-icon-user"></i>
              <span>文章发布</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>栏目管理</span>
            </template>
            <el-menu-item index="3-1">
              <i class="el-icon-user"></i>
              <span>栏目列表</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>

顶部结构添加

 <el-header>
          <span class="el-icon-s-fold toggle-btn"></span>
          <span class="system-title">黑马头条后台管理系统</span>
          <div class="welcome">
            <span>欢迎你：{{ nickname }}</span> &nbsp;&nbsp;
            <span> 退出</span>
          </div>
        </el-header>

定义数据存储用户名,页面加载，从localStorage中获取当前登录用户的用户名

export default {
  data() {
    return {
      nickname: "",
    };
  },
  mounted() {
    this.nickname = JSON.parse(
      localStorage.getItem("toutiao_houtaimanage")
    ).user.nickname;
  },
};

实首页的退出功能

添加退出文字按钮

 <el-button type="text" @click="exit"> 退出 </el-button>

添加退出事件

    exit(){
      //清空
      localStorage.removeItem('toutiao_houtaimanage')
      //回到登陆
      this.$router.push({name:'login'})
    }

使用嵌套路由的方式来实现欢迎页面

添加单独的welcome组件 @/views/welcome.vue
配置嵌套路由

 {
            name:'Index',
            path:'/index',
            //使用异步加载的方式，只有用到这个组件才进行组件的加载
            component:()=>import('@/views/index.vue'),
            // 添加重定向，让首页路由匹配的时候，再重定向到嵌套路由welcome
            //使用redirect的时候如果使用path则需要完整的嵌套路由的路径
            redirect: {name:'welcome'},
            //添加嵌套路由
            children:[
             {
                name:'welcome',
                path:'welcome',
                component:()=>import('@/views/welcome.vue')
            }
    }

3.给首页添加路由视图

.native-监听组件根元素的原生事件例如：@keyup.13.native=“userlogin”

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

文章列表页的制作

再src/views文件夹下新建postList.vue，并配置路由信息：

   {
            name:'Index',
            path:'/index',
            //使用异步加载的方式，只有用到这个组件才进行组件的加载
            component:()=>import('@/views/index.vue'),
            // 添加重定向，让首页路由匹配的时候，再重定向到嵌套路由welcome
            //使用redirect的时候如果使用path则需要完整的嵌套路由的路径
            // redirect:{path:'/index/welcome'}
            redirect: {name:'welcome'},
            //添加嵌套路由
            children:[
             {
                name:'welcome',
                path:'welcome',
                component:()=>import('@/views/welcome.vue')
            },{
                name:'postList',
                path:'postList',
                component:()=>import('@/views/posts/postList.vue')
              },
        }

再首页列表中添加链接，让导航列表点击转跳到列表页

 <el-menu-item index="postList">
              <i class="el-icon-user"></i>
              <span>文章列表</span>
 </el-menu-item>

表格自定义模板的添加

添加面包屑

使用说明：在el-breadcrumb中使用el-breadcrumb-item标签表示从首页开始的每一级。Element 提供了一个separator属性，在el-breadcrumb标签中设置它来决定分隔符，它只能是字符串，默认为斜杠/

参数	说明	类型	可选值	默认值
to	路由跳转对象，同 `vue-router` 的 `to`	string/object	—	—
replace	在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录	boolean	—	false

separator	分隔符	string	—	斜杠’/’
separator-class	图标分隔符 class	string	—	-

  <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="javascript:;">文章管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>文章发布</el-breadcrumb-item>
    </el-breadcrumb>

添加卡片视图

 <el-card class="box-card" style="margin-top: 20px">
 内容
</el-card>

添加表格

table表格

1.常规表格

2.添加边框

3.添加索引列

4.添加操作列–自定义模板

el-table-column常见属性

prop:当前列所展示的属性名称
width：当前列的宽度
label：列标题

添加操作列

我们添加按钮的目的是为了后期的数据操作

而数据操作的前提就获取到你想操作的数据

表格的结构并不是我们手动循环生成的，意味着我们无法获取具体的数据

**凡是涉及到数据的相关操作(新增，删除，修改，查询)，都应该添加自定义模板列

<!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column type="index"> </el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
      </template>
      </el-table-column>

添加图标按钮

<el-button type="primary" icon="el-icon-edit"></el-button>

添加提示

    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
      <el-button>上边</el-button>
    </el-tooltip>

表格数据的动态渲染
1.添加api方法

export const getPostList=(params)=>{
    return axios({
        url:'/post',
        params
    })
}

2.调用获取数据

   let res = await getPostList({
        pageSize: this.pageSize,
        pageIndex: this.pageIndex,
      });
   this.postList = res.data.data;
   this.total = res.data.total;

3.设置表格的属性实现动态渲染

 <el-table-column type="index" width="50"></el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="680"
        ></el-table-column>
        <el-table-column prop="type" label="类型" width="100">
          <template slot-scope="scope">{{
            scope.row.type == 1 ? "文章" : "视频"
          }}</template>
        </el-table-column>
        <el-table-column prop="user.nickname" label="作者"></el-table-column>

添加分页

使用ElementUI的Pagination组件

分页组件的属性说明：

<el-pagination
      @size-change="handleSizeChange" // 切换每页显示数量列表时触发
      @current-change="handleCurrentChange" // 切换页码时触发
      :current-page="currentPage4" // 当前页码
      :page-sizes="[100, 200, 300, 400]" // 可选择的每页显示的数量的列表
      :page-size="100" // 每页显示的数量
      layout="total, sizes, prev, pager, next, jumper" // 分页的组成部分
      :total="400"> // 记录总数，返回数据中包含着
    </el-pagination>

layout各个参数对应的布局说明：
在这里插入图片描述
根据各个分页组件属性，配置我们自己的分页组件

<el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px"
      ></el-pagination>

封装实现分页功能的函数

  //单击数量下拉列表触发
    handleSizeChange(val) {
      //1.修改全局变量的值
      this.pageSize = val;
      //根据全局变量的值再次发起请求
      this.init();
    },
    handleCurrentChange(val) {
      //1.修改全局变量的值
      this.pageIndex = val;
      //根据全局变量的值再次发起请求
      this.init();
    },