练习Vue烘培坊项目

练习Vue项目之烘培坊项目，其中包括Html、CSS、JS、Vue、ElementUI等技术的应用，本项目只为熟练使用Vue操作，不包含与后台数据库连接，可以配合使用数据库将前端死数据替换实现真正的项目，文章只展示部分代码，完整代码和素材可在评论区获取

今天你学Java了吗

1646人浏览 · 2023-05-31 13:29:25

今天你学Java了吗 · 2023-05-31 13:29:25 发布

烘培坊项目

文章目录

烘培坊项目

项目概述

烘培坊（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-popover
                                placement="top-start"
                                title="欢迎来到烘焙坊!"
                                width="200"
                                trigger="hover">
                        <div slot="reference">
                            <i class="el-icon-user"
                               style="font-size: 30px;position: relative;top: 20px"></i>
                        </div>
                        <el-button type="info">注册</el-button>
                        <el-button style="background-color: orange">登录</el-button>
                    </el-popover>
                </el-col>
            </el-row>
        </div>
    </el-header>
    <el-main class="center" >
        <el-row gutter="20">
            <el-col span="4">

                <el-card style="height: 500px">
                    <p @click="location.href='personal.html'">个人信息</p>
                    <p style="color: orange" >稿件管理</p>
                </el-card>
            </el-col>
            <el-col span="20">
                <el-card>
                    <!--标签页卡开始-->
                    <el-tabs v-model="type"  type="card" @tab-click="handleClick">
                        <el-tab-pane label="食谱" name="1"></el-tab-pane>
                        <el-tab-pane label="视频" name="2"></el-tab-pane>
                        <el-tab-pane label="资讯" name="3"></el-tab-pane>
                    </el-tabs>
                    <!--标签页卡结束-->
                    <el-button type="primary">发帖</el-button>
                    <!--内容列表开始-->
                    <el-table :data="contentArr" border>
                        <el-table-column label="标题" width="150px"
                                         prop="title" align="center"></el-table-column>
                        <el-table-column label="封面" width="60px">
                            <template slot-scope="scope">
                                <img :src="scope.row.imgUrl" width="50px">
                            </template>

                        </el-table-column>
                        <el-table-column label="摘要" width="300px"
                                         prop="brief" align="center"></el-table-column>
                        <el-table-column label="类型"
                                         prop="categoryName" align="center"></el-table-column>
                        <el-table-column label="浏览量"
                                         prop="viewCount" align="center"></el-table-column>
                        <el-table-column label="回复量"
                                         prop="commentCount" align="center"></el-table-column>
                        <el-table-column label="创建时间"
                                         prop="createTime" align="center"></el-table-column>
                        <el-table-column label="操作"  width="200px" fixed="right"
                                         align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" type="success"
                                           @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button size="mini" type="danger"
                                           @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--内容列表结束-->
                </el-card>
            </el-col>
        </el-row>
    </el-main>
    <el-footer style="height: 280px;background-color: #2f3234;padding:50px 0">
        <div class="center" style="text-align: center;color: #666">
            <el-row>
                <el-col span="8">
                    <img src="imgs/icon.png">
                    <p>教程灵感就看烘焙坊</p>
                    <p>烘焙行业网络社区平台</p>
                    <p>全国百城上千个职位等你来</p>
                </el-col>
                <el-col span="8">
                    <el-row id="footer_center">
                        <el-col span="8">
                            <h3>关于我们</h3>
                            <p>关于我们</p><p>烘焙学院</p>
                            <p>烘焙食谱</p><p>分类信息</p>
                            <p>求职招聘</p><p>社区交流</p>
                        </el-col>
                        <el-col span="8">
                            <h3>支持与服务</h3>
                            <p>联系我们</p><p>广告投放</p>
                            <p>用户协议</p><p>友情链接</p>
                            <p>在线反馈</p><p>我发投稿</p>
                        </el-col>
                        <el-col span="8">
                            <h3>底部导航</h3>
                            <p>Archiver</p><p>手机版</p>
                            <p>小黑屋</p>
                        </el-col>
                    </el-row>

                </el-col>
                <el-col span="8">
                    <div style="font-size: 58px;margin-top: 30px">
                        <span style="color: orange">烘焙</span><span style="color: #666666">坊</span>
                    </div>
                    <p>烘焙行业网络社区平台</p>
                </el-col>
            </el-row>
        </div>

    </el-footer>
</el-container>

内容列表页面

