烘培坊项目
文章目录
- 烘培坊项目
- 项目概述
- 项目页面展示
- 后台管理页面
- 登录页面
- 文章详情页面
- 稿件发布页面
- 项目关键代码实现
- 后台管理页面
- 稿件管理页面
- 内容列表页面
- 文章详情页面
- 烘培坊主页面
- 注册页面
- 登录页面
- 个人信息页面
- 稿件发布页面
项目概述
烘培坊（Bakery）是一个虚构的在线烘焙产品销售网站，主要面向烘焙爱好者和美食爱好者。该网站提供各种烘焙产品的食谱介绍、视频教学服务，包括烘焙原料、工具和书籍等，烘培坊网站使用了现代化的Web技术，如HTML5、CSS3和JavaScript等，使用Vue、ElementUI框架，作为学习前端搭建网页的教学项目使用
项目页面展示
后台管理页面
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rGolEhkp-1685510842740)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20230531132318963.png)]](https://img-blog.csdnimg.cn/ddaa4fe811604a268c0cf7257dbd4734.png)
登录页面
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cUgkJAmf-1685510842742)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20230531132353604.png)]](https://img-blog.csdnimg.cn/7d2937a7f42849d29f7a4d9a418a2884.png)
文章详情页面
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qrYOJ7Af-1685510842743)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20230531132634653.png)]](https://img-blog.csdnimg.cn/2d1b6749036a44809c84f0b5ff93d917.png)
稿件发布页面
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jK3BKes2-1685510842743)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20230531132213560.png)]](https://img-blog.csdnimg.cn/aea172d583a54c0489683c34dcedb316.png)
项目关键代码实现
后台管理页面
<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>
稿件管理页面
<el-container>
<el-header height="80px" >
<div class="center">
<el-row gutter="20">
<el-col span="6">
<img src="imgs/icon.png" width="196" height="65">
</el-col>
<el-col span="10">
<el-menu mode="horizontal" active-text-color="orange">
<el-menu-item index="0">首页</el-menu-item>
<el-menu-item index="1">食谱</el-menu-item>
<el-menu-item index="2">视频</el-menu-item>
<el-menu-item index="3">资讯</el-menu-item>
</el-menu>
</el-col>
<el-col span="6">
<el-input style="margin-top: 15px" placeholder="请输入搜索的关键字">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col span="2">
<el-popover
placement="top-start"
title="欢迎来到烘焙坊!"
width="200"
trigger="hover">
<div slot="reference">
<i class="el-icon-user"
style="font-size: 30px;position: relative;top: 20px"></i>
</div>
<el-button type="info">注册</el-button>
<el-button style="background-color: orange">登录</el-button>
</el-popover>
</el-col>
</el-row>
</div>
</el-header>
<el-main class="center" >
<el-row gutter="20">
<el-col span="4">
<el-card style="height: 500px">
<p @click="location.href='personal.html'">个人信息</p>
<p style="color: orange" >稿件管理</p>
</el-card>
</el-col>
<el-col span="20">
<el-card>
<!--标签页卡开始-->
<el-tabs v-model="type" type="card" @tab-click="handleClick">
<el-tab-pane label="食谱" name="1"></el-tab-pane>
<el-tab-pane label="视频" name="2"></el-tab-pane>
<el-tab-pane label="资讯" name="3"></el-tab-pane>
</el-tabs>
<!--标签页卡结束-->
<el-button type="primary">发帖</el-button>
<!--内容列表开始-->
<el-table :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-card>
</el-col>
</el-row>
</el-main>
<el-footer style="height: 280px;background-color: #2f3234;padding:50px 0">
<div class="center" style="text-align: center;color: #666">
<el-row>
<el-col span="8">
<img src="imgs/icon.png">
<p>教程灵感就看烘焙坊</p>
<p>烘焙行业网络社区平台</p>
<p>全国百城上千个职位等你来</p>
</el-col>
<el-col span="8">
<el-row id="footer_center">
<el-col span="8">
<h3>关于我们</h3>
<p>关于我们</p><p>烘焙学院</p>
<p>烘焙食谱</p><p>分类信息</p>
<p>求职招聘</p><p>社区交流</p>
</el-col>
<el-col span="8">
<h3>支持与服务</h3>
<p>联系我们</p><p>广告投放</p>
<p>用户协议</p><p>友情链接</p>
<p>在线反馈</p><p>我发投稿</p>
</el-col>
<el-col span="8">
<h3>底部导航</h3>
<p>Archiver</p><p>手机版</p>
<p>小黑屋</p>
</el-col>
</el-row>
</el-col>
<el-col span="8">
<div style="font-size: 58px;margin-top: 30px">
<span style="color: orange">烘焙</span><span style="color: #666666">坊</span>
</div>
<p>烘焙行业网络社区平台</p>
</el-col>
</el-row>
</div>
</el-footer>
</el-container>
内容列表页面
<div id="app">
<el-container>
<el-header height="80px">
<div class="center">
<el-row gutter="20">
<el-col span="6">
<img src="imgs/icon.png" width="196" height="65">
</el-col>
<el-col span="10">
<el-menu mode="horizontal" active-text-color="orange">
<el-menu-item index="0">首页</el-menu-item>
<el-menu-item index="1">食谱</el-menu-item>
<el-menu-item index="2">视频</el-menu-item>
<el-menu-item index="3">资讯</el-menu-item>
</el-menu>
</el-col>
<el-col span="6">
<el-input style="margin-top: 15px" placeholder="请输入搜索的关键字">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col span="2">
<el-popover
placement="top-start"
title="欢迎来到烘焙坊!"
width="200"
trigger="hover">
<div slot="reference">
<i class="el-icon-user"
style="font-size: 30px;position: relative;top: 20px"></i>
</div>
<el-button type="info">注册</el-button>
<el-button style="background-color: orange">登录</el-button>
</el-popover>
</el-col>
</el-row>
</div>
</el-header>
<el-main class="center" >
<!--内容列表开始-->
<el-row gutter="20">
<el-col v-for="r in recipeArr" span="6">
<el-card style="margin: 10px 0">
<img :src="r.imgUrl" width="100%" height="144">
<p style="height: 40px">{{r.title}}</p>
<el-row gutter="20">
<el-col span="4">
<!--圆形图片,专门用来显示头像-->
<el-avatar size="small" :src="r.userImgUrl"></el-avatar>
</el-col>
<el-col span="10">{{r.nickName}}</el-col>
<el-col span="10">
<span style="float: right;font-size: 12px;color: #ccc">{{r.categoryName}}</span>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<div style="text-align: center;margin-bottom: 20px">
<el-button>点击查看更多内容</el-button>
</div>
<!--内容列表结束-->
</el-main>
<el-footer style="height: 280px;background-color: #2f3234;padding:50px 0">
<div class="center" style="text-align: center;color: #666">
<el-row>
<el-col span="8">
<img src="imgs/icon.png">
<p>教程灵感就看烘焙坊</p>
<p>烘焙行业网络社区平台</p>
<p>全国百城上千个职位等你来</p>
</el-col>
<el-col span="8">
<el-row id="footer_center">
<el-col span="8">
<h3>关于我们</h3>
<p>关于我们</p><p>烘焙学院</p>
<p>烘焙食谱</p><p>分类信息</p>
<p>求职招聘</p><p>社区交流</p>
</el-col>
<el-col span="8">
<h3>支持与服务</h3>
<p>联系我们</p><p>广告投放</p>
<p>用户协议</p><p>友情链接</p>
<p>在线反馈</p><p>我发投稿</p>
</el-col>
<el-col span="8">
<h3>底部导航</h3>
<p>Archiver</p><p>手机版</p>
<p>小黑屋</p>
</el-col>
</el-row>
</el-col>
<el-col span="8">
<div style="font-size: 58px;margin-top: 30px">
<span style="color: orange">烘焙</span><span style="color: #666666">坊</span>
</div>
<p>烘焙行业网络社区平台</p>
</el-col>
</el-row>
</div>
</el-footer>
</el-container>
</div>
文章详情页面
<div id="app">
<el-container>
<el-header height="80px">
<div class="center">
<el-row gutter="20">
<el-col span="6">
<img src="imgs/icon.png" width="196" height="65">
</el-col>
<el-col span="10">
<el-menu mode="horizontal" active-text-color="orange">
<el-menu-item index="0">首页</el-menu-item>
<el-menu-item index="1">食谱</el-menu-item>
<el-menu-item index="2">视频</el-menu-item>
<el-menu-item index="3">资讯</el-menu-item>
</el-menu>
</el-col>
<el-col span="6">
<el-input style="margin-top: 15px" placeholder="请输入搜索的关键字">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col span="2">
<el-popover
placement="top-start"
title="欢迎来到烘焙坊!"
width="200"
trigger="hover">
<div slot="reference">
<i class="el-icon-user"
style="font-size: 30px;position: relative;top: 20px"></i>
</div>
<el-button type="info">注册</el-button>
<el-button style="background-color: orange">登录</el-button>
</el-popover>
</el-col>
</el-row>
</div>
</el-header>
<el-main class="center" >
<el-row gutter="20">
<el-col span="18">
<el-card>
<h2 style="color: orange;text-align: center">
枣泥花式面包,好吃到爆!
</h2>
<p style="font-size: 12px;color: #666;text-align: center">
作者:汤姆 | 发布时间:2023/5/26 11:12:30 | 阅读次数:1
</p>
<el-divider></el-divider>
<el-card style="font-size: 12px">
<b style="color: #409EFF">摘要:</b>
之前做了枣泥馅，配上花式面包，好吃到爆。 枣泥花式面包的用料 肉松面包面团
</el-card>
<p style="height: 500px">文章内容</p>
</el-card>
<!--评论相关开始-->
<el-card>
<p>发一条友善的评论</p>
<el-divider></el-divider>
<el-row gutter="20">
<el-col span="20">
<el-input type="textarea" placeholder="说点儿啥..."></el-input>
</el-col>
<el-col span="2">
<el-button>发布</el-button>
</el-col>
</el-row>
<!--评论列表开始-->
<el-row style="margin: 5px 0">
<el-col span="2">
<el-avatar src="imgs/head.jpg"></el-avatar>
</el-col>
<el-col span="20">
<span style="color: orange;font-weight: bold">汤姆:</span>
<p style="margin:5px 0">开起来很好吃!</p>
<span style="color: #666;font-size: 12px">2023/5/26 15:52:30</span>
</el-col>
</el-row>
<!--评论列表结束-->
</el-card>
<!--评论相关结束-->
</el-col>
<el-col span="6">
<el-card class="right-card" style="height: 240px;text-align: center;">
<div style="background-image: url('imgs/avarbg.jpg');
height: 90px"></div>
<div style="position: relative;top: -45px">
<img src="imgs/head.jpg"
style="border-radius: 90px;border: 5px solid white;
width: 90px;height: 90px">
<p style="font-size: 20px;margin: 0;
font-weight: bold">汤姆</p>
<i class="el-icon-edit">本文作者</i><br>
<i class="el-icon-time">2023/5/26 16:43:30</i>
</div>
</el-card>
<!--作者其它文章开始-->
<el-card style="margin:10px 0">
<h3>作者其它文章</h3>
<el-divider></el-divider>
<!--文章列表开始-->
<el-row gutter="10" v-for="item in 4">
<el-col span="10">
<img src="imgs/a.jpg" width="100%" height="70px">
</el-col>
<el-col span="14">
<p style="margin: 0;height: 50px">枣泥面包好吃到爆!</p>
<i class="el-icon-time" style="color: #666">2023/6/30</i>
</el-col>
</el-row>
<!--文章列表结束-->
</el-card>
<!--作者其它文章结束-->
<!--热门文章开始-->
<el-card style="margin:10px 0">
<h3>热门文章</h3>
<el-divider></el-divider>
<!--文章列表开始-->
<el-row gutter="10" v-for="item in 4">
<el-col span="10">
<img src="imgs/a.jpg" width="100%" height="70px">
</el-col>
<el-col span="14">
<p style="margin: 0;height: 50px">枣泥面包好吃到爆!</p>
<i class="el-icon-time" style="color: #666">2023/6/30</i>
</el-col>
</el-row>
<!--文章列表结束-->
</el-card>
<!--热门文章结束-->
</el-col>
</el-row>
</el-main>
<el-footer style="height: 280px;background-color: #2f3234;padding:50px 0">
<div class="center" style="text-align: center;color: #666">
<el-row>
<el-col span="8">
<img src="imgs/icon.png">
<p>教程灵感就看烘焙坊</p>
<p>烘焙行业网络社区平台</p>
<p>全国百城上千个职位等你来</p>
</el-col>
<el-col span="8">
<el-row id="footer_center">
<el-col span="8">
<h3>关于我们</h3>
<p>关于我们</p><p>烘焙学院</p>
<p>烘焙食谱</p><p>分类信息</p>
<p>求职招聘</p><p>社区交流</p>
</el-col>
<el-col span="8">
<h3>支持与服务</h3>
<p>联系我们</p><p>广告投放</p>
<p>用户协议</p><p>友情链接</p>
<p>在线反馈</p><p>我发投稿</p>
</el-col>
<el-col span="8">
<h3>底部导航</h3>
<p>Archiver</p><p>手机版</p>
<p>小黑屋</p>
</el-col>
</el-row>
</el-col>
<el-col span="8">
<div style="font-size: 58px;margin-top: 30px">
<span style="color: orange">烘焙</span><span style="color: #666666">坊</span>
</div>
<p>烘焙行业网络社区平台</p>
</el-col>
</el-row>
</div>
</el-footer>
</el-container>
</div>
烘培坊主页面
<div id="app">
<el-container>
<el-header height="80px">
<div class="center">
<el-row gutter="20">
<el-col span="6">
<img src="imgs/icon.png" width="196" height="65">
</el-col>
<el-col span="10">
<el-menu mode="horizontal" active-text-color="orange">
<el-menu-item index="0">首页</el-menu-item>
<el-menu-item index="1">食谱</el-menu-item>
<el-menu-item index="2">视频</el-menu-item>
<el-menu-item index="3">资讯</el-menu-item>
</el-menu>
</el-col>
<el-col span="6">
<el-input style="margin-top: 15px" placeholder="请输入搜索的关键字">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col span="2">
<el-popover
placement="top-start"
title="欢迎来到烘焙坊!"
width="200"
trigger="hover">
<div slot="reference">
<i class="el-icon-user"
style="font-size: 30px;position: relative;top: 20px"></i>
</div>
<el-button type="info">注册</el-button>
<el-button style="background-color: orange">登录</el-button>
</el-popover>
</el-col>
</el-row>
</div>
</el-header>
<el-main class="center" >
<el-carousel height="375px">
<el-carousel-item>
<img src="imgs/banner1.jpg" width="100%">
</el-carousel-item>
<el-carousel-item>
<img src="imgs/banner2.jpg" width="100%">
</el-carousel-item>
<el-carousel-item>
<img src="imgs/banner3.jpg" width="100%">
</el-carousel-item>
</el-carousel>
<!--食谱开始-->
<el-row style="background-color: white">
<el-col span="3">
<p style="font-size: 28px;line-height: 65px;margin: 0">烘焙食谱</p>
</el-col>
<el-col span="21">
<!--食谱导航开始-->
<el-menu mode="horizontal" default-active="0" active-text-color="orange">
<el-menu-item index="0">全部</el-menu-item>
<el-menu-item index="1">面包</el-menu-item>
<el-menu-item index="2">零食</el-menu-item>
<el-menu-item index="3">家常菜</el-menu-item>
</el-menu>
<!--食谱导航结束-->
</el-col>
</el-row>
<!--食谱列表开始-->
<el-row gutter="20">
<el-col v-for="r in recipeArr" span="6">
<el-card style="margin: 10px 0">
<img :src="r.imgUrl" width="100%" height="144">
<p style="height: 40px">{{r.title}}</p>
<el-row gutter="20">
<el-col span="4">
<!--圆形图片,专门用来显示头像-->
<el-avatar size="small" :src="r.userImgUrl"></el-avatar>
</el-col>
<el-col span="10">{{r.nickName}}</el-col>
<el-col span="10">
<span style="float: right;font-size: 12px;color: #ccc">{{r.categoryName}}</span>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<div style="text-align: center;margin-bottom: 20px">
<el-button>点击查看更多食谱</el-button>
</div>
<!--食谱列表结束-->
<!--食谱结束-->
<!--视频开始-->
<el-row style="background-color: white">
<el-col span="3">
<p style="font-size: 28px;line-height: 65px;margin: 0">烘焙视频</p>
</el-col>
<el-col span="21">
<!--视频导航开始-->
<el-menu mode="horizontal" default-active="0" active-text-color="orange">
<el-menu-item index="0">全部</el-menu-item>
<el-menu-item index="1">面包教学</el-menu-item>
<el-menu-item index="2">零食鉴赏</el-menu-item>
<el-menu-item index="3">家常菜教程</el-menu-item>
</el-menu>
<!--视频导航结束-->
</el-col>
</el-row>
<!--视频列表开始-->
<el-row gutter="20">
<el-col v-for="r in recipeArr" span="6">
<el-card style="margin: 10px 0">
<img :src="r.imgUrl" width="100%" height="144">
<p style="height: 40px">{{r.title}}</p>
<el-row gutter="20">
<el-col span="4">
<!--圆形图片,专门用来显示头像-->
<el-avatar size="small" :src="r.userImgUrl"></el-avatar>
</el-col>
<el-col span="10">{{r.nickName}}</el-col>
<el-col span="10">
<span style="float: right;font-size: 12px;color: #ccc">{{r.categoryName}}</span>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<div style="text-align: center;margin-bottom: 20px">
<el-button>点击查看更多视频</el-button>
</div>
<!--视频列表结束-->
<!--视频结束-->
<!--资讯开始-->
<el-row style="background-color: white">
<el-col span="3">
<p style="font-size: 28px;line-height: 65px;margin: 0">行业资讯</p>
</el-col>
<el-col span="21">
<!--资讯导航开始-->
<el-menu mode="horizontal" default-active="0" active-text-color="orange">
<el-menu-item index="0">全部</el-menu-item>
<el-menu-item index="1">美食资讯</el-menu-item>
<el-menu-item index="2">店家资讯</el-menu-item>
</el-menu>
<!--资讯导航结束-->
</el-col>
</el-row>
<!--资讯列表开始-->
<el-row gutter="20">
<el-col v-for="r in recipeArr" span="6">
<el-card style="margin: 10px 0">
<img :src="r.imgUrl" width="100%" height="144">
<p style="height: 40px">{{r.title}}</p>
<el-row gutter="20">
<el-col span="4">
<!--圆形图片,专门用来显示头像-->
<el-avatar size="small" :src="r.userImgUrl"></el-avatar>
</el-col>
<el-col span="10">{{r.nickName}}</el-col>
<el-col span="10">
<span style="float: right;font-size: 12px;color: #ccc">{{r.categoryName}}</span>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<div style="text-align: center;margin-bottom: 20px">
<el-button>点击查看更多资讯</el-button>
</div>
<!--资讯列表结束-->
<!--资讯结束-->
</el-main>
<el-footer style="height: 280px;background-color: #2f3234;padding:50px 0">
<div class="center" style="text-align: center;color: #666">
<el-row>
<el-col span="8">
<img src="imgs/icon.png">
<p>教程灵感就看烘焙坊</p>
<p>烘焙行业网络社区平台</p>
<p>全国百城上千个职位等你来</p>
</el-col>
<el-col span="8">
<el-row id="footer_center">
<el-col span="8">
<h3>关于我们</h3>
<p>关于我们</p><p>烘焙学院</p>
<p>烘焙食谱</p><p>分类信息</p>
<p>求职招聘</p><p>社区交流</p>
</el-col>
<el-col span="8">
<h3>支持与服务</h3>
<p>联系我们</p><p>广告投放</p>
<p>用户协议</p><p>友情链接</p>
<p>在线反馈</p><p>我发投稿</p>
</el-col>
<el-col span="8">
<h3>底部导航</h3>
<p>Archiver</p><p>手机版</p>
<p>小黑屋</p>
</el-col>
</el-row>
</el-col>
<el-col span="8">
<div style="font-size: 58px;margin-top: 30px">
<span style="color: orange">烘焙</span><span style="color: #666666">坊</span>
</div>
<p>烘焙行业网络社区平台</p>
</el-col>
</el-row>
</div>
</el-footer>
</el-container>
</div>
注册页面
<div id="app">
<el-container>
<el-header height="80px">
<div class="center">
<el-row gutter="20">
<el-col span="6">
<img src="imgs/icon.png" width="196" height="65">
</el-col>
<el-col span="10">
<el-menu mode="horizontal" active-text-color="orange">
<el-menu-item index="0">首页</el-menu-item>
<el-menu-item index="1">食谱</el-menu-item>
<el-menu-item index="2">视频</el-menu-item>
<el-menu-item index="3">资讯</el-menu-item>
</el-menu>
</el-col>
<el-col span="6">
<el-input style="margin-top: 15px" placeholder="请输入搜索的关键字">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col span="2">
<el-popover
placement="top-start"
title="欢迎来到烘焙坊!"
width="200"
trigger="hover">
<div slot="reference">
<i class="el-icon-user"
style="font-size: 30px;position: relative;top: 20px"></i>
</div>
<el-button type="info">注册</el-button>
<el-button style="background-color: orange">登录</el-button>
</el-popover>
</el-col>
</el-row>
</div>
</el-header>
<el-main class="center" style="margin-top: 30px">
<el-row gutter="20">
<el-col span="12">
<el-card>
<img src="imgs/reg.png" width="100%">
</el-card>
</el-col>
<el-col span="12">
<!--注册表单开始-->
<el-form label-width="80px">
<el-form-item>
<h1 style="float: left;font-size: 28px">立即注册</h1>
<a style="float: right;
text-decoration: none;color: #409EFF;
position: relative;top: 20px" href="login.html">
已有账号?现在登录
</a>
</el-form-item>
<el-form-item label="用户名">
<el-input placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="昵称">
<el-input placeholder="请输入昵称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">注册</el-button>
</el-form-item>
</el-form>
<!--注册表单结束-->
</el-col>
</el-row>
</el-main>
<el-footer style="height: 280px;background-color: #2f3234;padding:50px 0">
<div class="center" style="text-align: center;color: #666">
<el-row>
<el-col span="8">
<img src="imgs/icon.png">
<p>教程灵感就看烘焙坊</p>
<p>烘焙行业网络社区平台</p>
<p>全国百城上千个职位等你来</p>
</el-col>
<el-col span="8">
<el-row id="footer_center">
<el-col span="8">
<h3>关于我们</h3>
<p>关于我们</p><p>烘焙学院</p>
<p>烘焙食谱</p><p>分类信息</p>
<p>求职招聘</p><p>社区交流</p>
</el-col>
<el-col span="8">
<h3>支持与服务</h3>
<p>联系我们</p><p>广告投放</p>
<p>用户协议</p><p>友情链接</p>
<p>在线反馈</p><p>我发投稿</p>
</el-col>
<el-col span="8">
<h3>底部导航</h3>
<p>Archiver</p><p>手机版</p>
<p>小黑屋</p>
</el-col>
</el-row>
</el-col>
<el-col span="8">
<div style="font-size: 58px;margin-top: 30px">
<span style="color: orange">烘焙</span><span style="color: #666666">坊</span>
</div>
<p>烘焙行业网络社区平台</p>
</el-col>
</el-row>
</div>
</el-footer>
</el-container>
</div>
登录页面
<div id="app">
<el-container>
<el-header height="80px">
<div class="center">
<el-row gutter="20">
<el-col span="6">
<img src="imgs/icon.png" width="196" height="65">
</el-col>
<el-col span="10">
<el-menu mode="horizontal" active-text-color="orange">
<el-menu-item index="0">首页</el-menu-item>
<el-menu-item index="1">食谱</el-menu-item>
<el-menu-item index="2">视频</el-menu-item>
<el-menu-item index="3">资讯</el-menu-item>
</el-menu>
</el-col>
<el-col span="6">
<el-input style="margin-top: 15px" placeholder="请输入搜索的关键字">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col span="2">
<el-popover
placement="top-start"
title="欢迎来到烘焙坊!"
width="200"
trigger="hover">
<div slot="reference">
<i class="el-icon-user"
style="font-size: 30px;position: relative;top: 20px"></i>
</div>
<el-button type="info">注册</el-button>
<el-button style="background-color: orange">登录</el-button>
</el-popover>
</el-col>
</el-row>
</div>
</el-header>
<el-main style="background-image: url('imgs/loginbg.gif');
height: 500px;background-size: cover;
background-position: center">
<el-card style="width: 500px;height: 300px;;margin: 50px auto">
<el-form label-width="80px" style="width: 400px;margin: 50px auto">
<el-form-item label="用户名">
<el-input placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input placeholder="请输入用密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">登录</el-button>
</el-form-item>
</el-form>
</el-card>
</el-main>
<el-footer style="height: 280px;background-color: #2f3234;padding:50px 0">
<div class="center" style="text-align: center;color: #666">
<el-row>
<el-col span="8">
<img src="imgs/icon.png">
<p>教程灵感就看烘焙坊</p>
<p>烘焙行业网络社区平台</p>
<p>全国百城上千个职位等你来</p>
</el-col>
<el-col span="8">
<el-row id="footer_center">
<el-col span="8">
<h3>关于我们</h3>
<p>关于我们</p><p>烘焙学院</p>
<p>烘焙食谱</p><p>分类信息</p>
<p>求职招聘</p><p>社区交流</p>
</el-col>
<el-col span="8">
<h3>支持与服务</h3>
<p>联系我们</p><p>广告投放</p>
<p>用户协议</p><p>友情链接</p>
<p>在线反馈</p><p>我发投稿</p>
</el-col>
<el-col span="8">
<h3>底部导航</h3>
<p>Archiver</p><p>手机版</p>
<p>小黑屋</p>
</el-col>
</el-row>
</el-col>
<el-col span="8">
<div style="font-size: 58px;margin-top: 30px">
<span style="color: orange">烘焙</span><span style="color: #666666">坊</span>
</div>
<p>烘焙行业网络社区平台</p>
</el-col>
</el-row>
</div>
</el-footer>
</el-container>
</div>
个人信息页面
<div id="app">
<el-container>
<el-header height="80px">
<div class="center">
<el-row gutter="20">
<el-col span="6">
<img src="imgs/icon.png" width="196" height="65">
</el-col>
<el-col span="10">
<el-menu mode="horizontal" active-text-color="orange">
<el-menu-item index="0">首页</el-menu-item>
<el-menu-item index="1">食谱</el-menu-item>
<el-menu-item index="2">视频</el-menu-item>
<el-menu-item index="3">资讯</el-menu-item>
</el-menu>
</el-col>
<el-col span="6">
<el-input style="margin-top: 15px" placeholder="请输入搜索的关键字">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col span="2">
<el-popover
placement="top-start"
title="欢迎来到烘焙坊!"
width="200"
trigger="hover">
<div slot="reference">
<i class="el-icon-user"
style="font-size: 30px;position: relative;top: 20px"></i>
</div>
<el-button type="info">注册</el-button>
<el-button style="background-color: orange">登录</el-button>
</el-popover>
</el-col>
</el-row>
</div>
</el-header>
<el-main class="center" >
<el-row gutter="20">
<el-col span="4">
<el-card style="height: 500px">
<p style="color: orange">个人信息</p>
<p @click="location.href='articleManagement.html'">稿件管理</p>
</el-card>
</el-col>
<el-col span="20">
<el-card style="height: 500px">
<el-form label-width="100px">
<el-form-item label="头像">
<img src="imgs/head.jpg"
style="width: 145px;height: 145px;
border-radius: 10px;float: left">
<!--**********上传组件开始***********-->
<el-upload style="float: left"
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<!--**********上传组件结束***********-->
</el-form-item>
<el-form-item label="昵称">
<el-input placeholder="请输入昵称"
style="width: 200px"></el-input>
</el-form-item>
<el-form-item label="用户名">
<el-input disabled value="tom"
style="width: 200px"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">保存信息</el-button>
</el-form-item>
</el-form>
</el-card>
</el-col>
</el-row>
</el-main>
<el-footer style="height: 280px;background-color: #2f3234;padding:50px 0">
<div class="center" style="text-align: center;color: #666">
<el-row>
<el-col span="8">
<img src="imgs/icon.png">
<p>教程灵感就看烘焙坊</p>
<p>烘焙行业网络社区平台</p>
<p>全国百城上千个职位等你来</p>
</el-col>
<el-col span="8">
<el-row id="footer_center">
<el-col span="8">
<h3>关于我们</h3>
<p>关于我们</p><p>烘焙学院</p>
<p>烘焙食谱</p><p>分类信息</p>
<p>求职招聘</p><p>社区交流</p>
</el-col>
<el-col span="8">
<h3>支持与服务</h3>
<p>联系我们</p><p>广告投放</p>
<p>用户协议</p><p>友情链接</p>
<p>在线反馈</p><p>我发投稿</p>
</el-col>
<el-col span="8">
<h3>底部导航</h3>
<p>Archiver</p><p>手机版</p>
<p>小黑屋</p>
</el-col>
</el-row>
</el-col>
<el-col span="8">
<div style="font-size: 58px;margin-top: 30px">
<span style="color: orange">烘焙</span><span style="color: #666666">坊</span>
</div>
<p>烘焙行业网络社区平台</p>
</el-col>
</el-row>
</div>
</el-footer>
</el-container>
</div>
稿件发布页面
<div id="app" >
<el-container>
<el-header height="80px" >
<div class="center">
<el-row gutter="20">
<el-col span="6">
<img src="imgs/icon.png" width="196" height="65">
</el-col>
<el-col span="10">
<el-menu mode="horizontal" active-text-color="orange">
<el-menu-item index="0">首页</el-menu-item>
<el-menu-item index="1">食谱</el-menu-item>
<el-menu-item index="2">视频</el-menu-item>
<el-menu-item index="3">资讯</el-menu-item>
</el-menu>
</el-col>
<el-col span="6">
<el-input style="margin-top: 15px" placeholder="请输入搜索的关键字">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col span="2">
<el-popover
placement="top-start"
title="欢迎来到烘焙坊!"
width="200"
trigger="hover">
<div slot="reference">
<i class="el-icon-user"
style="font-size: 30px;position: relative;top: 20px"></i>
</div>
<el-button type="info">注册</el-button>
<el-button style="background-color: orange">登录</el-button>
</el-popover>
</el-col>
</el-row>
</div>
</el-header>
<el-main class="center" >
<el-row gutter="20">
<el-col span="4">
<el-card style="height: 500px">
<p @click="location.href='personal.html'">个人信息</p>
<p style="color: orange" >稿件管理</p>
</el-card>
</el-col>
<el-col span="20">
<el-card>
<!--标签页卡开始-->
<el-tabs v-model="type" type="card" @tab-click="handleClick">
<el-tab-pane label="食谱" name="1"></el-tab-pane>
<el-tab-pane label="视频" name="2"></el-tab-pane>
<el-tab-pane label="资讯" name="3"></el-tab-pane>
</el-tabs>
<!--标签页卡结束-->
<!--发布文章表单开始-->
<el-form label-width="100px">
<el-form-item label="文章标题">
<el-input style="width: 200px"
placeholder="请输入标题"></el-input>
</el-form-item>
<el-form-item label="文章分类">
<el-select>
<el-option label="面包" value="1"></el-option>
<el-option label="家常菜" value="2"></el-option>
<el-option label="小食" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="封面">
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
<el-form-item label="文章内容">
<div style="border: 1px solid #ccc">
<div id="toolbar-container" style="border-bottom: 1px solid #ccc;"><!-- 工具栏 --></div>
<div id="editor-container" style="height: 300px;"><!-- 编辑器 --></div>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary">发布</el-button>
</el-form-item>
</el-form>
<!--发布文章表单结束-->
</el-card>
</el-col>
</el-row>
</el-main>
<el-footer style="height: 280px;background-color: #2f3234;padding:50px 0">
<div class="center" style="text-align: center;color: #666">
<el-row>
<el-col span="8">
<img src="imgs/icon.png">
<p>教程灵感就看烘焙坊</p>
<p>烘焙行业网络社区平台</p>
<p>全国百城上千个职位等你来</p>
</el-col>
<el-col span="8">
<el-row id="footer_center">
<el-col span="8">
<h3>关于我们</h3>
<p>关于我们</p><p>烘焙学院</p>
<p>烘焙食谱</p><p>分类信息</p>
<p>求职招聘</p><p>社区交流</p>
</el-col>
<el-col span="8">
<h3>支持与服务</h3>
<p>联系我们</p><p>广告投放</p>
<p>用户协议</p><p>友情链接</p>
<p>在线反馈</p><p>我发投稿</p>
</el-col>
<el-col span="8">
<h3>底部导航</h3>
<p>Archiver</p><p>手机版</p>
<p>小黑屋</p>
</el-col>
</el-row>
</el-col>
<el-col span="8">
<div style="font-size: 58px;margin-top: 30px">
<span style="color: orange">烘焙</span><span style="color: #666666">坊</span>
</div>
<p>烘焙行业网络社区平台</p>
</el-col>
</el-row>
</div>
</el-footer>
</el-container>
</div>
