FastApi+Vue+LayUI实现前后端分离的示例代码
更新时间：2021年11月17日 15:57:45 作者：Python研究所
本文主要介绍了FastApi+Vue+LayUI实现前后端分离的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前言
在前面的Api开发中，我们使用FastApi已经可以很好的实现。但是实际使用中，我们通常建议前后端项目分离。今天我们就使用FastApi+Vue+LayUI做一个前后端分离的Demo。
项目设计
后端
后端我们采用FastApi在新的test视图中，定义一个路由，并将其注册到app中，并且在test视图中定义一个接口，实现模拟从数据库读取数据供前端调用渲染。
代码
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
# 实例化路由器
router = APIRouter()
templates = Jinja2Templates('templates')
# 注意，视图这里使用router来声明请求方式&URI
@router.get('/info')
def user_list():
# vue的响应数据
items = [
{'id':'1','name':'phyger'},
{'id':'2','name':'fly'},
{'id':'3','name':'enheng'},
]
return JSONResponse(content=items)
@router.get('/')
def welcome():
return "这里是测试路由"
'''
实际上，这里的home.html也是需要前端服务去向用户渲染的，
但是我们为了方便演示，未启动前端服务器，直接将前端代码写在了home.html中，
实际上，当用户请求/check的时候，前端代码会去请求/info接口获取数据，
从而实现前端页面的数据渲染。
'''
@router.get('/check')
def home(request:Request):
return templates.TemplateResponse(name='home.html',context={'request':request,})
前端
前端我们直接导入Vue、LayUI、Axios的JS和CSS的CDN资源，在Vue实例的mount阶段，使用axios调用后端接口拿到数据，使用LayUI的样式对table元素进行美化。
代码
<!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>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" rel="external nofollow" />
<!-- 引入 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>
运行项目
启动 FastApi 后端服务器，访问 /test/check 接口。
Q&A
Q：为什么在请求/info 接口总会出现一个 Temporary Redirect 重定向呢？
A：原因是因为我们在 FastApi 接口定义的时候，uri 的格式不规范导致，uri 的结尾不需要/，如果你接口增加了/，我们使用浏览器访问 uri，浏览器会忽略结尾的/，FastApi 会在内部进行查重定向，将浏览器不带/的请求重定向到我们定义的带/的视图函数上。
到此这篇关于FastApi+Vue+LayUI实现前后端分离的示例代码的文章就介绍到这了,更多相关FastApi+Vue+LayUI 前后端分离内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
uniapp使用v-loading并且不引入element-ui的操作方法
这篇文章主要介绍了uniapp使用v-loading并且不引入element-ui,首先创建loading.js，创建lloading.scss，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了vue3.0实现点击切换验证码(组件)及校验，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要给大家介绍了关于vue3中ref获取子组件值的相关资料,在Vue3中父组件获取子组件的值可以通过使用'ref'和'$refs'来实现,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了Vue el-table 默认展开某一行的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
下面小编就为大家分享一篇基于Vue2的独立构建与运行时构建的差别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
今天小编就为大家分享一篇vue 纯js监听滚动条到底部的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vite+vue3中如何使用router问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
文件上传在很多项目中都用的到，如果是几M的很快就传送完毕，如果是大文件呢？本文就介绍了Vue 大文件上传和断点续传的实现，感兴趣的可以了解一下2021-06-06
详解VUE自定义组件中用.sync修饰符与v-model的区别
这篇文章主要介绍了详解VUE自定义组件中用.sync修饰符与v-model的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要为大家详细介绍了Vue.js计算属性computed与watch,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论