用Vue构建一个基于 Element-ui 的文章后台管理系统-day02
用Vue构建一个基于 Element-ui 的文章后台管理系统-day02首页的添加配置路由Container 布局容器添加左侧菜单栏el-menu:这个菜单结构el-submenu:一级菜单项el-menu-item:二级菜单项el-menu-item-group:二级菜单组顶部结构添加实首页的退出功能使用嵌套路由的方式来实现欢迎页面文章列表页的制作表格自定义模板的添加添加面包屑添加卡片视图添加
用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>
<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();
},
更多推荐
所有评论(0)