Browse Source

修改了下Readme,网页下方增加一个footer

lxb 4 months ago
parent
commit
bd4059a166
  1. 42
      README.md
  2. 34
      web/css/style_1.css
  3. 17
      web/index.html

42
README.md

@ -48,7 +48,7 @@ pyinstaller --onefile server.py
- port:改成合适的端口,服务器记得要开放这个端口。
- server_list:所查询的服务器名称列表,客户端访问的时候只有下列对应的名称才会被处理。
- note_dict:公告字典,可以给对应服务器显示公告。
- api_name:api的名称,保持服务器和客户端统一即可。
- api_name:api的名称,保持服务器、客户端和nginx的设置统一即可。
修改配置文件之后需要**重启**程序才能生效。
@ -76,13 +76,13 @@ pyinstaller --onefile server.py
"api_name": "api"
}
```
- server_url:访问服务器的路径,即IP+端口,根据情况修改。
- server_url:访问服务器的路径,即IP+端口,根据情况修改。(按理来说是直接15002,但是用了nginx之后会根据设置将api的请求转发到15002上,nginx监听的15001所以这里就是15001)
- title:客户端本机的名称,只有这个名称在服务器的server_list中才会被处理。(那是不是任一个客户端程序设置到其他的title就会干扰其他服务器数据的显示?**是的**,除了这个title没有做其他验证,只能是人工确保一下每个客户端有单独的title)
- interval:获取信息的间隔
- note:公告,会与在服务器那边设置的公告合并显示。
- enable:开启检测的内容,如果不需要检测某个数据删除掉即可,目前只支持`gpu`、`cpu`、`memory`、`storage`、`network`。
- storage_list:检测的硬盘的路径,需要检测哪条路径就加到这个上面。
- api_name:与服务器保持一致即可,不然无法正常访问。
- api_name:与服务器、nginx的设置保持一致即可,不然无法正常访问。
修改配置文件之后需要**重启**程序才能生效。
@ -103,9 +103,37 @@ docker run -d \
将web目录下的内容放到数据卷的对应位置。
有域名的话也可以搞一个反向代理,可参考 [服务器上使用Nginx部署网页+反向代理](http://blog.lxblxb.top/archives/1723257245091)。
另外nginx的配置如下:
```
server {
listen 15001;
listen [::]:15001;
# server_name *;
location / {
root /usr/share/nginx/html/serverInfo_web;
index index.html index.htm;
try_files $uri $uri/ =404;
}
location /api/ {
proxy_pass http://localhost:15002;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
set $env "internal";
add_header X-Environment $env;
}
```
也就是直接访问服务器的15001端口可以访问网页,然后通过访问对应的`api`接口会转发到15002端口上,也就是flask的端口。
**特别的**,`web/js/script.js`中有如下的代码,是通过`internal`来修改访问的URL,以实现访问内网的时候就采用内网的地址访问服务器,避免在内网的时候访问公网。这部分也要按需的修改一下。
最后,有域名的话也可以搞一个反向代理,可参考 [服务器上使用Nginx部署网页+反向代理](http://blog.lxblxb.top/archives/1723257245091)(现在看来这个博客可能写的是有些问题的)。
**特别的**,`web/js/script.js`中有如下的代码,是通过`internal`来修改访问的URL,以实现访问内网的时候就采用内网的地址访问服务器,避免在内网的时候访问公网。这部分也要按需的修改一下。如果只是在内网访问则直接让`apiURL`等于内网地址即可。
```js
// 根据环境变量设置API URL
if (environment === 'internal') {
@ -114,8 +142,8 @@ if (environment === 'internal') {
apiURL = 'http://gpus.lxblxb.top';
}
```
以及nginx那边也需要一些配置,大概是设置下面的内容。好像还有一个地方设置成`internal`的?时间太久了不记得了
```bash
以及反向代理的nginx那边也需要一些配置,大概是设置下面的内容。对应内网nginx设置的`internal`
```
set $env "public";
add_header X-Environment $env;
```

34
web/css/style_1.css

@ -1,13 +1,37 @@
#header-container {
/* background-color: beige; */
font-size: 32px;
font-weight: bold;
padding-left: 20px;
padding-top: 10px;
/* padding-bottom: 5px; */
}
.header-container {
/* display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px; */
/* 设置html和body的高度为100% */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
/* 使用flexbox布局 */
body {
display: flex;
flex-direction: column;
}
/* 主要内容区域,flex-grow: 1使其占据剩余空间 */
.content {
flex-grow: 1;
/* padding: 20px; */
}
/* Footer样式 */
footer {
background-color: #f1f1f1;
color: rgb(172, 172, 172);
text-align: center;
padding: 10px 0;
}
.card {

17
web/index.html

@ -1,18 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>服务器信息</title>
<link rel="stylesheet" href="./css/style_1.css">
</head>
<body>
<div id="header-container">
服务器信息
</div>
<div id="server-data">
<div class="content">
<div id="header-container">
服务器信息
</div>
<div id="server-data">
</div>
</div>
<footer>
<p>Footer</p>
</footer>
<script src="./js/script.js"></script>
</body>
</html>
Loading…
Cancel
Save