pf7astvk4
/
Nginx
1
0
Fork 0
Code Issues Pull Requests 2 Packages Projects Releases Wiki Activity

更新全部前端代码，优化界面设计

Browse Source
pull/13/head
lyy 5 months ago
parent 104a161ff0
commit d00aa35bbf
8 changed files with 929 additions and 93 deletions
Show Stats Download Patch File Download Diff File

411
src/assets/DetectUI.html
Unescape View File

@ -1,4 +1,4 @@
<!DOCTYPE html> `<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@ -12,9 +12,277 @@
#pie { #pie {
width: 400px; width: 400px;
height: 400px; height: 400px;
}
.mainbody{
position: absolute;
left: 190px;
}
.wrap{
width: 260px;
height: 100%;
background-color: #dce0e9;
position: fixed;
}
.header{
width: 100%;
height: 65px;
background-color: #adadad;
font-size: 24px;
color: #fff;
text-align: center;
line-height: 65px;
}
.nav{
width:250px;
margin: 10px 5px 0;
}
.list{
margin-bottom: 5px;
}
.list h2{
position: relative;
padding: 15px 0;
background-color: #3889d4;
text-align: center;
font-size: 16px;
color: #fff;
transition: .5s;
}
.list h2.on{
background-color: #393c4a;
}
.list i{
position: absolute;
right: 10px;
top: 16px;
border: 8px solid transparent;
border-left-color: #fff;/*triangle*/
transform:rotate(0deg);
transform-origin: 1px 8px;
transition: .5s;
}
.list i.on{
transform:rotate(90deg);
}
.hide{
overflow: hidden;
height: 0;
transition: .5s;
}
.hide h5{
padding: 10px 0;
background-color: #282c3a;
text-align: center;
color:#fff;
border-bottom:#42495d;
div{
display: block;
}
.h1, .h2, .h3, .h4, .h5, .h6, a, abbr, body, cite, dd, dl, dt, h1, h2, h3, h4, h5, h6, iframe, input, li, object, ol, p, pre, span, ul {
font-family: 'Microsoft YaHei','SF Pro Display',Roboto,Noto,Arial,'PingFang SC',sans-serif;
}
a{
text-decoration: none;
cursor: pointer;
}
ul, li, ol, dl, dt, dd {
list-style: none;
}
div, figure, footer, header, hgroup, html, iframe, img, mark, menu, nav, object, section, span, table, tr, td, th, tbody, tfoot, thead, video {
border: 0;
margin: 0;
padding: 0;
}
.my_msg_list{
position:inherit;
margin-top: 50px;
width: 1300px;
min-height: 400px;
margin-bottom: 20px;
}
.my_msg_list_view{
position: relative;
margin-left: 100px;
background-color: #fff;
padding: 24px 16px;
-webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.28);
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.28);
min-height: 520px;
box-sizing: border-box;
}
.my_msg_list_box{
border: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.my_msg_list_con{
border: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.my_msg_list_title{
width: 100%;
margin: 0;
font-size: 14px;
color: #3d3d3d;
margin-bottom: 8px;
display: block;
overflow: hidden;
zoom: 1;
box-sizing: border-box;
}
.fr{
float: right!important;
display: inline-block;
color: #4a90e2;
}
.line{
display: inline-block;
height: 12px;
margin: 2px 12px;
border-right: 1px solid #979797;
}
.msg_list{
padding: 0 0 0 15px;
min-height: 370px;
box-sizing: border-box;
}
.msg_list_ul{
font-size: 14px;
vertical-align: baseline;
margin: 0;
padding: 0;
}
.msg_list_ul_li{
position: relative;
padding: 16px 0;
border-bottom: 1px solid #e0e0e0;
}
.msg_type{
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 5px;
color: #4d4d4d;
font-size: 25px;
text-align: center;
background-color: #fff;
border: 1px solid #e0e0e0;
vertical-align: top;
}
.msg_info_box{
width: 100%;
color: #4d4d4d;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.msg_title{
display: inline-block;
width: 85%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.options-f{
width: 16%;
height: 20px;
margin: 0;
margin-top: -20px;
padding: 0;
}
.msg_delete{
width: 10px;
height: 10px;
float: right;
}
.msg_content{
margin-top: 15px;
margin-bottom: -16px;
padding: 15px;
background-color: #f7f7f7;
font-size: 14px;
color: #4d4d4d;
line-height: 22px;
}
.page-box{
width: 100%;
margin: 32px 0 20px;
text-align: center;
border-top-color: initial;
border-right-color: initial;
border-bottom-color: initial;
border-left-color: initial;
}
.ule {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.lie {
width: 23%;
display: inline-block;
font: 13px sans-serif;
}
.lie a {
display: block;
color: rgb(39, 124, 184);
text-align: center;
padding: 14px 70px;
text-decoration: none;
}
.lie a:hover {
background-color: #e3e3f5;
}
.ula {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.lia {
width: 23%;
display: inline-block;
font: 13px sans-serif;
}
.lia a {
display: block;
font-size: larger;
color: rgb(0, 0, 0);
text-align: center;
padding: 14px 50px;
text-decoration: none;
}
.lia a:hover {
background-color: #b7b7b7;
}
.square{
width:200px;
height:5px;
border:1px solid transparent;
background: #06b81a;
}
} }
</style> </style>
<script type="text/javascript" src="echarts.js"></script>
<header class="top-navigation"> <header class="top-navigation">
<div class="container"> <div class="container">
<a class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" x="0" y="0" viewBox="0 0 694.9 10.4" style="enable-background:new 0 0 694.9 104.4" role="img"><title>MDN Web Docs</title> <a class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" x="0" y="0" viewBox="0 0 694.9 10.4" style="enable-background:new 0 0 694.9 104.4" role="img"><title>MDN Web Docs</title>
@ -22,66 +290,115 @@
</div> </div>
</header> </header>
<body> <body>
<div class="wrap">
<div class="header">消息过滤器</div>
<div class="nav">
<ul>
<li class="list">
<h2><i></i>服务器</h2>
<div class="hide">
<h5>北京</h5>
<h5>长沙</h5>
<h5>上海</h5>
</div>
</li>
<li class="list">
<h2><i></i>响应时间</h2>
<div class="hide">
<h5>"<=100ms"</h5>
<h5>"<=1500ms"</h5>
<h5>">1500ms"</h5>
</div>
</li>
<li class="list">
<h2><i></i>当前服务器状态</h2>
<div class="hide">
<h5>正常</h5>
<h5>受损</h5>
<h5>繁忙</h5>
</div>
</li>
<li class="list">
<h2><i></i>返回消息报头</h2>
<div class="hide">
<h5>TCP</h5>
</div>
</li>
</ul>
</div>
</div>
<script>
(function () {
var oList = document.querySelectorAll('.list h2'),
oHide = document.querySelectorAll('.hide'),
oIcon = document.querySelectorAll('.list i'),
lastIndex = 0;
for(var i=0;i<oList.length;i++){
oList[i].index = i;
oList[i].isClick = false;
oList[i].initHeight = oHide[i].clientHeight;
oHide[i].style.height = '0';
oList[i].onclick = function () {
if(this.isClick){
oHide[this.index].style.height = '0';
oIcon[this.index].className = '';
oList[this.index].className = '';
oList[this.index].isClick = false;
}
else{
oHide[lastIndex].style.height = '0';
oIcon[lastIndex].className = '';
oList[lastIndex].className = '';
oHide[this.index].style.height = '220px';
oIcon[this.index].className = 'on';
oList[this.index].className = 'on';
oList[lastIndex].isClick = false;
oList[this.index].isClick = true;
lastIndex = this.index;
}
}
}
})();
</script>
<div class="mainbody">
<div class="chart-container"> <div class="chart-container">
<!--
- #CHART CARD
-->
<div class="chart-card"> <div class="chart-card">
<h4 class="h3">消息类别统计表</h4> <h4 class="h3">消息类别统计表</h4>
<table class="card-table"> <table class="card-table">
<tbody class="table-body flex-center"> <tbody class="table-body flex-center">
<tr class="table-row flex-center"> <tr class="table-row flex-center">
<th class="table-heading" scope="col">北京</th> <th class="table-heading" scope="col">北京</th>
<td class="table-data"> <td class="table-data">
<div class="chart-bar" data-chart-bar="beijing"></div> <div class="chart-bar" data-chart-bar="beijing"></div>
</td> </td>
</tr> </tr>
<tr class="table-row flex-center"> <tr class="table-row flex-center">
<th class="table-heading" scope="col">上海</th> <th class="table-heading" scope="col">上海</th>
<td class="table-data"> <td class="table-data">
<div class="chart-bar" data-chart-bar="shanghai"></div> <div class="chart-bar" data-chart-bar="shanghai"></div>
</td> </td>
</tr> </tr>
<tr class="table-row flex-center"> <tr class="table-row flex-center">
<th class="table-heading" scope="col">长沙</th> <th class="table-heading" scope="col">长沙</th>
<td class="table-data"> <td class="table-data">
<div class="chart-bar" data-chart-bar="长沙"></div> <div class="chart-bar" data-chart-bar="长沙"></div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<span class="tooltip text" data-tooltip></span> <span class="tooltip text" data-tooltip></span>
<div class="wrapper flex-center"> <div class="wrapper flex-center">
<div class="card-meta"> <div class="card-meta">
<p class="text">最近7天总共有：</p> <p class="text">最近7天总共有：</p>
<data class="meta-value" value="478.33">478条</data> <data class="meta-value" value="478.33">478条</data>
</div> </div>
<div class="card-meta"> <div class="card-meta">
<data class="meta-value small" value="2.4">+2.4%</data> <data class="meta-value small" value="2.4">+2.4%</data>
<p class="text">from last month</p> <p class="text">from last month</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!--
- custom js link
-->
<script src="./assets/js/script.js" type="module" defer></script> <script src="./assets/js/script.js" type="module" defer></script>
<div class="piechart" id="pie"></div> <div class="piechart" id="pie"></div>
<script> <script>
@ -136,7 +453,6 @@
}; };
pie.setOption(pieOption); pie.setOption(pieOption);
</script> </script>
<div class="my_msg_list"> <div class="my_msg_list">
<div class="my_msg_list_view"> <div class="my_msg_list_view">
<div class="my_msg_list_box"> <div class="my_msg_list_box">
@ -155,33 +471,11 @@
</div> </div>
<div class="ula"> <div class="ula">
<div class="lia"><a href="#home"><span><div class="square"></div></span>北京</a></div> <div class="lia"><a href="#home"><span><div class="square"></div></span>北京</a></div>
<div class="lia"><a href="#news"> <div class="lia"><a href="#news">100ms</a></div>
<script language="javascript"type="text/javascript">
a = $.ajax({
url: "./assets/js/data.json",
type: "GET",
dataType: "json",
async: false,
success: function(data) {
}
});
aa=a.recentTime ;
result=$.parseJSON(a["recentTime"])
</script>
</a></div>
<div class="lia"><a href="#contact">正常</a></div> <div class="lia"><a href="#contact">正常</a></div>
<div class="lia"><a href="#about">TCP</a></div> <div class="lia"><a href="#about">TCP</a></div>
</div> </div>
<div class="fr options_info options-f">
<a class="btn-rush csdnc-trash" style="float: right;">
<img src="./assets/images/delete.png"
width="20px"
height="20px">
</a>
<em class="data-time" style="float: right;padding-right:10px">2019-03-28</em> <em class="data-time" style="float: right;padding-right:10px">2019-03-28</em>
</div>
<div class="msg_content ">第一个测试发送消息的内容</div>
</li>
<li class="msg_list_ul_li"> <li class="msg_list_ul_li">
<div class="ula"> <div class="ula">
<div class="lia"><a href="#home">长沙</a></div> <div class="lia"><a href="#home">长沙</a></div>
@ -189,15 +483,7 @@
<div class="lia"><a href="#contact">受损</a></div> <div class="lia"><a href="#contact">受损</a></div>
<div class="lia"><a href="#about">TCP</a></div> <div class="lia"><a href="#about">TCP</a></div>
</div> </div>
<div class="fr options_info options-f">
<a class="btn-rush csdnc-trash" style="float: right;">
<img src="./assets/images/delete.png"
width="20px"
height="20px">
</a>
<em class="data-time" style="float: right;padding-right:10px">2019-03-28</em> <em class="data-time" style="float: right;padding-right:10px">2019-03-28</em>
</div>
<div class="msg_content ">第一个测试发送消息的内容</div>
</li> </li>
<li class="msg_list_ul_li"> <li class="msg_list_ul_li">
<div class="ula"> <div class="ula">
@ -206,26 +492,15 @@
<div class="lia"><a href="#contact">繁忙</a></div> <div class="lia"><a href="#contact">繁忙</a></div>
<div class="lia"><a href="#about">TCP</a></div> <div class="lia"><a href="#about">TCP</a></div>
</div> </div>
<div class="fr options_info options-f">
<a class="btn-rush csdnc-trash" style="float: right;">
<img src="./assets/images/delete.png"
width="20px"
height="20px">
</a>
<em class="data-time" style="float: right;padding-right:10px">2019-03-28</em> <em class="data-time" style="float: right;padding-right:10px">2019-03-28</em>
</div>
<div class="msg_content ">第三个测试发送消息的内容，大声说出你们的爱</div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="page-box"> <div class="page-box">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script src="./assets/js/script.js" type="module" defer></script> </div>
</>
</html> </html>

43
src/assets/LoginUI.html
Unescape View File

@ -155,4 +155,45 @@ function ChangeImg() {
//设置定时器，每隔两秒切换一张图片 //设置定时器，每隔两秒切换一张图片
setInterval(ChangeImg,8000); setInterval(ChangeImg,8000);
</script> </script>
</html> </html>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取表单元素
var form = document.querySelector('.ant-form');
// 为表单添加提交事件监听器
form.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单的默认提交行为
// 收集表单数据
var formData = {
//question_kind: document.getElementsByName('question_kind').value,
type:"login_message",
username: document.getElementById('username').value,
password: document.getElementById('password').value,
};
console.log(formData);
// 使用fetch API发送数据到后端
fetch('http://localhost:8080/xmy', {
method: 'POST', // 或者 'PUT'
headers: {
'Content-Type': 'application/json',
// 如果需要认证，添加Authorization头部
// 'Authorization': 'Bearer your_token_here'
},
body: JSON.stringify(formData) // 将表单数据转换为JSON字符串
})
.then(response => response.json()) // 转换响应为JSON
.then(data => {
console.log('Success:', data);
alert('登录成功提交！');
location.href = "./MainPageUI.html";
})
.catch((error) => {
console.error('Error:', error);
alert('登录失败，请检查用户名和密码！');
});
});
});
</script>

156
src/assets/MainPageUI.html
Unescape View File

@ -7,6 +7,98 @@
width: 400px; width: 400px;
height: 400px; height: 400px;
} }
.downorder{
width: 100px;
position: relative;
height: auto;
margin: auto;
}
.downorder:hover a{
display: block;
}
.order{
position: relative;
text-align: center;
display: inline-block;
font-size: 16px;
padding: 15px;
background-color: rgb(1, 1, 1);
color: aliceblue;
}
.order:hover{
background-color: rgb(0, 0, 0);
color: rgb(6, 80, 238);
}
.downtext{
position: relative;
text-align: center;
display: inline-block;
font-size: 10px;
background-color: rgba(182, 182, 182,0.75);
color: aliceblue;
}
.downtext a{
/* display: block; */
display: none;
padding: 15px;
}
.downtext a:hover{
background-color: rgba(182, 182, 182,0.25);
color: rgb(58, 76, 243);
}
/* 遮罩层 */
#overlay {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
font-size: 16px;
/* IE9以下不支持rgba模式 */
background-color: rgba(0, 0, 0, 0.5);
/* 兼容IE8及以下 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
display: none;
}
/* 弹出框主体 */
.popup {
background-color: #ffffff;
max-width: 400px;
min-width: 200px;
height: 240px;
border-radius: 5px;
margin: 100px auto;
text-align: center;
}
/* 弹出框的标题 */
.popup_title {
height: 60px;
line-height: 60px;
border-bottom: solid 1px #cccccc;
}
/* 弹出框的内容 */
.popup_content {
height: 50px;
line-height: 50px;
padding: 15px 20px;
}
/* 弹出框的按钮栏 */
.popup_btn {
padding-bottom: 10px;
}
/* 弹出框的按钮 */
.popup_btn button {
color: #778899;
width: 40%;
height: 40px;
cursor: pointer;
border: solid 1px #cccccc;
border-radius: 5px;
margin: 5px 10px;
color: #ffffff;
background-color: #337ab7;
}
</style> </style>
<script type="text/javascript" src="echarts.js"></script> <script type="text/javascript" src="echarts.js"></script>
@ -29,7 +121,10 @@
<div class="header_con"> <div class="header_con">
<!-- h1里面放logo哦 --> <!-- h1里面放logo哦 -->
<h1> <h1>
<img src="./assets/images/Nginx.jpg" alt=""> <img
width="150px"
height="80px"
src="./assets/images/Nginx.jpg" alt="">
</h1> </h1>
<!-- 头部右侧表单标签--> <!-- 头部右侧表单标签-->
<form action=""> <form action="">
@ -44,8 +139,30 @@
<!-- 导航栏版心部分 --> <!-- 导航栏版心部分 -->
<div class="nav_con"> <div class="nav_con">
<ul> <ul>
<li><a href="#">首页</a></li> <li>
<li><a href="#">系统设置</a></li> <div class="downorder">
<button class="order">
首页
</button>
<div class="downtext">
<a href="">查看主动探测</a>
<a href="">查看流量控制</a>
<a href="">查看Nginx日志</a>
</div>
</div></li>
<li>
<button class="order"
id="showPopup" onclick="showPopup()">系统设置</button>
<div id="overlay">
<div class="popup">
<p class="popup_title">系统设置</p>
<p class="popup_content">当前系统版本：1.13</p>
<div class="popup_btn">
<button onclick="hidePopup()">确认</button>
</div>
</div>
</div>
</li>
</ul> </ul>
</div> </div>
@ -115,6 +232,20 @@
<dl> <dl>
<dt><img src="./assets/images/R-C blue.png"></dt> <dt><img src="./assets/images/R-C blue.png"></dt>
<dd>查看Nginx日志</dd> <dd>查看Nginx日志</dd>
<script>
const util = require('util');
const child_process = require('child_process');
// 调用util.promisify方法，返回一个promise,如const { stdout, stderr } = await exec('rm -rf build')
const exec = util.promisify(child_process.exec);
const appPath = join(__dirname, 'app');
const runClean = async function () {
// cwd指定子进程的当前工作目录 这里的rm -rf build为删除指定目录下的一个文件夹
await exec(`rm -rf build`, { cwd: appPath });
await exec(`rm -rf test`, { cwd: appPath });
runClean();
}
</script>
</dl> </dl>
</div> </div>
</div> </div>
@ -167,7 +298,10 @@
<h3 class="links_title">HADG</h3> <h3 class="links_title">HADG</h3>
<h3 class="links_a"> 旨在为全军指挥信息系统提供坚实保障，开发更高效的网关服务</h3> <h3 class="links_a"> 旨在为全军指挥信息系统提供坚实保障，开发更高效的网关服务</h3>
<div class="map"> <div class="map">
<img src="./assets/images/nginx.gif"> <img
width="150px"
height="100px"
src="./assets/images/nginx.gif">
</div> </div>
</div> </div>
</div> </div>
@ -177,7 +311,7 @@
<div class="footer_con"> <div class="footer_con">
<!-- 页脚左边的盒子 --> <!-- 页脚左边的盒子 -->
<p class="footer_l"> <p class="footer_l">
<a href="#">意见反馈</a> <a href="./table.html">意见反馈</a>
<a href="#">用户协议</a> <a href="#">用户协议</a>
<a href="#">交流QQ群</a> <a href="#">交流QQ群</a>
<a href="#" class="footer-right">湘ICP备20002562号-1</a> <a href="#" class="footer-right">湘ICP备20002562号-1</a>
@ -188,5 +322,15 @@
</p> </p>
</div> </div>
</body> </body>
<script>
function showPopup(){
var overlay = document.getElementById("overlay");
overlay.style.display = "block";
}
function hidePopup(){
var overlay = document.getElementById("overlay");
overlay.style.display = "none";
}
</script>
</html> </html>

66
src/assets/RegisterUI.html
Unescape View File

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>注册页面</title> <title>注册页面</title>
<!-- 引入格式文件--> <!-- 引入格式文件-->
<link rel="stylesheet" href="html&css.css"> <!-- <link rel="stylesheet" href="html&css.css"> -->
</head> </head>
<body> <body>
<style> <style>
@ -17,7 +17,7 @@
text-align: center; text-align: center;
} }
body{ body{
background: url("image/register_bg.png")no-repeat center; background: url("./assets/images/button.jpg")no-repeat center;
padding-top: 25px; padding-top: 25px;
} }
.rg_layout{ .rg_layout{
@ -72,7 +72,7 @@
.bt_center{ .bt_center{
padding-left: 310px; padding-left: 310px;
} }
#username,#password,#email,#name,#tel,#birthday,#checkcode{ #username,#real_name,#ID,#password,#tel,#birthday,#checkcode{
width: 251px; width: 251px;
height: 32px; height: 32px;
border: 1px solid #A6A6A6; border: 1px solid #A6A6A6;
@ -103,7 +103,7 @@
</div> </div>
<div class="rg_center"> <div class="rg_center">
<div class="rg_form"> <div class="rg_form">
<form action="#" method="post"> <form class="ant-form" action="#" method="post">
<table> <table>
<tr><!--label 标签的作用是当点击文字也会跳到文本输出框--> <tr><!--label 标签的作用是当点击文字也会跳到文本输出框-->
<!--for属性与ID属性对应规定 label 绑定到哪个表单元素。--> <!--for属性与ID属性对应规定 label 绑定到哪个表单元素。-->
@ -111,30 +111,26 @@
<td class="td_right"><input type="text" name="username" id="username"> </td> <td class="td_right"><input type="text" name="username" id="username"> </td>
</tr> </tr>
<tr> <tr>
<td class="td_left"><label for="password">姓名</label> </td> <td class="td_left"><label for="real_name">姓名</label> </td>
<td class="td_right"><input type="password" name="password" id="password"> </td> <td class="td_right"><input type="text" name="real_name" id="real_name"> </td>
</tr> </tr>
<tr><!--label 标签的作用是当点击文字也会跳到文本输出框--> <tr><!--label 标签的作用是当点击文字也会跳到文本输出框-->
<td class="td_left"><label for="email">身份证号</label> </td> <td class="td_left"><label for="ID">身份证号</label> </td>
<td class="td_right"><input type="email" name="email" id="email"> </td> <td class="td_right"><input type="text" name="ID" id="ID"> </td>
</tr> </tr>
<tr> <tr>
<td class="td_left"><label for="name">密码</label> </td> <td class="td_left"><label for="password">密码</label> </td>
<td class="td_right"><input type="text" name="name" id="name"> </td> <td class="td_right"><input type="password" name="password" id="password"> </td>
</tr> </tr>
<tr> <tr>
<td class="td_left"><label for="tel">再次输入密码</label> </td> <td class="td_left"><label for="tel">再次输入密码</label> </td>
<td class="td_right"><input type="text" name="tel" id="tel"> </td> <td class="td_right"><input type="password" name="tel" id="tel"> </td>
</tr> </tr>
<tr> <tr>
<td colspan="2" align="center" class="bt_center"> <td colspan="2" align="center" class="bt_center">
<input type="submit" value="注册" id="btn_sub"> <input type="submit" value="注册" id="btn_sub">
</td> </td>
</tr> </tr>
</table> </table>
</form> </form>
</div> </div>
@ -144,4 +140,44 @@
</div> </div>
</div> </div>
</body> </body>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取表单元素
var form = document.querySelector('.ant-form');
// 为表单添加提交事件监听器
form.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单的默认提交行为
// 收集表单数据
var formData = {
//question_kind: document.getElementsByName('question_kind').value,
ID:document.getElementById('ID').value,
password: document.getElementById('password').value,
real_name:document.getElementById('real_name').value,
source:"frontend",
tel:document.getElementById('tel').value,
type:"register_message",
username: document.getElementById('username').value,
};
console.log(formData);
fetch('', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData) // 将表单数据转换为JSON字符串
})
.then(response => response.json()) // 转换响应为JSON
.then(data => {
console.log('Success:', data);
alert('反馈成功提交！');
})
.catch((error) => {
console.error('Error:', error);
alert('提交失败，请稍后重试！');
});
});
});
</script>
</html> </html>

2
src/assets/css/public.css
Unescape View File

@ -19,7 +19,7 @@
.header_con h1 { .header_con h1 {
width: 604px; width: 604px;
height: 66px; height: 10px;
/* background: orange; */ /* background: orange; */
float: left; float: left;
padding: 34px 0 0 20px; padding: 34px 0 0 20px;

64
src/assets/css/search.css
Unescape View File

@ -0,0 +1,64 @@
body{
background: url("ab.jpg") no-repeat center;
background-size: cover;
height: 100vh;
width: 100%;
}
.login{
color: #988fc7;
float: right;
width: 100px;
height: 40px;
border-radius: 50%;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.search-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background:#2f3640;
height: 38px;
border-radius: 60px;
padding: 10px;
}
.search-box:hover > .search-txt{
width: 240px;
padding: 0 6px;
}
.search-box:hover > .search-btn{
background: white;
}
.search-btn{
color: #988fc7;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.search-txt{
border:none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}

4
src/assets/msgList.css
Unescape View File

@ -19,9 +19,9 @@ div, figure, footer, header, hgroup, html, iframe, img, mark, menu, nav, object,
.my_msg_list{ .my_msg_list{
position: fixed; position:inherit;
margin-top: 50px; margin-top: 50px;
width: 1400px; width: 1300px;
min-height: 400px; min-height: 400px;
margin-bottom: 20px; margin-bottom: 20px;
} }

276
src/assets/table.html
Unescape View File

@ -0,0 +1,276 @@
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取表单元素
var form = document.querySelector('.ant-form');
// 为表单添加提交事件监听器
form.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单的默认提交行为
// 收集表单数据
var formData = {
//question_kind: document.getElementsByName('question_kind').value,
url: document.getElementById('url').value,
description: document.getElementById('description').value,
question_kind:document.querySelector('input[name="option"]:checked').value
};
console.log(formData);
// 使用fetch API发送数据到后端
fetch('http://localhost:8080/xmy', {
method: 'POST', // 或者 'PUT'
headers: {
'Content-Type': 'application/json',
// 如果需要认证，添加Authorization头部
// 'Authorization': 'Bearer your_token_here'
},
body: JSON.stringify(formData) // 将表单数据转换为JSON字符串
})
.then(response => response.json()) // 转换响应为JSON
.then(data => {
console.log('Success:', data);
alert('反馈成功提交！');
})
.catch((error) => {
console.error('Error:', error);
alert('提交失败，请稍后重试！');
});
});
});
window.setInterval(myFunction,5000);
    function myFunction(){
        fetch('http://localhost:8080/aaa', {
            method: 'POST', // 或者 'PUT'
            headers: {
                'Content-Type': 'application/json',
                // 如果需要认证，添加Authorization头部
                // 'Authorization': 'Bearer your_token_here'
            },
            body: 'abc' // 将表单数据转换为JSON字符串
        })
        .then(response => response.json()) // 转换响应为JSON
        .then(data => {
console.log(data);
            renderEl(data.message);
        })
    }
   function renderEl(arr) {
        let str = '';
        str += `
           <div
