Smart-agriculture-project
/
smart-green-house-server-and-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化登录页，注册页，首页，温湿度采集显示页面

This commit is contained in:
flykhan 2023-10-27 19:58:27 +08:00
parent e89ff250e7
commit 103cb878dc
9 changed files with 380 additions and 301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
cgi-bin/mqtt_pub_stoc.c
View File

@ -25,8 +25,8 @@ int main(int argc, char const *argv[])
mosquitto_lib_init(); // 初始化（固定格式） mosquitto_lib_init(); // 初始化（固定格式）
struct mosquitto *client = mosquitto_new(NULL, true, NULL); // 创建客户端 struct mosquitto *client = mosquitto_new(NULL, true, NULL); // 创建客户端
mosquitto_connect_callback_set(client, connect_callback); // 设置连接回调函数 mosquitto_connect_callback_set(client, connect_callback); // 设置连接回调函数
mosquitto_connect(client, "localhost", 1883, 60); // 连接服务器(地址，端口，超时时间) // mosquitto_connect(client, "localhost", 1883, 60); // 连接服务器(地址，端口，超时时间)
// mosquitto_connect(client, "flykhan.com", 1883, 60); // 连接服务器(地址，端口，超时时间) mosquitto_connect(client, "flykhan.com", 1883, 60); // 连接服务器(地址，端口，超时时间)
mosquitto_loop_start(client); // 开启客户端线程 mosquitto_loop_start(client); // 开启客户端线程
while (isConnected == 0) while (isConnected == 0)
; // 等待连接成功(当连接成功后，isConnected会被置为1，然后跳出循环) ; // 等待连接成功(当连接成功后，isConnected会被置为1，然后跳出循环)

38
cgi-bin/sqlite_cgi_base.c
View File

