FastAPI jinja2前后端不分离使用Vue+elementUI

FastAPI jinja2前后端不分离使用Vue+elementUI

最近写了一个小站点,本来想用前后端分离写的,但是感觉没必要,小站点流量估计也不大,就直接用模版写就ok了

还有就是用Vue脚手架的话,是SPA单页面,很不利于SEO(部分言论说百度爬虫会抓取js渲染后的页面)。

但是我还是想用Vue,把Vue当成Jquery用,还要加上ElementUI一起。尤大也说过国外很多把Vue代替JQ的,毕竟数据驱动实在太舒服了。 参考知乎 https://www.zhihu.com/question/51949678 参考知乎 https://www.zhihu.com/question/51949678

修改语法冲突

参考链接:

我一开始本来是想修改Vue的模版语法的

var app = new Vue({
  el: "#app",
  delimiters: ["[[", "]]"],
  data: {
    message: "Hello Vue!"
  }
})

但是这样做 就有些问题, 我使用ElementUI就有问题,所以不能这样做。 直接修改jinja2的模版语法,网上都是flask的资料。

from fastapi.templating import Jinja2Templates

router = APIRouter()
templates = Jinja2Templates(directory="templates")

# 避免和vue语法冲突 修改jinja2模版语法标签
templates.env.block_start_string = '(%'  # 修改块开始符号
templates.env.block_end_string = '%)'  # 修改块结束符号
templates.env.variable_start_string = '(('  # 修改变量开始符号
templates.env.variable_end_string = '))'  # 修改变量结束符号
templates.env.comment_start_string = '(#'  # 修改注释开始符号
templates.env.comment_end_string = '#)'  # 修改注释结束符号

@router.get("/")
async def index_view(request: Request):
    return templates.TemplateResponse(
        "index.html",
        {
            "request": request,
            "id": 666,
        }
    )

这样改就好了,可以愉快的使用Vue+ElementUI + jinja2了,又想起当初 辉哥知乎上送我的 《Flask Web开发实战》 在这里插入图片描述

时间过得好快,一眨眼,而我还是那个小菜鸡。

题外话 Vue 3.0 终于来了

https://github.com/vuejs/vue-next/releases/tag/v3.0.0

One Piece 学起来吧,又不能假装看不见!

结语

现在FastAPI很多资料都不全,但是可以仿照着搜Flask的资料。


文章作者: 王小右
版权声明: 咳咳想白嫖文章?本文章著作权归作者所有,任何形式的转载都请注明出处。 https://www.charmcode.cn !
  目录