- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在 Jobs Portal 上构建一个项目,我需要 Vue 作为前端,Fastapi 作为后端(添加、删除更新)。我想知道我是否可以将这两者都连接起来。
最佳答案
I want to know if i can connect these both or not.
├── main.py
└── templates
└── home.html
后端-
main.py
/
中为我们的前端服务并渲染我们的 home.html
在那条路上。 /add
发送请求从我们的前端。 from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates
from pydantic import BaseModel
templates = Jinja2Templates(directory="templates")
app = FastAPI()
class TextArea(BaseModel):
content: str
@app.post("/add")
async def post_textarea(data: TextArea):
print(data.dict())
return {**data.dict()}
@app.get("/")
async def serve_home(request: Request):
return templates.TemplateResponse("home.html", {"request": request})
前端 -
home.html
/add
直接到Axios。 <html>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
<div id="app">
<textarea name="" id="content" cols="30" rows="10" v-model="content"></textarea>
<button @click="addText" id="add-textarea">click me</button>
</div>
<script>
new Vue({
el: "#app",
data: {
title: '',
content: ''
},
methods: {
addText() {
return axios.post("/add", {
content: this.content
}, {
headers: {
'Content-type': 'application/json',
}
}).then((response) => {
console.log("content: " + this.content);
});
}
}
});
</script>
</body>
</html>
最后,您将拥有一个看起来很糟糕的 textarea 和一个按钮。但它会帮助你更好地理解事物。
{'content': 'Hello textarea!'}
INFO: 127.0.0.1:51682 - "POST /add HTTP/1.1" 200 OK
关于vue.js - 如何连接 Vue.js 作为前端和 Fastapi 作为后端,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64522736/
我正在研究最适合我的 Web 框架。 我们将开发几个微服务,我们需要在一些微服务上分派(dispatch)事件,这些事件可以在其他微服务上监听。 是否支持使用 FastAPI?如果没有,有没有办法监听
快速API 0.68.0 python 3.8 from fastapi import Depends, FastAPI, Header, HTTPException async def verify
在 FastAPI 框架内: 虽然请求数据当然可以作为参数传递,但我想知道函数是否可以在不传递参数的情况下访问有关当前请求的信息。 免责声明:我不认为全局访问请求数据是一个好的做法,但我有一个用例,如
无论如何,FastAPI“依赖项”是否可以解释路径参数。 我有很多形式的功能: @app.post("/item/{item_id}/process", response_class=ProcessR
我有一个由诗歌构建的 fastapi 项目。我想使用 pyproject.tom 中的脚本部分运行应用程序,如下所示: poetry run start 该部分的双引号内是什么? [tool.poet
我正在尝试将分页添加到我的 fastapi 项目中。所以我决定使用这个: fastapi-contrib 我在那里遵循相同的示例,但由于某种原因我收到此错误: type object 'MOrdene
在我的项目文件夹中,我有一个基本的 index.html文件加上静态文件(js、css)以及我的 main.py : from fastapi.staticfiles import StaticFil
FastAPI显示可以设置response_model_exclude_none=True在装饰器中忽略值为 None 的字段:https://fastapi.tiangolo.com/tutoria
FastAPI 生成自动 swagger/openapi 文档。 在 https://fastapi.tiangolo.com/tutorial/response-status-code 的教程中有一
我获得了使用FastApi运行推理服务器的以下代码。在大约8小时内,我的RAM内存增加了4Gi。。更有趣的是,当我停止我的容器时,内存并没有清理干净。。例如,在运行Docker Container之前
今天的文章分享如下在 FastAPI 框架下,使用 pytest 来自动化测试数据库相关的接口,文章的最后给出全部代码。 最近越来越喜欢使用 FastAPI 来写后端服务了,因为它是 Pyth
Docker 学习 https://www.cnblogs.com/poloyy/p/15257059.html 项目结构 .├── app│ ├── __init__.py│ └
下面代码来自官方FastAPI tutorials page ,我无法理解这些语句(例如,name: str)。 from typing import Optional from fastapi im
我是网络通信的新手。我使用 ubuntu 并尝试学习 fastapi。但是,我认为很难理解如何格式化我打算发送回客户端的响应。 要发回的响应的规则是什么?如果您想发回自定义答案 - 例如两个图像文件
我正在尝试从文件中添加路由,但我事先并不知道实际的参数,因此我需要一个通用函数来通过 **kwargs 处理参数。 要添加路由,我正在使用 add_api_route,如下所示: from fasta
我按照此文档设置了一个用户: https://fastapi.tiangolo.com/advanced/security/http-basic-auth/ 但我只收到一个端点“/users/me”的
当我尝试从我的 postgre 数据库中获取一些数据并使用 fastapi 时出现此错误。 我不知道为什么会这样......但这是我的代码,谢谢你的帮助。 路线 @router.get("/fuent
我有一个与在 pycharm 中使用 uvicorn 的 FastAPI 有关的问题。我的项目具有以下结构: LearningPy | |-- apis -----|--modelser
我已经创建了一个登录路径,我在其中发布了我的表单数据并设置了一个 cookie。设置 cookie 后,我重定向到“/main”,在那里我得到 {detail:"Method Not Allowed"
当我使用 FastAPI 时,如何为网络服务指定基本路径? 换句话说 - FastAPI 对象是否有参数可以将端点和我定义的任何其他对象设置为不同的根路径? 例如,如果我的代码带有下面的虚假参数 ro
我是一名优秀的程序员,十分优秀!