<div id="app">
    <el-container>
        <el-header height="80px">
            <div class="center">
                <el-row gutter="20">
                    <el-col span="6">
                        <img src="imgs/icon.png" width="196" height="65">
                    </el-col>
                    <el-col span="10">
                        <el-menu mode="horizontal" active-text-color="orange">
                            <el-menu-item index="0">首页</el-menu-item>
                            <el-menu-item index="1">食谱</el-menu-item>
                            <el-menu-item index="2">视频</el-menu-item>
                            <el-menu-item index="3">资讯</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col span="6">
                        <el-input style="margin-top: 15px" placeholder="请输入搜索的关键字">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-col>
                    <el-col span="2">
                        <el-popover
                                    placement="top-start"
                                    title="欢迎来到烘焙坊!"
                                    width="200"
                                    trigger="hover">
                            <div slot="reference">
                                <i class="el-icon-user"
                                   style="font-size: 30px;position: relative;top: 20px"></i>
                            </div>
                            <el-button type="info">注册</el-button>
                            <el-button style="background-color: orange">登录</el-button>
                        </el-popover>
                    </el-col>
                </el-row>
            </div>
        </el-header>
        <el-main class="center" >
            <!--内容列表开始-->
            <el-row gutter="20">
                <el-col v-for="r in recipeArr" span="6">
                    <el-card style="margin: 10px 0">
                        <img :src="r.imgUrl" width="100%" height="144">
                        <p style="height: 40px">{{r.title}}</p>
                        <el-row gutter="20">
                            <el-col span="4">
                                <!--圆形图片,专门用来显示头像-->
                                <el-avatar size="small" :src="r.userImgUrl"></el-avatar>
                            </el-col>
                            <el-col span="10">{{r.nickName}}</el-col>
                            <el-col span="10">
                                <span style="float: right;font-size: 12px;color: #ccc">{{r.categoryName}}</span>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
            <div style="text-align: center;margin-bottom: 20px">
                <el-button>点击查看更多内容</el-button>
            </div>
            <!--内容列表结束-->
        </el-main>
        <el-footer style="height: 280px;background-color: #2f3234;padding:50px 0">
            <div class="center" style="text-align: center;color: #666">
                <el-row>
                    <el-col span="8">
                        <img src="imgs/icon.png">
                        <p>教程灵感就看烘焙坊</p>
                        <p>烘焙行业网络社区平台</p>
                        <p>全国百城上千个职位等你来</p>
                    </el-col>
                    <el-col span="8">
                        <el-row id="footer_center">
                            <el-col span="8">
                                <h3>关于我们</h3>
                                <p>关于我们</p><p>烘焙学院</p>
                                <p>烘焙食谱</p><p>分类信息</p>
                                <p>求职招聘</p><p>社区交流</p>
                            </el-col>
                            <el-col span="8">
                                <h3>支持与服务</h3>
                                <p>联系我们</p><p>广告投放</p>
                                <p>用户协议</p><p>友情链接</p>
                                <p>在线反馈</p><p>我发投稿</p>
                            </el-col>
                            <el-col span="8">
                                <h3>底部导航</h3>
                                <p>Archiver</p><p>手机版</p>
                                <p>小黑屋</p>
                            </el-col>
                        </el-row>

                    </el-col>
                    <el-col span="8">
                        <div style="font-size: 58px;margin-top: 30px">
                            <span style="color: orange">烘焙</span><span style="color: #666666">坊</span>
                        </div>
                        <p>烘焙行业网络社区平台</p>
                    </el-col>
                </el-row>
            </div>

        </el-footer>
    </el-container>
</div>

文章详情页面

