FastAPI学习以及用html互联

最新推荐文章于 2024-06-17 17:39:51 发布
最新推荐文章于 2024-06-17 17:39:51 发布
阅读量868 收藏 1
点赞数 1
文章标签： 笔记 python fastapi
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37950513/article/details/132241475
版权

fastapi是一个运行在python环境的非常强的api接口

先pip install “fastapi[all]"来拉取fastapi的库

我学的基本上是为了和前端互通的：

对了，想让虚拟机来运行fastapi要用

uvicorn python文件名:fastapi实例对象名 --reload --host 0.0.0.0 --port 8000
--reload是为了动态修改，--host是绑定的ip，这里设置为默认路由是为了让所有网络都能访问，--port是绑定的端口

服务端的main.py

我使用的虚拟机作为存放数据库的服务端，main.py文件也存在语虚拟机上，下面的html是在我的物理机上的

如下代码，这是main.py,运行在服务端，使用uvicorn main:app --reload --host 0.0.0.0来运行 

from fastapi import FastAPI, Form
from fastapi.middleware.cors import CORSMiddleware
from pymysql import Connection

app = FastAPI()
//防止cors请求失败
app.add_middleware(
    CORSMiddleware,
    allow_origins="*",
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


@app.post('/write_user/')
def run(username: str = Form(), password: str = Form(), password_again: str = Form()):
    conn = Connection(
        host="192.168.253.128",
        port=3306,
        user="root",
        password="123"
    )
    conn.select_db("user_info")
    cursor = conn.cursor()
    cursor.execute("insert into base_info values (\'" + username + "\',\'" + password + "\')")
    conn.commit()
    conn.close()
    return "OK"


@app.get('/user_info/')
def run():
    conn = Connection(
        host="192.168.253.128",
        port=3306,
        user="root",
        password="123"
    )
    conn.select_db("user_info")
    cursor = conn.cursor()
    cursor.execute("select * from base_info")
    result = cursor.fetchall()
    return result

接受api的数据

下面是用javascript的XMLHttpReqeust来接收从想要网址传来发的数据

1.异步get到API的响应

let xhr = new XMLHttpRequest()
xhr.open('GET', 'http://192.168.253.128:8000/user_info', true)
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let response = JSON.parse(xhr.responseText)
    console.log(response)
  }
}
xhr.send()

这里我的url写的是http://192.168.253.128:8000/user_info，是因为我的虚拟机的IP地址是这个、

从onreadystatechange的外部进行数据处理的办法

这个javascrpt代码无法将接收到的数据立即传递出，导致无法从onreadystatechange外面获得网页的值，要使用如下的javascript代码

//用于获取数据的函数，url是我们所要访问的网址
function getData(url, callback) {
  let xhr = new XMLHttpRequest()
  xhr.open('GET', url, true)
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200)
      callback(JSON.parse(xhr.responseText))
    else
      callback(null)
  }
  xhr.send()
}

//用于处理数据的函数，我这里是模拟登录
function handleResponse(response) {
  if(response)
  {
    let username=document.getElementById("username").value
    let password=document.getElementById("password").value
    for(let user in response)
      {
        if(username===response[user][0])
          if(password===response[user][1])
          {
            alert('登陆成功')
            return
          }
          else {
            alert('密码错误')
            return
          }
      }
    alert('无该用户')
  }
  else
    return null
}
//登陆的函数，调用getData函数，并且callback的值是处理回复的函数名
function Login() {
  getData("http://192.168.253.128:8000/user_info",handleResponse)
}

2.同步get到API的响应

向上面这样写是异步获取服务端的数据，比较麻烦

可以使用如下来同步获取，不等待服务器响应

主要不同是将xhr.open('GET', url, true)中的true改为了false，方便了许多

let xhr = new XMLHttpRequest()
xhr.open('GET', "http://192.168.253.128:8000/user_info/", false)
xhr.send(null)
let userData = JSON.parse(xhr.responseText)

function Login() {
  let username = document.getElementById("username").value
  let password = document.getElementById("password").value
  for (let user in userData) {
    if (username === userData[user][0])
      if (password === userData[user][1]) {
        alert('登陆成功')
        return
      } else {
        alert('密码错误')
        return
      }
  }
  alert('用户不存在')
}

