<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<!--引入富文本编辑器相关样式文件-->
<link href="https://cdn.staticfile.org/wangeditor5/5.1.23/css/style.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<el-container>
<el-header height="70px" style="background-color: #386582">
<h1 style="color: white;font-size: 30px;margin: 0;
line-height: 70px">
烘焙坊后台管理系统
<span style="font-size: 20px;float: right">欢迎汤姆回来!
<a href="" style="color: orange">退出登录</a>
</span>
</h1>
</el-header>
<el-container>
<el-aside width="200px">
<el-menu @select="handleSelect" default-active="1" style="height: 1000px" active-text-color="orange">
<img src="imgs/icon.png" width="150px">
<el-divider></el-divider>
<el-menu-item index="1">
<template slot="title">
<i class="el-icon-user"></i><span>用户管理</span>
</template>
</el-menu-item>
<el-menu-item index="2">
<template slot="title">
<i class="el-icon-picture"></i><span>轮播图</span>
</template>
</el-menu-item>
<el-menu-item index="3">
<template slot="title">
<i class="el-icon-s-order"></i><span>烘焙食谱</span>
</template>
</el-menu-item>
<el-menu-item index="4">
<template slot="title">
<i class="el-icon-video-camera"></i><span>烘焙视频</span>
</template>
</el-menu-item>
<el-menu-item index="5">
<template slot="title">
<i class="el-icon-info"></i><span>行业资讯</span>
</template>
</el-menu-item>
</el-menu>
</el-aside>
<el-main>
<!--用户表格开始-->
<el-table v-if="currentIndex==1" :data="userArr">
<el-table-column type="index" label="编号"></el-table-column>
<el-table-column prop="userName" label="用户名"></el-table-column>
<el-table-column prop="nickName" label="昵称"></el-table-column>
<el-table-column label="头像">
<template slot-scope="scope">
<el-avatar :src="scope.row.imgUrl"></el-avatar>
</template>
</el-table-column>
<el-table-column label="管理员">
<template slot-scope="scope">
<el-switch v-model="scope.row.isAdmin"></el-switch>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--用户表格结束-->
<!--轮播图表格开始-->
<el-table v-if="currentIndex==2" :data="bannerArr">
<el-table-column type="index" label="编号"></el-table-column>
<el-table-column prop="code" label="编码"></el-table-column>
<el-table-column label="轮播图">
<template slot-scope="scope">
<img :src="scope.row.imgUrl" width="200px">
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--轮播图表格结束-->
<!--内容表格开始-->
<el-table v-if="currentIndex>2" :data="contentArr" border>
<el-table-column label="标题" width="150px"
prop="title" align="center"></el-table-column>
<el-table-column label="封面" width="60px">
<template slot-scope="scope">
<img :src="scope.row.imgUrl" width="50px">
</template>
</el-table-column>
<el-table-column label="摘要" width="300px"
prop="brief" align="center"></el-table-column>
<el-table-column label="类型"
prop="categoryName" align="center"></el-table-column>
<el-table-column label="浏览量"
prop="viewCount" align="center"></el-table-column>
<el-table-column label="回复量"
prop="commentCount" align="center"></el-table-column>
<el-table-column label="创建时间"
prop="createTime" align="center"></el-table-column>
<el-table-column label="操作" width="200px" fixed="right"
align="center">
<template slot-scope="scope">
<el-button size="mini" type="success"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--内容表格结束-->
</el-main>
</el-container>
</el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
let v = new Vue({
el: '#app',
data: function () {
return {
userArr:[
{
"id":12,
"nickName":"汤姆",
"userName":"tom",
"isAdmin":true,
"imgUrl":"imgs/head.jpg",
"createTime":"2023/03/31 00:43:52"
},
{
"id":13,
"nickName":"刘德华",
"userName":"ldh",
"isAdmin":false,
"imgUrl":"imgs/a.jpg",
"createTime":"2023/03/25 15:03:08"
},
{
"id":17,
"nickName":"杰瑞",
"userName":"jerry",
烘焙坊.zip （23个子文件） 
day07 
contentList.html 8KB personal.html 9KB detail.html 12KB reg.html 6KB login.html 6KB admin.html 14KB articleManagement.html 13KB index.html 13KB postArticle.html 10KB 效果图 
详情页面.png 8.24MB 登录.png 127KB imgs 
c.jpg 100KB b.jpg 57KB
loginbg.gif 310KB a.jpg 444KB banner3.jpg 489KB d.jpg 86KB banner1.jpg 500KB head.jpg 40KB avarbg.jpg 16KB reg.png 205KB banner2.jpg 479KB icon.png 4KB资源评论
学废Java
- 粉丝: 1230
- 资源: 2