<div id="app">
    <el-container>
        <el-header height="80px">
            <div class="center">
                <el-row gutter="20">
                    <el-col span="6">
                        <img src="imgs/icon.png" width="196" height="65">
                    </el-col>
                    <el-col span="10">
                        <el-menu mode="horizontal" active-text-color="orange">
                            <el-menu-item index="0">首页</el-menu-item>
                            <el-menu-item index="1">食谱</el-menu-item>
                            <el-menu-item index="2">视频</el-menu-item>
                            <el-menu-item index="3">资讯</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col span="6">
                        <el-input style="margin-top: 15px" placeholder="请输入搜索的关键字">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-col>
                    <el-col span="2">
                        <el-popover
                                    placement="top-start"
                                    title="欢迎来到烘焙坊!"
                                    width="200"
                                    trigger="hover">
                            <div slot="reference">
                                <i class="el-icon-user"
                                   style="font-size: 30px;position: relative;top: 20px"></i>
                            </div>
                            <el-button type="info">注册</el-button>
                            <el-button style="background-color: orange">登录</el-button>
                        </el-popover>
                    </el-col>
                </el-row>
            </div>
        </el-header>
        <el-main class="center" >
            <el-row gutter="20">
                <el-col span="18">
                    <el-card>
                        <h2 style="color: orange;text-align: center">
                            枣泥花式面包,好吃到爆!
                        </h2>
                        <p style="font-size: 12px;color: #666;text-align: center">
                            作者:汤姆 | 发布时间:2023/5/26 11:12:30 | 阅读次数:1
                        </p>
                        <el-divider></el-divider>
                        <el-card style="font-size: 12px">
                            <b style="color: #409EFF">摘要:</b>
                            之前做了枣泥馅，配上花式面包，好吃到爆。 枣泥花式面包的用料 肉松面包面团
                        </el-card>
                        <p style="height: 500px">文章内容</p>

                    </el-card>
                    <!--评论相关开始-->
                    <el-card>
                        <p>发一条友善的评论</p>
                        <el-divider></el-divider>
                        <el-row gutter="20">
                            <el-col span="20">
                                <el-input type="textarea" placeholder="说点儿啥..."></el-input>
                            </el-col>
                            <el-col span="2">
                                <el-button>发布</el-button>
                            </el-col>
                        </el-row>
                        <!--评论列表开始-->
                        <el-row style="margin: 5px 0">
                            <el-col span="2">
                                <el-avatar src="imgs/head.jpg"></el-avatar>
                            </el-col>
                            <el-col span="20">
                                <span style="color: orange;font-weight: bold">汤姆:</span>
                                <p style="margin:5px 0">开起来很好吃!</p>
                                <span style="color: #666;font-size: 12px">2023/5/26 15:52:30</span>
                            </el-col>
                        </el-row>
                        <!--评论列表结束-->
                    </el-card>
                    <!--评论相关结束-->

                </el-col>
                <el-col span="6">
                    <el-card class="right-card" style="height: 240px;text-align: center;">
                        <div style="background-image: url('imgs/avarbg.jpg');
                                    height: 90px"></div>
                        <div style="position: relative;top: -45px">
                            <img src="imgs/head.jpg"
                                 style="border-radius: 90px;border: 5px solid white;
                                        width: 90px;height: 90px">
                            <p style="font-size: 20px;margin: 0;
                                      font-weight: bold">汤姆</p>
                            <i class="el-icon-edit">本文作者</i><br>
                            <i class="el-icon-time">2023/5/26 16:43:30</i>
                        </div>

                    </el-card>
                    <!--作者其它文章开始-->
                    <el-card style="margin:10px 0">
                        <h3>作者其它文章</h3>
                        <el-divider></el-divider>
                        <!--文章列表开始-->
                        <el-row gutter="10" v-for="item in 4">
                            <el-col span="10">
                                <img src="imgs/a.jpg" width="100%" height="70px">
                            </el-col>
                            <el-col span="14">
                                <p style="margin: 0;height: 50px">枣泥面包好吃到爆!</p>
                                <i class="el-icon-time" style="color: #666">2023/6/30</i>
                            </el-col>
                        </el-row>
                        <!--文章列表结束-->
                    </el-card>

                    <!--作者其它文章结束-->
                    <!--热门文章开始-->
                    <el-card style="margin:10px 0">
                        <h3>热门文章</h3>
                        <el-divider></el-divider>
                        <!--文章列表开始-->
                        <el-row gutter="10" v-for="item in 4">
                            <el-col span="10">
                                <img src="imgs/a.jpg" width="100%" height="70px">
                            </el-col>
                            <el-col span="14">
                                <p style="margin: 0;height: 50px">枣泥面包好吃到爆!</p>
                                <i class="el-icon-time" style="color: #666">2023/6/30</i>
                            </el-col>
                        </el-row>
                        <!--文章列表结束-->
                    </el-card>

                    <!--热门文章结束-->
                </el-col>
            </el-row>


        </el-main>
        <el-footer style="height: 280px;background-color: #2f3234;padding:50px 0">
            <div class="center" style="text-align: center;color: #666">
                <el-row>
                    <el-col span="8">
                        <img src="imgs/icon.png">
                        <p>教程灵感就看烘焙坊</p>
                        <p>烘焙行业网络社区平台</p>
                        <p>全国百城上千个职位等你来</p>
                    </el-col>
                    <el-col span="8">
                        <el-row id="footer_center">
                            <el-col span="8">
                                <h3>关于我们</h3>
                                <p>关于我们</p><p>烘焙学院</p>
                                <p>烘焙食谱</p><p>分类信息</p>
                                <p>求职招聘</p><p>社区交流</p>
                            </el-col>
                            <el-col span="8">
                                <h3>支持与服务</h3>
                                <p>联系我们</p><p>广告投放</p>
                                <p>用户协议</p><p>友情链接</p>
                                <p>在线反馈</p><p>我发投稿</p>
                            </el-col>
                            <el-col span="8">
                                <h3>底部导航</h3>
                                <p>Archiver</p><p>手机版</p>
                                <p>小黑屋</p>
                            </el-col>
                        </el-row>

                    </el-col>
                    <el-col span="8">
                        <div style="font-size: 58px;margin-top: 30px">
                            <span style="color: orange">烘焙</span><span style="color: #666666">坊</span>
                        </div>
                        <p>烘焙行业网络社区平台</p>
                    </el-col>
                </el-row>
            </div>

        </el-footer>
    </el-container>