这是登陆界面的js代码

下面是注册界面的js代码（异步完成的话，服务端的数据库的base_info必须要设置主键，否则会重复插入）

这是异步，和登陆界面的异步十分相似，只是修改了handleReponse部分的代码

function Register() {
  getData("http://192.168.253.128:8000/user_info", handleResponse)
}

function getData(url, callback) {
  let xhr = new XMLHttpRequest()
  xhr.open('GET', url, true)
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(JSON.parse(xhr.responseText))
    } else
      callback(null)
  }
  xhr.send(null)
}

function handleResponse(response) {
  if (response) {
    let username = document.getElementById("username").value
    let password = document.getElementById("password").value
    let password_again = document.getElementById("password_again").value
    for (let user in response)
      if (username === response[user][0]) {
        alert('用户已存在')
        return
      }
    if (password !== password_again) {
      alert("两次输入的密码不一致")
      return
    }
    alert("注册成功")
  }
}

这是同步的，和登陆的很像，改了一下函数而已

let xhr = new XMLHttpRequest()
xhr.open('GET', "http://192.168.253.128:8000/user_info/", false)
xhr.send(null)
let userData = JSON.parse(xhr.responseText)

function Register() {
  let username = document.getElementById("username").value
  let password = document.getElementById("password").value
  let password_again = document.getElementById("password_again").value
  for (let user in userData)
    if (username === userData[user][0]) {
      alert('用户已存在')
      return false
    }
  if (password !== password_again) {
    alert("两次输入的密码不一致")
    return false
  }
  alert("注册成功")
  return true
}

这是完整代码

异步：

1.登录
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script>
        function Login() {
            getData("http://192.168.253.128:8000/user_info", handleResponse)
        }

        function getData(url, callback) {
            let xhr = new XMLHttpRequest()
            xhr.open('GET', url, true)
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    callback(JSON.parse(xhr.responseText))
                } else
                    callback(null)
            }
            xhr.send(null)
        }

        function handleResponse(response) {
            if (response) {
                let username = document.getElementById("username").value
                let password = document.getElementById("password").value
                for (let user in response) {
                    if (username === response[user][0])
                        if (password === response[user][1]) {
                            alert('登陆成功')
                            return
                        } else {
                            alert('密码错误')
                            return
                        }
                }
                alert('用户不存在')
            } else
                return null
        }
        
    </script>
</head>
<body>
<form onclick="return false">
    <input type="text" name="username" id="username"><br>
    <input type="password" name="password" id="password"><br>
    <input type="submit" value="登录" onclick="Login()">
</form>
</body>
</html>
2.注册
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<script>
    function Register() {
        getData("http://192.168.253.128:8000/user_info", handleResponse)
    }

    function getData(url, callback) {
        let xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                callback(JSON.parse(xhr.responseText))
            } else
                callback(null)
        }
        xhr.send(null)
    }

    function handleResponse(response) {
        if (response) {
            let username = document.getElementById("username").value
            let password = document.getElementById("password").value
            let password_again = document.getElementById("password_again").value
            for (let user in response)
                if (username === response[user][0]) {
                    alert('用户已存在')
                    return
                }
            if (password !== password_again) {
                alert("两次输入的密码不一致")
                return
            }
            alert("注册成功")
        }
    }
</script>
<body>
<iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>
<!--下面form表格的target方法是为了防止跳转-->
<!--这里和同步有区别，同步的提交方法在form标签里，这个在input标签里-->
<form action="http://192.168.253.128:8000/write_user/" method="post" target="nm_iframe">
    <input type="text" name="username" id="username"><br>
    <input type="password" name="password" id="password"><br>
    <input type="password" name="password_again" id="password_again"><br>
    <input type="submit" value="提交" onclick="Register()">
</form>
</body>
</html>
存在问题：无法在数据库不设置主键的情况下使用异步来阻断submit的重复提交

同步

