SpringBoot个人博客项目搭建—前端页面功能介绍（一）

最新推荐文章于 2024-08-06 12:05:35 发布

〆清峰ㄟ

最新推荐文章于 2024-08-06 12:05:35 发布

阅读量6.6k

点赞数 9

分类专栏：项目实战文章标签： html javascript java

本文链接：https://blog.csdn.net/weixin_45019350/article/details/108884202

版权

项目实战专栏收录该内容

14 篇文章 13 订阅

订阅专栏

SpringBoot个人博客—前端页面功能介绍（一）

项目首页地址：https://blog.csdn.net/weixin_45019350/article/details/108869025

在这里插入图片描述

一、前端框架Semantic UI

Semintic UI官网：https://semantic-ui.com/

前端页面主要采用了Semantic前端开发框架对页面骨架进行快速搭建。

Semantic作为一款开发框架，能够帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局更加快速设计出漂亮的网站。具体使用细节可以访问官网查看官方文档。

Semintic UI提供了一系列第三方组件和模板供我们使用，使我们可以更加方便、快捷的搭建出前端模板。

二、前端模板引擎themleaf

themleaf官网：https://www.thymeleaf.org/

Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎。

Thymeleaf的主要目标是为开发工作流程带来优雅的自然模板-HTML可以在浏览器中正确显示，也可以作为静态原型工作，从而可以在开发团队中加强协作。
Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
Themleaf模板引擎具有开箱即用的特性，是SpringBoot官方推荐的前端模板引擎。它可以完全替代JSP，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。

使用介绍：《Themleaf模板基础语法使用介绍》

三、第三方插件引用实现雪花效果

同时在前端页面我引入了雪花动态效果可以很直观的看到细雪纷飞的景色，使前端页面极具观赏性。代码直接引入到前端页面中即可。

1、唯美浪漫雪花飘落jquery特效代码。演示页面：http://www.lmlblog.com/winter/。代码添加如下：

<script src="http://www.lmlblog.com/winter/templets/xq/js/snowy.js"></script>
<style type="text/css">
.snow-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;}</style>
<div class="snow-container"></div>

2、冬季HTML5 3D雪花斜着飘落动画场景特效

演示页面：
http://www.lmlblog.com/blog/12/
http://www.lmlblog.com/blog/xue2/
代码添加如下：

<script src="http://www.lmlblog.com/winter/templets/xq/js/snowy.js"></script>
<script src="http://www.lmlblog.com/blog/12/js/Snow.js"></script>
<style type="text/css">
.snow-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;}
</style>
<div class="snow-container"></div>

3、html5 canvas制作3D逼真冬天雪景雪花飘场景
演示页面：
http://www.lmlblog.com/blog/14/
http://www.lmlblog.com/blog/xue1/
代码添加如下：

<script src="http://www.lmlblog.com/winter/templets/xq/js/snowy.js"></script>
<script src="http://www.lmlblog.com/blog/14/js/Snow.js"></script>
<style type="text/css">
.snow-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;}
</style>
<div class="snow-container"></div>

以上是使用javascript实现雪花飘落的效果代码，可以根据个人喜爱修改，更多好看网页雪花特效代码欢迎分享。

四、第三方插件引用实现Live2D 看板娘

在左下角我们可以发现一个动漫式的人物，也是引入的一个第三方插件，叫Live2D看板娘，是一个比较经典的博客互动模型，支持换装，换人物，信息互动等功能。也可自定义功能。集成也非常简单网上一找一大堆。而我采用的是一个最简便的方式，直接通过js代码直接引用，无需写更多的代码即可在我们的页面上出现一个活波可爱的看板娘了。当然它的弊端就是我们不可以对他进行自定义人物布局，换装等功能，只能使用已经提供好的一些功能。

下面我提供三种适合小白的引用方式：

第一种：功能比较简单只有一个人物，可自定义宽高，位置等。
如何安装看板娘：只需在网页中引入这几行代码即可

在这里插入图片描述

<script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>
<script type="text/javascript">
    L2Dwidget.init({

        "display": {
            "position": "right", // 定位位置（"left"/"right"/"top"/"bottom"）
            "width": 105, // 宽度
            "height": 170, // 高度
            "hOffset": 0,
            "vOffset": 0
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 1, // 透明度
            "opacityOnHover": 0.8
        },

        "dialog":{
            enable:true,
            script:{
                'tap body':'2',
                'tap face':'3',
            }
        }

    });

第二种：功能多一点，可以换装和换人物，出现在页面的左下角不可调整位置。。

在这里插入图片描述

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

第三种
以下代码粘贴后，你可以在网页上看见一个大大的初音未来，如果你还行更换为其它模型，则需要将上面的代码稍微改动一下，将init函数中的jsonPath中的地址更换为你喜欢的模型名称即可

其代码含义为：jsonPath:“https://unpkg.com/2D模型名称@1.0.5/assets/模型名称.model.json”

例如：初音未来的2D模型名称为live2d-widget-model-miku，则将以上代码的“2D模型名称”更换为“live2d-widget-model-miku”，将“模型名称”更换为“miku”即可。
在这里插入图片描述

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
	L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json",
            "scale": 1
        },
        "display": {
            "position": "left",
            "width": 150,
            "height": 300,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.3,
            "opacityOnHover": 0.2
        }
    });
</script>

部分2D模型名称
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
注:部分动画效果可以到https://huaji8.top/post/live2d-plugin-2.0/查看

五、第三方插件引用实现音乐盒

史上最精简的音乐播放器！300多行js！你想要的功能zplayer都有！

在这里插入图片描述

想要了解的可以访问该博主的github：https://gitee.com/mnb/zplayer