</div>

烘培坊主页面

<div id="app">
    <el-container>
        <el-header height="80px">
            <div class="center">
                <el-row gutter="20">
                    <el-col span="6">
                        <img src="imgs/icon.png" width="196" height="65">
                    </el-col>
                    <el-col span="10">
                        <el-menu mode="horizontal" active-text-color="orange">
                            <el-menu-item index="0">首页</el-menu-item>
                            <el-menu-item index="1">食谱</el-menu-item>
                            <el-menu-item index="2">视频</el-menu-item>
                            <el-menu-item index="3">资讯</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col span="6">
                        <el-input style="margin-top: 15px" placeholder="请输入搜索的关键字">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-col>
                    <el-col span="2">
                        <el-popover
                                    placement="top-start"
                                    title="欢迎来到烘焙坊!"
                                    width="200"
                                    trigger="hover">
                            <div slot="reference">
                                <i class="el-icon-user"
                                   style="font-size: 30px;position: relative;top: 20px"></i>
                            </div>
                            <el-button type="info">注册</el-button>
                            <el-button style="background-color: orange">登录</el-button>
                        </el-popover>
                    </el-col>
                </el-row>
            </div>
        </el-header>
        <el-main class="center" >
            <el-carousel height="375px">
                <el-carousel-item>
                    <img src="imgs/banner1.jpg" width="100%">
                </el-carousel-item>
                <el-carousel-item>
                    <img src="imgs/banner2.jpg" width="100%">
                </el-carousel-item>
                <el-carousel-item>
                    <img src="imgs/banner3.jpg" width="100%">
                </el-carousel-item>
            </el-carousel>
            <!--食谱开始-->
            <el-row style="background-color: white">
                <el-col span="3">
                    <p style="font-size: 28px;line-height: 65px;margin: 0">烘焙食谱</p>
                </el-col>
                <el-col span="21">
                    <!--食谱导航开始-->
                    <el-menu mode="horizontal" default-active="0" active-text-color="orange">
                        <el-menu-item index="0">全部</el-menu-item>
                        <el-menu-item index="1">面包</el-menu-item>
                        <el-menu-item index="2">零食</el-menu-item>
                        <el-menu-item index="3">家常菜</el-menu-item>
                    </el-menu>
                    <!--食谱导航结束-->
                </el-col>
            </el-row>
            <!--食谱列表开始-->
            <el-row gutter="20">
                <el-col v-for="r in recipeArr" span="6">
                    <el-card style="margin: 10px 0">
                        <img :src="r.imgUrl" width="100%" height="144">
                        <p style="height: 40px">{{r.title}}</p>
                        <el-row gutter="20">
                            <el-col span="4">
                                <!--圆形图片,专门用来显示头像-->
                                <el-avatar size="small" :src="r.userImgUrl"></el-avatar>
                            </el-col>
                            <el-col span="10">{{r.nickName}}</el-col>
                            <el-col span="10">
                                <span style="float: right;font-size: 12px;color: #ccc">{{r.categoryName}}</span>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
            <div style="text-align: center;margin-bottom: 20px">
                <el-button>点击查看更多食谱</el-button>
            </div>
            <!--食谱列表结束-->
            <!--食谱结束-->

            <!--视频开始-->
            <el-row style="background-color: white">
                <el-col span="3">
                    <p style="font-size: 28px;line-height: 65px;margin: 0">烘焙视频</p>
                </el-col>
                <el-col span="21">
                    <!--视频导航开始-->
                    <el-menu mode="horizontal" default-active="0" active-text-color="orange">
                        <el-menu-item index="0">全部</el-menu-item>
                        <el-menu-item index="1">面包教学</el-menu-item>
                        <el-menu-item index="2">零食鉴赏</el-menu-item>
                        <el-menu-item index="3">家常菜教程</el-menu-item>
                    </el-menu>
                    <!--视频导航结束-->
                </el-col>
            </el-row>
            <!--视频列表开始-->
            <el-row gutter="20">
                <el-col v-for="r in recipeArr" span="6">
                    <el-card style="margin: 10px 0">
                        <img :src="r.imgUrl" width="100%" height="144">
                        <p style="height: 40px">{{r.title}}</p>
                        <el-row gutter="20">
                            <el-col span="4">
                                <!--圆形图片,专门用来显示头像-->
                                <el-avatar size="small" :src="r.userImgUrl"></el-avatar>
                            </el-col>
                            <el-col span="10">{{r.nickName}}</el-col>
                            <el-col span="10">
                                <span style="float: right;font-size: 12px;color: #ccc">{{r.categoryName}}</span>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
            <div style="text-align: center;margin-bottom: 20px">
                <el-button>点击查看更多视频</el-button>
            </div>
            <!--视频列表结束-->
            <!--视频结束-->

            <!--资讯开始-->
            <el-row style="background-color: white">
                <el-col span="3">
                    <p style="font-size: 28px;line-height: 65px;margin: 0">行业资讯</p>
                </el-col>
                <el-col span="21">
                    <!--资讯导航开始-->
                    <el-menu mode="horizontal" default-active="0" active-text-color="orange">
                        <el-menu-item index="0">全部</el-menu-item>
                        <el-menu-item index="1">美食资讯</el-menu-item>
                        <el-menu-item index="2">店家资讯</el-menu-item>
                    </el-menu>
                    <!--资讯导航结束-->
                </el-col>
            </el-row>
            <!--资讯列表开始-->
            <el-row gutter="20">
                <el-col v-for="r in recipeArr" span="6">
                    <el-card style="margin: 10px 0">
                        <img :src="r.imgUrl" width="100%" height="144">
                        <p style="height: 40px">{{r.title}}</p>
                        <el-row gutter="20">
                            <el-col span="4">
                                <!--圆形图片,专门用来显示头像-->
                                <el-avatar size="small" :src="r.userImgUrl"></el-avatar>
                            </el-col>
                            <el-col span="10">{{r.nickName}}</el-col>
                            <el-col span="10">
                                <span style="float: right;font-size: 12px;color: #ccc">{{r.categoryName}}</span>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
            <div style="text-align: center;margin-bottom: 20px">
                <el-button>点击查看更多资讯</el-button>
            </div>
            <!--资讯列表结束-->
            <!--资讯结束-->
        </el-main>
        <el-footer style="height: 280px;background-color: #2f3234;padding:50px 0">
            <div class="center" style="text-align: center;color: #666">
                <el-row>
                    <el-col span="8">
                        <img src="imgs/icon.png">
                        <p>教程灵感就看烘焙坊</p>
                        <p>烘焙行业网络社区平台</p>
                        <p>全国百城上千个职位等你来</p>
                    </el-col>
                    <el-col span="8">
                        <el-row id="footer_center">
                            <el-col span="8">
                                <h3>关于我们</h3>
                                <p>关于我们</p><p>烘焙学院</p>
                                <p>烘焙食谱</p><p>分类信息</p>
                                <p>求职招聘</p><p>社区交流</p>
                            </el-col>
                            <el-col span="8">
                                <h3>支持与服务</h3>
                                <p>联系我们</p><p>广告投放</p>
                                <p>用户协议</p><p>友情链接</p>
                                <p>在线反馈</p><p>我发投稿</p>
                            </el-col>
                            <el-col span="8">
                                <h3>底部导航</h3>
                                <p>Archiver</p><p>手机版</p>
                                <p>小黑屋</p>
                            </el-col>
                        </el-row>

                    </el-col>
                    <el-col span="8">
                        <div style="font-size: 58px;margin-top: 30px">
                            <span style="color: orange">烘焙</span><span style="color: #666666">坊</span>
                        </div>
                        <p>烘焙行业网络社区平台</p>
                    </el-col>
                </el-row>
            </div>

        </el-footer>
    </el-container>
