使用element-ui创建文章后台管理系统(二)

昨日补充

在el-input组件里面添加回车事件，没有效果

解决方法

   <!-- .native - 监听组件根元素的原生事件。 -->
          <el-input
            v-model="user.password"
            type="password"
            @focus="clearprams('password')"
            @keydown.13.native="login"
            placeholder="请输入密码"
          >
          <!-- 实现跳转 -->

---

需求：创建完成首页，文章列表页展示

首页进行路由嵌套，侧边栏制作，文章列表渲染

一、使用element-ui Container 布局容器、NavMenu 导航菜单 做出页面结构

页面结构如上图

<template>
  <div class="index">
    <!-- 使用element-ui  container页面布局 --> 
    <el-container>
      <!-- 使用NavMenu 导航菜单 -->
      <el-aside width="200px">
        <div class="logo" @click="$router.push({ path: '/index' })"></div>
        <!-- 开启router模式，index会变成path进行跳转 -->
        <!-- 开启unique-opened 点开一个分列，其他分列就会收起-->
        <el-menu
          default-active="$router.path"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true"
          :unique-opened="true"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item-group>
              <!-- 使用 vue-router 的模式，启用该模式会在激活导航时以 
              index 作为 path 进行路由跳转 -->
              <el-menu-item index="/index/user">个人中心</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="/index/articleList">文章列表</el-menu-item>
              <el-menu-item index="/index/articlePublish">文章发布</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>
            <!-- index必须 全路径 ，才能令 default-active="$route.path" 生效 -->
              <el-menu-item index="/index/categoryList">栏目列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
        <!-- 导航栏完成 -->
      </el-aside>
      <el-container>
        <el-header>
          <div class="left el-icon-s-fold system-title"></div>
          <div class="title system-title">头条后台管理系统</div>
          <div class="right" style="color: #fff">
            <!-- 动态生成用户名称 -->
            欢迎你:{{ nickname }}
            <el-button type="danger" @click="exit">退出</el-button>
          </div>
        </el-header>
        <!-- 首页 -->
        <el-main>
        <!-- 路由匹配到的组件将渲染在这里 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

注意点：
侧边导航栏 1.router属性为true，index会变成path进行跳转
2.unique-opened 属性为true 点开一个分列，其他分列就会收起

二、创建嵌套路由，index首页进行路由映射

<!-- 首页 -->
        <el-main>
        <!-- 路由匹配到的组件将渲染在这里 -->
          <router-view></router-view>
        </el-main>

配置路由：

注意点：配置路由的参数多用为 name(名字) 、path(路径) 、component(组件)、children(组件)、redirect(重定向)
这次是组价内的路由嵌套，children使用的时候路径不要加上 ’ / ’

const router = new VueRouter({
    routes: [
        // 重定向主页
        {
            path: '/',
            redirect: { name: 'index' }
        },
        {
            name: 'login',
            path: '/login',
            component: () => import('@/views/login.vue'),

        },
        //首页
        {
            name: 'index',
            path: '/index',
            component: () => import('@/views/index.vue'),
            // //默认进入首页的显示页面
            redirect: { name: 'welcome' },
            // 路由嵌套，children路径没有/ 
            children: [
               	//欢迎界面
                {
                    name: 'welcome',
                    path: 'welcome',
                    component: () => import('../views/welcome.vue')
                },
                //文章列表界面
                {
                    name: 'articleList',
                    path: 'articleList',
                    component: () => import('../views/articleList.vue')
                },
                //文章发表界面
                {
                    name: 'articlePublish',
                    path: 'articlePublish',
                    component: () => import('../views/articlePublish.vue')
                },
                //个人中心页面
                {
                    name: 'user',
                    path: 'user',
                    component: () => import('../views/user.vue')
                },
                //栏目分类页面
                {
                    name: 'categoryList',
                    path: 'categoryList',
                    component: () => import('../views/categoryList.vue')
                },
            ]
        },
    ]
})

完成文章列表

1.面包屑

代码如下（示例）：

    <!-- 面包屑 -->
    <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>

注意点为可以:to={ }、也可以使用a标签跳转

---

2.卡片包表格

卡片代码，文档代码（无注意点）

 <!-- 卡片包表格 -->
    <el-card class="box-card" style="margin-top: 20px">
    </el-card>

2.表格创建

:data=“articleList” 里面articleList是为数据多为对象数组
prop=“title” 这个是相等于 遍历articleList数据中的title元素
label=“标题” 这个作为在对应表头显示字符串数据

重点：
自定义模板调用scope ，调用就必须要使用
scope.row 可以获取当前行的数据
可以使用事件传这个值，也可以直接使用差值表达式进行处理
@click=“handlerDelete(scope.$index, scope.row)”
{{ scope.row.type == 1 ? “文章” : “视频” }}

	<!--自定义模板scope-->
	<!-- 类型这里我们就不需要 prop值，我们只需啊自定义模板，调用scope -->
        <el-table-column label="类型" width="180">
          <template slot-scope="scope">
            <!-- scope必须调用，这里我使用差值调用 -->
            <!-- scope.row 为这一行的我们获取的articleList数据 -->
            {{ scope.row.type == 1 ? "文章" : "视频" }}
          </template>
        </el-table-column>

表格格式代码

 <el-table :data="articleList" border style="width: 100%">
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column prop="title" label="标题" width="450">
        </el-table-column>
        <!-- 类型这里我们就不需要 prop值，我们只需啊自定义模板，调用scope -->
        <el-table-column label="类型" width="180">
          <template slot-scope="scope">
            <!-- scope必须调用，这里我使用差值调用 -->
            <!-- scope.row 为这一行的我们获取的articleList数据 -->
            {{ scope.row.type == 1 ? "文章" : "视频" }}
          </template>
        </el-table-column>
        <el-table-column prop="user.nickname" label="作者"> </el-table-column>
        <el-table-column label="操作">
          <!-- 表格自定义模板 -->
          <template slot-scope="scope">
            <el-tooltip content="编辑" placement="top">
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="handlerEdit(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="分享" placement="top">
              <el-button type="success" icon="el-icon-share"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="handlerDelete(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

3.分页组件

  <!-- 分页按钮 我们使用完整分页按钮 -->
    <!-- page-sizes为几条一页 ，page-size当前条数 ，current-page 总页数 ， total总条数-->
    <el-pagination
      @size-change="handleSizeChange"   切换条数时触发的事件，可以获得当前显示条数参数
      @current-change="handleCurrentChange"  切换页码时触发的事件，可以获得当前显示页码参数
      :current-page="pageIndex"    当前页码
      :page-sizes="[2, 4, 6, 8]"    可以显示页面上的条数
      :page-size="pageSize"			每页显示的条数
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"      总页数
    >
    </el-pagination>

文章列表的js代码

<script>
import { articleList } from "@/apis/article";
export default {
  data() {
    return {
      articleList: [],
      pageIndex: 1,
      pageSize: 2,
      total: 0,
    };
  },

  methods: {
    // 点击按钮获取，该行数据
    handlerEdit(index, row) {
      console.log(index, row);
    },
    handlerDelete(index, row) {
      console.log(index, row);
    },
    // 分页函数
    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 articleList({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      });
      // console.log(res);
      this.articleList = res.data.data;
      this.total = res.data.total;
    },
  },
  async mounted() {
    // 获取文章数据，加入页码，显示条数参数
    this.init()   //使用封装数据
    //let res = await articleList({
    //  pageIndex: this.pageIndex,
    //  pageSize: this.pageSize,
    });
    //console.log(res);
    //this.articleList = res.data.data;
   // this.total = res.data.total;
  //},
//};
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}
</style>