1、down下来本项目后，在页面内引入 css/zplayer.min.css和js/zplayer.min.js
2、使用方法以及参数说明
（autoplay，showlrc，fixed，listFolded，listMaxHeight五个参数可以不传，则走默认值,具体见以下代码示例）。

<div id="player"></div>
<script>
    var zp = new zplayer({
        element: document.getElementById("player"),
        autoPlay: false,/*是否开启自动播放,默认false*/
        lrcStart: true,/*是否开启歌词功能 ，默认false（为true时musics集合中需要传入lrc字段。）*/
        showLrc: true,/*开启歌词功能后是否立即展示歌词内容 ，默认false*/
        fixed: true, /*是否固定在底部，默认false*/
        listFolded: true, /*列表默认折叠，默认false*/
        listMaxHeight: 300, /*列表最大高度，默认240*/
        musics: [{
            title: "可能否",
            author: "木小雅",
            url: "http://music.163.com/song/media/outer/url?id=569214126.mp3",
            pic: "http://p1.music.126.net/SJYnDay7wgewU3O7tPfmOQ==/109951163322541581.jpg?param=300x300",
            lrc:"[00:00] 作曲 : 木小雅\n[00:01] 作词 : 木小雅\n[00:17]春天的风 能否吹来夏天的雨\n[00:25]秋天的月 能否照亮冬天的雪\n[00:34]夜空的星 能否落向晨曦的海\n[00:42]山间的泉 能否遇上南飞的雁\n[00:49]能否早一点 看透命运的伏线\n[00:53]能否不轻易就深陷\n[00:57]能否慢一点 挥霍有限的时间\n[01:01]能否许我一个永远\n[01:07]可能我撞了南墙才会回头吧\n[01:11]可能我见了黄河才会死心吧\n[01:15]可能我偏要一条路走到黑吧\n[01:20]可能我还没遇见 那个他吧\n[01:26]\n[01:44]断掉的弦 能否扯破自缚的茧\n[01:52]熄灭的火 能否烧光残留的念\n[02:00]梦中的云 能否化作熟悉的脸\n[02:08]前世的劫 能否换来今生的缘\n[02:16]能否早一点 相信年少的誓言\n[02:20]能否不轻易说再见\n[02:24]能否慢一点 感受岁月的缱绻\n[02:28]能否许我一次成全\n[02:34]可能我撞了南墙才会回头吧\n[02:38]可能我见了黄河才会死心吧\n[02:42]可能我偏要一条路走到黑吧\n[02:46]可能我还没遇见 那个他吧\n[02:53]\n[02:54]可能我撞了南墙才会回头吧\n[02:58]可能我见了黄河才会死心吧\n[03:02]可能我偏要一条路走到黑吧\n[03:06]可能我还没遇见 那个他吧\n[03:14]可能我还没忘掉 哪个他吧\n[03:20]\n[03:22]制作人：王佳依\n[03:24]监制：姚政\n[03:25]编曲：闫津\n[03:26]吉他：吴金迪\n[03:28]录音师：陈程\n[03:31]缩混：陈程\n"
        },{
            title: "讲真的",
            author: "曾惜",
            url: "http://music.163.com/song/media/outer/url?id=30987293.mp3",
            pic: "http://p1.music.126.net/cd9tDyVMq7zzYFbkr0gZcw==/2885118513459477.jpg?param=300x300",
            lrc:"[by:却连一句我爱你都不能说出口]\n[ti:讲真的]\n[ar:曾惜]\n[al:不要你为难]\n[by:冰城离殇]\n[00:00] 作曲 : 何诗蒙\n[00:01] 作词 : 黄然\n[00:18]今夜特别漫长\n[00:21]有个号码一直被存放\n[00:25]源自某种倔强\n[00:30]不舍删去又不敢想\n[00:33]明明对你念念不忘\n[00:37]思前想后愈发紧张\n[00:41]无法深藏\n[00:43]爱没爱过想听你讲\n[00:48]讲真的\n[00:51]会不会是我 被鬼迷心窍了\n[00:54]敷衍了太多 我怎么不难过\n[00:58]要你亲口说 别只剩沉默\n[01:03]或许你早就回答了我\n[01:06]讲真的\n[01:08]想得不可得 是最难割舍的\n[01:11]各自好好过 也好过一直拖\n[01:15]自作多情了 好吧我认了\n[01:19]至少能换来释怀洒脱\n[01:23]没丢失掉自我\n[01:42]今夜特别漫长\n[01:44]有个号码一直被存放\n[01:49]源自某种倔强\n[01:53]不舍删去又不敢想\n[01:57]明明对你念念不忘\n[02:01]思前想后愈发紧张\n[02:05]无法深藏\n[02:08]爱没爱过想听你讲\n[02:13]讲真的\n[02:15]会不会是我 被鬼迷心窍了\n[02:19]敷衍了太多 我怎么不难过\n[02:23]要你亲口说 别只剩沉默\n[02:27]或许你早就回答了我\n[02:30]讲真的\n[02:32]想得不可得 是最难割舍的\n[02:35]各自好好过 也好过一直拖\n[02:40]自作多情了 好吧我认了\n[02:44]至少能换来释怀洒脱\n[02:47]没丢失掉自我\n[03:04]讲真的\n[03:05]会不会是我 被鬼迷心窍了\n[03:09]敷衍了太多 我怎么不难过\n[03:14]要你亲口说 别只剩沉默\n[03:18]或许你早就回答了我\n[03:21]讲真的\n[03:22]想得不可得 是最难割舍的\n[03:26]各自好好过 也好过一直拖\n[03:30]自作多情了 好吧我认了\n[03:35]至少能换来释怀洒脱\n[03:38]没丢失掉自我\n"
        }]
    });
    zp.init();
</script>