基于vue + spring boot + datagear 搭建NBA赛事数据分析网站全程记录

m_Sorry

已于 2024-03-27 09:29:55 修改

阅读量1.2k

点赞数 35

文章标签： spring boot 数据分析个人开发

于 2024-03-21 17:09:35 首次发布

本文链接：https://blog.csdn.net/m_Sorry/article/details/136883958

版权

网站搭建全程记录

先上链接看效果： [蓝大地-NBA赛事看板分析网站](http://nba.xiaorui.icu/)
讲在前面
开始

先上链接看效果：蓝大地-NBA赛事看板分析网站

讲在前面

整个网站搭建过程没有太多技术难点，本文存在的意义，其一是为了自身记录，其二是让想建站但不知道所需资源的同学有大致了解；
网站从无到有经历了差不多一个月，域名IPC备案时间大概15天，如果要建站可以提前申请备案；
最后，想法很重要，如果你有想法就去做，不管能否成功，哪怕是对以后的积累。

开始

花费金额记录

ITEM	金额(元)
服务器(2核/2G/40G/3M)	99
域名(xxx.icu)	1
总计	100

后端框架说明

建站为什么需要后端？
我想搭建的网站虽然看着像个人博客，但其实是有数据交互的，我会展示每天的比赛给网友观看，并不是一个纯前端的东西。
后端使用到了哪些中间件？
因为服务器资源问题，我只安装了nginx 和 mysql，搭配jre环境启动了spring boot项目。后端内存占用保持在60%左右。
如何避免接口被攻击？
针对这个问题可以通过后端渲染的方式解决，但我没有用到，我目前是通过设置拦截器的方式去做限制的。首先限制全部接口的访问，如果有需要向前端暴漏的接口，可以通过Token去调用。不同的接口去分配不同的静态Token，针对部分接口使用动态Token并设置有效期，在通过验证之后才可以访问成功。

前端框架选型

Vben Admin
Fantastic-admin 因为我有使用这个的经验，所以本次还是用的这个
我本身不是专业的前端开发，只是平常会自己开发一些小软件，所以如果有更好用的可以给我推荐下。

数据看板Datagear使用

Datagear

服务器购买

我买的是Aliyun的服务器，新用户99元一年，续费也是99，感觉还挺划算的。

服务器环境搭建

购买服务器后要搭建软件运行环境，包括JDK、Mysql、Nginx，这里不赘述。

域名购买

域名解析配置

aliyun 云解析DNS

域名备案

阿里云平台申请
直接在阿里云平台ICP备案中申请。

百度统计接入

百度统计是什么？
百度推出的一款免费专业网站流量分析工具。相当于是站长工具。注册后会有一段代码需要添加到html页面中，如下；

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?1680a53c5ea55b9b57f1f04aeb2d4472";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>

评论插件

畅言云评

集成到Vue中：

<script setup lang="ts">
import $ from 'jquery';
const windows = window as any
windows.changyan = undefined
windows.cyan = undefined
$.getScript('https://changyan.sohu.com/upload/changyan.js', () => {
  windows.changyan.api.config({ appid: 'xxx', conf: 'xxxx'})
})
</script>
<template>
  <div>
     <div id="SOHUCS"/>
  </div>
</template>

SEO优化

持续新增

复制到剪切板-`Clipboard`

注意： 使用Clipboard去实现复制到剪切板功能是目前比较流行的解决方式，其他原生的方式可能在新版本浏览器中不适配，但Clipboard存在限制。http协议是不可用的。
vue中实现代码见下：

<script setup lang="ts">
const { copy, copied, isSupported } = useClipboard()
//监听
watch(copied, (val) => {
  if (val) {
    Message.success('已复制到剪切板，您可分享给好友！', {
      zIndex: 99999,
    })
  }
})
//实际复制到剪切板操作
function handleCopy() {
  copy(openUrl.value)
}
</script>

网站水印添加

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="res/style.css">
    <title></title>
</head>
<body>
<script type="text/javascript">
    $(document).ready(function () {
        //-------------添加水印start-------------
        var txt = "http://nba.xiaorui.icu/";
        watermark(txt);
        //监听窗口变动
        window.onresize = function () {
            watermark(txt);
        }
        function watermark(txt) {
            //初始设置水印容器高度
            var water = document.getElementById("water-div");
            water.innerHTML = "";
            //water.style.height = window.screen.availHeight + "px";
            water.style.height = document.documentElement.clientHeight - 100 + "px";
            //水印样式默认设置
            var defaultSettings = {
                watermark_txt: txt,
                watermark_x: 80,//水印起始位置x轴坐标
                watermark_y: 80,//水印起始位置Y轴坐标
                watermark_rows: 2000,//水印行数
                watermark_cols: 2000,//水印列数
                watermark_x_space: 100,//水印x轴间隔
                watermark_y_space: 70,//水印y轴间隔
                watermark_color: '#aaaaaa',//水印字体颜色
                watermark_alpha: 0.2,//水印透明度
                watermark_fontsize: '25px',//水印字体大小
                watermark_font: '微软雅黑',//水印字体
                watermark_width: 210,//水印宽度
                watermark_height: 80,//水印长度
                watermark_angle: 20//水印倾斜度数
            };
            //获取页面最大宽度
            var page_width = Math.max(water.scrollWidth, water.clientWidth);
            //获取页面最大高度
            var page_height = Math.max(water.scrollHeight, water.clientHeight);
            // console.log( page_height)
            //水印数量自适应元素区域尺寸
            defaultSettings.watermark_cols = Math.ceil(page_width / (defaultSettings.watermark_x_space + defaultSettings.watermark_width)) - 1;
            defaultSettings.watermark_rows = Math.ceil(page_height / (defaultSettings.watermark_y_space + defaultSettings.watermark_height)) - 1;
            var x;
            var y;
            for (var i = 0; i < defaultSettings.watermark_rows; i++) {
                y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
                for (var j = 0; j < defaultSettings.watermark_cols; j++) {
                    x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
                    var mask_div = document.createElement('div');
                    //mask_div.id = 'mask_div' + i + j;
                    mask_div.className = 'mask_div';
                    //mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
                    mask_div.innerHTML = (defaultSettings.watermark_txt);
                    //设置水印div倾斜显示
                    mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.visibility = "";
                    mask_div.style.position = "absolute";
                    mask_div.style.left = x + 'px';
                    mask_div.style.top = y + 'px';
                    mask_div.style.overflow = "hidden";
                    mask_div.style.zIndex = "9999";
                    mask_div.style.pointerEvents = 'none';//pointer-events:none 让水印不遮挡页面的点击事件
                    //mask_div.style.border="solid #eee 1px";//兼容IE9以下的透明度设置  mask_div.style.filter="alpha(opacity=50)";
                    mask_div.style.opacity = defaultSettings.watermark_alpha;
                    mask_div.style.fontSize = defaultSettings.watermark_fontsize;
                    mask_div.style.fontFamily = defaultSettings.watermark_font;
                    mask_div.style.color = defaultSettings.watermark_color;
                    mask_div.style.textAlign = "center";
                    mask_div.style.width = defaultSettings.watermark_width + 'px';
                    mask_div.style.height = defaultSettings.watermark_height + 'px';
                    mask_div.style.display = "block";
                    water.appendChild(mask_div);
                }
            }
        }
        //-------------添加水印end-------------
    });
</script>
<div id="water-div"></div>
</body>
</html>