</div>

注册页面

<div id="app">
    <el-container>
        <el-header height="80px">
            <div class="center">
                <el-row gutter="20">
                    <el-col span="6">
                        <img src="imgs/icon.png" width="196" height="65">
                    </el-col>
                    <el-col span="10">
                        <el-menu mode="horizontal" active-text-color="orange">
                            <el-menu-item index="0">首页</el-menu-item>
                            <el-menu-item index="1">食谱</el-menu-item>
                            <el-menu-item index="2">视频</el-menu-item>
                            <el-menu-item index="3">资讯</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col span="6">
                        <el-input style="margin-top: 15px" placeholder="请输入搜索的关键字">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-col>
                    <el-col span="2">
                        <el-popover
                                    placement="top-start"
                                    title="欢迎来到烘焙坊!"
                                    width="200"
                                    trigger="hover">
                            <div slot="reference">
                                <i class="el-icon-user"
                                   style="font-size: 30px;position: relative;top: 20px"></i>
                            </div>
                            <el-button type="info">注册</el-button>
                            <el-button style="background-color: orange">登录</el-button>
                        </el-popover>
                    </el-col>
                </el-row>
            </div>
        </el-header>
        <el-main class="center" style="margin-top: 30px">
            <el-row gutter="20">
                <el-col span="12">
                    <el-card>
                        <img src="imgs/reg.png" width="100%">
                    </el-card>
                </el-col>
                <el-col span="12">
                    <!--注册表单开始-->
                    <el-form label-width="80px">
                        <el-form-item>
                            <h1 style="float: left;font-size: 28px">立即注册</h1>
                            <a style="float: right;
                                      text-decoration: none;color: #409EFF;
                                      position: relative;top: 20px"  href="login.html">
                                已有账号?现在登录
                            </a>
                        </el-form-item>
                        <el-form-item label="用户名">
                            <el-input placeholder="请输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称">
                            <el-input placeholder="请输入昵称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary">注册</el-button>
                        </el-form-item>
                    </el-form>
                    <!--注册表单结束-->
                </el-col>
            </el-row>

        </el-main>
        <el-footer style="height: 280px;background-color: #2f3234;padding:50px 0">
            <div class="center" style="text-align: center;color: #666">
                <el-row>
                    <el-col span="8">
                        <img src="imgs/icon.png">
                        <p>教程灵感就看烘焙坊</p>
                        <p>烘焙行业网络社区平台</p>
                        <p>全国百城上千个职位等你来</p>
                    </el-col>
                    <el-col span="8">
                        <el-row id="footer_center">
                            <el-col span="8">
                                <h3>关于我们</h3>
                                <p>关于我们</p><p>烘焙学院</p>
                                <p>烘焙食谱</p><p>分类信息</p>
                                <p>求职招聘</p><p>社区交流</p>
                            </el-col>
                            <el-col span="8">
                                <h3>支持与服务</h3>
                                <p>联系我们</p><p>广告投放</p>
                                <p>用户协议</p><p>友情链接</p>
                                <p>在线反馈</p><p>我发投稿</p>
                            </el-col>
                            <el-col span="8">
                                <h3>底部导航</h3>
                                <p>Archiver</p><p>手机版</p>
                                <p>小黑屋</p>
                            </el-col>
                        </el-row>

                    </el-col>
                    <el-col span="8">
                        <div style="font-size: 58px;margin-top: 30px">
                            <span style="color: orange">烘焙</span><span style="color: #666666">坊</span>
                        </div>
                        <p>烘焙行业网络社区平台</p>
                    </el-col>
                </el-row>
            </div>

        </el-footer>
    </el-container>
