欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-27 09:19:28
...

关于我界面

关于我界面这里暂且只在前端实现,不涉及后台交互。主要展示个人信息以及自我介绍。
这里新建一个/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>

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

一些细节

自定义banner
resources目录下新建一个banner.txt文件即可
基于Spring Boot+Vue的博客系统 21——关于我界面的设计和一些细节的优化

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

再次启动项目,可见banner已经被修改
基于Spring Boot+Vue的博客系统 21——关于我界面的设计和一些细节的优化

结语

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

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