fastapi+jinja2+js+sqlmodel+ws初学成果备份

在这里插入图片描述

#strart_main.py
from fastapi import FastAPI, Depends,Request,WebSocket
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
from fastapi.responses import HTMLResponse
#from fastapi.requests import Request
from fastapi import HTTPException, Query

from sqlmodel import Session, select
from database import create_db_and_tables, get_session
from models import Book,BookCreate
from models import *


import emoji
import time
import uvicorn


def i():
    num = 1
    while True:
        yield num
        num += 1
y=i()

hd=('name','age','years')                       
#t= time.strftime("%Y/%m/%d  %r",time.localtime())
s= emoji.emojize('Python is :thumbs_up:')

app = FastAPI()


templates = Jinja2Templates('/data/data/com.termux/files/home/testpy/templates')
def configure():
    create_db_and_tables()
    app.mount('/static', StaticFiles(directory='/data/data/com.termux/files/home/testpy/static'), name='static')

@app.get("/")
def home_page(*, session: Session = Depends(get_session), request: Request):
    books = session.exec(select(Book)).all()
    data_all={"request":request,
            "hd":hd,
            "s":s,
            "books":books
            }
    return templates.TemplateResponse("index.html",data_all)


@app.post("/book")
def add_book(*, session: Session = Depends(get_session), request: Request, book: BookCreate) -> BookRead:    
    db_book = Book.from_orm(book)
    data=session.add(db_book)
    session.commit()
    session.refresh(db_book)
    return db_book
    #return templates.TemplateResponse("index.html",{'request':request,'data':data})

@app.websocket("/ws")
async def websocket_endpoint(websocket:WebSocket):
    try:
        #等待socket连接并建立连接
        await websocket.accept()
        while True:
            #获取客服端传回的数据
             data = await websocket.receive_text()
             await websocket.send_text(f"主动发消息给客户端:{data}")
             if data=='1':
                 g='2'
             #if判断客服端发来的数据并处理客户端发来的数据data后重新发送给客户端发
                 await websocket.send_text(f"Message text was:data: {data} g: {g}")
             else:
                 await websocket.send_text(f"不匹配")

    except:
        #客户端连接情况反馈信息
        print('断开连接')
        print('当前连接次数: '+str(next(y)))
        u=time.time()
        d=time.strftime("此连接断开时间  :%Y-%m-%d %H:%M:%S",time.localtime(u))
        print(d)

if __name__=="__main__":
    configure()
    uvicorn.run(app, host="127.0.0.1", port=9999)
else:
    configure()    



<!--index.html-->

<!DOCTYPE html>

<html lang="en-us">
<head
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A website showcasing fastapi and sqlmodel">
    <meta name="author" content="idjotherwise">

    <title>Fastapi+Fastsqlmodel+jinja2+socketserver</title>

    
<link href="{{ url_for('static', path='css/styles.css') }}" rel="stylesheet">
</head>

<body style="text-align: center">
<h1> A super stylish home page </h1>
    <p>
        Really interesting content, full of buzzwords like AI and MACHINE LEARNING!
    </p>

    {% if books %}
    <ul>
        {% for book in books %}
        <li key="{{book.id}}">Title: {{book.title}}, Author: {{book.author}}</li>
        {% endfor %}
    </ul>
    {% endif %}
    

<h1>哈哈</h1>
<!--apache2服务器-->
{% set url = "http://127.0.0.1:8000" %}     
<a href={{url}}>ggg</a>

<a href={{url_for('static', path='html/h.html')}}>ddddd</a>

<img src="{{ url_for('static', path='images/1.png') }}" alt="" width="30" height="24">
    
{% for x in hd %}
<p>{{x}}</p>
{% endfor %}

<p>{{s}}</p>                             

{% set urls = "http://www.baidu.com" %}     
<a href={{urls}}>guuug</a>

<form action="" onsubmit="sendMessage(event)">
<input type="text" id="messageText" autocomplete="off"/>
<button>Send</button>
</form>
<ul id='messages'></ul>

