编程知识 cdmana.com

Fastapi+vue+layui realizes front and rear end separation

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.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')

#  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=&quot;en&quot;>
<head>
 <meta charset=&quot;UTF-8&quot;>
 <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;>
 <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>
 <script src=&quot;https://unpkg.com/[email protected]&quot;></script>
 <script src=&quot;https://unpkg.com/axios/dist/axios.min.js&quot;></script>
 <!--  introduce  layui.css -->
 <link rel=&quot;stylesheet&quot; href=&quot;https://www.layuicdn.com/layui/css/layui.css&quot;/>

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

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

 </table>
 </div>
 <table id=&quot;test&quot; class=&quot;layui-table&quot;></table>


<script type=&quot;text/javascript&quot;>
 const Vapp = Vue.createApp({
 data() {
 return {
 infos: [{id:1,name:'phyger'}],
 info: &quot;hello vue...&quot;
 }
 },
 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 .

null

Q&A

Q: Why are you asking
/info
  There will always be an interface
 Temporary Redirect
  What about redirection ?

null
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

Scroll to Top