将网页数据读入数据库+将数据库数据读出到网页——基于python flask实现网页与数据库的交互连接【全网最全】

news2024/11/26 4:27:37

本篇博客的目标是：在网页端输入数据，然后将数据存入数据库。但仅仅“存放”还不满能足需求，因此我们还需要能够取出数据，进行数据的比对分析。

我们将任务分解为4步：第1步用python连接到数据库，第2步用python获取网页数据，将1、2步结合起来实现从网页读取数据存入数据库。第3步用python从数据库中反向读取数据，第4步将数据用前端技术显示在网页上。

本文就从这4步详细教学：

模块一、实现读取网页数据存入数据库：

一、将python数据读入数据库：

1.1 具体操作：

下面代码的功能是：用python连接数据库，然后将3条学生的信息写入数据库。

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:111111@localhost:3306/flask_sql'
app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = True

db = SQLAlchemy(app) #创建数据库对象

#创建学生类，注意以下都是定义，学生表要自己在数据库中先创建好
class Students(db.Model):
    __tablename__ = 'students'
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(16))
    stu_number = db.Column(db.String(32), unique=True)

    def __repr__(self):
        return '<User: %s %s %s>' % (self.name, self.id, self.stu_number)


def create_table():
    with app.app_context(): #必须加入这段话，不然报错
        db.drop_all()
        db.create_all()
        #插入学生数据
        stu1 = Students(name='小明', stu_number='1918101')
        stu2 = Students(name='小红', stu_number='1918102')
        stu3 = Students(name='小华', stu_number='1918103')

        db.session.add_all([stu1, stu2, stu3])
        db.session.commit()

create_table()

@app.route('/')
def index():
    return 'Hello flask!'

if __name__ == '__main__':
    app.run(debug=True)

‘mysql+pymysql://用户名:密码@主机名/ip地址:端口号/数据库名’

 

在上面案例中：用户名：root，密码：111111（自己在建库时设定的），主机名：localhost，端口号：3306，数据库名：flask_sql

下面是效果：

1.2 可能出现的问题：

如果使用的是pycharm的朋友，在导入包的过程中可能会出现如下问题：

解决方法如下图：

  

 搜索flask-sqlalchemy然后点击Install package，下载完毕后就可以啦！

 

如果出现的是如下错误：

 以同样的方法下载pymys即可：

推荐2篇优质博客：

Flask学习笔记（四）: Flask与数据库连接

Web服务器（Flask框架）连接MySQL数据库并写入数据详细教程

二、将网页数据读入Python:

代码主要功能：在编译运行后点击连接会弹出E:/demo/login/login.html这个目录下的html内容，然后通过点击确定按钮，会在python的编译器下输出用户输入的用户名和密码。

下面是python flask的代码：

from flask import Flask, request

app = Flask(__name__)

@app.route('/')
def index():
    return open('E:/demo/login/login.html').read() #这里要修改打开文件的地址，换成你自己的html文件的地址

@app.route('/login', methods=['POST'])
def login():
    username = request.form.get('aaa') #aaa是username标签中的name
    password = request.form.get('bbb') #bbb是password标签中的name
    print('用户名:', username)
    print('密码:', password)
    return '登录成功'

if __name__ == '__main__':
    app.run(debug=True)

下面login.html的代码：

<!DOCTYPE html>
<html>

<head>
    <title>登录页面</title>
</head>

<body>
    <h1>登录页面</h1>
    <form method="POST" action="/login">
        <label for="username">账号：</label>
        <input type="text" id="username" name="aaa"><br><br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="bbb"><br><br>
        <input type="submit" value="登录">
    </form>
</body>

</html>

 下面是效果：在网页端输入账号201314，输入密码520520，点击登录，然后就会看到输出的用户名和密码。

 三、将网页数据存入数据库：

通过上面2个例子的启发，基本的桥梁已经搭建完毕，接下来我们只要稍加改进，就能实现读取网页的数据存入数据库。

