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
Recommend
Detailed explanation of basic concepts of HTML
What is HTML? HTML is a language used to describe...
Using front-end HTML+CSS+JS to develop a simple TODOLIST function (notepad)
Table of contents 1. Brief Introduction 2. Run sc...
Windows 2019 Activation Tutorial (Office2019)
A few days ago, I found that the official version...
A brief discussion on creating cluster in nodejs
Table of contents cluster Cluster Details Events ...
3 ways to add links to HTML select tags
The first one : Copy code The code is as follows: ...
Detailed explanation of keepAlive usage in Vue front-end development
Table of contents Preface keep-avlive hook functi...
How to configure MGR single master and multiple slaves in MySQL 8.0.15
1. Introduction MySQL Group Replication (MGR for ...
A small problem about null values in MySQL
Today, when testing the null value, I found a sma...
JavaScript to achieve skin effect (change background)
This article shares the specific code of JavaScri...
Detailed explanation of Vue options
Table of contents 1. What are options? 2. What at...
HTML+CSS to achieve surround reflection loading effect
This article mainly introduces the implementation...
Zabbix configuration DingTalk alarm function implementation code
need Configuring DingTalk alarms in Zabbix is s...
What to do if you forget the root password of Mysql5.7 (simple and effective method)
In the previous article, we introduced how to for...
How to install yum source and upload and download commands rz and sz under CentOS7 (with pictures)
** Detailed graphic instructions for installing y...
How to use the Clipboard API in JS
Table of contents 1. Document.execCommand() metho...