</div>

登录页面

<div id="app">
    <el-container>
        <el-header height="80px">
            <div class="center">
                <el-row gutter="20">
                    <el-col span="6">
                        <img src="imgs/icon.png" width="196" height="65">
                    </el-col>
                    <el-col span="10">
                        <el-menu mode="horizontal" active-text-color="orange">
                            <el-menu-item index="0">首页</el-menu-item>
                            <el-menu-item index="1">食谱</el-menu-item>
                            <el-menu-item index="2">视频</el-menu-item>
                            <el-menu-item index="3">资讯</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col span="6">
                        <el-input style="margin-top: 15px" placeholder="请输入搜索的关键字">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-col>
                    <el-col span="2">
                        <el-popover
                                    placement="top-start"
                                    title="欢迎来到烘焙坊!"
                                    width="200"
                                    trigger="hover">
                            <div slot="reference">
                                <i class="el-icon-user"
                                   style="font-size: 30px;position: relative;top: 20px"></i>
                            </div>
                            <el-button type="info">注册</el-button>
                            <el-button style="background-color: orange">登录</el-button>
                        </el-popover>
                    </el-col>
                </el-row>
            </div>
        </el-header>
        <el-main style="background-image: url('imgs/loginbg.gif');
                        height: 500px;background-size: cover;
                        background-position: center">
            <el-card style="width: 500px;height: 300px;;margin: 50px auto">
                <el-form label-width="80px" style="width: 400px;margin: 50px auto">
                    <el-form-item label="用户名">
                        <el-input placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input placeholder="请输入用密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-main>
        <el-footer style="height: 280px;background-color: #2f3234;padding:50px 0">
            <div class="center" style="text-align: center;color: #666">
                <el-row>
                    <el-col span="8">
                        <img src="imgs/icon.png">
                        <p>教程灵感就看烘焙坊</p>
                        <p>烘焙行业网络社区平台</p>
                        <p>全国百城上千个职位等你来</p>
                    </el-col>
                    <el-col span="8">
                        <el-row id="footer_center">
                            <el-col span="8">
                                <h3>关于我们</h3>
                                <p>关于我们</p><p>烘焙学院</p>
                                <p>烘焙食谱</p><p>分类信息</p>
                                <p>求职招聘</p><p>社区交流</p>
                            </el-col>
                            <el-col span="8">
                                <h3>支持与服务</h3>
                                <p>联系我们</p><p>广告投放</p>
                                <p>用户协议</p><p>友情链接</p>
                                <p>在线反馈</p><p>我发投稿</p>
                            </el-col>
                            <el-col span="8">
                                <h3>底部导航</h3>
                                <p>Archiver</p><p>手机版</p>
                                <p>小黑屋</p>
                            </el-col>
                        </el-row>

                    </el-col>
                    <el-col span="8">
                        <div style="font-size: 58px;margin-top: 30px">
                            <span style="color: orange">烘焙</span><span style="color: #666666">坊</span>
                        </div>
                        <p>烘焙行业网络社区平台</p>
                    </el-col>
                </el-row>
            </div>

        </el-footer>
    </el-container>