首先在mysql数据库中创建一个新表Login

from flask import Flask, request, render_template
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:111111@localhost:3306/flask_sql'
app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = True

db = SQLAlchemy(app)

class Login(db.Model):
    __tablename__ = 'login'
    username = db.Column(db.String(20), primary_key=True)
    password = db.Column(db.Integer)

    def __repr__(self):
        return '<User: %s %s>' % (self.username, self.password)

@app.route('/')
def index():
    return open('E:/demo/login/login.html').read()

@app.route('/login', methods=['POST'])
def login():
    user = request.form.get('aaa')
    word = request.form.get('bbb')
    create_table(user, word)
    return '登录成功'

def create_table(user, word):
    with app.app_context():
        db.drop_all()
        db.create_all()
        user1 = Login(username=user, password=word)
        db.session.add_all([user1])
        db.session.commit()

if __name__ == '__main__':
    app.run(debug=True)

输入账号潘彬杰，密码520，然后显示登录成功，进入数据库查看发现网页上写入的数据统统存入了数据库。

 

模块二、筛选数据库数据输出到网页：

一、实现数据库数据读入Python：

程序目的：将数据库的数据读取到Pycharm的输出面板进行输出。

如下图是flask_sql数据库下login表的内容：

以下是代码，大家可以自行尝试：

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:111111@localhost:3306/flask_sql' #数据库设定格式见上文
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db = SQLAlchemy(app)

class Login(db.Model):
    __tablename__ = 'login' #login表
    username = db.Column(db.String(20), primary_key=True) #设定两个变量
    password = db.Column(db.String(20))

@app.route('/')
def index():
    logins = Login.query.all() #logins获取全部数据
    for login in logins:
        print(login.username, login.password) #逐一进行输出
    return '!!数据全部打印完毕!!'

if __name__ == '__main__':
    app.run(debug=True)

下图是输出效果，很神奇吧！ 

 上面是将数据库中某张表的全部内容进行输出，如果我们只想选择某些字段进行输出要如何做到呢？

比如我们想提取password为45632的username：

我们只需要修改下面的代码，加上filter_by语句即可：

 logins = Login.query.filter_by(password=45632).all() #获取password=45632的数据

 

 二、将数据库的数据输出到网页：

既然已经能够将数据库的数据输出到编译器的输出栏，只需要调用一点技巧就能输出到网页上。

数据库的数据依旧如下图：

下面是python代码：

from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:111111@localhost:3306/flask_sql' #数据库名flask_sql,其它信息介绍见上文
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db = SQLAlchemy(app)

class Login(db.Model):
    __tablename__ = 'login' #login表
    username = db.Column(db.String(20), primary_key=True) #定义两个变量
    password = db.Column(db.String(20))

@app.route('/')
def index():
    logins = Login.query.all() #或许Login类的所有数据存入Logins变量
    return render_template('login.html', logins=logins) #将logins变量的数据全部赋给模板变量，用login.html界面进行展示

if __name__ == '__main__':
    app.run(debug=True)

 下面是html代码：

