FastApi-11-模板渲染

简介: FastApi-11-模板渲染

什么是模板


简单理解,模板就是 web 后端向前端发送的 html 模型。


在前面的学习中,我们已经知道了关于 FastApi 的请求和参数的使用方法。但是我们在实际的 web 开发中,都会以网页的形式展现。那么在 FastApi 中我们也可以借助第三方的模板引擎来实现后端对网页模板的渲染。


注:大家都知道目前 web 项目大都采用比较主流的前后端分离模式。但是为了学习方便,我们先采用后端渲染的方式。


FastApi 的模板详解


关于引擎


FastApi 常用 Jinja2 模板引擎实现页面渲染。


虽然 FastApistarlette 已经封装了 Jinja2 相关的类对象,但是你在使用中,仍然需要安装 jinja2 引擎。


这个地方很奇葩


普通渲染


项目结构


网络异常,图片无法展示
|


使用引擎


from fastapi import FastAPI
# 导入Request上下文对象,用来在前后台之间传递参数
from starlette.requests import Request
# 导入jinja2模板引擎对象,用于后续使用
from starlette.templating import Jinja2Templates
app=FastAPI()
# 实例化一个模板引擎对象,指定模板所在路径
templates=Jinja2Templates(directory='templates')
@app.get('/index/{info}')
# 在视图函数中传入request对象,用于在模板对象中传递上下文(同时接收路径参数info,将其传递到上下文中)
async def index(request:Request,info:str):
    # 返回一个模板对象,同时使用上下文中的数据对模板进行渲染
    return templates.TemplateResponse(name='index.html',context={'request':request,'info':info})
if __name__ == '__main__':
    import uvicorn
    uvicorn.run(app='main:app',host='127.0.0.1',port=8765,reload=True)
复制代码


index.html 内容


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FastApi</title>
</head>
<body>
    <h1>Index</h1>
    <h1>INFO:{{ info }}</h1>
</body>
</html>
复制代码


浏览器中的效果


http://127.0.0.1:8765/index/phyger


网络异常,图片无法展示
|


如上,我们简单的展示了如何使用 FastApi 进行模板的渲染。


循环渲染


视图代码


我们将循环渲染的视图放到了 FastApiRouter(路由)中。


@router.get('/indexs')
# 在视图函数中传入request对象,用于在模板对象中传递上下文(同时接收路径参数info,将其传递到上下文中)
async def index(request:Request):
    # 定义一个列表
    info = ["phyger","python","go"]
    # 返回一个模板对象,同时使用上下文中的数据对模板进行渲染
    return templates.TemplateResponse(name='index.html',context={'request':request,'info':info})
复制代码


页面代码


<body>
    <h1>Info</h1>
    <b>| 后面的reverse是用反转顺序的。</b>
    <ol>
        {% for msg in info|reverse  %}
            <li>{{ msg }}</li>
        {% else %}
            <li>沒有任何值</li>
        {% endfor %}
    </ol>
    <h1>{{ info }}</h1>
</body>
复制代码


页面效果


网络异常,图片无法展示
|


由于我们在 jinja 模板中对循环结果进行了反转,所以列表的顺序和原始的列表数据是相反的。


感谢您的阅读,别忘了关注,点赞,评论,转发四连哟!

相关文章
|
7月前
|
Python
python web框架fastapi模板渲染--Jinja2使用技巧总结
python web框架fastapi模板渲染--Jinja2使用技巧总结
366 2
|
NoSQL Redis 数据库
FastAPI(六十七)实战开发《在线课程学习系统》接口开发--用户登陆接口开发
FastAPI(六十七)实战开发《在线课程学习系统》接口开发--用户登陆接口开发
|
NoSQL 测试技术 Redis
FastAPI(八十四)实战开发《在线课程学习系统》--接口测试(下)
FastAPI(八十四)实战开发《在线课程学习系统》--接口测试(下)
FastAPI(八十四)实战开发《在线课程学习系统》--接口测试(下)
|
存储 测试技术 数据安全/隐私保护
FastAPI(八十三)实战开发《在线课程学习系统》--注册接口单元测试
FastAPI(八十三)实战开发《在线课程学习系统》--注册接口单元测试
FastAPI(八十三)实战开发《在线课程学习系统》--注册接口单元测试
|
测试技术 数据安全/隐私保护
FastAPI(八十四)实战开发《在线课程学习系统》--接口测试(上)
FastAPI(八十四)实战开发《在线课程学习系统》--接口测试(上)
FastAPI(八十二)实战开发《在线课程学习系统》接口开发-- 课程上架下架
FastAPI(八十二)实战开发《在线课程学习系统》接口开发-- 课程上架下架
|
NoSQL Redis 数据库
FastAPI(八十一)实战开发《在线课程学习系统》接口开发-- 推荐课程列表与课程点赞
FastAPI(八十一)实战开发《在线课程学习系统》接口开发-- 推荐课程列表与课程点赞
FastAPI(八十)实战开发《在线课程学习系统》接口开发-- 课程列表
FastAPI(八十)实战开发《在线课程学习系统》接口开发-- 课程列表
FastAPI(七十九)实战开发《在线课程学习系统》接口开发-- 加入课程和退出课程
FastAPI(七十九)实战开发《在线课程学习系统》接口开发-- 加入课程和退出课程
FastAPI(七十八)实战开发《在线课程学习系统》接口开发-- 评论
FastAPI(七十八)实战开发《在线课程学习系统》接口开发-- 评论