溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下FastApi+Vue+LayUI如何實(shí)現(xiàn)前后端分離，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
在前面的Api開發(fā)中，我們使用FastApi已經(jīng)可以很好的實(shí)現(xiàn)。但是實(shí)際使用中，我們通常建議前后端項(xiàng)目分離。今天我們就使用FastApi+Vue+LayUI做一個前后端分離的Demo。
后端我們采用FastApi在新的test視圖中，定義一個路由，并將其注冊到app中，并且在test視圖中定義一個接口，實(shí)現(xiàn)模擬從數(shù)據(jù)庫讀取數(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來聲明請求方式&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 "這里是測試路由"
'''
實(shí)際上，這里的home.html也是需要前端服務(wù)去向用戶渲染的，
但是我們?yōu)榱朔奖阊菔?，未啟動前?a title="服務(wù)器" target="_blank" href="http://kemok4.com/">服務(wù)器，直接將前端代碼寫在了home.html中，
實(shí)際上，當(dāng)用戶請求/check的時候，前端代碼會去請求/info接口獲取數(shù)據(jù)，
從而實(shí)現(xiàn)前端頁面的數(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的樣式對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" href="https://www.layuicdn.com/layui/css/layui.css" 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>啟動 FastApi 后端服務(wù)器，訪問 /test/check 接口。
Q：為什么在請求/info 接口總會出現(xiàn)一個 Temporary Redirect 重定向呢？
A：原因是因?yàn)槲覀冊?FastApi 接口定義的時候，uri 的格式不規(guī)范導(dǎo)致，uri 的結(jié)尾不需要/，如果你接口增加了/，我們使用瀏覽器訪問 uri，瀏覽器會忽略結(jié)尾的/，F(xiàn)astApi 會在內(nèi)部進(jìn)行查重定向，將瀏覽器不帶/的請求重定向到我們定義的帶/的視圖函數(shù)上。
以上是“FastApi+Vue+LayUI如何實(shí)現(xiàn)前后端分離”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