Preface
In front of
Api In development , We use
FastApi It can be well realized . But in practice , We usually recommend that front and back end items be separated . Today we use
FastApi+Vue+LayUI Make a front and rear end separated
Demo.
Project design
Back end
Back end we use
FastApi In the new
test In the view , Define a route , And register it in
app in , And in
test Define an interface in the view , Realize the simulation to read data from the database for the front-end to call rendering .
Code
test.pyfrom 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
# Instantiate the router
router = APIRouter()
templates = Jinja2Templates('templates')
# Be careful , View is used here router To declare the request method &URI
@router.get('/info')
def user_list():
# vue Response data for
items = [
{'id':'1','name':'phyger'},
{'id':'2','name':'fly'},
{'id':'3','name':'enheng'},
]
return JSONResponse(content=items)
@router.get('/')
def welcome():
return " Here is the test route "
'''
actually , there home.html It also requires front-end services to render to users ,
But for the convenience of demonstration , Front end server not started , Directly write the front-end code in home.html in ,
actually , When the user requests /check When , The front-end code will request /info Interface to get data ,
So as to realize the data rendering of the front-end page .
'''
@router.get('/check')
def home(request:Request):
return templates.TemplateResponse(name='home.html',context={'request':request,})
front end
On the front end, we import directly
Vue、LayUI、Axios Of
JS and
CSS Of
CDN resources , stay
Vue Example of
mount Stage , Use
axios Call the back-end interface to get the data , Use
LayUI Style pair for
table Beautify elements .
Code
<!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/[email protected]"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- introduce layui.css -->
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css"/>
<!-- introduce 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>
Run the project
start-up
FastApi Back end servers , visit
/test/check Interface .
Q&A
Q： Why are you asking
/info There will always be an interface
Temporary Redirect What about redirection ？
A： The reason is because we are
FastApi When defining interfaces ,
uri The format of is not standardized, resulting in ,
uri You don't need to end
/, If you add interfaces
/, We use a browser to access
uri, The browser will ignore the ending
/,
FastApi Will check and redirect internally , Leave the browser without
/ The request is redirected to the band we defined
/ On the view function of .
版权声明
本文为[InfoQ]所创，转载请带上原文链接，感谢
https://cdmana.com/2022/174/202206231832548410.html
