当前位置: 首页 > news >正文

练习Vue烘培坊项目

烘培坊项目

文章目录

  • 烘培坊项目
    • 项目概述
    • 项目页面展示
      • 后台管理页面
      • 登录页面
      • 文章详情页面
      • 稿件发布页面
    • 项目关键代码实现
      • 后台管理页面
      • 稿件管理页面
      • 内容列表页面
      • 文章详情页面
      • 烘培坊主页面
      • 注册页面
      • 登录页面
      • 个人信息页面
      • 稿件发布页面

项目概述

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

项目页面展示

后台管理页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rGolEhkp-1685510842740)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20230531132318963.png)]

登录页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cUgkJAmf-1685510842742)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20230531132353604.png)]

文章详情页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qrYOJ7Af-1685510842743)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20230531132634653.png)]

稿件发布页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jK3BKes2-1685510842743)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20230531132213560.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烘培坊项目

烘培坊项目 文章目录 烘培坊项目项目概述项目页面展示后台管理页面登录页面文章详情页面稿件发布页面 项目关键代码实现后台管理页面稿件管理页面内容列表页面文章详情页面烘培坊主页面注册页面登录页面个人信息页面稿件发布页面 项目概述 烘培坊&#xff08;Bakery&#xff0…...

API测试| 了解API接口测试| API接口测试指南

什么是API&#xff1f; API是一个缩写&#xff0c;它代表了一个 pplication P AGC软件覆盖整个房间。API是用于构建软件应用程序的一组例程&#xff0c;协议和工具。API指定一个软件程序应如何与其他软件程序进行交互。 例行程序&#xff1a;执行特定任务的程序。例程也称为过…...

使用canvas给图片添加水印

上接文章“图片处理” canvas元素其实就是一个画布&#xff0c;我们可以很方便地绘制一些文字、线条、图形等&#xff0c;它也可以将一个img标签里渲染的图片画在画布上。 我们在上传文件到后端的时候&#xff0c;使用input标签读取用户本地文件后得到的其实是一个Blob对象&a…...

栈和队列的概念和实现

栈 栈 定义&#xff1a;只能在一端进行插入或删除操作的的线性表 主要特点&#xff1a;后进先出 存储结构的实现 顺序存储结构 链式存储结构 用途&#xff1a;通常作为一种临时存放数据的容器。如果后存入的元素先处理则使用栈。比如用于保存函…...

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件套&#xff0c;使用落地式配电柜安装方式&#xff0c;从而实现将TN系统转化为IT系统&#xff0c;以及系统绝缘情况监测。 【关键词】医用隔离电源系统&#xff1b;IT系统&#xff1b;绝缘情况监测&#xff1b;三级综合医院…...

高压放大器在3D打印中的应用

随着3D打印技术的快速发展&#xff0c;高压放大器在3D打印中的应用越来越受到人们的关注。高压放大器在3D打印中扮演着非常重要的角色&#xff0c;可以提高3D打印的效率和精度&#xff0c;从而实现更高的打印质量。本文将详细介绍高压放大器在3D打印中的应用及其原理。 高压放…...

chatgpt赋能python:Python中的三角函数介绍

Python中的三角函数介绍 Python作为一种高级编程语言&#xff0c;可以处理基础算术运算、三角函数等高等数学的操作。其中&#xff0c;三角函数是常用的数学函数之一&#xff0c;Pyhon中的三角函数包括正弦函数、余弦函数、正切函数等。 正弦函数 正弦函数在三角学中是最基本…...

异常检测论文1

本文仅作为个人阅读文献&#xff0c;做笔记记录。 <> \usepackage[dvipsnames]{xcolor} 一、摘要部分&#xff1a; 我们发现&#xff0c;现有的数据集偏向于局部结构异常&#xff0c;如划痕、凹痕或污染。特别是&#xff0c;它们缺乏违反逻辑约束形式的异常&#xff0…...

linux搭建hadoop环境