@ -5,6 +5,7 @@
// cJSON *result_json; // 用于存储查询结果 // cJSON *result_json; // 用于存储查询结果
char login_user_name[32] = ""; char login_user_name[32] = "";
int sql_search_callback_result_number = 0; // 用于存储查询结果的条数(默认为0)
// sqlite3的回调函数 // sqlite3的回调函数
// sqlite 每查到一条记录，就调用一次这个回调 // sqlite 每查到一条记录，就调用一次这个回调
@ -79,6 +80,7 @@ int main(int argc, char const *argv[])
rc = sqlite3_exec(db, query_sql, sql_search_callback, 0, &zErrMsg); // 执行查询语句 rc = sqlite3_exec(db, query_sql, sql_search_callback, 0, &zErrMsg); // 执行查询语句
if (rc != SQLITE_OK) if (rc != SQLITE_OK)
{ {
fprintf(stderr, "SQL error: %s\n", zErrMsg); fprintf(stderr, "SQL error: %s\n", zErrMsg);
sqlite3_free(zErrMsg); sqlite3_free(zErrMsg);
cJSON_Delete(json_buf); cJSON_Delete(json_buf);
@ -86,6 +88,27 @@ int main(int argc, char const *argv[])
return 1; return 1;
} }
// 检查查询结果是否为0
if (sql_search_callback_result_number == 0)
{
cJSON *result_json = cJSON_CreateObject();
cJSON_AddNumberToObject(result_json, "code", 1);
cJSON_AddStringToObject(result_json, "msg", "用户名或密码错误");
char *result_json_string = cJSON_Print(result_json);
// 输出 JSON 结果
printf("content-type: application/json;charset=utf-8\r\n");
printf("\r\n");
printf("%s\n", result_json_string);
free(result_json_string);
cJSON_Delete(json_buf);
sqlite3_close(db);
return 1;
}
sql_search_callback_result_number = 0; // 重置为0
// 释放资源 // 释放资源
cJSON_Delete(json_buf); cJSON_Delete(json_buf);
sqlite3_close(db); sqlite3_close(db);
@ -104,16 +127,11 @@ int sql_search_callback(void *NotUsed,
// printf("%s = %s\n", azColName[i], argv[i] ? argv[i] : "NULL"); // printf("%s = %s\n", azColName[i], argv[i] ? argv[i] : "NULL");
// } // }
cJSON *result_json = cJSON_CreateObject(); cJSON *result_json = cJSON_CreateObject();
if (argc == 0) sql_search_callback_result_number++;
{
cJSON_AddNumberToObject(result_json, "code", 1); cJSON_AddNumberToObject(result_json, "code", 0);
cJSON_AddStringToObject(result_json, "msg", "用户名或密码错误"); cJSON_AddStringToObject(result_json, "login_user_name", login_user_name);
}
else
{
cJSON_AddNumberToObject(result_json, "code", 0);
cJSON_AddStringToObject(result_json, "login_user_name", login_user_name);
}
char *result_json_string = cJSON_Print(result_json); char *result_json_string = cJSON_Print(result_json);
// 输出 JSON 结果 // 输出 JSON 结果

99
html/enroll.html
View File

@ -4,7 +4,54 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>用户注册</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
form {
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.row {
margin-bottom: 10px;
}
.center {
display: flex;
justify-content: center;
}
input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
width: 200px;
}
button {
padding: 10px 20px;
background-color: #4caf50;
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head> </head>
<body> <body>
@ -18,39 +65,33 @@
<div class="row center"> <div class="row center">
<button>确认</button> <button>确认</button>
</div> </div>
</div>
</form> </form>
</body>
<script>
function login(form) {
// let login_data = {
// name: form.name.value.trim(),
// password: form.password.value.trim()
<script>
function login(form) {
let name = form.name.value.trim();
let password = form.password.value.trim();
let name = form.name.value.trim(); if (name == "" || password == "") {
let password = form.password.value.trim(); alert("账号或密码不能为空");
return false;
}
if (name == "" || password == "") { let login_data = {
alert("账号或密码不能为空"); name: name,
password: password
};
fetch("../cgi-bin/sqlite_cgi_insert_base.cgi", {
method: "POST",
body: JSON.stringify(login_data),
headers: {
"Content-Type": "application/json;charset=utf-8"
}
});
open("./login.html", "_self");
return false; return false;
} }
</script>
let login_data = { </body>
name: name,
password: password
};
fetch("../cgi-bin/sqlite_cgi_insert_base.cgi", {
method: "POST",
body: JSON.stringify(login_data),
headers: {
"Content-Type": "application/json;charset=utf-8"
}
})
open("./login.html", "_self");
// window.localStorage.setItem("login_user", JSON.stringify(data));
return false;
}
</script>
</html> </html>

106
html/green_house_info_show.html
View File

@ -5,49 +5,95 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>温湿度</title> <title>温湿度</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.tablecenter {
display: flex;
/* justify-content: center; */
/* align-items: center; */
height: 100vh;
}
table {
border-collapse: collapse;
width: 100%;
/* width: 700px; */
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
th,
td {
padding: 10px;
text-align: center;
border: 1px solid #ccc;
height: 10px;
}
th {
background-color: #f0f0f0;
}
tr{
height: 10px;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tbody tr:hover {
background-color: #e0e0e0;
}
</style>
</head> </head>
<body> <body>
<div class="tablecenter"> <div class="tablecenter">
<table id="arpTable" width="700" align="center" border="1" cellspacing="0"> <table id="arpTable">
<thead> <thead>
<th>温度</th> <th>温度</th>
<th>湿度</th> <th>湿度</th>
<th>时间</th> <th>时间</th>
</thead> </thead>
<tbody id="greenTableBody" align="center"> <tbody id="greenTableBody">
</tbody> </tbody>
</table> </table>
</div> </div>
<script>
function loadBlackData() {
var blackData;
fetch("../cgi-bin/green_house_info_show.cgi")
.then(resp => resp.json())
.then(data => {
blackData = data;
greenTableBody.innerHTML = "";
data.forEach(rowData => {
let tr = document.createElement("tr");
let td1 = document.createElement("td");
let td2 = document.createElement("td");
let td3 = document.createElement("td");
td1.innerText = rowData.temperature;
td2.innerText = rowData.humidity;
td3.innerText = rowData.th_date_time;
tr.append(td1, td2, td3);
greenTableBody.append(tr);
});
})
}
window.onload = function () {
loadBlackData();
}
</script>
</body> </body>
<script>
function loadBlackData() {
var blackData;
fetch("../cgi-bin/green_house_info_show.cgi").then(resp => resp.json()).then(data => {
blackData = data;
greenTableBody.innerText = "";
data.forEach(rowData => {
let tr = document.createElement("tr");
let td1 = document.createElement("td");
let td2 = document.createElement("td");
let td3 = document.createElement("td");
td1.innerText = rowData.temperature;
td2.innerText = rowData.humidity;
td3.innerText = rowData.th_date_time;
tr.append(td1, td2, td3);
greenTableBody.append(tr);
});
})
}
window.onload = function () {
loadBlackData();
}
</script>
</html> </html>

53
html/green_house_settings.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>温湿度</title>
</head>
<body>
<div class="tablecenter">
<table id="arpTable" width="700" align="center" border="1" cellspacing="0">
<thead>
<th>温度</th>
<th>湿度</th>
<th>时间</th>
</thead>
<tbody id="greenTableBody" align="center">
</tbody>
</table>
</div>
</body>
<script>
function loadBlackData() {
var blackData;
fetch("../cgi-bin/green_house_info_show.cgi").then(resp => resp.json()).then(data => {
blackData = data;
greenTableBody.innerText = "";
data.forEach(rowData => {
let tr = document.createElement("tr");
let td1 = document.createElement("td");
let td2 = document.createElement("td");
let td3 = document.createElement("td");
td1.innerText = rowData.temperature;
td2.innerText = rowData.humidity;
td3.innerText = rowData.th_date_time;
tr.append(td1, td2, td3);
greenTableBody.append(tr);
});
})
}
window.onload = function () {
loadBlackData();
}
</script>
</html>

93
html/index.html
View File

@ -9,12 +9,18 @@
<style> <style>
html, html,
body{ body {
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#top { #top {
height: 60px; height: 60px;
background-color: rgb(150, 177, 186); background-color: rgb(150, 177, 186);
@ -33,20 +39,87 @@
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background-color: lightgoldenrodyellow; /* background-color: lightgoldenrodyellow; */
} }
#foot { #foot {
height: 40px; height: 40px;
background-color: lightblue; background-color: lightblue;
border-top: 1px solid lightgray;
padding: 10px 0;
} }
#logo>img { #logo>img {
width: 0px; width: 50px;
height: 50px; height: 50px;
/* width: 5%; */ /* width: 5%; */
/* height: 5%; */ /* height: 5%; */
} }
#menu {
width: 200px;
border-right: 5px solid lightgray;
padding: 10px;
}
.menu_item {
margin: 10px;
}
#menu>a {
display: block;
text-decoration: none;
color: rgb(174, 255, 0);
padding: 10px 5px;
width: 80%;
border-radius: 30px;
background-color: cornflowerblue;
border: 1px solid cornflowerblue;
font-size: larger;
text-align: center;
}
#menu>a:hover {
background-color: blue;
color: white;
font-size: larger;
border-radius: 30px;
/* border-top-left-radius: 30px; */
/* border-top-right-radius: 20px; */
/* border-bottom-right-radius: 20px; */
width: 80%;
text-align: center;
}
.logout_btn {
background-color: cornflowerblue;
border: 1px solid cornflowerblue;
border-radius: 30px;
width: 80px;
height: 30px;
font-size: larger;
text-align: center;
}
.logout_btn:hover {
background-color: blue;
color: white;
font-size: larger;
border-radius: 30px;
/* border-top-left-radius: 30px; */
/* border-top-right-radius: 20px; */
/* border-bottom-right-radius: 20px; */
width: 80px;
height: 30px;
text-align: center;
}
span {
font-size: larger;
padding-right: 30px;
color: rebeccapurple;
}
</style> </style>
</head> </head>
@ -56,17 +129,21 @@
<img src="./logo.png" alt="logo" /> <img src="./logo.png" alt="logo" />
</div> </div>
<div id="user_info"> <div id="user_info">
<!-- <span>登录用户</span> -->
<span id="userName"></span> <span id="userName"></span>
<!-- <span class="logout" onclick="logout()">登出</span> --> <!-- <span class="logout" onclick="logout()">登出</span> -->
<input type="button" value="登出" onclick="logout()" /> <input class="logout_btn" type="button" value="登出" onclick="logout()" />
</div> </div>
</div> </div>
<div id="main"> <div id="main">
<div id="menu"> <div id="menu">
<a href="green_house_info.html" target="content_frame" class="menu_item">大棚</a> <a href="./green_house_info_show.html" target="content_frame" class="menu_item">大棚温湿度</a>
<a href="record_of_operations_history.html" target="content_frame" class="menu_item">历史操作</a> <a href="./green_house_settings.html" target="content_frame" class="menu_item">大棚控制</a>
<a href="./green_house_info.html" target="content_frame" class="menu_item">大棚信息</a> <a href="./record_of_operations_history.html" target="content_frame" class="menu_item">历史操作</a>
</div>
<div id="content" style="width:100%;">
<iframe name="content_frame" width="100%" height="100%" scrolling="auto"></iframe>
</div> </div>
</div> </div>
@ -78,7 +155,7 @@
window.onload = function () { window.onload = function () {
if (localStorage.getItem("login_user") == null) { if (localStorage.getItem("login_user") == null) {
open("./login.html", "_self"); open("./login.html", "_self");
}else{ } else {
let login_user_str = localStorage.getItem("login_user"); let login_user_str = localStorage.getItem("login_user");
let login_user = JSON.parse(login_user_str); let login_user = JSON.parse(login_user_str);
userName.innerText = login_user.login_user_name; userName.innerText = login_user.login_user_name;

138
html/login.html
View File

@ -19,93 +19,94 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
background-color: #f5f5f5;
} }
#top { #top {
height: 50px; height: 50px;
background-color: lightblue; background-color: lightblue;
}
#foot {
height: 40px;
background-color: lightblue;
}
#main {
height: 100%;
background-color: lightcyan;
}
#top {
display: flex; display: flex;
flex-direction: row;
justify-content: space-between; justify-content: space-between;
justify-items: center;
align-items: center; align-items: center;
padding: 5px; padding: 5px;
border-bottom: 1px solid lightgray; border-bottom: 1px solid lightgray;
} }
#logo>img { #logo>img {
width: 180px; width: 45px;
height: 45px; height: 45px;
} }
#foot { #foot {
height: 40px;
background-color: lightblue;
border-top: 1px solid lightgray; border-top: 1px solid lightgray;
padding: 10px 0; display: flex;
justify-content: center;
align-items: center;
} }
form { #main {
width: 300px; height: 100%;
height: 300px; background-color: lightcyan;
background-color: rgba(41, 117, 117, 0.667);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
border-radius: 8px;
max-width: 100%;
padding: 0px 35px 0;
}
form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
form {
width: 300px;
height: auto;
background-color: rgba(41, 117, 117, 0.667);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
border-radius: 8px;
padding: 20px;
}
.row { .row {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: center; margin-bottom: 10px;
flex-wrap: nowrap; }
.row-buttons {
display: flex;
justify-content: space-between;
margin-top: 10px;
} }
input { input {
padding: 10px 5px; padding: 10px;
margin: 5px; margin: 5px;
border-radius: 5px; border-radius: 5px;
border: none;
} }
button { button {
width: 80px; padding: 10px 20px;
height: 30px;
border-radius: 3px; border-radius: 3px;
background-color: #4caf50;
color: #ffffff;
border: none;
cursor: pointer;
} }
#main { button a {
display: flex; color: #ffffff;
flex-direction: row; text-decoration: none;
justify-content: space-between;
justify-items: center;
align-items: center;
} }
#insert { button:hover {
font-size: 60px; background-color: #45a049;
font-family: "楷体"; }
writing-mode: vertical-rl;
/* 竖行模式 */ #title {
font-size: 40px;
font-weight: bold;
text-align: center;
/* margin-top: 20px; */
margin-bottom: 140px;
} }
</style> </style>
</head> </head>
@ -118,32 +119,23 @@
<div id="base_info">基础版</div> <div id="base_info">基础版</div>
</div> </div>
<div id="main"> <div id="main">
<div></div> <span id="title">智慧农业大棚管理系统</span>
<div> <form onsubmit="return login(this);">
<span id="insert"><i>快速</i>&emsp;</span> <div class="row">
<span id="insert">&emsp;<i>畅联</i></span> <input name="name" placeholder="请输入账号">
</div> </div>
<div> <div class="row">
<form onsubmit="return login(this);"> <input name="password" type="password" placeholder="请输入密码">
<div class="row"> </div>
<input name="name" placeholder="请输入账号"> <div class="row-buttons">
</div> <button>登录</button>
<div class="row"> <button>
<input name="password" type="password" placeholder="请输入密码"> <a href="enroll.html" target="_self" class="menu_item">注册</a>
</div> </button>
<div class="row center"> </div>
<button>登录</button> </form>
</div>
<div class="row center">
<button>
<a href="enroll.html" target="content_frame1" class="menu_item">注册</a>
</button>
</div>
</form>
</div>
<div></div>
</div> </div>
<div id="foot" style="text-align: center;"> <div id="foot">
<b>版本所有@FLY-NOOB</b> <b>版本所有@FLY-NOOB</b>
</div> </div>
<script> <script>
@ -170,10 +162,6 @@
}) })
return false; return false;
} }
// 根据您提供的代码，这是一个用于登录验证的 JavaScript 脚本。它通过 fetch 函数向服务器发送一个 POST 请求，将登录表单中的用户名和密码作为 JSON 数据发送给服务器。
// 服务器应该有一个名为 login.cgi 的 CGI 脚本来处理登录请求。脚本会接收到 POST 请求，并验证用户名和密码是否正确。如果验证成功，服务器会返回一个 JSON 响应，其中
// code 字段为 0，表示登录成功，同时还会返回一些其他的用户信息。客户端会将这些信息存储在本地的 localStorage 中，并使用 open 函数打开 /zhuti.html 页面。
// 请确保服务器端的 login.cgi 脚本正确处理了登录请求，并返回正确的 JSON 响应。此外，还需要确保服务器端的路径和文件名与 JavaScript 代码中的路径和文件名一致。
</script> </script>
</body> </body>

