快捷導(dǎo)航

FastApi+Vue+LayUI實(shí)現(xiàn)前后端分離的示例代碼

更新時(shí)間：2021年11月17日 15:57:45 作者：Python研究所

本文主要介紹了FastApi+Vue+LayUI實(shí)現(xiàn)前后端分離的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

在前面的Api開(kāi)發(fā)中，我們使用FastApi已經(jīng)可以很好的實(shí)現(xiàn)。但是實(shí)際使用中，我們通常建議前后端項(xiàng)目分離。今天我們就使用FastApi+Vue+LayUI做一個(gè)前后端分離的Demo。

項(xiàng)目設(shè)計(jì)

后端

后端我們采用FastApi在新的test視圖中，定義一個(gè)路由，并將其注冊(cè)到app中，并且在test視圖中定義一個(gè)接口，實(shí)現(xiàn)模擬從數(shù)據(jù)庫(kù)讀取數(shù)據(jù)供前端調(diào)用渲染。
代碼

test.py

from fastapi import FastAPI,Depends,Header,HTTPException,APIRouter
from fastapi.param_functions import Body
from starlette.requests import Request
from starlette.templating import Jinja2Templates
from starlette import status
import uvicorn
from deta import Deta
from fastapi.responses import StreamingResponse
from fastapi.responses import JSONResponse

# 實(shí)例化路由器
router = APIRouter()
templates = Jinja2Templates('templates')

# 注意，視圖這里使用router來(lái)聲明請(qǐng)求方式&URI
@router.get('/info')
def user_list():
    # vue的響應(yīng)數(shù)據(jù)
    items = [
        {'id':'1','name':'phyger'},
        {'id':'2','name':'fly'},
        {'id':'3','name':'enheng'},
        ]
    return JSONResponse(content=items)

@router.get('/')
def welcome():
    return "這里是測(cè)試路由"

'''
實(shí)際上，這里的home.html也是需要前端服務(wù)去向用戶渲染的，
但是我們?yōu)榱朔奖阊菔?，未啟?dòng)前端服務(wù)器，直接將前端代碼寫(xiě)在了home.html中，
實(shí)際上，當(dāng)用戶請(qǐng)求/check的時(shí)候，前端代碼會(huì)去請(qǐng)求/info接口獲取數(shù)據(jù)，
從而實(shí)現(xiàn)前端頁(yè)面的數(shù)據(jù)渲染。
'''

@router.get('/check')
def home(request:Request):
    return templates.TemplateResponse(name='home.html',context={'request':request,})

前端

前端我們直接導(dǎo)入Vue、LayUI、Axios的JS和CSS的CDN資源，在Vue實(shí)例的mount階段，使用axios調(diào)用后端接口拿到數(shù)據(jù)，使用LayUI的樣式對(duì)table元素進(jìn)行美化。
代碼

<!DOCTYPE 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.0">
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入 layui.css -->
    <link rel="stylesheet"  rel="external nofollow" />

    <!-- 引入 layui.js -->
    <script src="https://www.layuicdn.com/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <title>Home</title>
</head>
<body>
    <div id="app">
        <table class="layui-table">

            <tr v-for="p in infos">
                <td>[[ p.id ]]</td>
                <td>[[ p.name ]]</td>
            </tr>

        </table>
    </div>
    <table id="test" class="layui-table"></table>


<script type="text/javascript">
    const Vapp = Vue.createApp({
        data() {
            return {
                infos: [{id:1,name:'phyger'}],
                info: "hello vue..."
            }
        },
        mounted() {
            this.showinfo();
        },
        methods: {
            showinfo(){
                axios.get('/test/info')
                .then(response=>{
                    this.infos=response.data;
                    console.log(response);
                    console.log(this.infos);

                })
                ,err=>{
                    console.log(err);
                };
            },
        },
    })
    Vapp.config.compilerOptions.delimiters = ['[[', ']]']
    Vapp.mount('#app')
</script>
</body>

</html>

運(yùn)行項(xiàng)目

啟動(dòng) FastApi 后端服務(wù)器，訪問(wèn) /test/check 接口。

Q&A

Q：為什么在請(qǐng)求/info 接口總會(huì)出現(xiàn)一個(gè) Temporary Redirect 重定向呢？

A：原因是因?yàn)槲覀冊(cè)?FastApi 接口定義的時(shí)候，uri 的格式不規(guī)范導(dǎo)致，uri 的結(jié)尾不需要/，如果你接口增加了/，我們使用瀏覽器訪問(wèn) uri，瀏覽器會(huì)忽略結(jié)尾的/，F(xiàn)astApi 會(huì)在內(nèi)部進(jìn)行查重定向，將瀏覽器不帶/的請(qǐng)求重定向到我們定義的帶/的視圖函數(shù)上。

到此這篇關(guān)于FastApi+Vue+LayUI實(shí)現(xiàn)前后端分離的示例代碼的文章就介紹到這了,更多相關(guān)FastApi+Vue+LayUI 前后端分離內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: