Sample code for separating the front-end and back-end using FastApi+Vue+LayUI
Preface In the previous API development, we have been able to achieve it well using FastApi. However, in actual use, we usually recommend separating the front-end and back-end projects. Today we will use FastApi+Vue+LayUI to make a demo with front-end and back-end separation. Project Design rear end On the back end, we use FastApi to define a route in the new test view and register it in the app. We also define an interface in the test view to simulate reading data from the database for the front end to call and render. 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 method & URI
@router.get('/info')
def user_list():
# vue's 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 is the test route"
'''
In fact, the home.html here also needs the front-end service to render to the user.
However, for the convenience of demonstration, we did not start the front-end server and directly wrote the front-end code in home.html.
In fact, when the user requests /check, the front-end code will request the /info interface to obtain data.
This enables data rendering on 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 directly import the JS and CSS CDN resources of Vue, LayUI, and Axios. During the mount phase of the Vue instance, we use axios to call the backend interface to obtain data, and use the LayUI style to beautify the table elements.
<!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>
<!-- Import layui.css -->
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" rel="external nofollow" />
<!-- Import 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 projectStart the FastApi backend server and access the /test/check interface.
Q&A Q: Why does a Temporary Redirect always appear when requesting the /info interface?
A: The reason is that when we defined the FastApi interface, the format of the uri was not standardized. The end of the uri did not need to have a /. If you add a / to the interface and we use a browser to access the uri, the browser will ignore the ending /. FastApi will internally redirect the browser request without a / to the view function we defined with a /. This is the end of this article about the sample code for FastApi+Vue+LayUI to achieve front-end and back-end separation. For more related FastApi+Vue+LayUI front-end and back-end separation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: HTML introductory tutorial HTML tag symbols quickly mastered
![12 Laws of Web Design for Clean Code [Graphic]](/upload/images/67cac706c91a2.webp)
Recommend
Windows Server 2012 No Remote Desktop License Server can provide a license, and the remote session is disconnected
Today, when I logged into the company's inter...
Three notification bar scrolling effects implemented with pure CSS
Preface The notification bar component is a relat...
CSS optimization skills self-practice experience
1. Use css sprites. The advantage is that the smal...
v-html rendering component problem
Since I have parsed HTML before, I want to use Vu...
Tutorial on installing MySQL 5.7.18 using RPM package
system: CentOS 7 RPM packages: mysql-community-cl...
Detailed explanation of JavaScript stack and copy
Table of contents 1. Definition of stack 2. JS st...
Douban website's method for making small changes to website content
<br />Reading is a very important part of th...
HTML head structure
The following introduces the commonly used head s...
The "3I" Standards for Successful Print Advertising
For many domestic advertisers, the creation and ev...
CSS Houdini achieves dynamic wave effect
CSS Houdini is known as the most exciting innovat...
Detailed tutorial on installing ElasticSearch 6.4.1 on CentOS7
1. Download the ElasticSearch 6.4.1 installation ...
Detailed explanation of WeChat Mini Program official face verification
The mini program collected user personal informat...
Introduction to the use of form OnSubmit and input type=image
If there is an <input type="image">...
12 types of component communications in Vue2
Table of contents 1. props 2..sync 3.v-model 4.re...
Basic knowledge of load balancing and a simple example of load balancing using nginx
Nginx can generally be used for seven-layer load ...