144
html/zhuti.html
View File

@ -1,144 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="zifan">
<meta name="keywords" content="物联网">
<title>主页</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#top {
height: 50px;
background-color: lightblue;
}
#foot {
height: 40px;
background-color: lightblue;
}
#main {
height: 100%;
display: flex;
flex-direction: row;
background-color: lightcyan;
}
#top {
display: flex;
flex-direction: row;
justify-content: space-between;
justify-items: center;
align-items: center;
padding: 5px;
border-bottom: 1px solid lightgray;
}
#logo>img {
width: 180px;
height: 45px;
}
#foot {
border-top: 1px solid lightgray;
padding: 10px 0;
}
#menu {
width: 300px;
border-right: 1px solid lightgray;
padding: 20px;
}
iframe {
outline: none;
border: none;
}
#menu,
.menu_item {
list-style: none;
margin: 0;
}
.menu_item {
margin: 10px;
}
#menu>a {
display: block;
text-decoration: none;
color: black;
padding: 10px 20px;
width: 80%;
}
#menu>a:hover {
/* color: blue; */
color: white;
/* background-color: aquamarine; */
background-color: dimgray;
border-radius: 5px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
</style>
</head>
<body>
<div id="top">
<div id="logo">
<img src="/logo.png" height="50px">
</div>
<div id="user_info"><span id="userName"></span>
<span class="logout" onclick="logout()">[登出]</span>
</div>
</div>
</div>
<div id="main">
<div id="menu">
<a href="green_house_info.html" target="content_frame" class="menu_item">大棚</a>
<a href="record_of_operations_history.html" target="content_frame" class="menu_item">历史操作</a>
</div>
<div id="content" style="width: 100%;">
<iframe name="content_frame" width="100%" height="100%" scrolling="No"></iframe>
</div>
</div>
<div id="foot" style="text-align: center;">
<b>版本所有@FLY-NOOB</b>
</div>
<script>
window.onload = function () {
if (localStorage.getItem("login_user") == null) {
open("/login.html", "_self");
} else {
let login_user_str = localStorage.getItem("login_user");
let login_user = JSON.parse(login_user_str);
userName.innerText = login_user.nickname;
}
}
function logout() {
localStorage.clear();
open("/login.html", "_self");
}
</script>
</body>
</html>

BIN
sql_base/green_house.db
View File

Binary file not shown.