基于Spring Boot+Vue的博客系统 21——关于我界面的设计和一些细节的优化

深碍√TFBOYSˉ_ 2023-06-08 10:46 6阅读 0赞

> 废弃说明：  
> 这个专栏的文章本意是记录笔者第一次搭建博客的过程，文章里里有很多地方的写法都不太恰当，现在已经废弃，关于SpringBoot + Vue 博客系列，笔者重新写了这个系列的文章，不敢说写的好，但是至少思路更加清晰，还在看SpringBoot + Vue 博客系列文章的朋友可以移步：https://blog.csdn.net/li3455277925/category\_10341110.html，文章中有错误的地方或者大家有什么意见或建议都可以评论或者私信交流。

#### 关于我界面 ####

关于我界面这里暂且只在前端实现，不涉及后台交互。主要展示个人信息以及自我介绍。  
这里新建一个`/src/components/page/aboutMe.vue`组件，注册路由，修改导航栏，使其跳转。

<template>
      <b-container class="main">
        <b-row>
          <b-col cols="12" sm="12" md="12" lg="12" xl="12">
            <b-media>
              <template v-slot:aside>
                <b-img blank blank-color="#ccc" width="64" alt="placeholder"></b-img>
              </template>
              <h5 class="mt-0">芊雨</h5>
              <p>大三狗一枚，对java后端开发具有浓厚的兴趣。</p>
            </b-media>
          </b-col>
          <b-col cols="12" sm="12" md="12" lg="12" xl="12">
            <h5>内心独白</h5>
            <p>
              内容
            </p>
          </b-col>
        </b-row>
      </b-container>
    </template>
    
    <script> export default { name: "aboutMe" }; </script>
    
    <style scoped> .main { margin-top: 10px; padding: 20px; min-height: 100%; background-color: #fff; background-image: url("/static/images/about-me.jpg"); background-size: cover; background-repeat: no-repeat; } h5 { margin-top: 20px; text-align: left; font-size: 20px; } </style>

效果如下：  
![关于我界面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70]

#### 一些细节 ####

**自定义banner**  
在`resources`目录下新建一个`banner.txt`文件即可  
![修改banner][banner]

> 生成banner的网站  
> http://www.network-science.de/ascii/  
> https://www.degraeve.com/img2txt.php

再次启动项目，可见banner已经被修改  
![banner被修改][banner 1]

#### 结语 ####

到此，博客的前台搭建完毕，后台的搭建还在完成中，未完待续…  
当然，这个博客系统只是实现了一些简单的功能，还有好多地方不够完善，甚至会有很多bug。希望发现问题或者有好的建议的大佬可以私信我或者在文章下面评论。能收到您宝贵的意见小编将感激不尽。  
独立完成这个博客的前台确实让我学到了很多东西，从开始不知道vue是什么东西，到后来慢慢开始熟悉vue使用vue，真的是一个其妙的过程。今后要学习的东西还有很多，希望可以不忘初心，继续前行。生命不息，学习不止！

> 博客前端源码：https://gitee.com/qianyucc/blog-pages  
> 博客后端源码：https://gitee.com/qianyucc/blog

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70]: /images/20230531/85592af146b84f4eb38933dc7b986850.png
[banner]: /images/20230531/b3eaf2f5ebcc4bf3a91c89bedea2a82d.png
[banner 1]: /images/20230531/8220c1e835564c8ea9f249c5ebfa446c.png