1.登录
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script>
        let xhr = new XMLHttpRequest()
        xhr.open('GET', "http://192.168.253.128:8000/user_info/", false)
        xhr.send(null)
        let userData = JSON.parse(xhr.responseText)

        function Login() {
            let username = document.getElementById("username").value
            let password = document.getElementById("password").value
            for (let user in userData) {
                if (username === userData[user][0])
                    if (password === userData[user][1]) {
                        alert('登陆成功')
                        return
                    } else {
                        alert('密码错误')
                        return
                    }
            }
            alert('用户不存在')
        }
    </script>
</head>
<body>
<form onclick="return false">
    <input type="text" name="username" id="username"><br>
    <input type="password" name="password" id="password"><br>
    <input type="submit" value="登录" onclick="Login()">
</form>
</body>
</html>
2.注册
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<script>
    let xhr = new XMLHttpRequest()
    xhr.open('GET', "http://192.168.253.128:8000/user_info/", false)
    xhr.send(null)
    let userData = JSON.parse(xhr.responseText)

    function Register() {
        let username = document.getElementById("username").value
        let password = document.getElementById("password").value
        let password_again = document.getElementById("password_again").value
        for (let user in userData)
            if (username === userData[user][0]) {
                alert('用户已存在')
                return false
            }
        if (password !== password_again) {
            alert("两次输入的密码不一致")
            return false
        }
        alert("注册成功")
        return true
    }
</script>
<body>
<iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>
<!--下面form表格的target方法是为了防止跳转-->
<!--这里的onsubmit方法是为了防止注册的时候存在用户任然提交，虽然数据库设置主键可以解决，但是这样更好，双重保障嘛，异步我解决不了，麻烦哪位大神帮个忙-->
<form action="http://192.168.253.128:8000/write_user/" method="post" target="nm_iframe" onsubmit="return Register()">
    <input type="text" name="username" id="username"><br>
    <input type="password" name="password" id="password"><br>
    <input type="password" name="password_again" id="password_again"><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

【注意】我这里的数据库只有username和password所以我用了userData[user][0]来代表username，userData[user][1]来代替password

我现在只学了一点点皮毛，这篇博客主要是为了能够让自己记住哒

