零基础搭建 Linux(Ubuntu)+Nginx+Python+MySQL 架构网站，实现终端发送数据网页展示（三）

FranklinLighting

于 2021-09-16 11:02:23 发布

阅读量564

点赞数 2

文章标签： mysql linux ubuntu flask python

本文链接：https://blog.csdn.net/FranklinLighting/article/details/120321339

版权

前两节我们已经搭建好了静态网页，也从终端接收到数据并储存到了数据库中，本节介绍最后的功能：从数据库到网页进行数据展示。

一、后端Python回应前端请求

因为需要先定义访问路径浏览器才可以访问，所以这里先完成后端部分。

此处的Python需要用到Flask库，所以还是惯例使用pip安装：

pip3 install Flask

之后还需要安装flask_cors库来支持跨域访问：

pip3 install flask_cors

完成之后，将下面Python文件部署到服务器上试运行。

# -*- coding: utf-8 -*-
from flask import Flask
from flask_cors import *

app = Flask(__name__)

CORS(app, resources=r'/*')  # r'/*' 是通配符，让本服务器所有的URL 都允许跨域请求


@app.route('/hello')
def hello_world():
    return 'Hello World!'


if __name__ == '__main__':
    app.run(
        host='0.0.0.0',  # 任何ip都可以访问
        port=5000,  # 端口
        debug=True)

运行之后会显示如下信息：

（警告内容：不能正式部署在服务器上，可能会出现问题）这里就先不管那么多了，直接使用。

注意：上述程序中使用到的端口号需要在安全组和防火墙放通，否则会出现404.

接下来打开浏览器，输入服务器的IP地址后接自定义路径（“@app.route('/hello')”中的引号部分，注意还需要加上端口号），如果出现如图页面表示成功：

至此后端部分已经开通完毕，可以接收到来自浏览器的请求并返回给定的数据了。下一步使用XMLHttpRequest来发送请求，并将结果数据到网页上。

二、前端发送请求并显示数据

在第一节网页的基础上，增加XMLHttpRequest的函数来实现发送请求并且接收数据：

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome to nginx!</title>
        <style>
            body {
                width: 35em;
                margin: 0 auto;
                font-family: Tahoma, Verdana, Arial, sans-serif;
            }
        </style>
    </head>

    <body>
        <h1>Hello, nginx!</h1>
        <p>下面将展示从终端发送的数据:</p>
        <p id='demo'></p>

        <script>
            var xmlhttp;
            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("demo").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "http://xx.xx.xxx.xx:5000/hello", true);
            xmlhttp.send();
        </script>

    </body>
</html>

之后将网页覆盖到var/www/html文件夹下的html文件，在浏览器直接输入服务器外网IP访问，出现以下画面表示成功：

三、后端读取数据库数据

可以看出，之前的后端为了测试功能只返回了一个固定的字符串，按照标题的功能要求，需要从数据库中读取数据，所以还需要再修改一下后端的程序内容：

# -*- coding: utf-8 -*-
from flask import Flask
from flask_cors import *
import pymysql  # 导入操作数据库的库

app = Flask(__name__)

CORS(app, resources=r'/*')  # r'/*' 是通配符，让本服务器所有的URL 都允许跨域请求


@app.route('/hello')
def hello_world():
    # 连接数据库
    database = pymysql.connect(host="xx.xx.xxx.xx",
                               user="myself",
                               password="xxxxxx",
                               database="My_Server")
    cur = database.cursor()  # 取得游标
    
    sql = "SELECT * FROM data1"
    cur.execute(sql)
    row_1 = cur.fetchone()
    return str(row_1[1])


if __name__ == '__main__':
    app.run(
        host='0.0.0.0',  # 任何ip都可以访问
        port=5000,  # 端口
        debug=True)

可以看到，这里只是在返回数据之前连接了数据库并取出了值。

注意：这里不能直接返回float类型的数值，可以返回的内容看下图：

将Python文件重新部署到服务器，运行，之后可以直接从浏览器访问外网IP，显示如下界面：

结语

整个项目到这里就基本结束了，各个基本功能也都实现了。从终端发送数据到服务器接收储存，再到浏览器请求数据并显示，可以说整个框架是搭建起来了。

今后如果有更复杂的项目，可以在此基础之上排列组合：更多的终端输入，更多的数据库表，更好看的网页展示......

希望各位能够有所收获，共同进步！

FranklinLighting

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
零基础搭建 Linux(Ubuntu)+Nginx+Python+MySQL 架构网站，实现终端发送数据网页展示（三）

前两节我们已经搭建好了静态网页，也从终端接收到数据并储存到了数据库中，本节介绍最后的功能：从数据库到网页进行数据展示。一、后端Python回应前端请求因为需要先定义访问路径浏览器才可以访问，所以这里先完成后端部分。此处的Python需要用到Flask库，所以还是惯例使用pip安装：pip3 install Flask之后还需要安装flask_cors库来支持跨域访问：pip3 install flask_cors完成之后，将...
复制链接

扫一扫