python flask p5.js mysql 实现数据库查询并网页显示数据（后附完整代码分享）

YUISOK

已于 2023-06-02 18:28:10 修改

阅读量5.2k

点赞数 6

分类专栏： python 文章标签： python flask 数据库

于 2023-05-25 15:43:08 首次发布

本文链接：https://blog.csdn.net/weixin_45149775/article/details/130866784

版权

tips：不涉及session，是纯简单数据共享

实现步骤：

第一步：搭建框架

首先flask比较灵活建议先搭架子
请添加图片描述
蓝图存放具体后端功能实现，你可以认为是flask的孩子
可以把相关的功能模块规整为同一个主题

⚠️新建的时候不是文件夹！！是python package，名自定义，为了明白是蓝图命名为blueprint
请添加图片描述

static存放css、js、img等文件

templates存放自己的html文件

app.py相当于汇总，做基础绑定

config放的是配置信息，比如数据库
请添加图片描述

exts放的是扩展的插件，比如SQLAlchemy，同时这个文件的意义就在于可以解决解决循环引用的问题
请添加图片描述
models放的是数据库这一个表的具体模型，比如你的用户表

第二步：创建数据库

官方下载链接https://dev.mysql.com/downloads/mysql/
一定要注意下载和自己mac版相一致的

然后用Navicat进行管理
请添加图片描述
然后填完信息点一下Test Connection测试一下
这个密码是你当时安装输过的，如果没改过就是root
忘了也没有关系可以重置密码的

新建好就不用手动创建表啦
使用Flask数据库迁移三部曲
使用前要牢记在app那边进行好绑定
打开pycharm的终端

请添加图片描述

依次输入三条命令：

flask db init 
flask db migrate
flask db upgrade

然后刷新你的数据库请添加图片描述
user表是主要的，另外那个表是迁移带的，告知的是版本号

第三步：设计前端网页

框架用的Bootstrap的组件这边我直接贴代码：
index.html:
网页访问地址：http://127.0.0.1:5000/auth/login
密码是加密了，不是直接明文存放在数据库中的
请添加图片描述

![请添加图片描述](https://img-blog.csdnimg.cn/7ab90ab4ad2342d39e740a51ba2586f6.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      width="device-width,"
      initial-scale="1.0,"
      maximum-scale="1.0,"
      user-scalable="0"
    />
    <title>表单</title>
    <link rel="stylesheet" href="{
    { url_for('static',filename = 'css/circle.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    </head>
  <body>
     <form  method="POST" >
        <div class="form-group">
            <label for="exampleInputEmail1" >User name </label>

最低0.47元/天解锁文章