<!DOCTYPE html>
<html>
<head>
    <title>User Login Information</title>
    <style>
        table {
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h1>用户登录信息</h1>
    <table>
        <tr>
            <th>Username</th>
            <th>Password</th>
        </tr>
        {% for login in logins %}
        <tr>
            <td>{{ login.username }}</td>
            <td>{{ login.password }}</td>
        </tr>
        {% endfor %}
    </table>

</body>
</html>

补充一下html知识：

1、<tr> <th>都是表格标签，<th>表示的是表头单元格，而<tr>表示的是表格中的一行。 <tr>和</tr>之间的数据表示的是同一行数据。

2、{% for login in logins %} 内容 {% endfor %} ：是jinja2模板引擎提供的循环语法，表示将内容进行多次的迭代循环。

3、 <td>{{ login.username }}</td> 是模板中变量插值语法，引擎会将中间的内容替换为具体的值。

下图是输出效果，直接将数据库中的数据输出到网页上：

如果想要对数据进行选择性输出，只需要将原本的语句更改为：

 logins = Login.query.filter_by(password=45632).all() #获取password=45632的数据

就可以啦！是不是很简单呢，点赞+收藏哦！！

模块三：实现网页端控制的数据库修改和查询操作

以上的操作能够实现网页端和数据库之间数据的传输和显示，但还有两个问题没有解决：一个是如何在网页端对数据库进行修改，另一个是如何在网页端查询数据库中的信息？

一、通过网页查询数据库内容：

设想一个场景，在登录界面，一位用户输入账号和密码，如果账号和所对应的密码不匹配则拒绝登录，如果账号不在数据库中也拒绝登录，下面我们将实现这个功能：

思路：我们首先在网页端将数据读入编译器的变量中，然后将变量代入数据库进行搜索，如果找到则返回找到，否则返回未找到。

下面是数据库：

 下面是运行结果：如果输入的账号在数据库中返回登录成功的语句，否则返回登录失败的语句。

 

main.py文件

from flask import Flask, request, render_template
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)

app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:111111@localhost:3306/flask_sql' #数据库设定格式见上文
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)

class Login(db.Model):
    username = db.Column(db.String(50),primary_key=True)
    password = db.Column(db.String(50))

@app.route('/')
def index():
    return open('E:/demo/login/login.html').read() #这里要修改打开文件的地址，换成你自己的html文件的地址

@app.route('/login', methods=['POST'])
def login():
    username = request.form.get('aaa') #aaa是username标签中的name
    password = request.form.get('bbb') #bbb是password标签中的name
    login_exists = Login.query.filter_by(username=username).first() is not None #改变的语句1
    return render_template('test.html', login_exists=login_exists) #改变的语句2

if __name__ == '__main__':
    app.run(debug=True)

 test.html

<!DOCTYPE html>
<html>
<body> 
    <table> 
            {% if login_exists %}
        <tr>Congratulations on successfully logging in. </tr>
            {% else %}
        <tr>I apologize for the login failure.</tr>
            {% endif %}
    </table>
</body>
</html>

login.html 

<!DOCTYPE html>
<html>

<head>
   
</head>

<body>
    <h1>Login</h1>
    <form method="POST" action="/login">
        <label for="username">username：</label>
        <input type="text" id="username" name="aaa"><br><br>
        <label for="password">password：</label>
        <input type="password" id="password" name="bbb"><br><br>
        <input type="submit" value="submit">
    </form>
</body>

</html>

二、通过网页修改数据库内容：

附加说明：

如果找不到template文件可以在项目的根目录自己创建一个template：

在template中将html文件放入：

此时再次运行程序会发现render_template的参数成功通过：

下面是实现图书信息界面的网页数据存入数据库的代码：

importbooks.py

from flask import Flask, request, render_template
from flask_sqlalchemy import SQLAlchemy
 
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:lxmysql123@localhost:3306brary_management_system'
app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = True
 
db = SQLAlchemy(app)
 
class Books(db.Model):
    __tablename__ = 'books'
    bar_code = db.Column(db.String(100))
    book_name = db.Column(db.String(100),primary_key=True)
    book_author = db.Column(db.String(100))
    book_publisher = db.Column(db.String(100))
    ISBN = db.Column(db.Integer)
    book_price = db.Column(db.Integer)
    book_introduction = db.Column(db.String(500))

    def __repr__(self):
        return '<User: %s %s %s %s %s %s %s>' % (self.bar_code, self.book_name,self.book_author,self.book_publisher,self.ISBN,self.book_price,self.book_introduction)
 
@app.route('/')
def index():
    return open('importbooks.html').read()
 
