个人网站性能优化经历插件的拓展

Posted 2021-11-23 exodus3

自己搭建了一个基于SpringBoot+Spring Security+MyBatis+mysql+Redis+Thymeleaf的博客网站
上线个人云服务器后，发现服务器访问慢。个人服务器是1核2G的，1M宽带，虽然服务器是低配的，但是可以通过优化代码，中间件等手段，来提升性能。

这篇主要讲插件的拓展

自己的网站加上了live2D，天气预报等插件，让自己的网站更加丰富，下面会依次讲讲这些插件是怎么实现的

一、live2D

live2D也就是看板娘，是一种嵌入到网页的人物动画，有很多不错的动画效果，效果图如下

实现的代码也很简单，在html页面那里添加一段代码即可

<!-- live2d效果 -->
<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-shizuku@1.0.5/assets/shizuku.model.json",
            "scale": 1
        },
        "display": {
            "position": "left",
            "width": 150,
            "height": 300,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
</script>

<!--模型：
https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json
https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
-->

之前博主把每个页面都添加了看板娘，发现网站加载起来更加慢了，所以，也不要加太多的看板娘了，我只在几个页面上添加了看板娘。

二、天气预报

天气预报的功能也很简单，获取当前的位置信息，今天的天气情况以及未来几天的情况

在HTML页面添加下面的代码即可实现天气预报的功能。

<!-- 天气预报 -->
<div class="weather">
	<div style="background-color: white;width: 250px;height: 440px">
		<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=82" width="250"
				height="440" frameborder="0" marginwidth="0" marginheight="0"
				scrolling="no"></iframe>
	</div>
</div>

直接引用天气预报的插件即可。

三、万年历

之前遇到过一个万年历插件，是免费的，现在停了（停用原因是开发者的接口，由于请求量巨大，所以不得不停了），改成收费了，现在不公布接口，免得被说博主是来打广告的==||，有兴趣的小伙伴可以去了解其他免费的万年历插件。

四、新冠状病毒肺炎实时数据

这两年全球讲的最多的新闻莫过于新冠状病毒了，全球各地都爆发了这种病毒，这里也有个插件，是阿里健康提供的"新冠状病毒肺炎实时新闻数据接口API"，可以看到肺炎的实时数据。
接口：https://cdn.mdeer.com/data/yqstaticdata.js

调接口的话，可以用RestTemplate的方式，也可以用http的方式.

RestTemplate方式（RestTemplate要先写配置类）

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.client.RestTemplate;

@Configuration
public class ApplicationContextConfig {

    @Bean
    public RestTemplate getRestTemplate(){
        return new RestTemplate();
    }

}

@Resource 
private RestTemplate restTemplate;

public String payment (){
  String result = restTemplate.getForObject(url,String.class);
  return result;
}

http方式

//创建请求
Http http = Http.create(url).get().timeout(3).send();

//返回请求结果
String result = http.getResponse().getResult();

感兴趣的朋友可以把这个接口加在自己的网站上。