Ice-Sniper
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
fastapi学习（三）：返回HTML页面
呆萌的代Ma
03-10 8798
fastapi默认返回的是JSONResponse类型，如果需要返回HTML，可以在请求时指定返回的类型： 导包：from fastapi.responses import HTMLResponse 声明：@app.get("/hello", response_class=HTMLResponse) 即可返回HTML类型 示例代码 # -*- coding:utf-8 -*- from fastapi import FastAPI import uvicorn from fastapi.res
FastAPI完全指南：实现高效、安全的Web开发
walkskyer的博客
12-20 3487
在快速发展的互联网时代，高效的Web开发变得尤为重要。Python作为一门广受欢迎的编程语言，其众多Web框架中，FastAPI凭借其出色的性能和易用性，成为了一个炙手可热的选择。FastAPI是一个用于构建API的现代、高性能的Web框架，它基于Python 3.6+的类型提示，提供了快速、直观且易于学习的API开发体验。响应类型FastAPI允许你定义多种响应类型，包括JSON、HTML、纯文本等。
fastapi获取到客户端的真实 IP 地址，使用nginx负载之后无法获取客户端真实IP？
weixin_44308055的博客
06-17 362
项目部署使用nginx配置转发后，会导致获取服务器本身ip、客户端ip都会有异常
FastAPI学习（二）——FastAPI+Jinjia2模板渲染网页（跳转返回渲染页面）
weixin_43813200的博客
07-22 5035
官方文档位置： https://fastapi.tiangolo.com/advanced/templates/ （B站学习网址https://www.bilibili.com/video/av93282315）首先，必须注意的是，FastAPI这个Python Web框架并没有带渲染的网页模板引擎，但是也正因为如此，它可以使用任何网页模板。 官方例子是jinjia2 。 aiofiles是静态网页需要的包特别说明的是，Starlette 是一个轻量级 ASGI 框架/工具包，FastAPI一大特色。然后
FastAPI后端查询数据在前端进行分页展示（html、py文件）
04-23
FastAPI和前端框架LayUImini及mysql之间的交互示范（一、FastAPI后端查询数据在前端进行分页展示)
FastAPI学习-17.其它响应html,文件,视频或其它
qq_27371025的博客
09-17 835
前言 通过我们返回JSON类型的接口会比较多，除了返回JSON格式，还可以响应其它格式的内容 JSONResponse Content-Type会被设置成application/json HTMLResponse Content-Type会被设置成text/html PlainTextResponse Content-Type会被设置成 text/plain ORJS...
fastapi -html docker部署
Greeksilverfir的博客
09-25 272
文章目录前言一、fastapi的docker部署1.生成包2.将文件放入形式如下3.编写dockerfile文件二、html docker部署1.文件目录2.dockfile文件的写入 前言 fastapi html的docker 部署 一、fastapi的docker部署 1.生成包 第一步生成项目所需要安装的包， pycahrm终端运行： pip freeze > requirements.txt 一般而言这种方式会多很多 pytz @ file:///tmp/build/80754af9/
html post请求 渲染,FastAPI框架入门 基本使用, 模版渲染, form表单数据交互, 上传文件, 静态文件配置...
weixin_29405191的博客
07-02 880
安装pip install fastapi[all]pip install unicorn基本使用(不能同时支持，get, post方法等要分开写)from fastapi import FastAPIapp = FastAPI()@app.get('/') # 点get就支持get请求def read_root():return {"hello":'world'}if __name__ == ...
html聊天室API,FastAPI 二（简单的多人聊天室WebSocket）
weixin_34666714的博客
06-10 861
简单的多人聊天室1.复制官网代码并启动一个简单的服务复制现在不需要关注太多，只是熟悉一下FastApi我现在复制并创建了一个名为main.py的文件，内容如下from fastapi import FastAPIfrom starlette.responses import HTMLResponsefrom starlette.websockets import WebSocketapp = Fa...
海康互联平台API文档V1.2
06-11
海康互联平台API文档V1.2 包括http 接口和 移动接口两大部分描述
学习使用免root手机电脑互联工具
09-19
标题中的“学习使用免root手机电脑互联工具”指的是在不获取Android手机root权限的情况下，如何通过特定软件实现手机与电脑之间的交互与连接。这通常是为了方便数据传输、屏幕投屏、远程控制或游戏操作等场景。免...
js如何调用qq互联api实现第三方登录
10-26
主要介绍了js如何调用qq互联api实现第三方登录,需要的朋友可以参考下
网络程序互联学馆-网络学习全平台.zip
最新发布
08-09
互联学馆不仅提供视频课程、在线直播、图文教程等多种学习形式，还设有学习社群、在线问答、项目实践等互动环节，鼓励学员之间以及学员与教师之间的深入交流，共同解决问题，促进知识吸收与应用。平台利用大数据和...
空间互联系统的有限频率范围迭代学习控制
01-12
针对一类包含多个节点的空间互联系统,提出一种有限频率范围内的迭代学习控制算法.首先基于提升技术沿空间节点分布方向将重复运行的多维空间互联系统转换为一类二维等效系统,然后设计迭代学习控制律将被控系统转化为...
FastAPI直接返回html页面,python
Zhang Phil
10-29 1502
FastAPI直接返回html页面。
HTML显示正常的图片部署到FastAPI却无法显示？一文教你轻松解决！
XiaoqiangClub的博客
05-15 101
解决HTML显示正常的图片部署到FastAPI却无法显示的参考方案
fastapi.templating与HTMLResponse
12-06 358
要声明一个模板对象，应将存储html模板的文件夹作为参数提供。在当前工作目录中，我们将创建一个 “templates “目录。我们现在要把这个页面的HTML代码渲染成HTMLResponse。让我们修改一下hello()函数一个简单的网页 “hello.html “来呈现 “Hello World “信息，也被放在 “templates “文件夹中
【Python Fastapi】js上传文件，fastapi处理，js显示回传信息
q742971636的博客
09-22 335
【代码】【Python Fastapi】js上传文件，fastapi处理，js显示回传信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值