制作首页组件
整体结构分为左右结构,右边分为上下结构布局
1.左侧菜单项添加
2.顶部
3.下边框显示栏
使用Element-ui框架中的Container 布局容器
页面整体布局
<div class='index'>
<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>
</div>
容器样式
.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;
}
}
左侧导航栏菜单的添加
使用Element-ui插件的NavMenu 导航菜单
el-menu:是整个菜单栏的结构
1.default-active:展开指定所有(index)的菜单项,一般填写el-menu-item的索引值
2.unique-opened:是否保持一个子菜单二等展开(当点击一个菜单展开在几点另一个菜单项时,前一个菜单项会闭合,始终保持一个展开)
3.router:是否使用vue-router的模式,启用这个模式会激活导航时以index作为path进行路由跳转
el-submenu:是一级菜单项
index:是唯一标识,如果index的值一样,那么会同时展开或者闭合
el-menu-item:二级菜单项
index:是唯一标识,如果index的值一样,那么会同时展开或者闭合
el-menu-item-group:二级菜单组
设置文章列表的Index跳转路径为文章列表组件的跳转路径,这样在点击文字列表页时会跳到该组件上并且路由会映射到右边下方菜单栏上
<el-menu
:default-active="'postlist'"
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-user-solid"></i>
<span>用户管理</span>
</template>
<el-menu-item index="1-1">
<i class="el-icon-user-solid"></i>
<span>用户列表</span>
</el-menu-item>
</el-submenu>
<!-- 文章管理 -->
<el-submenu index="2">
<template slot="title">
<i class="el-icon-tickets"></i>
<span>文章管理</span>
</template>
<el-menu-item index="postlist">
<i class="el-icon-document-copy"></i>
<span>文章列表</span></el-menu-item
>
<el-menu-item index="2-2">
<i class="el-icon-edit-outline"></i>
<span>文章发布</span></el-menu-item
>
</el-submenu>
<!-- 栏目管理 -->
<el-submenu index="3">
<template slot="title">
<i class="el-icon-notebook-2"></i>
<span>栏目管理</span>
</template>
<el-menu-item index="3-1">
<i class="el-icon-notebook-2"></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>欢迎你：xxxxx</span>
<span> 退出</span>
</div>
</el-header>
登陆api封装
//引入基准路径
import axios from '@/utils/myaxios.js'
// 登陆
export const login = (data) => {
return axios({
method: 'post',
url: '/login',
data
})
}
实现登入功能
引入并调用
async loginSubmit () {
let res = await login(this.loginForm)
console.log(res)
if (res.data.message === '登录成功') {
// 跳转到后台首页
} else {
// 给出提示
}
}
制作欢迎界面组件
添加组件
设置嵌套路由(因为本身就在index),所以在index路由里嵌套路由
还需要重定向嵌套路由,因为页面一加载时就要显示到欢迎组件界面
这里使用到了异步加载组件:只有在需要用到这个组件的时候,才会去加载这个组件
**routes:**路由配置
**redirect:**重定向路由
**name:**路由名称
**path:**路由跳转路径,(路由跳转可根据name或path进行路由跳转)
**component:**所以要映射的组件
获取路由参数:可通过$route获取路由参数,
get请求可通过params传参
post请求可通过data进行传参
routes: [
{
name: 'index',
path: '/index',
//异步加载:只有在需要用到这个组件的时候,才会去加载这个组件
component: () => import('@/views/index.vue'),
// 添加重定向，显示欢迎信息
redirect: { name: 'welcomeYou' },
//路由嵌套,嵌套路由中的path不要/不然会覆盖前面的路径
children: [
{
name: 'welcomeYou',
path: 'welcomeYou',
//异步加载:只有在需要用到这个组件的时候,才会去加载这个组件
component: () => import('@/views/welcomeYou.vue'),
},
]
}
组件映射地址
使用router-view映射嵌套路由的地址,映射在el-main组件中,也就是右边栏下方
<el-main>
<router-view></router-view>
</el-main>
1.制作文章列表组件
1.创建组件
2.使用Breadcrumb 面包屑(路径导航)
**el-breadcrumb-item :to:**点击回到组件的path路径
<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>
3.卡片视图
卡片视图:就是让用户看起来这个模块有立体感(用户视觉体验)
<el-card class="box-card">
这里放需要卡片视图包装的模块,如表格,分页插件等
</el-card>
4.Table 表格与自定义列表
**el-table:**表格结构
**el-table-column:**表格列
template slot-scope=“scope”:自定义列表,在表格里唯一能对数据进行操作(增删改查)只有使用自定义列表才能拿到数据scope就是当前行数据.
**data:**表格数据源
**prop:**每列的数据
**el-button:**ui框架按钮
<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="500">
</el-table-column>
<el-table-column prop="type" label="类型" width="180">
<!-- 在Table表格中只有使用自定义列表才能获取数据对进行操作(增删改查) -->
<template slot-scope="scope">{{
scope.row.type == 1 ? "文章" : "视屏"
}}</template>
</el-table-column>
<el-table-column prop="user.nickname" label="作者"> </el-table-column>
<el-table-column label="操作" width="250">
<template slot-scope="scope">
<!-- scope就是当前的数据行对象，包含当前行数据，索引....
scope.row就是当前的行数据，我们以后进行数据操作的时候，主要是对这个值进行处理 -->
<el-tooltip
class="item"
effect="dark"
content="编辑"
placement="top-start"
>
<el-button
type="primary"
icon="el-icon-edit"
@click="handleEdit(scope)"
></el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="分享"
placement="top-start"
><el-button type="warning" icon="el-icon-share"></el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="删除"
placement="top-start"
><el-button type="danger" icon="el-icon-delete"></el-button
></el-tooltip>
</template>
</el-table-column>
</el-table>
分页插件
使用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>
分页功能的实现
// 切换每页显示数量列表时触发
handleSizeChange (val) {
console.log(`每页 ${val} 条`)
// val就是当前用户所选择的数量
// 我们需要做：
// 1.重置pageSize
this.pageSize = val
// 2.根据重置后的pageSize再次发起数据请求，动态渲染
this.init()
},
// 切换页码时触发
handleCurrentChange (val) {
console.log(`当前页: ${val}`)
this.pageIndex = val
this.init()
}
退出登陆
methods: {
exit() {
//删除token,并跳转到登录页
localStorage.removeItem("heima_houtai");
this.$router.push({ path: "/login" });
},
},
9985
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