@app.route('/importbooks', methods=['POST'])
def books():
    code = request.form.get('aaa')
    name = request.form.get('bbb')
    author = request.form.get('ccc')
    publisher = request.form.get('ddd')
    ISBN = request.form.get('eee')
    price = request.form.get('fff')
    introduction = request.form.get('zzz')
    create_table(code,name,author,publisher,ISBN,price,introduction)
    return '登录成功'
 
def create_table(code, name,author,publisher,ISBN,price,introduction):
    with app.app_context():
        db.create_all()
        user1 = Books(bar_code=code, book_name=name,book_author=author,book_publisher=publisher,ISBN=ISBN,book_price=price,book_introduction=introduction)
        db.session.add_all([user1])
        db.session.commit()
 
if __name__ == '__main__':
    app.run(debug=True)

html

<!DOCTYPE html>
<html>

<head>
    
    <style type="text/css">
        @import"personinfo.css";
    </style>

</head>

<body>
       
        <div class="mm">
        <button onclick='window.open("../personinfo/personinfo.html")' type="button" id="add">返回首页</button>
        <button onclick='window.open("../login/login.html")' type="button" id="add">登录</button>
        </div>
        <div class="int">

            <p>图书信息录入</p>
        </div>
        <form method="post" action="/importbooks">

            <div class="int">
                <label for="numbers">图书条形码：</label>
                <input type="text" id="numbers" class="required" name="aaa">
            </div>

            <div class="int">
                <label for="book">书名：</label>
                <input type="text" id="book" class="required" name="bbb">
            </div>

            <div class="int">
                <label for="name">作者：</label>
                <input type="text" id="name" class="required" name="ccc">
            </div>

            <div class="int">
                <label for="w">出版商：</label>
                <input type="text" id="w" class="required" name="ddd">
            </div>

            <div class="int">
                <label for="ISBN">ISBN号：</label>
                <input type="text" id="ISBN" class="required" name="eee">
            </div>

            <div class="int">
                <label for="price">定价：</label>
                <input type="text" id="price" class="required" name="fff">
            </div>

            <div class="int">
                <label for="introduce">内容简介：</label>
                <input type="text" id="introduce" class="required" name="zzz">
            </div>

            <div class="oo">
                <input type="submit" value="??">
            </div>

        </form>
  

</body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/773972.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ubuntu20.04部署Nessus_pro2023年6月30日版本

ubuntu20.04部署Nessus_pro2023年6月30日版本

这里写目录标题 1. 前期准备2. nessus前期安装2.1. 下载nessus2.2. 安装nessus2.3. 运行nessus 3. 设置nessus3.1. 初始化设置3.2. 无插件3.3. 获取更新插件3.4. 设置目录权限及插件信息3.4.1. 设置plugins目录权限3.4.2. 设置plugin_feed_info.inc权限3.4.3. 查看插件信息3.4.…
阅读更多...
如何成为网络安全大牛（黑客）？

如何成为网络安全大牛（黑客）？

网安专业从始至终都是需要学习的&#xff0c;大学是无法培养出合格的网安人才的。这就是为啥每年网安专业毕业生并不少&#xff0c;而真正从事网安岗位的人&#xff0c;寥寥无几的根本原因。 如果将来打算从事网安岗位&#xff0c;那么不断学习是你唯一的途径。 网络安全为什…
阅读更多...
C语言 register关键字与“傲娇的编译器”

C语言 register关键字与“傲娇的编译器”

1.作用&#xff1a; “建议”编译器把变量放到寄存器内&#xff0c;编译器不一定听你的&#xff08;傲娇&#xff09;&#xff01;&#xff01; 2.速度&#xff1a;寄存器>高速缓存>内存&#xff0c;寄存器空间很宝贵&#xff08;非常非常少&#xff09; 3.寄存器不支持取…
阅读更多...
JavaScript基础篇(11-20题)

JavaScript基础篇(11-20题)

