Cpp五条

这个屌丝很懒，什么也没留下！

热门标签

基于Spring Boot+Vue的博客系统 03——设计主界面_b-col b-row

作者：Cpp五条 | 2024-03-28 05:14:05

踩

b-col b-row

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

0. 图标

图标使用阿里巴巴矢量图标，官方网站：https://www.iconfont.cn/home/index
使用方法：
- 找到想要的图标，点击购物车，添加入库。
- 选择完成后点击右上方购物车。
- 添加至项目，自定义项目名称，保存。
- 复制链接，在index.html里面引入。
- 然后点击复制代码，即可使用<i class="代码"></i>标签引入项目。

1. 创建组件

在/src.components/common/下新建四个文件

carousel.vue：展示轮播图
userInfo.vue：展示用户信息
articles.vue：分页展示文章
articlesKinds：展示文章分类
tags.vue：展示所有标签

2. 实现轮播图组件

轮播图用到下方组件：
轮播图官方文档位置
在/static/images/下新建carousel文件夹，存放四张轮播图片，编辑carousel.vue文件

<template>
  <div>
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="4000"
      controls
      indicators
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <!-- caption属性可以设置标题， text属性可以设置文字 -->
      <b-carousel-slide img-src="/static/images/carousel/first.png" caption="标题" text="文本文本文本"></b-carousel-slide>
      <b-carousel-slide img-src="/static/images/carousel/second.png">
        <h1>标题</h1>
        <p>文本文本文本</p>
      </b-carousel-slide>
      <b-carousel-slide img-src="/static/images/carousel/third.png"></b-carousel-slide>
      <b-carousel-slide img-src="/static/images/carousel/fourth.png"></b-carousel-slide>
    </b-carousel>
  </div>
</template>

<script>
export default {
  name: "carousel",
  data() {
    return {
      slide: 0,
      sliding: null
    };
  },
  methods: {
    onSlideStart(slide) {
      this.sliding = true;
    },
    onSlideEnd(slide) {
      this.sliding = false;
    }
  }
};
</script>
<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

在图片上有两种展示文字的方法：

使用b-carousel-slide的caption属性和text属性
在b-carousel-slide内直接嵌入<h1>标签和<p>标签

组件单独效果：
轮播图效果

3. 实现文章列表

需要使用到card组件和Pagination Nav组件（分页）：
card组件
Pagination Nav插件
代码实现：

<template>
  <b-card border-variant="light" header="我的博文" align="left">
    <b-container fluid>
      <b-row>
        <b-col cols="12" sm="12" md="12" lg="12" xl="12">
          <b-card class="card">
            <router-link to>
              <b-card-title>怎样学习SpringBoot呀？</b-card-title>
            </router-link>
            <b-card-text class="small text-muted">
              <b-badge variant="info">原创</b-badge>&nbsp;&nbsp;作者：芊雨&nbsp;&nbsp;分类：学习经验
            </b-card-text>
            <b-card-text>首先找到SpringBoot的官方文档，了解大概，再找一个练手的小项目跟着敲，不断思考在项目中怎样使用。</b-card-text>
            <b-card-text class="small text-muted">
              <i class="icon iconfont icon-riqi"></i>2019-10-9
              <i class="icon iconfont icon-yuedu"></i>10
              <i class="icon iconfont icon-iconfontpinglun"></i>10
              <div class="tag-box">
                <b-link class="tag" variant="info">
                  <i class="icon iconfont icon-tag"></i>java
                  <i class="icon iconfont icon-tag"></i>spring
                </b-link>
              </div>
            </b-card-text>
          </b-card>
        </b-col>
        <b-col cols="12" sm="12" md="12" lg="12" xl="12">
          <!-- 分页 -->
          <div class="overflow-auto pagination">
            <b-pagination-nav :link-gen="linkGen" :number-of-pages="10" use-router value="1"></b-pagination-nav>
          </div>
        </b-col>
      </b-row>
    </b-container>
  </b-card>
</template>

<script>
export default {
  name: "articles",
  methods: {
    linkGen(pageNum) {
      return pageNum === 1 ? "?" : `?page=${pageNum}`;
    }
  }
};
</script>

<style scoped>
.card {
  margin-top: 10px;
}

