FastAPI学习(六)——bootstrap前端框架和static静态文件路径的使用

文章目录

      • 目录结构:
      • post_test_5.py:
      • index.html:
      • signin.html
      • 注意:
      • 完整代码:

(B站学习网址 https://www.bilibili.com/video/av93282315)

目录结构:

FastAPI学习(六)——bootstrap前端框架和static静态文件路径的使用_第1张图片
上代码:

post_test_5.py:

# -*- coding: UTF-8 -*-
from fastapi import FastAPI, Form
from starlette.requests import Request
from starlette.staticfiles import StaticFiles
from starlette.templating import Jinja2Templates

app = FastAPI()
templates = Jinja2Templates(directory="templates")
app.mount('/static', StaticFiles(directory='static'), name='static')


@app.post("/user/")
async def files(
                    request:           Request,
                    username: str    = Form(...),
                    password: str    = Form(...),
                ):
    print('username', username)
    print('password', password)
    return templates.TemplateResponse(
        'index.html', 
        {
            'request':  request,
            'username': username,
        }
                                        )


@app.get("/")
async def main(request: Request):
    return templates.TemplateResponse('signin.html', {'request': request})



if __name__ == '__main__':
    import uvicorn
    uvicorn.run(app, host="127.0.0.1", port=8000)

index.html:


<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="{{ url_for('static', path='/imgs/favicon.ico') }}">

    <title>Jumbotron Template for Bootstraptitle>

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


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

  head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigationspan>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
          button>
          <a class="navbar-brand" href="#">Project namea>
        div>
        
      div>
    nav>

    
    <div class="jumbotron">
      <div class="container">
        <h1>Hello, {{ username }}h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »a>p>
      div>
    div>

    <div class="container">
      
      <div class="row">
        <div class="col-md-4">
          <h2>Headingh2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. p>
          <p><a class="btn btn-default" href="#" role="button">View details »a>p>
        div>
        <div class="col-md-4">
          <h2>Headingh2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. p>
          <p><a class="btn btn-default" href="#" role="button">View details »a>p>
       div>
        <div class="col-md-4">
          <h2>Headingh2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.p>
          <p><a class="btn btn-default" href="#" role="button">View details »a>p>
        div>
      div>

      <hr>

      <footer>
        <p>© 2016 Company, Inc.p>
      footer>
    div> 


    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">script>
    <script>window.jQuery || document.write('
                    
                    

你可能感兴趣的:(FastAPI)