此文章&#xff0c;来源于印客学院的资料【第一部分&#xff1a;基础篇(105题)】&#xff0c;也有一些从网上查找的补充。 这里只是分享&#xff0c;便于学习。 诸君可以根据自己实际情况&#xff0c;自行衡量&#xff0c;看看哪里需要加强。 概述如下&#xff1a; 模块化开…
阅读更多...
React和Vue生命周期、渲染顺序

React和Vue生命周期、渲染顺序

主要就是命名不同 目录 React 组件挂载 挂载前constructor() 挂载时render() 挂载后componentDidMount()&#xff1a;初始化节点 更新 更新时render()&#xff1a;prop/state改变 更新后componentDidUpdate() 卸载 卸载前componentWillUnmount()&#xff1a;清理 V…
阅读更多...
利用数据与分析，推动企业数字化发展的路线图

利用数据与分析，推动企业数字化发展的路线图

导读 如今&#xff0c;保持数据与分析&#xff08;D&A&#xff09;战略与业务发展的统一同步&#xff0c;是助力企业机构成功和推进数字化项目的关键。敏捷的数据与分析能力对于培养感知-响应能力至关重要&#xff0c;可帮助企业机构满足全新的需求&#xff0c;进入前所未…
阅读更多...
git页面管理用户账号和密码（新建用户和初始化密码）

git页面管理用户账号和密码（新建用户和初始化密码）

本文章适用&#xff1a;没有固定的用户认证&#xff08;AD域或者LDAP等&#xff09;&#xff0c;git私有仓库单独管理用户&#xff08;新建用户和初始化密码&#xff09;。 1.创建新用户 以管理员的身份登录&#xff0c;进入git的管理模式&#xff0c;点击“New user”&…
阅读更多...
copilot使用初体验（一）

copilot使用初体验（一）

写函数 1、写一个注释&#xff0c;按下回车&#xff0c;会自动生成函数&#xff08;函数名函数体&#xff09;&#xff0c;然后按下 tab&#xff0c;接受建议。 // 找出一个数组中houseId等于3的那项 findHouseIdIs3(arr) {return arr.find(item > item.houseId 3) },快捷…
阅读更多...
UDP－组播,广播

UDP－组播,广播

转自&#xff1a;https://www.cnblogs.com/wangzhilei-src/p/15314315.html UDP是面向非连接的协议&#xff0c;它不与对方建立连接&#xff0c;而是直接把数据报发给对方。UDP无需建立类如三次握手的连接&#xff0c;使得通信效率很高。因此UDP适用于一次传输数据量很少、对可…
阅读更多...
python 100以内的质数

python 100以内的质数

可以使用for循环 # 求100以内的质数 i 2 for j in range(1, 101): #如果100以内的数字除以2的余数等于0if (j % i 0): #如果是就跳过&#xff0c;继续下一个循环continueprint(j) 要找出从1到100之间的质数&#xff0c;你可以使用嵌套循环和判断条件来实现。 print("…
阅读更多...
硬中断、软中断详解

硬中断、软中断详解

文章目录 什么是中断&#xff1f; 什么是计算机的中断&#xff1f; 什么叫硬中断、什么叫软中断&#xff1f; 怎么查看硬中断、软中断 查看硬中断的运行情况 cat /proc/interrupts 查看软中断的运行情况 cat /proc/softirqs 怎么排查软中断过高的问题&#xff1f; 软中断注意事…
阅读更多...
win11 win+e 打开我的电脑

win11 win+e 打开我的电脑

在打开的【文件资源管理器】中&#xff0c;找到【选项】菜单&#xff0c;并点击该菜单 在打开的弹框中&#xff0c;将选项卡切换到【常规】&#xff0c;将【打开文件资源管理器时打开】后的下拉框&#xff0c;选择为【此电脑】&#xff0c;然后&#xff0c;点击保存即可。到此&…
阅读更多...
8.1Java EE——Spring AOP

8.1Java EE——Spring AOP

