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

最近寫了一個小站點，本來想用前后端分離寫的，但是感覺沒必要，小站點流量估計也不大，就直接用模版寫就ok了

還有就是用Vue腳手架的話，是SPA單頁面，很不利於SEO(部分言論說百度爬蟲會抓取js渲染后的頁面)。

但是我還是想用Vue，把Vue當成Jquery用，還要加上ElementUI一起。尤大也說過國外很多把Vue代替JQ的，畢竟數據驅動實在太舒服了。

參考知乎 https://www.zhihu.com/question/51949678

修改語法沖突

參考鏈接：

• 李輝個人博客 http://greyli.com/jinja2-and-js-template/
• 李輝jinja2語法 http://greyli.com/flask-template-engine-jinja2-syntax-introduction/

我一開始本來是想修改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的資料。