从0-1开发一个Vue3前端系统页面-10.博客页面优化及子菜单设计

注意：

本项目已将前端源码同步上传至Gitee，项目已开源，

仅供参考，不涉及商用，不得用其牟利，著作权归本人所有。

本系列后期只会对重要部分代码进行注释，难点会同步更新至专栏

开发遇到的问题_不再会有谎言的博客-CSDN博客https://blog.csdn.net/xiaomeiguisnjs/category_12755452.html?spm=1001.2014.3001.5482相关链接会在文章中标注。

开源链接：

Wandering-children-have-the-stars-as-companions: 从0-1开发一个Vue3前端系统页面 流浪的孩子有星星作伴~ WCHTSAC (gitee.com)https://gitee.com/Chunshuqiuli/wandering-children-have-the-stars-as-companions

---

本节主要内容是对博客页面主要内容的布局设计实现和子菜单功能的初步实现，同时使用组件化开发对代码进行分离，使代码可读性提高。

本节主要通过display的弹性布局进行页面的布局

左侧信息展示区

右下子菜单栏-"最近"模块 

myBlog.vue

<template>
    <div class="box">
        <div class="UserInfo">
            <div class="UserImg">
                <img src="../../assets/image/avator.jpg" alt="">
            </div>
            <div class="userTop">
                <div class="uTop">
                    <div class="userName">
                        {{ User.userName }}
                    </div>
                    <!-- <div class="infoManage">
                            <el-button></el-button>
                        </div> -->
                </div>
                <div class="uMiddle">
                    <span>{{ User.totalVisits }}</span>
                    <p>总访问量&emsp;|&emsp;</p>
                    <span>{{ User.original }}</span>
                    <p>原创&emsp;|&emsp;</p>
                    <span>{{ User.ranking }}</span>
                    <p>排名&emsp;|&emsp;</p>
                    <span>{{ User.fans }}</span>
                    <p>粉丝&emsp;&emsp;</p>
                </div>
                <div class="uBottom">
                    <span>IP属地：{{ User.IP }}</span>
                    <span>加入时间：{{ User.joinTime }}</span>
                    <span>博客简介：{{ User.blogInfo }}</span>
                </div>
            </div>
        </div>
        <div class="InfoMsg">
            <div class="leftMenu">
                <div class="starGrade">
                    <h3>星能等级</h3>
                    <div class="b">
                        <div class="b1">
                            <span>当前等级</span>
                            <span>{{ User.starGrade }}</span>
                        </div>
                        <div class="b1">
                            <span>当前总分</span>
                            <span>{{ User.allScores }}</span>
                        </div>
                        <div class="b1">
                            <span>暂未开放</span>
                            <!-- <span>{{ User.allScores }}</span> -->
                        </div>
                    </div>

                </div>
                <div class="succeed">
                    <h3>个人成就</h3>
                    <div class="achievement">
                        <span>获得&nbsp;<p>{{ User.allLikes }}</p>&nbsp;次点赞</span>
                        <span>内容获得&nbsp;<p>{{ User.allComments }}</p>&nbsp;次评论</span>
                        <span>获得&nbsp;<p>{{ User.allCollection }}</p>&nbsp;次收藏</span>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="header">
                    <el-tabs v-model="contentTabs" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="最近" name="first"></el-tab-pane>
                        <el-tab-pane label="文章" name="second"></el-tab-pane>
                        <el-tab-pane label="资源" name="third"></el-tab-pane>
                        <el-tab-pane label="问答" name="fourth"></el-tab-pane>
                        <el-tab-pane label="帖子" name="fifth"></el-tab-pane>
                        <el-tab-pane label="视频" name="sixth"></el-tab-pane>
                        <el-tab-pane label="关注/订阅/互动" name="seventh"></el-tab-pane>
                        <el-tab-pane label="收藏" name="eighth"></el-tab-pane>
                    </el-tabs>
                    <el-form v-model="queryParams">
                        <el-input type="text" v-model="queryParams.title" placeholder="搜TA的内容" />
                    </el-form>
                </div>
                <div class="body">
                    <RecentVue v-show="contentTabs === 'first'" :items="items" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { ref } from 'vue'