<script>
var ws = new WebSocket("ws://localhost:9999/ws");
        ws.onmessage = function(event) {
                var messages = document.getElementById('messages')
                var message = document.createElement('li')
               var content = document.createTextNode(event.data)
                message.appendChild(content)
                messages.appendChild(message)
            };
            function sendMessage(event) {
                var input = document.getElementById("messageText")
                ws.send(input.value)
                input.value = ''
                event.preventDefault()
            }
</script>



<!--向数据库发送数据js代码-->
 <input type="text" id="name" placeholder="Your name"> 

<input type="email" id="email" placeholder="Email"> 

<!-- Button to send data -->

<button onclick="sendJSON()">Send JSON</button> 


<script>
function sendJSON(){ 

            let result = document.querySelector('.result'); 

            let name = document.querySelector('#name'); 

            let email = document.querySelector('#email');    

            // Creating a XHR object 

            let xhr = new XMLHttpRequest(); 

            let url = "/book/"; 

        
            // open a connection 

            xhr.open("POST", url, true); 

  // Set the request header i.e. which type of content you are sending
            xhr.setRequestHeader("Content-Type", "application/json");
            // Create a state change callback 

            xhr.onreadystatechange = function () { 

                if (xhr.readyState === 4 && xhr.status === 200) { 

		// Print received data from server 

                result.innerHTML = this.responseText; 

                } 

            }; 

  
            // Converting JSON data to string 
           document.getElementById('name')
           document.getElementById('email')
            var data = JSON.stringify({ "title": name.value  ,  "author": email.value }); 

  
            // Sending data with the request 

            xhr.send(data); 

        } 
</script>
</p>

<!--本页面扩展base.html(父文件)的所有(标签,js,cs等所有),可以继承和覆盖父文件属性-->
{% extends "/base.html" %}
<!--本页面包含-->
{% include "/user.html" %}
</body>
</html>
![在这里插入图片描述](https://img-blog.csdnimg.cn/e84fd1091d8f4fe088b89193a027cf81.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNTcwMTAxODg=,size_20,color_FFFFFF,t_70,g_se,x_16)
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用FastAPIJinja2一起创建具有CSS的网站。以下是一些步骤: 1. 首先,确保您已将所需的CSS文件放在正确的位置。例如,您可以将CSS文件放在“static/css”目录中。 2. 在FastAPI应用程序中,使用以下代码来设置Jinja2模板: ```python from fastapi import FastAPI, Request from fastapi.responses import HTMLResponse from fastapi.templating import Jinja2Templates app = FastAPI() templates = Jinja2Templates(directory="templates") ``` 3. 创建一个Jinja2模板,并在其中引用CSS文件。例如,您可以创建一个名为“index.html”的文件,并在其中引用CSS文件: ```html <!DOCTYPE html> <html> <head> <title>FastAPI + Jinja2</title> <link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}"> </head> <body> <h1>FastAPI + Jinja2</h1> <p>Hello, {{ name }}!</p> </body> </html> ``` 4. 在FastAPI应用程序中,创建一个路由方法来呈现Jinja2模板。例如: ```python @app.get("/", response_class=HTMLResponse) async def read_item(request: Request): return templates.TemplateResponse("index.html", {"request": request, "name": "John Doe"}) ``` 在此示例中,我们使用了“TemplateResponse”类来呈现Jinja2模板。我们还将“request”和“name”作为参数传递给模板。 5. 最后,在FastAPI应用程序中,使用以下代码来指定包含CSS文件的目录: ```python app.mount("/static", StaticFiles(directory="static"), name="static") ``` 在此示例中,我们使用“StaticFiles”类来指定包含CSS文件的目录。我们还将此目录挂载到FastAPI应用程序的“/static”路径上。 这样,您就可以在FastAPI应用程序中使用Jinja2模板和CSS文件来创建具有样式的网站了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值