连接Vue.js作为前端，Fastapi作为后端
项目结构
├── main.py
└── templates
└── home.html
环境安装
pip install fastapi[all]
pip install jinja2
Backend- main.py
- 我们在/中服务于我们的前端，并在该路径中呈现我们的home.html。
- 我们使用templates文件夹保存我们的HTML并将其传递给Jinja。
- 另外，我们将从我们的front-end向/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
- 让我们创建一个有文本区域和按钮的虚拟应用程序。
- 我们正在使用Axios将请求发送到后端。
- 因为它们在同一个端口上运行，所以我们可以直接将/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>
运行，访问测试
uvicorn main:app --reload
最后，你会有一个可怕的文本区和一个按钮。但它会帮助你更好地理解事情。
连接Vue.js作为前端，Fastapi作为后端的更多相关文章
- 公司内部技术分享之Vue.js和前端工程化
今天主要的核心话题是Vue.js和前端工程化.我将结合我这两年多的工作学习经历来谈谈这个,主要侧重点是前端工程化,Vue.js侧重点相对前端工程化,比重不是特别大. Vue.js Vue.js和Rea ...
- 使用webpack+vue.js构建前端工程化
参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...
- Vue.js到前端工程化
b站视频地址:黑马程序员Vue.js到前端工程化(webpack打包,以及Vue-cli3和Element-UI的使用) vue学习系列 1.vue概述 2.vue基本使用 3.vue模板语法 4.指 ...
- Vue.js高效前端开发知识 • 【目录】
持续更新中- 章节 内容 实践练习 Vue.js高效前端开发 • (实践练习) 第1章 Vue.js高效前端开发 • [ 一.初识Vue.js ] 第2章 Vue.js高效前端开发 • [ 二.Vue ...
- 从Vue.js窥探前端行业
近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...
- 基于ThinkPHP 5.0与Vue.JS 2.x的前后端开源开发框架VueThink
VueThink 项目介绍 VueThink是一套基于Vue全家桶(Vue2.x + Vue-router2.x + Vuex)+ Thinkphp的前后端分离框架. 脚手架构建也可以通过vue官方的 ...
- Vue.js高效前端开发 • 【初识Vue.js】
全部章节 >>>> 文章目录 一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...
- 使用 mock.js 让前端开发与后端独立
直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- Vue.js中前端知识点总结笔记
1.框架和库的区别: 框架:framework 有着自己的语法特点.都有对应的各个模块库 library 专注于一点 框架的好处: 1.提到代码的质量,开发速度 2.提高代码的复用率 3.降低模块之间 ...
随机推荐
- 拥抱云原生 2.0 时代，Tapdata 入选阿里云首期云原生加速器！
3月9日,阿里云首期云原生加速器官宣,Tapdata 突出重围,成功入选31 强,将与多家行业知名企业,携手阿里云共建云原生行业新生态,加速拥抱云原生新时代的无限潜能. 2021年,阿里云正式 ...
- CenetOS 7设置IP
使用ip addr查看网卡名称,如:eth0 vim /etc/sysconfig/network-scripts/ifcfg-eth0,编辑网卡名对应的配置文件: BOOTPROTO=dhcp ON ...
- 基于yarn1.x的monorepo实践分享
背景介绍 几天前,晓东船长微信问我,你们团队有没有monorepo的实践,我很遗憾的告诉他没有,但这在我心里播下了一颗探索的种子,刚好最近老总要搞内蒙古的新项目,我和另一个前端兄弟组成双枪敢死队进行保 ...
- 串口通信：接受数据（仿真task写法）
1.功能描述 设计一个串口数据接收模块.能够以设定的波特率(与发射端口速率匹配)接收数据,并输出保存到一个寄存器中. 2.过程描述 ①边沿检测器,识别出起始位时让接收使能端有效.这里需要排除边沿脉冲的 ...
- BZOJ1874 「一本通 6.7 练习 1」【一本通提高博弈论】取石子游戏
「一本通 6.7 练习 1」取石子游戏 题目描述 小H和小Z正在玩一个取石子游戏. 取石子游戏的规则是这样的,每个人每次可以从一堆石子中取出若干个石子,每次取石子的个数有限制,谁不能取石子时就会输掉游 ...
- 基于OpenCV实现对图片及视频中感兴趣区域颜色识别
基于OpenCV实现图片及视频中选定区域颜色识别 近期,需要实现检测摄像头中指定坐标区域内的主体颜色,通过查阅大量相关的内容,最终实现代码及效果如下,具体的实现步骤在代码中都详细注释,代码还可以进一步 ...
- srec_cat 常用参数的使用
前言 下面介绍映像文件工具 srec_cat 的使用,如何通过相关参数实现自己需要的功能. 下载链接:SRecord 使用方式 文件类型 在输入文件和输出文件文件时要指明文件类型,常用的如: test ...
- 一面数据： Hadoop 迁移云上架构设计与实践
背景 一面数据创立于 2014 年,是一家领先的数据智能解决方案提供商,通过解读来自电商平台和社交媒体渠道的海量数据,提供实时.全面的数据洞察.长期服务全球快消巨头(宝洁.联合利华.玛氏等),获得行业 ...
- linux 文件存放目录
Linux不靠文件扩展名区分文件类型(windous病毒和木马不能在linux里面运行) 所有的存储设备都必须挂载之后才能使用(包括硬盘,U盘和光盘),例如给它手工给它分配盘符 Linux所有内容以文 ...
- ubuntu 下获取Let's Encrypt免费ssl证书
# ubuntu 下获取Let's Encrypt免费ssl证书 # 一.安装Nginx https://www.cnblogs.com/watermeloncode/p/15476317.html ...