.tag-box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  float: right;
}
.tag {
  text-decoration: none;
  margin-right: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.icon {
  margin: 0 4px 0 8px;
}
.pagination {
  margin-top: 12px;
  float: right;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

上面用到了BootstrapVue的栅格系统，b-container的属性fluid可以使container宽度最大化
详情可以参考：https://bootstrap-vue.js.org/docs/components/layout
分页组件b-pagination-nav的number-of-pages属性表示总页数、use-router表示开启路由跳转 value表示当前页数

组件效果：
文章列表效果展示

4. 实现用户信息界面

需要用到的组件：Media、Popover、Tooltips
代码实现：

<template>
  <div class="media">
    <b-card>
      <b-media>
        <b-img src="/static/images/head.png" slot="aside" width="64" height="64" alt="placeholder"></b-img>
        <h5 align="left">清沐</h5>
        <p align="left">愿你在山顶时有清风拂面，在谷底时依旧不孤不寒。</p>
      </b-media>
      <hr />
      <b-container class="text-center">
        <b-row>
          <b-col>
            原创
            <br />20
          </b-col>
          <b-col>
            标签
            <br />20
          </b-col>
          <b-col>
            评论
            <br />20
          </b-col>
          <b-col>
            浏览
            <br />20
          </b-col>
        </b-row>
      </b-container>
      <hr />
      <!-- 分割线下面是几个链接，分别连接到github、码云、QQ和微信 -->
      <div class="link-icon-box">
        <b-link
          v-b-popover.hover.top="'GitHub'"
          href="https://github.com/qianyucc"
          target="_blank"
          class="icon iconfont icon-github link-icon"
        ></b-link>
        <b-link
          v-b-popover.hover.top="'码云'"
          href="https://gitee.com/qianyucc/"
          target="_blank"
          class="icon iconfont icon-code link-icon"
        ></b-link>
        <b-link v-b-popover.hover.top="'QQ'" id="add-my-qq" class="icon iconfont icon-qq link-icon"></b-link>
        <b-popover target="add-my-qq" title="扫一扫，加我QQ" triggers="focus" placement="bottom">
          <b-img width="150" thumbnail rounded src="/static/images/findme/add_my_qq.jpg"></b-img>
        </b-popover>
        <b-link
          id="add-my-wechat"
          v-b-popover.hover.top="'微信'"
          class="icon iconfont icon-weixin link-icon"
        ></b-link>
        <b-popover target="add-my-wechat" title="扫一扫，加我微信" triggers="focus" placement="bottom">
          <b-img width="150" thumbnail rounded src="/static/images/findme/add_my_wechat.jpg"></b-img>
        </b-popover>
      </div>
    </b-card>
  </div>
</template>

<script>
export default {
  name: "userInfo"
};
</script>

<style scoped>
.text-center{
  text-align: center;
}
.link-icon {
  /*消除下划线*/
  text-decoration: none;
}
.link-icon-box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

v-b-popover.hover.top="‘GitHub’"属性表示鼠标放在上面的时候会出现GitHub字样
使用popover组件的时候，target属性和上面id绑定，点击之后弹出下面的提示框，placement属性可以设置点击后弹框的位置

组件效果：
用户信息组件效果

5. 实现全部标签组件

代码实现：

<template>
  <b-card border-variant="light" header="全部标签" align="left" class="main">
    <b-link class="link-icon">
      <i class="icon iconfont icon-tag"></i>java
    </b-link>
    <b-link class="link-icon">
      <i class="icon iconfont icon-tag"></i>java
    </b-link>
    <b-link class="link-icon">
      <i class="icon iconfont icon-tag"></i>java
    </b-link>
    <b-link class="link-icon">
      <i class="icon iconfont icon-tag"></i>java
    </b-link>
    <b-link class="link-icon">
      <i class="icon iconfont icon-tag"></i>java
    </b-link>
    <b-link class="link-icon">
      <i class="icon iconfont icon-tag"></i>java
    </b-link>
  </b-card>
</template>

<script>
export default {
  name: "tags"
};
</script>
<style scoped>
.main {
  margin-top: 10px;
}

.link-icon {
  text-decoration: none;
  display: inline-block;
  margin: 4px 10px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

组件效果：

组件效果

6. 实现文章分类组件

代码实现：

<template>
  <b-card border-variant="light" header="文章分类" align="left" class="main">
    <b-container fluid>
      <b-card-text>
        <b-link>学习经验</b-link>
        <b-badge variant="light" class="float-right">20篇</b-badge>
      </b-card-text>
      <b-card-text>
        <b-link>学习经验</b-link>
        <b-badge variant="light" class="float-right">20篇</b-badge>
      </b-card-text>
      <b-card-text>
        <b-link>学习经验</b-link>
        <b-badge variant="light" class="float-right">20篇</b-badge>
      </b-card-text>
      <b-card-text>
        <b-link>学习经验</b-link>
        <b-badge variant="light" class="float-right">20篇</b-badge>
      </b-card-text>
    </b-container>
  </b-card>
</template>

<script>
export default {
  name: "articleKinds"
};
</script>

<style scoped>
.main {
  margin-top: 10px;
}
.float-right {
  float: right;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

组件效果：

7. 主界面布局

将所有组件导入mainPage.vue中，使用栅格系统进行布局：

<template>
  <!-- 网格系统 -->
  <b-container class="main-container">
    <b-row>
      <b-col cols="12" sm="12" md="12" lg="8" xl="8" class="left-container">
        <!-- 轮播图 -->
        <carousel class="carousel"></carousel>
        <!-- 全部博文 -->
        <articles></articles>
      </b-col>
      <b-col cols="12" sm="12" md="12" lg="4" xl="4" class="right-container">
        <!-- 利用media组件展示个人信息模块 -->
        <b-col cols="12" sm="12" md="12" lg="12" xl="12" class="pad0">
          <user-info></user-info>
        </b-col>
        <!-- 文章分类 -->
        <b-col cols="12" sm="12" md="12" lg="12" xl="12" class="pad0">
          <article-kinds></article-kinds>
        </b-col>
        <!-- 全部标签 -->
        <b-col cols="12" sm="12" md="12" lg="12" xl="12" class="pad0">
          <tags></tags>
        </b-col>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import carousel from "@/components/common/carousel";
import articles from "@/components/common/articles";
import userInfo from "@/components/common/userInfo";
import tags from "@/components/common/tags";
import articleKinds from "@/components/common/articleKinds";

export default {
  name: "mainPage",
  components: {
    carousel,
    articles,
    userInfo,
    tags,
    articleKinds
  }
};
</script>

<style scoped>
.carousel {
  margin-bottom: 10px;
}
.main-container {
  border-radius: 10px;
}
.left-container,
.right-container {
  padding-top: 10px;
}
.pad0 {
  padding: 0;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

BootstrapVue的栅格布局，可参考下表

栅格布局
PC端效果：
总体效果
移动端效果：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/328581