</div>

个人信息页面

<div id="app">
    <el-container>
        <el-header height="80px">
            <div class="center">
                <el-row gutter="20">
                    <el-col span="6">
                        <img src="imgs/icon.png" width="196" height="65">
                    </el-col>
                    <el-col span="10">
                        <el-menu mode="horizontal" active-text-color="orange">
                            <el-menu-item index="0">首页</el-menu-item>
                            <el-menu-item index="1">食谱</el-menu-item>
                            <el-menu-item index="2">视频</el-menu-item>
                            <el-menu-item index="3">资讯</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col span="6">
                        <el-input style="margin-top: 15px" placeholder="请输入搜索的关键字">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-col>
                    <el-col span="2">
                        <el-popover
                                    placement="top-start"
                                    title="欢迎来到烘焙坊!"
                                    width="200"
                                    trigger="hover">
                            <div slot="reference">
                                <i class="el-icon-user"
                                   style="font-size: 30px;position: relative;top: 20px"></i>
                            </div>
                            <el-button type="info">注册</el-button>
                            <el-button style="background-color: orange">登录</el-button>
                        </el-popover>
                    </el-col>
                </el-row>
            </div>
        </el-header>
        <el-main class="center" >
            <el-row gutter="20">
                <el-col span="4">
                    <el-card style="height: 500px">
                        <p style="color: orange">个人信息</p>
                        <p @click="location.href='articleManagement.html'">稿件管理</p>
                    </el-card>
                </el-col>
                <el-col span="20">
                    <el-card style="height: 500px">
                        <el-form label-width="100px">
                            <el-form-item label="头像">
                                <img src="imgs/head.jpg"
                                     style="width: 145px;height: 145px;
                                            border-radius: 10px;float: left">
                                <!--**********上传组件开始***********-->
                                <el-upload style="float: left"
                                           action="https://jsonplaceholder.typicode.com/posts/"
                                           list-type="picture-card"
                                           :on-preview="handlePictureCardPreview"
                                           :on-remove="handleRemove">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                                <!--**********上传组件结束***********-->
                            </el-form-item>
                            <el-form-item label="昵称">
                                <el-input placeholder="请输入昵称"
                                          style="width: 200px"></el-input>
                            </el-form-item>
                            <el-form-item label="用户名">
                                <el-input disabled value="tom"
                                          style="width: 200px"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary">保存信息</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
        <el-footer style="height: 280px;background-color: #2f3234;padding:50px 0">
            <div class="center" style="text-align: center;color: #666">
                <el-row>
                    <el-col span="8">
                        <img src="imgs/icon.png">
                        <p>教程灵感就看烘焙坊</p>
                        <p>烘焙行业网络社区平台</p>
                        <p>全国百城上千个职位等你来</p>
                    </el-col>
                    <el-col span="8">
                        <el-row id="footer_center">
                            <el-col span="8">
                                <h3>关于我们</h3>
                                <p>关于我们</p><p>烘焙学院</p>
                                <p>烘焙食谱</p><p>分类信息</p>
                                <p>求职招聘</p><p>社区交流</p>
                            </el-col>
                            <el-col span="8">
                                <h3>支持与服务</h3>
                                <p>联系我们</p><p>广告投放</p>
                                <p>用户协议</p><p>友情链接</p>
                                <p>在线反馈</p><p>我发投稿</p>
                            </el-col>
                            <el-col span="8">
                                <h3>底部导航</h3>
                                <p>Archiver</p><p>手机版</p>
                                <p>小黑屋</p>
                            </el-col>
                        </el-row>

                    </el-col>
                    <el-col span="8">
                        <div style="font-size: 58px;margin-top: 30px">
                            <span style="color: orange">烘焙</span><span style="color: #666666">坊</span>
                        </div>
                        <p>烘焙行业网络社区平台</p>
                    </el-col>
                </el-row>
            </div>

        </el-footer>
    </el-container>
