首页分享给hexo博客添加后台系统（Nginx+tomcat+Springboot）

给hexo博客添加后台系统（Nginx+tomcat+Springboot）

来源：花匠小妙招时间：2024-12-07 19:02

title: 给hexo博客添加后台系统（Nginx+tomcat+Springboot）

date: 2023/5/8

tags: 网站搭建

categories: 建站

1.需求

hexo只是个前端静态页面，一方面提交日志不方便，另一方面也没法拓展其他功能，

因此，萌生了一个开发基于springboot，甚至是基于springcloud的后台系统的想法。

2.架构

暂时先弄一个简单的springboot项目，（以后用springcloud，再集成区块链）

3.代码实现

1.云服务器上安装 Nginx,之前的博客已经安装过了2.部署 Spring Boot

1.springboot 的controller层提供/hello的API接口

@PostMapping("/hello") @ResponseBody @CrossOrigin(origins = "http://101.42.229.55") public String hello(@RequestBody Map<String,String>requestBody) { System.out.println("step into hello..."); String input = requestBody.get("input"); String result = "Hello, " + input + "!"; return result; }

这个CrossOrigin注解是指定那些ip可以访问这个端口，相当于一个白名单

配置 Spring Boot 端口，默认是8080，我配置的是8081。这可以通过在 Spring Boot 的配置文件 application.properties 或 application.yml 中添加以下行来完成：

在springboot项目根据录下打包生成jar

然后会在target目录下生成web-app-1.0.jar

执行nohup java -jar $APP_NAME > start.log 2>&1 &启动springboot服务

nohup java -jar $APP_NAME > start.log 2>&1 &3.配置HEXO（Butterfly主题）

在hexo根目录下的新建/source/_date/widget.yml文件

top: - class_name: CLASSNAME id_name: IDNAME name: API调用 icon: fas fa-heartbeat html: '<!DOCTYPE html> <html> <head> <title>动态页面示例</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>动态页面示例</h1> <input type="text" id="input" placeholder="请输入内容"> <button onclick="sendRequest()">提交</button> <p id="result"></p > <script> function sendRequest() { let input = document.getElementById("input").value; let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById("result").innerHTML = xhr.responseText; } }; xhr.open("POST", "http://101.42.229.55:8081/hello", true); xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); xhr.send(JSON.stringify({input: input})); } </script> </body> </html> '

加了这个会在博客侧边栏中添加一个这个