Flask+VSCode环境搭建

背景

下一次的作业将用到flask,所以这一篇文章先不介绍作业了,由于我使用的编辑器是vscode,所以本篇文章就介绍一下flask + vscode环境的搭建

环境搭建
  1. 安装vscode 及 python:网上教程很多也很简单,大家自行百度就可以了
  2. 创建python虚拟环境
    1. 创建一个空文件夹,名为 FlaskStudy
    2. vscode:File -> Open Folder...,选择上面创建的文件夹
    3. vscode: Terminal -> New Terminal,输入:Python -m venv env 并回车
    4. vscode:左侧的资源管理器 - FlaskStudy 文件夹产生 env 文件夹
  3. 选择Python虚拟环境解释器
    1. vscode: View -> Command Palette... 
    2. 输入:>Python:Select Interpreter
    3. 选择带有('env':venv)的解释器,
    4. 上面操作成功后,会在vscode的右下角显示出解释器的信息,如下图所示
  4. 安装Flask
    1. vscode: Terminal -> New Terminal,输入:pip install flask ,回车
    2. vscode:终端中显示Successfully 表示安装成功
    3. 备注:实际安装的时候,由于网络的原因可能会报错,如果出现这样的情况,多试几次
  5. 创建文件进行测试
    1. 在FlaskStudy文件夹下面创建一个app.py文件,输入如下代码:
    2. from flask import Flask
      
      app = Flask(__name__)
      @app.route('/')
      def home():
          return "Hello, World!"
      
      if __name__ == '__main__':
          app.debug = True      
          app.run() 
    3. 点击运行按钮,如果出现下图 3 中的情况,就可以在浏览器中输入:http://127.0.0.1:5000/
    4. 如果浏览器中出现"Hello,World!",则表示环境配置成功了。
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
搭建聊天功能需要以下步骤: 1. 安装 Flask 和 MySQL 首先,需要安装 Flask 和 MySQL,可以使用 pip 命令进行安装: ``` pip install Flask pip install mysql-connector-python ``` 2. 创建数据库 使用 MySQL 创建一个名为 chat 的数据库,然后创建 messages 表,用于存储聊天记录: ```sql CREATE DATABASE chat; USE chat; CREATE TABLE messages ( id INT AUTO_INCREMENT PRIMARY KEY, sender VARCHAR(255) NOT NULL, receiver VARCHAR(255) NOT NULL, message TEXT NOT NULL, timestamp TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ); ``` 3. 编写 Flask 应用程序 创建一个名为 app.py 的 Python 文件,编写以下代码: ```python from flask import Flask, render_template, request import mysql.connector app = Flask(__name__) db = mysql.connector.connect( host="localhost", user="root", password="", database="chat" ) @app.route("/") def index(): return render_template("index.html") @app.route("/send_message", methods=["POST"]) def send_message(): sender = request.form["sender"] receiver = request.form["receiver"] message = request.form["message"] cursor = db.cursor() cursor.execute("INSERT INTO messages (sender, receiver, message) VALUES (%s, %s, %s)", (sender, receiver, message)) db.commit() return "" @app.route("/get_messages") def get_messages(): sender = request.args.get("sender") receiver = request.args.get("receiver") cursor = db.cursor() cursor.execute("SELECT * FROM messages WHERE sender = %s AND receiver = %s OR sender = %s AND receiver = %s ORDER BY timestamp ASC", (sender, receiver, receiver, sender)) messages = cursor.fetchall() return {"messages": messages} if __name__ == "__main__": app.run(debug=True) ``` 4. 编写 HTML 和 JavaScript 创建一个名为 index.html 的文件,编写以下代码: ```html <!DOCTYPE html> <html> <head> <title>Chat</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>Chat</h1> <form> <label>Sender:</label> <input type="text" id="sender"><br> <label>Receiver:</label> <input type="text" id="receiver"><br> <label>Message:</label> <input type="text" id="message"><br> <button type="button" onclick="send_message()">Send</button> </form> <div id="messages"></div> <script> function send_message() { var sender = $("#sender").val(); var receiver = $("#receiver").val(); var message = $("#message").val(); $.post("/send_message", {"sender": sender, "receiver": receiver, "message": message}, function() { $("#message").val(""); }); } setInterval(function() { var sender = $("#sender").val(); var receiver = $("#receiver").val(); $.get("/get_messages", {"sender": sender, "receiver": receiver}, function(response) { var messages = response["messages"]; var html = ""; for (var i = 0; i < messages.length; i++) { var message = messages[i]; html += "<p>" + message[1] + ": " + message[3] + "</p>"; } $("#messages").html(html); }); }, 1000); </script> </body> </html> ``` 这个 HTML 文件包含一个表单,用于发送消息,以及一个 DIV,用于显示消息。JavaScript 代码使用 jQuery 发送 POST 请求以及定时 GET 请求,更新消息列表。 5. 运行应用程序 在终端运行以下命令启动 Flask 应用程序: ``` python app.py ``` 在浏览器访问 http://localhost:5000,即可看到聊天界面。在 Sender 和 Receiver 输入框输入用户名,然后在 Message 输入框输入消息,点击 Send 按钮即可发送消息。所有的消息将会存储到 MySQL 数据库,并且在聊天界面实时显示。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值