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

已于 2024-04-18 13:38:13 修改
阅读量8.5k 收藏 148
点赞数 46
文章标签： 前端 数据库 java mysql python web表单 web
于 2023-07-19 16:32:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RuanFun/article/details/131805006
版权

【全网最全！保姆级教学！！】

本篇博客基于flask技术，实现数据库和网页端的交互。

实现效果：在网页端输入数据，能够将数据存入数据库。反向操作时，能将数据库的数据取出，显示在网页端。不仅如此，还支持数据的查询和修改。

 读取网页数据存入数据库，效果如下图：

 

读取数据库数据显示在网页上，效果如下图：

 

 一、将网页数据存入数据库

首先你需要在Navicat Premium这类数据库可视化软件中新建一个连接

右键连接名，然后选择新建数据库，像下面这样设置即可：

接下来我们要创建一个新表login，可以点查询-新建查询：

保存位置保存在我们新建的flask_sql下，查询名为login

写入建表语句，点击保存。然后我们查询下会多一个login（记得要刷新），点击运行即可生成login表：

 

CREATE TABLE login(
	username VARCHAR(20),
	password INT
);

就可以得到一个名为login的空表（记得刷新）：

然后随便在PyCharm或者其它编译器中新建一个Python项目：

 然后很随意地把下面的代码（附在该节末尾）经过修改后（填入你自己的数据库密码和login.html所在的路径），复制到main.py中点击运行即可运行：

（补充一下：如果falsk_sqlalchemy导入失败，可以使用下面方法：File→Setting→Project:XXX→Project Interpreter->点击+号下载）

运行成功后会生成一个URL，只需要点进去即可：

输入账号密码，然后数据库里就有结果啦【为了写这篇博客费了好多心血，据说点赞一下会收获好运~！】

 下面是代码 # 后面是注释：

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

# 下面是连接数据库，root是用户名，111111是连接密码，flask_sql是我存放login表的数据库名称，根据你自己情况修改
# app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:这里填你自己的密码@localhost:3306/存放login表的数据库名称'

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)

#下面是获取数据库的两个字段username和password，以后可以填你自己表里的字段
class Login(db.Model):
    __tablename__ = 'login'
    username = db.Column(db.String(20), primary_key=True) # 字段1：username
    password = db.Column(db.Integer) # 字段2：password

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

@app.route('/')
def index():
    return open('E:/demo/login/login.html').read()#这里是我login.html文件所在的地址，要换成你的地址

#下面的aaa和bbb是html的标签name
@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.create_all()
        user1 = Login(username=user, password=word)
        db.session.add_all([user1])
        db.session.commit()

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

再次强调这个地方需要修改：‘mysql+pymysql://用户名:密码@主机名/ip地址:端口号/数据库名’

 

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

下面是login.html的代码（我个人是存在下面目录：E:\demo\login\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>

【据说看到这里点赞的都会有好运！】

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

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

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

下面是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的数据

就可以啦！是不是很简单呢。

三、实现网页、数据库与PyCharm的交互

下面的内容作为选读，主要讲解的是网页端与PyCharm的数据交互，以及数据库端与PyCharm的数据交互，作为上面案例的实现原理，有助于更深入了解数据库-网页端间的交互过程，有兴趣的同学可以自行实验。记得点赞+收藏哦！

 3.1 将网页数据读入PyCharm:

代码主要功能：在编译运行后点击连接会弹出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，点击登录，然后就会看到输出的用户名和密码。

3.2实现数据库数据读入PyCharm：

程序目的：将数据库的数据读取到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的数据

 

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

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

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

下面是数据库：

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

 

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>

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

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

生活不易，时间有限，因私信人数众多，暂时改为收费咨询制。

帮助真正有需要的小伙伴们答疑解惑。

如有问题需单独答疑，可转6.88元后私信我，务必耐心帮您解答。

如问题难度较大需花费时间研究，会额外收取费用，费用可商议。

面试八股文笔记一份是19.88元（原价是89元）感兴趣可私。

一次性支付49.88元大家交个朋友，可经常聊天，无限次咨询，大厂内推。

