项目结构

  1. ├── main.py
  2. └── templates
  3.     └── home.html

环境安装

  1. pip install fastapi[all]
  2. pip install jinja2

Backend- main.py

  • 我们在/中服务于我们的前端，并在该路径中呈现我们的home.html。
  • 我们使用templates文件夹保存我们的HTML并将其传递给Jinja。
  • 另外，我们将从我们的front-end向/add发送一个请求。
  1. from fastapi import FastAPI, Request
  2. from fastapi.templating import Jinja2Templates
  3. from pydantic import BaseModel
  5. templates = Jinja2Templates(directory="templates") 
  7. app = FastAPI()
  9. class TextArea(BaseModel):
  10.     content: str
  12. @app.post("/add")
  13. async def post_textarea(data: TextArea):
  14.     print(data.dict())
  15.     return {**data.dict()}
  17. @app.get("/")
  18. async def serve_home(request: Request):
  19.     return templates.TemplateResponse("home.html", {"request": request})

前端-home.html

  • 让我们创建一个有文本区域和按钮的虚拟应用程序。
  • 我们正在使用Axios将请求发送到后端。
  • 因为它们在同一个端口上运行，所以我们可以直接将/add传递给Axios。
  1. <html>
  2. <title></title>
  3. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  4. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  6. <body>
  7.     <div id="app">
  8.         <textarea name="" id="content" cols="30" rows="10" v-model="content"></textarea>
  9.         <button @click="addText" id="add-textarea">click me</button>
  10.     </div>
  12.     <script>
  13.         new Vue({
  14.             el: "#app",
  15.             data: {
  16.                 title: '',
  17.                 content: ''
  18.             },
  19.             methods: {
  20.                 addText() {
  21.                     return axios.post("/add", {
  22.                         content: this.content
  23.                     }, {
  24.                         headers: {
  25.                             'Content-type': 'application/json',
  26.                         }
  27.                     }).then((response) => {
  28.                         console.log("content: " + this.content);
  29.                     });
  30.                 }
  31.             }
  32.         });
  33.     </script>
  34. </body>
  36. </html>

运行，访问测试

  1. uvicorn main:app --reload

最后，你会有一个可怕的文本区和一个按钮。但它会帮助你更好地理解事情。

连接Vue.js作为前端，Fastapi作为后端的更多相关文章

  1. 公司内部技术分享之Vue.js和前端工程化

    今天主要的核心话题是Vue.js和前端工程化.我将结合我这两年多的工作学习经历来谈谈这个,主要侧重点是前端工程化,Vue.js侧重点相对前端工程化,比重不是特别大. Vue.js Vue.js和Rea ...

  2. 使用webpack+vue.js构建前端工程化

    参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...

  3. Vue.js到前端工程化

    b站视频地址:黑马程序员Vue.js到前端工程化(webpack打包,以及Vue-cli3和Element-UI的使用) vue学习系列 1.vue概述 2.vue基本使用 3.vue模板语法 4.指 ...

  4. Vue.js高效前端开发知识 • 【目录】

    持续更新中- 章节 内容 实践练习 Vue.js高效前端开发 • (实践练习) 第1章 Vue.js高效前端开发 • [ 一.初识Vue.js ] 第2章 Vue.js高效前端开发 • [ 二.Vue ...

  5. 从Vue.js窥探前端行业

    近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...

  6. 基于ThinkPHP 5.0与Vue.JS 2.x的前后端开源开发框架VueThink

    VueThink 项目介绍 VueThink是一套基于Vue全家桶(Vue2.x + Vue-router2.x + Vuex)+ Thinkphp的前后端分离框架. 脚手架构建也可以通过vue官方的 ...

  7. Vue.js高效前端开发 • 【初识Vue.js】

    全部章节 >>>> 文章目录 一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...

  8. 使用 mock.js 让前端开发与后端独立

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  9. Vue.js中前端知识点总结笔记

    1.框架和库的区别: 框架:framework 有着自己的语法特点.都有对应的各个模块库 library 专注于一点 框架的好处: 1.提到代码的质量,开发速度 2.提高代码的复用率 3.降低模块之间 ...

随机推荐

  1. 2019 CSP-S 初赛解析

    因为我不会设置用博客园显示Markdown语法,所以在洛谷也写了一份:传送门 一起讨论的这套卷.题干 然后还有一些可以借鉴一下的解析 选择: T1. 注意运算顺序: a%3=1 --> (int ...

  2. Jenkins安装推荐插件前，更换插件源

    网上找了很多都解决不了问题,直到看到jenkins-update-center,还有一个问题,就是尽量在实体机上装,感觉docker坑太多.... 安装jenkins,以Debian系为例 安装包在这 ...

  3. flush方法和close方法的区别和字符输出流写数据的其他方法和字符输出流的续写和换行

    flush方法和close方法的区别 flush:刷新缓冲区,流对象可以继续使用 close:先刷新缓冲区,然后通知系统释放资源.刘对象不可以再被使用了. public class demo02 { ...

  4. 浅谈hooks——useEffect

    react 16.8发布以来,函数式写法逐渐取代class的写法,在react函数式写法中,最重要是就是react所推出的新特性:hook,今天就来简单谈谈最基础的hook--useEffect 在r ...

  5. HMS Core音频编辑服务音源分离与空间音频渲染，助力快速进入3D音频的世界

    从单声道.立体声.环绕声发展到三维声,音频回放技术的迭代演进是为了还原真实世界的声音.其中,三维声技术使用信号处理的方法对到达两耳的声音信号进行模拟,将声场还原为三维空间,更接近真实世界.凭借这个技术 ...

  6. TensorFlow自定义训练函数

    本文记录了在TensorFlow框架中自定义训练函数的模板并简述了使用自定义训练函数的优势与劣势. 首先需要说明的是,本文中所记录的训练函数模板参考自https://stackoverflow.com ...

  7. 《深入了解java虚拟机》高效并发读书笔记——Java内存模型，线程，线程安全 与锁优化

    <深入了解java虚拟机>高效并发读书笔记--Java内存模型,线程,线程安全 与锁优化 本文主要参考<深入了解java虚拟机>高效并发章节 关于锁升级,偏向锁,轻量级锁参考& ...

  8. 万字长文：从计算机本源深入探寻volatile和Java内存模型

    万字长文:从计算机本源深入探寻volatile和Java内存模型 前言 在本篇文章当中,主要给大家深入介绍Volatile关键字和Java内存模型.在文章当中首先先介绍volatile的作用和Java ...

  9. google nexus5x 刷机抓包逆向环境配置（三）

    本文仅供学习交流使用,如侵立删! google nexus5x 刷机抓包逆向环境配置(三) 安装抓包证书(Fiddler.Charles) 操作环境 nexus5x kaliLinux win10 准 ...

  10. BMP位图之1位位图（一）

    起始结构 typedef struct tagBITMAPFILEHEADER { WORD bfType; //类型名,字符串"BM", DWORD bfSize; //文件大小 ...