import RecentVue from './recentBlog.vue'
export default {
    components: {
        RecentVue
    },
    data() {
        return {
            items: [
                {
                    avatar: "../../assets/image/avator.jpg",
                    title: "前端Vue监听路由变化， 点击页面内按钮跳转菜单更改导航菜单选中状态",
                    info: "这里产生这个现象的原因和选中状态大致相同，那就是因为页面重新加载后之前的选中的CSS样式并没有清除，那么我们是不是在生命周期-创建的过程中把CSS样式清除就可以了呢？带着这个问题我查阅了一些资料并翻看了ElementPlus中我使用的组件el-menu、el-menu-item的CSS源码，发现想要清除CSS样式并不容易，甚至是无从下手，但是我们换个思路，既然无法在生命周期-创建中清除他的选中样式，那么我们直接全部清除他的选中样式不就解决问题了吗，但是我",
                    tags: 1,
                    publishTime: "2021-01-01",
                    read: 100,
                    like: 100,
                    comment: 100,
                    collection: 100
                },
                {
                    avatar: "../../assets/image/avator.jpg",
                    title: "前端Vue监听路由变化， 点击页面内按钮跳转菜单更改导航菜单选中状态",
                    info: "这里产生这个现象的原因和选中状态大致相同，那就是因为页面重新加载后之前的选中的CSS样式并没有清除，那么我们是不是在生命周期-创建的过程中把CSS样式清除就可以了呢？带着这个问题我查阅了一些资料并翻看了ElementPlus中我使用的组件el-menu、el-menu-item的CSS源码，发现想要清除CSS样式并不容易，甚至是无从下手，但是我们换个思路，既然无法在生命周期-创建中清除他的选中样式，那么我们直接全部清除他的选中样式不就解决问题了吗，但是我",
                    tags: 0,
                    publishTime: "2021-01-01",
                    read: 100,
                    like: 100,
                    comment: 100,
                    collection: 100
                }
            ],
            contentTabs: ref("first"),
            queryParams: {
                title: ""
            },
            User: {
                userName: "法外狂徒张三",
                totalVisits: 18307,
                original: 543,
                ranking: 2343,
                fans: 2983431,
                IP: "北京市",
                joinTime: "2021-01-01",
                blogInfo: "我是一个程序员",
                starGrade: "LV17",
                allScores: 100,
                allLikes: 100,
                allComments: 100,
                allCollection: 100
            }
        }
    },

    methods: {
        handleClick(tab, event) {
            console.log(tab.props.name);
            this.contentTabs = tab.props.name;
        }
    }
}
</script>
<style>
.box .InfoMsg .content .el-tabs__item {
    font-size: 17px !important;
}
</style>
<style lang="scss" scoped src="./myBlog.scss"></style>

recentBlog.vue

<template>
    <ul>
        <li v-for="item in props.items" :key="item.id">
            <div class="ibox">
                <div class="img_left">
                    <img src="../../assets/image/avator.jpg" alt="">
                    <!-- <img :src="item.avatar" alt="" /> -->
                </div>
                <div class="content_right">
                    <div class="title">{{ item.title }}</div>
                    <div class="info">
                        <p>{{ item.info }}</p>
                    </div>
                    <div class="footer">
                        <el-tag :type="item.tags === 1 ? 'danger' : 'success'">
                            {{ item.tags === 1 ? "原创" : "转载" }}
                        </el-tag>
                        <span>发布时间:{{ item.publishTime }}</span>
                        <span>{{ item.read }}&nbsp;阅读</span>
                        <span>{{ item.like }}&nbsp;点赞</span>
                        <span>{{ item.comment }}&nbsp;评论</span>
                        <span>{{ item.collection }}&nbsp;收藏</span>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</template>

<script setup>
import { ref } from 'vue'
import { defineProps } from 'vue'

const props = defineProps({
    items: {
        type: Array,
        default: () => []
    }
})
</script>
<style lang="scss" scoped>
ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
        width: 90%;
        margin: 0 auto;
        height: 150px;
        padding: 10px 0;
        border-bottom: 1px solid darkgray;
        cursor: pointer;

        .ibox {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;

            .img_left {
                width: 180px;
                height: 120px;
                margin: 0 10px 0 20px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .content_right {
                width: calc(100% - 230px);
                height: 120px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;

                .title,
                .info,
                .footer {
                    width: 100%;
                }

                .title {
                    height: 30px;
                    font-size: 22px;
                    font-weight: bold;
                    text-align: left;
                    overflow: hidden;
                }

                .info {
                    height: calc(100% - 65px); //90字后省略
                    overflow: hidden;
                    white-space: normal;

                    p {
                        width: 100%;
                        height: 100%;
                        margin: 10px 0 10px 0;
                        text-indent: 2em;
                    }
                }

                .footer {
                    height: 28px;
                    display: flex;
                    flex-direction: row;
                    align-items: flex-end;

                    span {
                        margin-left: 5px;
                        margin-right: 25px;
                        font-size: 15px;
                    }
                }
            }
        }
    }
}
</style>

myBlog.scss

