基于vue + spring boot + datagear 搭建NBA赛事数据分析网站全程记录_datagear环境搭建
·
- 建站为什么需要后端？
我想搭建的网站虽然看着像个人博客，但其实是有数据交互的，我会展示每天的比赛给网友观看，并不是一个纯前端的东西。 - 后端使用到了哪些中间件？
因为服务器资源问题，我只安装了nginx和mysql，搭配jre环境启动了spring boot项目。后端内存占用保持在60%左右。
- 如何避免接口被攻击？
针对这个问题可以通过后端渲染的方式解决，但我没有用到，我目前是通过设置拦截器的方式去做限制的。首先限制全部接口的访问，如果有需要向前端暴漏的接口，可以通过Token去调用。不同的接口去分配不同的静态Token，针对部分接口使用动态Token并设置有效期，在通过验证之后才可以访问成功。
前端框架选型
- Vben Admin
- Fantastic-admin 因为我有使用这个的经验，所以本次还是用的这个
我本身不是专业的前端开发，只是平常会自己开发一些小软件，所以如果有更好用的可以给我推荐下。
数据看板Datagear使用
服务器购买
我买的是Aliyun的服务器，新用户99元一年，续费也是99，感觉还挺划算的。
服务器环境搭建
购买服务器后要搭建软件运行环境，包括JDK、Mysql、Nginx，这里不赘述。
域名购买
域名解析配置
域名备案
直接在阿里云平台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;
**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**
**深知大多数Linux运维工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**
**因此收集整理了一份《2024年Linux运维全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**
**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Linux运维知识点，真正体系化！**
**由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新**
**如果你觉得这些内容对你有帮助，可以添加VX：vip1024b （备注Linux运维获取）**
最全的Linux教程，Linux从入门到精通
======================
1. **linux从入门到精通(第2版)**
2. **Linux系统移植**
3. **Linux驱动开发入门与实战**
4. **LINUX 系统移植 第2版**
5. **Linux开源网络全栈详解 从DPDK到OpenFlow**
第一份《Linux从入门到精通》466页
====================
内容简介
====
本书是获得了很多读者好评的Linux经典畅销书**《Linux从入门到精通》的第2版**。本书第1版出版后曾经多次印刷，并被51CTO读书频道评为“最受读者喜爱的原创IT技术图书奖”。本书第﹖版以最新的Ubuntu 12.04为版本，循序渐进地向读者介绍了Linux 的基础应用、系统管理、网络应用、娱乐和办公、程序开发、服务器配置、系统安全等。本书附带1张光盘，内容为本书配套多媒体教学视频。另外,本书还为读者提供了大量的Linux学习资料和Ubuntu安装镜像文件，供读者免费下载。
**本书适合广大Linux初中级用户、开源软件爱好者和大专院校的学生阅读，同时也非常适合准备从事Linux平台开发的各类人员。**
> 需要《Linux入门到精通》、《linux系统移植》、《Linux驱动开发入门实战》、《Linux开源网络全栈》电子书籍及教程的工程师朋友们劳烦您转发+评论
**一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
用户、开源软件爱好者和大专院校的学生阅读，同时也非常适合准备从事Linux平台开发的各类人员。**
> 需要《Linux入门到精通》、《linux系统移植》、《Linux驱动开发入门实战》、《Linux开源网络全栈》电子书籍及教程的工程师朋友们劳烦您转发+评论
**一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
[外链图片转存中...(img-paFmNyYy-1712896521078)]
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
5
0- 0
已为社区贡献3条内容
所有评论(0)