吾浴西风
关注
  • 46
    点赞
  • 踩
  • 148
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
Python的Flask框架与数据库连接的教程
09-22
主要介绍了Python的Flask框架与数据库连接的教程,是Flask框架学习当中的基本知识,需要的朋友可以参考下
HTML网页中获取SQL数据库示例
06-28
实用实用实用实用实用实用实用实用实用实用实用实用实用实用实用实用
Flask 提取数据库中的数据
12-06 2419
近日有需求，想查询和 flask 连接的数据库，并且把数据读出来 查询数据很好处理，但是想要提取数据就感觉有点无从下手 直接百度 “flask提取数据库中的数据” 找到的也是基于 bootstrap 提取数据的方法 之后，我使用 python 的 type() 方法查看了 UserDataList.query.filter_by(username=searchUserName).all(...
前端js调取数据库总结
2302_80391964的博客
03-10 539
其实一开始是完全看不懂学习计划内容是什么，也不知道怎么使用接口。之前学的ajax感觉跟这个很不一样，所以可能被网络上的视频以及文档误导了。说真的，这三周时间大部分是花在熟悉接口，使用接口上，以及怎么使用ajax。我刚开始也不知道页面一点进去要渲染的，所以这个部分写的不太好。一部分原因是我不熟悉接口，一部分是这段时间事情也有点多，请的假有点多。网上资料确实挺多的。还有一部分就是知识点不牢固，比如怎么传这个参数，怎么取消勾选，以前没有遇到过的。完善增删改查功能，复习html布局，css一些属性，以及es6。
flask入门（四）前后端数据传输
julac的博客
10-21 2764
模块来自论文：《Sentence-BERT: Sentence Embeddings using Siamese BERT-Networks》，使用孪生网络（Siamse Network）将两个文本映射到特征空间得到特征向量（384维）：先把数据写进字典，字典整体进行传输。
用MyEclipse开发jsp网页连接MySQL数据库
05-23
使用myeclipse开发网站使用tomcat作为服务器MySQL为数据库链接办法
[VS]网页连接数据库
qq_47583226的博客
11-05 9673
工具： 1、Visual Studio(我使用的是vs2019) 2、SQL server(我使用的是sql2008) 3、网页运行框架：.Net2.0 目录 一、网站以windows身份验证连接数据库 二、网站以sql server身份验证连接数据库 三、使用工具Visual Studio中自带的连接数据库功能 一、网站以windows身份验证连接数据库 1、sql数据库以Windows身份验证的形式登录； 2、在Web.config配置文件中配置连接，在<configur.
Python+Flask对MySQL数据库进行增删查改并在页面展示数据
南弥的博客
12-09 1万+
Python+Flask对MySQL数据库进行增删查改
flask对数据库通过html进行修改,flask拓展（数据库操作）
weixin_30122219的博客
06-03 611
目录一、Flask模型二、 定义模型三、 创建数据表四、 初始化SQLALchemy五、 配置数据库的访问地址六、 对学生数据进行CRUD操作一、Flask模型Flask默认并没有提供任何数据库操作的API我们可以选择任何适合自己项目的数据库来使用Flask中可以自己的选择数据，用原生语句实现功能，也可以选择ORM(SQLAlchemy，MongoEngine)SQLAlchemy是一个很强大的关...
基于Flask框架，编写一段代码访问数据库，然后把数据展示在页面上。
weixin_42577243的博客
01-12 198
from flask import Flask, render_template from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) app.config['SQLALCHEMY_DATABASE_URI'] = '你的数据库连接地址' db = SQLAlchemy(app) class User(db.Model): ...
用简单，易懂的方法将数据库和网页连接起来（例：登陆注册页面）
热门推荐
qq_56045326的博客
01-10 2万+
PHP技术，远比用java写代码连接数据库简单得多，下面看我的详细介绍： 1.首先要下载：phpstudy_pro（关注我可以免费下载哦！） 2.然后打开phpstudy_pro，启动Apache服务器（每次想要链接数据库都要先做这个操作） （想要详细了解PHP服务器可以点击---->可以点击----> https://blog.csdn.net/qq_780662763/article/details/108346226） 3.创建你的数据库 localhost用户下...
天气数据可视化分析系统 技术框架 python + flask web + echart + 无数据库 + 无爬虫
07-30
模块分析说明：（所有天气预报数据都是写死的没有爬虫功能和数据库，前端echat后端python flask 处理一些基本逻辑） 登录模块 系统爬虫模块 可视化模块： 子模块长沙当天天气 子模块七天温度变化 子模块14天温度变化...
Python flask框架实现查询数据库并显示数据
12-17
我们想将name和age列显示到web页面 上代码sqlshowweb.py from flask import Flask from flask import render_template import pymysql app = Flask(__name__) @app.route('/') def index(): conn = pymysql....
毕业设计基于Python Flask实现的昆虫管理与识别web系统源码+数据库
10-31
毕业设计基于Python Flask实现的昆虫管理与识别web系统源码+数据库
程序设计思维小作业基于python flask写一个简易版网页聊天软件源码+数据库，实现登录、注册、文字聊天功能
12-28
程序设计思维小作业基于python flask写一个简易版网页聊天软件源码+数据库，实现登录、注册、文字聊天功能 运行方式 python main.py 主要思路 登录和注册使用数据库，用POST方法传输数据，登录后用session存储登录的...
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 594
官网代码（在取消选中状态的时候不生效）
C++ WebServer的细节理解
最新发布
我的博客
04-22 594
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
webman 事务回滚失效问题记录
juan9872的博客
04-21 723
webman是一款基于workerman开发的高性能HTTP服务框架。webman用于替代传统的php-fpm架构，提供超高性能可扩展的HTTP服务。你可以用webman开发网站，也可以开发HTTP接口或者微服务。除此之外，webman还支持自定义进程，可以做workerman能做的任何事情，例如websocket服务、物联网、游戏、TCP服务、UDP服务、unix socket服务等等。
用python写一个网页，实现数据的输入并将输入的数据保存到指定的文件夹数据库中
05-17
你可以使用Python的Flask框架来实现这个功能，具体步骤如下： 1. 安装Flask框架和相关依赖库。你可以使用pip命令来安装它们： ``` pip install Flask pip install flask-wtf pip install sqlalchemy ``` 2. 创建一个Flask应用程序，并编写一个包含表单的HTML页面。例如，你可以在templates文件夹下创建一个名为"index.html"的文件，代码如下： ```html <!DOCTYPE html> <html> <head> <title>数据输入</title> </head> <body> <h1>输入数据</h1> <form method="POST" action="/"> <label>姓名：</label> <input type="text" name="name"><br><br> <label>年龄：</label> <input type="text" name="age"><br><br> <button type="submit">提交</button> </form> </body> </html> ``` 3. 在Flask应用程序中定义路由和处理函数。你可以在app.py文件中编写代码，实现将表单数据保存到指定的文件夹数据库中，代码如下： ```python from flask import Flask, render_template, request from flask_wtf import FlaskForm from wtforms import StringField, SubmitField from wtforms.validators import DataRequired from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) app.config['SECRET_KEY'] = 'secretkey' app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///data.db' app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False db = SQLAlchemy(app) class User(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(50), nullable=False) age = db.Column(db.Integer, nullable=False) class UserForm(FlaskForm): name = StringField('姓名', validators=[DataRequired()]) age = StringField('年龄', validators=[DataRequired()]) submit = SubmitField('提交') @app.route('/', methods=['GET', 'POST']) def index(): form = UserForm() if form.validate_on_submit(): name = form.name.data age = form.age.data user = User(name=name, age=age) db.session.add(user) db.session.commit() users = User.query.all() return render_template('index.html', form=form, users=users) if __name__ == '__main__': app.run(debug=True) ``` 在上面的代码中，我们定义了一个`User`类来表示用户信息，它继承自`db.Model`类。我们还定义了一个`UserForm`类来表示表单，它继承自`FlaskForm`类。在`index`函数中，我们通过`form.validate_on_submit()`方法判断表单是否提交，如果是，则将表单数据保存到数据库中。最后，我们使用`render_template`函数将HTML页面渲染出来，并将保存在数据库中的用户信息传递给页面，以便显示出来。 4. 启动Flask应用程序。你可以在命令行中进入到app.py文件所在的目录，然后执行以下命令启动应用程序： ``` python app.py ``` 5. 在浏览器中访问应用程序。你可以在浏览器中输入"http://localhost:5000"来访问应用程序，然后在页面中输入数据并提交，数据将会保存到指定的文件夹数据库中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值