1、安装JDK   &#xff08;1&#xff09;下载安装JDK&#xff1a;确保计算机联网之后命令行输入下面命令安装JDK    sudo apt-get install sun-java8-jdk   &#xff08;2&#xff09;配置计算机Java环境&#xff1a;打开/etc/profile&#xff0c;在文件最后输入下面…...

02 Maven创建及使用

maven作用 主要用作基于java平台的项目 maven能提供一种项目配置 maven能自动从maven的中央仓库帮我们自动下载并管路项目依赖的jar包 提供了标准的目录结构 中央仓库两种类型:共有的中央仓库:私有中央仓库 使用mvn -v查看是否安装成功 修改本地仓库的的位置 在setting…...

如何在 Rocky Linux 上检查磁盘空间?

在 Rocky Linux 上检查磁盘空间是系统管理和维护的重要任务之一。磁盘空间的监控和管理可以帮助我们及时发现和解决存储空间不足的问题&#xff0c;以确保系统的正常运行。本文将详细介绍在 Rocky Linux 上检查磁盘空间的方法。 方法 1&#xff1a;使用 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(加装跟踪装置)—让群体协作更智能!

群体智能是近年来发展迅速的一个人工智能学科领域&#xff0c;通过对蚂蚁、蜜蜂等为代表的社会性昆虫群体行为的研究&#xff0c;实现分布式等智能行为。作为新一代人工智能的重要方向&#xff0c;群体智能通常用于无人机、机器人集群的协同作业。目前&#xff0c;群体智能在基…...

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 服务发现…...

有哪些工具软件一旦用了就离不开?

&#x1f496;前言 目前&#xff0c;随着科技的快速发展&#xff0c;电脑已经进入了许许多多人的生活 &#xff0c;在平日的学习、工作和生活里&#xff0c;我们会用的各种各样的强大软件。市面上除了某些大公司开发在强大软件&#xff0c;还有各路大神开发具有某些功能的强大…...

ObjectARX如何判断点和多段线的关系

目录 1 基本思路2 相关知识点2.1 ECS坐标系概述2.2 其他点坐标转换接口2.3 如何获取多段线的顶点ECS坐标 3 实现例程3.1 接口实现3.2 测试代码 4 实现效果 在CAD的二次开发中&#xff0c;点和多段线的关系是一个非常重要且常见的问题&#xff0c;本文实现例程以张帆所著《Objec…...

四、DRF序列化器create方法与update方法

上一章&#xff1a; 二、Django REST Framework (DRF)序列化&反序列化&数据校验_做测试的喵酱的博客-CSDN博客 下一章&#xff1a; 五、DRF 模型序列化器ModelSerializer_做测试的喵酱的博客-CSDN博客 一、背景 1、创建请求&#xff0c;post&#xff0c;用户输入…...

洛谷P8792 最大公约数

[蓝桥杯 2022 国 A] 最大公约数 题目描述 给定一个数组&#xff0c;每次操作可以选择数组中任意两个相邻的元素 x , y x, y x,y 并将其中的一个元素替换为 gcd ⁡ ( x , y ) \gcd(x, y) gcd(x,y)&#xff0c;其中 gcd ⁡ ( x , y ) \gcd(x, y) gcd(x,y) 表示 x x x 和 y…...

【SpringBoot集成Nacos+Dubbo】企业级项目集成微服务组件,实现RPC远程调用

文章目录 一、需求环境/版本 二、须知2.1、什么是RPC&#xff1f;2.2、什么是Dubbo&#xff1f;2.3、什么是Nacos&#xff1f; 三、普通的SpringBoot项目集成微服务组件方案&#xff08;笔者给出两种&#xff09;方案一&#xff08;推荐&#xff09;1、导入maven依赖&#xff0…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

第八部分:阶段项目 6:构建 React 前端应用

现在&#xff0c;是时候将你学到的 React 基础知识付诸实践&#xff0c;构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段&#xff0c;你可以先使用模拟数据&#xff0c;或者如果你的后端 API&#xff08;阶段项目 5&#xff09;已经搭建好&#xff0c;可以直接连…...