练习Vue烘培坊项目

烘培坊项目

项目概述

烘培坊（Bakery）是一个虚构的在线烘焙产品销售网站，主要面向烘焙爱好者和美食爱好者。该网站提供各种烘焙产品的食谱介绍、视频教学服务，包括烘焙原料、工具和书籍等，烘培坊网站使用了现代化的Web技术，如HTML5、CSS3和JavaScript等，使用Vue、ElementUI框架，作为学习前端搭建网页的教学项目使用

项目页面展示

后台管理页面

登录页面

文章详情页面

稿件发布页面

项目关键代码实现

后台管理页面

 <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-popoverplacement="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-popoverplacement="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-popoverplacement="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-popoverplacement="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-popoverplacement="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-popoverplacement="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-popoverplacement="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-popoverplacement="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-uploadaction="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>