辰匠科技的网站应用项目、物联网项目一般是离不开前端用户界面和后端数据交互的,一般系统环境是以前介绍过的LAMP,linux系统一般是用在云服务器系统的是ubuntu、用在树莓派系统是Raspberry Pi OS官方的Raspbian。
网站应用项目WEB架构:
一般项目架构如下图,各个部分:
1、WEB前端用户界面
2、mysql数据库
3、WEB后端PHP程序
系统的前端为蓝色部分,后端为绿色部分。
用户用电脑PC或手机端的浏览器对WEB应用页面进行查看和操作。这里WEB服务器的后端用PHP语言编程,前端页面事件操作和用AJAX结合http的POST或GET的方法与PHP后端传输和获取数据,PHP后端与mysql数据库可用PHP的mysqli函数。
PHP(全称:PHP:Hypertext Preprocessor,即"PHP:超文本预处理器")是一种通用开源脚本语言。
PHP 文件的默认文件扩展名是 ".php",文件可包含文本、HTML、JavaScript代码和 PHP 代码。PHP 代码在服务器上执行,结果以纯 HTML 形式返回给浏览器。
代码案例:
<!DOCTYPE html>
<html>
<body>
<h1>My first PHP page</h1>
<?php
echo "Hello World!";
?>
</body>
</html>
PHP的mysqli函数,可以用来与mysql数据库链接。
代码案例:
<?php
$servername = "localhost";
$username = "username";
$password = "password";
// 创建连接
$conn = new mysqli($servername, $username, $password);
// 检测连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
echo "连接成功";
?>
AJAX :Asynchronous JavaScript and XML
AJAX 是一种用于创建快速动态网页的技术。应用在前端页面里的JS。
AJAX 通过在后台与服务器进行少量数据交换,使网页实现异步更新。这意味着可以在不重载整个页面的情况下,对网页的某些部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个页面。
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行的代码
xmlhttp=new XMLHttpRequest();
}
else
{
//IE6, IE5 浏览器执行的代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p><b>在输入框中输入一个姓名:</b></p>
<form>
姓名: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>返回值: <span id="txtHint"></span></p>
</body>
</html>
代码说明:
输入框里的数值通过ajax,http的GET方法,发送给gethint.php文件
gethint.php的返回值显示在id=txtHint的<span>位置。
物联网项目系统WEB架构:
物联网项目一般就是在网站应用的基础上添加用python-Flask作为后端的部分与mysql数据库、MQTT消息队列、MODBUS工业协议、树莓派上的GPIO接口、或其他python模块等做数据交互。
Flask是一个使用 Python 编写的轻量级 Web 应用框架。
创建python文件,代码如下:
from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
return "hello world"
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000,debug=True)
代码说明:
用浏览器打开对应云服务IP:5000(端口号),页面会显示"hello world"
将其他相关功能代码放入其中,让后端页面调用时就会执行,比如对mysql数据库增删改查操作、发送MQTT消息、对MODBUS寄存器修改或查取等,
如果是在树莓派做WEB后台,还可以对GPIO端口等操作。
项目系统有时也需要多个后端单元相互做数据交互,用的还是POST/GET方法。这时,如果是PHP后端可以用curl函数,代码案例:
<?php
// 创建一个新cURL资源
$ch = curl_init();
// 设置URL和相应的选项
curl_setopt($ch, CURLOPT_URL, "http://v-craftsman.com/");
curl_setopt($ch, CURLOPT_HEADER, 0);
// 抓取URL并把它传递给浏览器
curl_exec($ch);
// 关闭cURL资源,并且释放系统资源
curl_close($ch);
?>
如果是python的后端可以用urllib模块,代码案例:
from urllib.request import urlopen
myURL = urlopen("http://v-craftsman.com/")
print(myURL.read())
以上代码使用 urlopen 打开一个 URL,然后使用 read() 函数获取网页的 HTML 实体代码。
之后应该会继续更新。
欢迎大家一同来交流探讨!
本文内容参考及推荐:
www.runoob.com
www.w3school.com.cn
相关文章:
内容分类
联系我们:
公众号:辰匠之心十分感谢您的宝贵的建议、意见、评论、合作交流、问题咨询等留言信息! 如有需要我们会尽快与您回复沟通。