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

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>
            <input type="text" placeholder="请输入长度为5的用户名" name = "username" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" >
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" name="password" class="form-control" id="exampleInputPassword1">
            <small id="emailHelp" class="form-text text-muted">We'll never share your password with anyone else.</small>
        </div>
         <div class="form-group">
            <label for="exampleInputPassword1">Age</label>
            <input type="text" name="age" class="form-control" id="exampleInputPassword1">
        </div>
            <button type="submit" class="btn btn-primary btn-block">Submit</button>
        </form>
  </body>
</html>

result.html:
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <title>结果</title>
    <script  src="{{ url_for('static',filename = 'js/p5.js') }}"></script>
    <script  src="{{ url_for('static',filename = 'js/circle.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename = 'css/circle.css') }}">
</head>
<body>
     <table class="table">
         <thead class="thead-light">
            <tr>
               <th scope="col">Id</th>
               <th scope="col">Name</th>
               <th scope="col">Age</th>
            </tr>
         </thead>

         <tbody>
            {% for student in people %}
               <tr>
                  <td>{{ student.id }}</td>
                  <td>{{ student.username }}</td>
                  <td>{{ student.age }}</td>
               </tr>
            {% endfor %}
         </tbody>
      </table>
    </body>
</html>

第四步:后端实现存储数据库

auth.py:

from flask import Blueprint, render_template, request, redirect, url_for
from werkzeug.security import generate_password_hash
from wtforms import form
from exts import db
from models import User
from .froms import loginForm

bp = Blueprint("auth", __name__, url_prefix="/auth")

@bp.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'GET':
        return render_template('index.html')
    else:
        username = request.form.get('username')
        password = request.form.get('password')
        age = request.form.get('age')
        print("username", username)
        user = User(username=username, password=generate_password_hash(password), age=age)
        db.session.add(user)
        db.session.commit()
        return redirect(url_for("auth.result"))


@bp.route('/result', methods=['GET', 'POST'])
def result():  # put application's code here
    people = User.query.all()
    print(people)
    return render_template('result.html', people=people)

其中最关键的是:

user = User(username=username, password=generate_password_hash(password), age=age)
        db.session.add(user)
        db.session.commit()

实现了数据的存储到数据库

然后查询数据库的所有内容转发到新的页面

people = User.query.all()
    print(people)
    return render_template('result.html', people=people)

数据库的存放情况:

请添加图片描述

整体实现需要的代码文件:

github: https://github.com/jinyuyuu/p5js_flask.git
注意 git文件没有额外的migrations,你需要用三件套迁移一下数据库
1、auth.py(上面有)
2、circle.css:

html, body {
  margin: 20px;
  padding: 4px;

}
canvas {
    display: block;
    margin: auto;
    width: 40%;
    /*border: 3px solid #73AD21;*/
}

3、circle.js:

let angles = [30, 10, 45, 35, 60, 38, 75, 67];

function setup() {
  createCanvas(720, 400);
  noStroke();
  noLoop(); // 执行一次之后停止
}

function draw() {
  background(100);
  pieChart(300, angles);
}

function pieChart(diameter, data) {
  let lastAngle = 0;
  for (let i = 0; i < data.length; i++) {
    let gray = map(i, 0, data.length, 0, 255);
    fill(gray);
    arc(
      width / 2,
      height / 2,
      diameter,
      diameter,
      lastAngle,
      lastAngle + radians(angles[i])
    );
    lastAngle += radians(angles[i]);
  }
}

4、p5.js下载地址:下载程序库里面有

5、index.html(上面有)
6、result.html(上面有)
7、config.py

HOSTNAME = '127.0.0.1'
PORT     = '3306'
DATABASE = 'student'
USERNAME = 'root'
PASSWORD = 'root'
DB_URI = 'mysql+pymysql://{}:{}@{}:{}/{}?charset=utf8'.format(USERNAME,PASSWORD,HOSTNAME,PORT,DATABASE)
SQLALCHEMY_DATABASE_URI = DB_URI

8、models.py

from exts import db


class User(db.Model):
    __tablename__ = "user"
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    username = db.Column(db.String(100))
    password = db.Column(db.String(400))
    age = db.Column(db.Integer())

    def __repr__(self):
        return f'<User {self.id}>'

9、exts.py

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()
  • 3
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为你提供一个简单的实现思路。 首先,我们需要在数据库中存储每个文章/帖子的点赞数量,可以在文章表中添加一个字段来存储这个数据。假设我们的文章表名为 `articles`,点赞数量字段名为 `likes`。 在前端页面中,我们需要为每篇文章/帖子添加一个点赞按钮,点击按钮后通过 AJAX 请求向后端发送点赞请求。我们可以在路由中添加一个处理点赞请求的函数,示例代码如下: ```python from flask import Flask, request, jsonify from flask_mysqldb import MySQL app = Flask(__name__) app.config['MYSQL_HOST'] = 'localhost' app.config['MYSQL_USER'] = 'root' app.config['MYSQL_PASSWORD'] = 'password' app.config['MYSQL_DB'] = 'database_name' mysql = MySQL(app) @app.route('/like', methods=['POST']) def like(): article_id = request.form['article_id'] cur = mysql.connection.cursor() cur.execute("UPDATE articles SET likes = likes + 1 WHERE id = %s", (article_id,)) mysql.connection.commit() cur.close() return jsonify({'status': 'success'}) ``` 这个路由接收一个 POST 请求,其中包含一个名为 `article_id` 的表单字段,表示用户点赞的文章/帖子 ID。在处理请求时,我们使用 MySQLDB 库执行一个 SQL 更新语句,将对应文章/帖子的点赞数量加一。最后返回一个 JSON 格式的响应,表示操作成功。 在前端页面中,我们可以通过 jQuery 等库来发送 AJAX 请求,并在请求成功后更新点赞数量的显示。示例代码如下: ```html <!-- 假设文章 ID 为 1 --> <div class="article"> <h2>这是一篇文章</h2> <p>文章内容</p> <span class="likes">0</span> 个人赞了这篇文章 <button class="like-button" data-article-id="1">点赞</button> </div> <script> $(function() { $('.like-button').click(function() { $.post('/like', {'article_id': $(this).data('article-id')}, function(data) { if (data.status == 'success') { var likes = parseInt($('.likes').text()); $('.likes').text(likes + 1); } else { alert('点赞失败'); } }); }); }); </script> ``` 这段代码中,我们为点赞按钮添加了一个自定义属性 `data-article-id`,表示该按钮对应的文章/帖子 ID。当用户点击按钮时,我们通过 jQuery 的 `$.post` 方法向 `/like` 路由发送一个包含 `article_id` 字段的 POST 请求。在请求成功后,我们解析响应中的 `status` 字段,如果值为 `success`,则说明点赞成功,此时我们更新点赞数量的显示。否则,说明点赞失败,我们弹出一个提示框告知用户。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值