</div>

稿件发布页面

<div id="app" >
    <el-container>
        <el-header height="80px" >
            <div class="center">
                <el-row gutter="20">
                    <el-col span="6">
                        <img src="imgs/icon.png" width="196" height="65">
                    </el-col>
                    <el-col span="10">
                        <el-menu mode="horizontal" active-text-color="orange">
                            <el-menu-item index="0">首页</el-menu-item>
                            <el-menu-item index="1">食谱</el-menu-item>
                            <el-menu-item index="2">视频</el-menu-item>
                            <el-menu-item index="3">资讯</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col span="6">
                        <el-input style="margin-top: 15px" placeholder="请输入搜索的关键字">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-col>
                    <el-col span="2">
                        <el-popover
                                    placement="top-start"
                                    title="欢迎来到烘焙坊!"
                                    width="200"
                                    trigger="hover">
                            <div slot="reference">
                                <i class="el-icon-user"
                                   style="font-size: 30px;position: relative;top: 20px"></i>
                            </div>
                            <el-button type="info">注册</el-button>
                            <el-button style="background-color: orange">登录</el-button>
                        </el-popover>
                    </el-col>
                </el-row>
            </div>
        </el-header>
        <el-main class="center" >
            <el-row gutter="20">
                <el-col span="4">

                    <el-card style="height: 500px">
                        <p @click="location.href='personal.html'">个人信息</p>
                        <p style="color: orange" >稿件管理</p>
                    </el-card>
                </el-col>
                <el-col span="20">
                    <el-card>
                        <!--标签页卡开始-->
                        <el-tabs v-model="type"  type="card" @tab-click="handleClick">
                            <el-tab-pane label="食谱" name="1"></el-tab-pane>
                            <el-tab-pane label="视频" name="2"></el-tab-pane>
                            <el-tab-pane label="资讯" name="3"></el-tab-pane>
                        </el-tabs>
                        <!--标签页卡结束-->
                        <!--发布文章表单开始-->
                        <el-form label-width="100px">
                            <el-form-item label="文章标题">
                                <el-input style="width: 200px"
                                          placeholder="请输入标题"></el-input>
                            </el-form-item>
                            <el-form-item label="文章分类">
                                <el-select>
                                    <el-option label="面包" value="1"></el-option>
                                    <el-option label="家常菜" value="2"></el-option>
                                    <el-option label="小食" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="封面">
                                <el-upload
                                           action="https://jsonplaceholder.typicode.com/posts/"
                                           list-type="picture-card"
                                           :on-preview="handlePictureCardPreview"
                                           :on-remove="handleRemove">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                            </el-form-item>
                            <el-form-item label="文章内容">
                                <div style="border: 1px solid #ccc">
                                    <div id="toolbar-container" style="border-bottom: 1px solid #ccc;"><!-- 工具栏 --></div>
                                    <div id="editor-container" style="height: 300px;"><!-- 编辑器 --></div>
                                </div>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary">发布</el-button>
                            </el-form-item>

                        </el-form>

                        <!--发布文章表单结束-->

                    </el-card>
                </el-col>
            </el-row>
        </el-main>
        <el-footer style="height: 280px;background-color: #2f3234;padding:50px 0">
            <div class="center" style="text-align: center;color: #666">
                <el-row>
                    <el-col span="8">
                        <img src="imgs/icon.png">
                        <p>教程灵感就看烘焙坊</p>
                        <p>烘焙行业网络社区平台</p>
                        <p>全国百城上千个职位等你来</p>
                    </el-col>
                    <el-col span="8">
                        <el-row id="footer_center">
                            <el-col span="8">
                                <h3>关于我们</h3>
                                <p>关于我们</p><p>烘焙学院</p>
                                <p>烘焙食谱</p><p>分类信息</p>
                                <p>求职招聘</p><p>社区交流</p>
                            </el-col>
                            <el-col span="8">
                                <h3>支持与服务</h3>
                                <p>联系我们</p><p>广告投放</p>
                                <p>用户协议</p><p>友情链接</p>
                                <p>在线反馈</p><p>我发投稿</p>
                            </el-col>
                            <el-col span="8">
                                <h3>底部导航</h3>
                                <p>Archiver</p><p>手机版</p>
                                <p>小黑屋</p>
                            </el-col>
                        </el-row>

                    </el-col>
                    <el-col span="8">
                        <div style="font-size: 58px;margin-top: 30px">
                            <span style="color: orange">烘焙</span><span style="color: #666666">坊</span>
                        </div>
                        <p>烘焙行业网络社区平台</p>
                    </el-col>
                </el-row>
            </div>

        </el-footer>
    </el-container>
</div>