style={{
position: 'absolute',
left: '900px',
top: '20px',
border: 'thick double #FFFAFA',
width:'300px',
whiteSpace:'nowrap'
}}>
<div>
已经解决问题数：${arr.slice(5,11)}
</div>
<table>
<caption>
问题统计数据 更新时间：${arr.substr(arr.indexOf("time:")+5,19)}
</caption>
<thead>
<tr>
<th scope="col">问题类型</th>
<th scope="col">问题数量</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">登录注册</th>
<td>${arr.substr(arr.indexOf("登录")+2,3)}</td>
</tr>
<tr>
<th scope="row">信息认证</th>
<td>${arr.substr(arr.indexOf("信息")+2,3)}</td>
</tr>
<tr>
<th scope="row">实训编程</th>
<td>${arr.substr(arr.indexOf("编程")+2,3)}</td>
</tr>
<tr>
<th scope="row">实训课程 </th>
<td>${arr.substr(arr.indexOf("课程")+2,3)}</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">其它</th>
<td>${arr.substr(arr.indexOf("其它")+2,3)}</td>
</tr>
</tfoot>
</table>
</div>
            `;
        const el = document.getElementById('wrap');
        el.innerHTML = str;
    }
</script>
</head>
<body>
<div style="padding-left: 10px; padding-right: 10px; flex: 1 1 0%;">
<h1 class="title___Q0EMb">意见反馈</h1>
<div class="minH500">
<section class="wrap___AsKly bg-white pl30 pr30 pt30">
<div class="Text">想对我们的平台提供功能建议？
<br>发现网页中的问题或bug想告诉我们？
<br>期望与我们展开合作？
<br>在这里把你想说的一切告诉我们吧？</div>
<div class="c-red-ee4 mt20 mb20">* <a class=
href="">看看帮助中心是否有你想要的答案</a>
</div>
<form class="ant-form ant-form-vertical ant-form-middle css-lw48js">
<div class="ant-form-item css-lw48js ant-form-item-has-success">
<div class="ant-row ant-form-item-row css-lw48js">
<div class="ant-col ant-form-item-label css-lw48js">
<label for="question_kind"
class="ant-form-item-required"
title="问题分类：">问题分类：</label>
</div>
<div class="ant-col ant-form-item-control css-lw48js">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<div aria-required="true"
class="ant-radio-group ant-radio-group-outline ant-radio-group-middle css-lw48js"
>
<span class="ant-radio ant-wave-target">
<input
type="radio"
value="1"
id="option1"
checked="true"
name="option">
</span>
<span><label for="option1">登录注册</label></span>
<span class="ant-radio ant-wave-target">
<input
type="radio"
value="2"
id="option2"
name="option">
</span>
<span><label for="option2">信息认证</label></span>
<span class="ant-radio ant-wave-target">
<input
type="radio"
value="3"
id="option3"
name="option">
</span>
<span><label for="option3">实训编程</label></span>
<span class="ant-radio ant-wave-target">
<input
type="radio"
value="4"
id="option4"
name="option">
</span>
<span><label for="option4">实训课程</label></span>
<span class="ant-radio ant-wave-target">
<input
type="radio"
value="5"
id="option5"
name="option">
</span>
<span><label for="option5">课堂</label></span>
<span class="ant-radio ant-wave-target">
<input
type="radio"
value="6"
id="option6"
name="option">
</span>
<span><label for="option6">其它</label></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ant-form-item css-lw48js">
<div class="ant-row ant-form-item-row css-lw48js">
<div class="ant-col ant-form-item-label css-lw48js">
<label for="url"
class="ant-form-item-required"
title="问题页面网址：">问题页面网址：</label>
</div>
<div class="ant-col ant-form-item-control css-lw48js"
style="display: flex ;width: 100px;">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<input placeholder="反馈平台问题，请同时填写对应的问题页面链接，以便平台能够及时跟踪解决，谢谢"
id="url"
aria-required="true"
class="ant-input css-lw48js"
type="text"
value="">
</div>
</div>
</div>
</div>
</div>
<div class="ant-form-item css-lw48js">
<div class="ant-row ant-form-item-row css-lw48js">
<div class="ant-col ant-form-item-label css-lw48js">
<label for="description"
class="ant-form-item-required"
title="问题描述：">问题描述：</label>
</div>
<div class="ant-col ant-form-item-control css-lw48js">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<textarea rows="4"
placeholder="反馈平台问题，请同时填写对应的问题页面链接，以便平台能够及时跟踪解决，谢谢"
id="description"
aria-required="true"
class="ant-input css-lw48js"></textarea>
</div>
</div>
</div>
</div>
</div>
<div id="wrap"></div>
<div class="ant-form-item css-lw48js">
<div class="ant-row ant-form-item-row css-lw48js">
<div class="ant-col ant-form-item-control css-lw48js">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<button type="submit"
class="ant-btn css-lw48js ant-btn-primary">
<span>提交</span>
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</section>
</div>
</div>
</body>
Write Preview
Loading…
Cancel
Save