“This is the 16th day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.
preface
In the previous Api development, we used FastApi to achieve a good. In practice, however, we generally recommend separating the front and back end projects. Today we will use FastApi+Vue+LayUI to do a separate front and back end Demo.
The project design
The back-end
At the back end, we use FastApi to define a route in the new Test view and register it in the APP, and define an interface in the test view to simulate reading data from the database for the front-end call rendering.
code
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
Instantiate the router
router = APIRouter()
templates = Jinja2Templates('templates')
Note that the view uses router to declare the request mode &URI
@router.get('/info')
def user_list() :
# Vue response data
items = [
{'id':'1'.'name':'phyger'},
{'id':'2'.'name':'fly'},
{'id':'3'.'name':'enheng'},]return JSONResponse(content=items)
@router.get('/')
def welcome() :
return "Here's the test route."
In fact, when the user requests /check, the front-end code will request the /info interface to fetch data. Thus realize data rendering of front-end page. ' ' '
@router.get('/check')
def home(request:Request) :
return templates.TemplateResponse(name='home.html',context={'request':request,})
Copy the codeThe front end
At the front end, we directly import THE JS of Vue, LayUI, Axios and CDN resources of CSS. At the mount stage of Vue instance, we use Axios to call the back-end interface to get the data and beautify the table element with the style of LayUI.
code
<! DOCTYPEhtml>
<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"/>
<! 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>
Copy the codeRun the project
Start the FastApi backend server and access the /test/check interface.
Q&A
Q: Why is there always a Temporary Redirect Redirect on the request /info interface?
A: The reason is that when we defined the FastApi interface, the format of URI was not standard, so the end of URI does not need /. If you add/to the interface, we use the browser to access the URI, and the browser will ignore the end of /. FastApi will check the redirection internally. Redirect browser requests without/to the view function we defined with /.