FastAPI小项目实战:电影列表(Vue3 + FastAPI)
假期过半, FastAPI + Vue3项目实战 视频也算录完了,尽管项目简单(2张表 共7个接口 4个页面)
起因
- 在6月底的时候开始录制了FastAPI官方文档中的新手教程部分(实际还没有官网文档详细),过程中缺少了和数据库交互
- 在第一次发了FastAPI 翻抄的其他Web项目之后,有同行问到如何和Vue结合使用
结果
在假期结束前,完成了该项目
项目介绍
该项目参考(严重抄袭)Hello Flask 一书中的实战项目: Flask 入门教程 - HelloFlask
该项目使用以下开源项目完成
- [x] FastAPI
- [x] Tortoise ORM
- [x] Vue3
- [x] Vuex
- [x] VueRouter
- [x] Axios
- [x] ElementPlus
- [x] Vite2
该项目采用Docker部署:
服务器比较拉, 还请温柔些
该项目效果图如下




该项目整体是简单的 只有 两张表,且没有关系。
源码及资料
Gitee: https://gitee.com/zy7y/watch-fastapi
Github: https://github.com/zy7y/watch-fastapi
B站实录视频:https://space.bilibili.com/438858333/channel/detail?cid=190225&ctype=0
对你有帮助还请Star/三连
致谢
感谢以上所有用到的技术栈、框架的作者及其团队
感谢CoderWhy老师的视频教程
- [x] Vue2
感谢李辉老师的Hello Flask书籍及该项目的原版
- [x] Hello Flask
- [x] watchlist
FastAPI小项目实战:电影列表(Vue3 + FastAPI)的更多相关文章
- 图解微信小程序---获取电影列表
图解微信小程序---获取电影列表 代码笔记 list跳转 第一步:编写前端页面获取相关的电影列表参数(对于显示参数不熟悉,可以先写js,通过console Log的方式获取我们电影的相关数据字段,后 ...
- 微信小程序实战,用vue3实现每日浪漫情话推荐~
之前做了个恋爱话术微信小程序,实现高情商的恋爱聊天. 但最近突然发现,每天早上给女朋友发一段优美情话可以让她开心一整天,但无奈自己的语言水平确实有限,不能随手拈来,着实让人有点不爽. 不过办法总比困难 ...
- Linux+eclipse+maven+tomcat7小项目实战
一.准备工作:CentOS6.5安装linux,maven,tomcat7,eclipse 二.在linux中打开eclipse,创建一个maven项目 修改web.xml 打开Navigator视图 ...
- 【计算机视觉】OpenCV篇(4) - Pycharm+PyQt5+Python小项目实战
1.下载安装 (1)Pycharm:下载链接 (2)推荐使用Qt Designer来设计界面,如果你装的是Anaconda的话,就已经自带了designer.exe,我这里使用的是Pycharm的虚拟 ...
- python爬虫小项目实战
- vue_小项目_模糊搜索(列表过滤)_结果排序
html <div id="test"> <label> <input type="text" v-model="sea ...
- 实战小项目BUG纪录
果然,作为程序员最可爱的女朋友就是各种BUG,解决了你的开发能力和开发效率就会上升到一个新的层次.反之,在你面对BUG的时候,如果轻易的就放弃了,你也就失去了一次自我成长的机会.学习就是这样的,我们有 ...
- 微信小程序实战--集阅读与电影于一体的小程序项目(一)
1.首页欢迎界面 项目目录结构 新建项目ReaderMovie,然后新建文件,结构如下 welcome.wxml <view class='container'> <image cl ...
- 微信小程序入门与实战 常用组件API开发技巧项目实战*全
第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...
随机推荐
- TortoiseGit冲突和解决冲突
产生冲突原因 产生:多个开发者同时使用或者操作git中的同一个文件,最后在依次提交commit和推送push的时候,第一个操作的是可以正常提交的,而之后的开发者想要执行pull(拉)和pull(推)操 ...
- C++继承体系中的内存分段
---------------综述与目录-------------- 讨论这个问题之前我们先明确类的结构,一个类的大概组成,下面的很多分类名词都是我个人杜撰,为的就是让读者看懂能够区分,下面分别分类: ...
- SpringCloud分布式配置中心Config
统一管理所有配置. 1.微服务下的分布式配置中心 简介:讲解什么是配置中心及使用前后的好处 什么是配置中心: 一句话:统一管理配置, 快速切换各个环境的配置 相关产品: 百度的disconf 地址:h ...
- Mybatis--级联(一)
级联是resultMap中的配置. 级联分为3种 鉴别器(discrimination):根据某些条件采用具体实现具体实现类级联,如体检表根据性别去区分 一对一:学生和学生证 一对多:班主任和学生. ...
- Hibernate之关联关系
时间:2017-1-20 16:28 --一对多配置1.第一步:创建实体类 * 客户实体 * 订单实体 示例代码: /** * 客户实体 ...
- 检测一个页面所用的时间的js
window.onload = function () { var loadTime = window.performance.timing.domContentLoadedEventEnd-wind ...
- JavaScript高级程序设计读书笔记之JSON
JSON(JavaScript Object Notation)JavaScript对象表示法.JSON是JavaScript的一个严格的子集,利用了JavaScript中的一些模式来表示结构化数据. ...
- 分布式系列-分布式ID
一.数据库自增(单实例) 1.方案描述 基于数据库自增ID(auto_increment)利用其来充当分布式ID.实现方式就是用一张表来充当ID生成器,当我们需要ID时,向表中插入一条记录返回主键ID ...
- Linux环境搭建及项目部署
一. VMWare安装图解 1.点击下一步 2.接受条款,下一步 3.选择安装目录,不建议有中文目录和空格目录.下一步 4.下一步 5.这两个选项根据可以爱好习惯选择,下一步 6.安装 7.完成 9. ...
- Linux - 解决使用 apt-get 安装 yum 的时耗报 E: Unable to locate package yum 的错误
问题背景 在 Linux 系统下使用 apt-get 命令安装 yum 库报错 apt-get install yum E: Unable to locate package yum 问题解决 一行命 ...