练习Vue烘培坊项目
烘培坊项目
文章目录
- 烘培坊项目
- 项目概述
- 项目页面展示
- 后台管理页面
- 登录页面
- 文章详情页面
- 稿件发布页面
- 项目关键代码实现
- 后台管理页面
- 稿件管理页面
- 内容列表页面
- 文章详情页面
- 烘培坊主页面
- 注册页面
- 登录页面
- 个人信息页面
- 稿件发布页面
项目概述
烘培坊（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-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>
相关文章：
练习Vue烘培坊项目
烘培坊项目 文章目录 烘培坊项目项目概述项目页面展示后台管理页面登录页面文章详情页面稿件发布页面 项目关键代码实现后台管理页面稿件管理页面内容列表页面文章详情页面烘培坊主页面注册页面登录页面个人信息页面稿件发布页面 项目概述 烘培坊（Bakery࿰…...
API测试| 了解API接口测试| API接口测试指南
什么是API？ API是一个缩写，它代表了一个 pplication P AGC软件覆盖整个房间。API是用于构建软件应用程序的一组例程，协议和工具。API指定一个软件程序应如何与其他软件程序进行交互。 例行程序：执行特定任务的程序。例程也称为过…...
使用canvas给图片添加水印
上接文章“图片处理” canvas元素其实就是一个画布，我们可以很方便地绘制一些文字、线条、图形等，它也可以将一个img标签里渲染的图片画在画布上。 我们在上传文件到后端的时候，使用input标签读取用户本地文件后得到的其实是一个Blob对象&a…...
栈和队列的概念和实现
栈 栈 定义：只能在一端进行插入或删除操作的的线性表 主要特点：后进先出 存储结构的实现 顺序存储结构 链式存储结构 用途：通常作为一种临时存放数据的容器。如果后存入的元素先处理则使用栈。比如用于保存函…...
PostgreSQL 源码部署
文章目录 说明1. 准备工作1.1 源码包下载1.2 解压安装目录1.3 安装依赖包1.4 添加用户1.5 创建数据目录 2. 编译安装2.1 源码编译2.2 配置环境变量2.3 初始化数据库2.4 启动数据库2.5 连接数据库 3. 参数调整3.1 配置 pg_hba3.2 监听相关2.4 日志文件2.5 内存参数 说明 本篇文…...
医疗IT系统安科瑞隔离电源装置在医院的应用
【摘要】介绍该三级综合医院采用安科瑞隔离电源系统5件套，使用落地式配电柜安装方式，从而实现将TN系统转化为IT系统，以及系统绝缘情况监测。 【关键词】医用隔离电源系统；IT系统；绝缘情况监测；三级综合医院…...
高压放大器在3D打印中的应用
随着3D打印技术的快速发展，高压放大器在3D打印中的应用越来越受到人们的关注。高压放大器在3D打印中扮演着非常重要的角色，可以提高3D打印的效率和精度，从而实现更高的打印质量。本文将详细介绍高压放大器在3D打印中的应用及其原理。 高压放…...
chatgpt赋能python：Python中的三角函数介绍
Python中的三角函数介绍 Python作为一种高级编程语言，可以处理基础算术运算、三角函数等高等数学的操作。其中，三角函数是常用的数学函数之一，Pyhon中的三角函数包括正弦函数、余弦函数、正切函数等。 正弦函数 正弦函数在三角学中是最基本…...
异常检测论文1
本文仅作为个人阅读文献，做笔记记录。 <> \usepackage[dvipsnames]{xcolor} 一、摘要部分： 我们发现，现有的数据集偏向于局部结构异常，如划痕、凹痕或污染。特别是，它们缺乏违反逻辑约束形式的异常࿰…...
linux搭建hadoop环境
1、安装JDK （1）下载安装JDK：确保计算机联网之后命令行输入下面命令安装JDK sudo apt-get install sun-java8-jdk （2）配置计算机Java环境：打开/etc/profile，在文件最后输入下面…...
02 Maven创建及使用
maven作用 主要用作基于java平台的项目 maven能提供一种项目配置 maven能自动从maven的中央仓库帮我们自动下载并管路项目依赖的jar包 提供了标准的目录结构 中央仓库两种类型:共有的中央仓库:私有中央仓库 使用mvn -v查看是否安装成功 修改本地仓库的的位置 在setting…...
如何在 Rocky Linux 上检查磁盘空间？
在 Rocky Linux 上检查磁盘空间是系统管理和维护的重要任务之一。磁盘空间的监控和管理可以帮助我们及时发现和解决存储空间不足的问题，以确保系统的正常运行。本文将详细介绍在 Rocky Linux 上检查磁盘空间的方法。 方法 1：使用 df 命令 df 命令是 Li…...
【软考系统规划与管理师笔记】第2篇 信息技术知识1
目录 1 软件工程 1.1 软件需求分析与定义 1.2 软件设计、测试与维护 1.3 软件质量保证及质量评价 1.4 软件配置管理 1.5 软件过程管理 1.6 软件复用 2 面向对象系统分析与设计 2.1 面向对象设计的基本概念 2.2统一建模语言与可视化建模 3. 应用集成技术 3.1 数据库与…...
【无标题】ELISA-3(加装跟踪装置)—让群体协作更智能！
群体智能是近年来发展迅速的一个人工智能学科领域，通过对蚂蚁、蜜蜂等为代表的社会性昆虫群体行为的研究，实现分布式等智能行为。作为新一代人工智能的重要方向，群体智能通常用于无人机、机器人集群的协同作业。目前，群体智能在基…...
Dubbo源码解析一服务暴露与发现
Dubbo 服务暴露与发现 1. Spring中自定义Schema1.1 案例使用1.2 dubbo中的相关对象 2. 服务暴露机制2.1 术语解释2.2 流程机制2.3 源码分析2.3.1 导出入口2.3.2 导出服务到本地2.3.3 导出服务到远程(重点)2.3.4 开启Netty服务2.3.5 服务注册2.3.6 总结 3. 服务发现3.1 服务发现…...
有哪些工具软件一旦用了就离不开？
💖前言 目前，随着科技的快速发展，电脑已经进入了许许多多人的生活 ，在平日的学习、工作和生活里，我们会用的各种各样的强大软件。市面上除了某些大公司开发在强大软件，还有各路大神开发具有某些功能的强大…...
ObjectARX如何判断点和多段线的关系
目录 1 基本思路2 相关知识点2.1 ECS坐标系概述2.2 其他点坐标转换接口2.3 如何获取多段线的顶点ECS坐标 3 实现例程3.1 接口实现3.2 测试代码 4 实现效果 在CAD的二次开发中，点和多段线的关系是一个非常重要且常见的问题，本文实现例程以张帆所著《Objec…...
四、DRF序列化器create方法与update方法
上一章： 二、Django REST Framework (DRF)序列化&反序列化&数据校验_做测试的喵酱的博客-CSDN博客 下一章： 五、DRF 模型序列化器ModelSerializer_做测试的喵酱的博客-CSDN博客 一、背景 1、创建请求，post，用户输入…...
洛谷P8792 最大公约数
[蓝桥杯 2022 国 A] 最大公约数 题目描述 给定一个数组，每次操作可以选择数组中任意两个相邻的元素 x , y x, y x,y 并将其中的一个元素替换为 gcd ( x , y ) \gcd(x, y) gcd(x,y)，其中 gcd ( x , y ) \gcd(x, y) gcd(x,y) 表示 x x x 和 y…...
【SpringBoot集成Nacos+Dubbo】企业级项目集成微服务组件，实现RPC远程调用
文章目录 一、需求环境/版本 二、须知2.1、什么是RPC？2.2、什么是Dubbo？2.3、什么是Nacos？ 三、普通的SpringBoot项目集成微服务组件方案（笔者给出两种）方案一（推荐）1、导入maven依赖࿰…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示 最终上报fail 解决方法 内核升级导致，需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题 问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
反射获取方法和属性
Java反射获取方法 在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析（Parser） 2.4、执行sql 1. 预处理（Preprocessor） 2. 查询优化器（Optimizer） 3. 执行器…...
现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？
现有的 Redis 分布式锁库（如 Redisson）相比于开发者自己基于 Redis 命令（如 SETNX, EXPIRE, DEL）手动实现分布式锁，提供了巨大的便利性和健壮性。主要体现在以下几个方面： 原子性保证 (Atomicity)ÿ…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了，就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...