.box {
    width: 100%;
    height: auto;
    margin-top: 50px;

    .UserInfo {
        width: 100%;
        height: 138px;
        display: flex;
        flex-direction: row;
        border-bottom: 10px solid black;

        .UserImg {
            display: flex;
            width: 118px;
            height: 118px;
            margin: -40px 0 0 48px;
            border-radius: 50%;
            border: 5px solid rgb(240, 240, 242);

            img {
                min-height: 118px;
                min-width: 118px;
                border-radius: 100%;
            }
        }

        .userTop {
            width: 90%;
            height: 140px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            overflow: hidden;

            .uTop {
                width: 100%;
                height: 40%;

                .userName {
                    width: 30%;
                    height: 100%;
                    font-size: 30px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-end;
                    padding-left: 20px;

                }
            }

            .uMiddle,
            .uBottom {
                width: 100%;
                height: 25%;
                display: flex;

                p {
                    margin: 10px 0 10px 10px;
                    font-size: 14px;
                }

                span {
                    width: auto;
                    display: block;
                    padding: 0 0 0 10px;
                    font-size: 25px;
                    // font-weight: bold;
                }

                span:nth-child(1) {
                    margin-left: 12px;
                }
            }

            .uBottom {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: flex-end;
            }

            .uBottom span {
                font-size: 14px;
                margin-right: 100px;
            }
        }
    }

    .InfoMsg {
        width: 100%;
        min-height: calc(100vh - 160px);
        display: flex;
        overflow: hidden;

        .leftMenu {
            min-width: 300px;
            max-height: 648px;

            .starGrade {
                width: 100%;
                height: 150px;
                border-bottom: 10px solid black;

                h3 {
                    margin: 10px;
                    padding-bottom: 10px;
                    text-align: left;
                    border-bottom: 1px solid darkgrey;
                }

                .b {
                    width: 100%;
                    display: flex;

                    .b1 {
                        width: 30%;
                        height: 70px;
                        margin: 0 auto;
                        display: flex;
                        flex-direction: column;

                        span {
                            margin: auto 0;
                            display: block;
                        }

                        :nth-child(2) {
                            font-weight: bold;
                        }
                    }
                }
            }

            .succeed {
                width: 100%;
                height: 180px;
                border-bottom: 10px solid black;

                h3 {
                    margin: 10px;
                    padding-bottom: 10px;
                    text-align: left;
                    border-bottom: 1px solid darkgrey;
                }

                .achievement {
                    width: 100%;
                    display: flex;
                    flex-direction: column;

                    span {
                        display: block;
                        margin: 7px;
                        text-align: left;

                        p {
                            display: inline;
                            font-weight: bold;
                        }
                    }
                }
            }
        }

        .content {
            width: auto;
            height: auto;
            border-left: 10px solid black;

            .header {
                width: 100%;
                display: flex;
                padding: 0 15px 0 25px;

                .demo-tabs {
                    width: 700px;
                    height: 100%;
                    padding-left: 20px;

                    ::v-deep .el-tabs__nav-wrap::after {
                        background-color: white;
                    }
                }

                .el-form {
                    width: 300px;
                    display: flex;
                    justify-content: flex-end;
                    align-items: flex-start;
                    padding: 5px 30px 0 0;

                    .el-input {
                        font-size: 17px;
                        width: 170px;

                    }
                }
            }

            .body {
                width: 100%;
                max-height: 900px;
                overflow-y: scroll;
            }

            .body::-webkit-scrollbar {
                width: 1px;
                height: 1px;
            }

            .body::-webkit-scrollbar-track {
                border-radius: 0;
                box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
                background: black;
            }

            .body::-webkit-scrollbar-thumb {
                border-radius: 10px;
                box-shadow: inset 0 0 5px rgba(27, 190, 208, 0.7);
                background: white;
            }

        }
    }

}

---

若您觉得文章对您有用，烦请您动动发财的小手一键三连。

更多Vue前端系统开发流程可以点击专栏
从0-1开发一个Vue3前端系统页面_不再会有谎言的博客-CSDN博客https://blog.csdn.net/xiaomeiguisnjs/category_12754518.html?spm=1001.2014.3001.5482更多开发中可能会遇到的问题及解决方案可以点击专栏
开发遇到的问题_不再会有谎言的博客-CSDN博客https://blog.csdn.net/xiaomeiguisnjs/category_12755452.html?spm=1001.2014.3001.5482更多其他知识包括但不限于前后端基础，进阶，Java后端算法逻辑，前后端笔试面试题等请点击主页专栏查看
不再会有谎言-CSDN博客https://blog.csdn.net/XiaomeiGuiSnJs?type=blog

---