Spring的AOP模块是Spring框架体系中十分重要的内容&#xff0c;该模块一般适用于具有横切逻辑的场景&#xff0c;如访问控制、事务管理和性能监控等 一、AOP概述 AOP的全称是Aspect Oriented Programming&#xff0c;即面向切面编程。和OOP不同&#xff0c;AOP主张将程序中相同…
阅读更多...
AndroidStudio中添加翻译插件：Translation

AndroidStudio中添加翻译插件：Translation

背景 开发中经常要阅读源码等&#xff0c;就会涉及翻译&#xff08;特别是英语不好的在下&#xff09;&#xff0c;之前一直是复制到百度或者谷歌进行翻译。终于&#xff0c;偶然找到了一款好用的as内直接用的翻译插件。 安装流程 1. 安装插件 打开as&#xff0c;依次点击&am…
阅读更多...
【动手学深度学习】--11.经典卷积神经网络 LeNet

【动手学深度学习】--11.经典卷积神经网络 LeNet

文章目录 经典卷积神经网络 LeNet1.LeNet2.代码实现3.模型训练 经典卷积神经网络 LeNet 学习视频&#xff1a;经典卷积神经网络 LeNet【动手学深度学习v2】 官方笔记&#xff1a;卷积神经网络&#xff08;LeNet&#xff09; 1.LeNet 总体来看&#xff0c;LeNet&#xff08;L…
阅读更多...
SpringBoot如何启用/禁用执行器？

SpringBoot如何启用/禁用执行器？

SpringBoot如何启用/禁用执行器&#xff1f; 一、什么是SpringBoot执行器二、如何启用SpringBoot执行器三、如何禁用SpringBoot执行器 一、什么是SpringBoot执行器 在Spring Boot中&#xff0c;执行器&#xff08;Actuator&#xff09;是一个用于监控和管理应用程序的功能模块…
阅读更多...
关于WIN10创建系统映像时D盘为系统盘的解决方案

关于WIN10创建系统映像时D盘为系统盘的解决方案

文章目录 问题&#xff1a;使用WIN10自带备份工具时&#xff0c;创建系统映像时&#xff0c;D盘被识别为系统盘的解决方案。方法一&#xff08;传统方法&#xff0c;删盘符&#xff09;方法二&#xff08;对症下药&#xff0c;找原因&#xff09;第一个选项是暂时将服务的Image…
阅读更多...
Nature Neuroscience：慢波、纺锤波和涟波耦合如何协调人类睡眠期间的神经元加工和通信

Nature Neuroscience：慢波、纺锤波和涟波耦合如何协调人类睡眠期间的神经元加工和通信

摘要 学习和可塑性依赖于休息期间神经元回路的微调调节。一个尚未解决的难题是&#xff0c;在没有外部刺激或有意识努力的情况下&#xff0c;睡眠中的大脑如何协调神经元的放电率(FRs)以及神经回路内外的通信&#xff0c;以支持突触和系统巩固。利用颅内脑电图对人类海马体和周…
阅读更多...
SuperGlue学习记录之最优传输

SuperGlue学习记录之最优传输

在进行最优传输相关理论的学习过程中&#xff0c;找到SuperGlue这篇论文&#xff0c;该篇论文通过最优传输来完成特征点的匹配过程。 SuperGlue结构 先来看一下其结构&#xff1a; 首先将两张图片送入特征提取网络&#xff0c;通过卷积网络提取出特征&#xff0c;主要有四个值…
阅读更多...
Windows特殊名称文件夹删除

Windows特殊名称文件夹删除

问题描述&#xff1a; 使用React开发的前端项目&#xff0c;指定build输出路径是创建出了俩个特殊的文件夹 .. build 咋一看build显得很正常&#xff0c;那你是没看见同时出现了俩个build&#xff1a; 尝试使用 dir /x rd /S /Q 等删除目录无果 尝试下载删除文件夹的工具也没…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023