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章 构建新闻详情 ...
随机推荐
- wpf中INotifyPropertyChanged的用法
using System;using System.Collections.Generic;using System.ComponentModel;using System.Linq;using Sy ...
- Java从文件路径中获取文件名的几种方法
举例:String fName =" G:\Java_Source\navigation_tigra_menu\demo1\img\lev1_arrow.gif " 方法一: 1 ...
- docker安装与配置nginx详细过程
注:大鸟飞过,此方式只用于快速搭建使用 第一步 pull nginx 命令:docker pull nginx 第二步 启动nginx 命令:docker run --name nginx -p 80 ...
- linux上安装Docker (非常简单的安装方法) 2019
Docker的三大核心概念:镜像.容器.仓库 镜像:类似虚拟机的镜像.用俗话说就是安装文件. 容器:类似一个轻量级的沙箱,容器是从镜像创建应用运行实例, 可以将其启动.开始.停止.删除.而这些容器都是 ...
- 修改python import模块中的变量
可以直接通过 模块名.变量名=xx 的方式修改模块中的全局变量,测试代码如下 模块:test_model.py x = 111 def inc_x(): global x x = x + 1 测试脚本 ...
- D3之svg transform 与 css3 transform 区别与联系
D3就不用多介绍了,在数据可视化界属于大佬级别的js库.在这里主要想记录一下在写程序期间遇到的一个问题. 如下图所示,想完成主视图在小地图上的映射,小地图的白色矩形框用来代表当前主视图可见区域,主视图 ...
- ClientValidationFunction
CustomValidator.ClientValidationFunction 属性 获取或设置用于验证的自定义客户端脚本函数的名称. 命名空间: System.Web.UI.WebContro ...
- ABP VNext发布遇到的坑
本地调试没有问题,发布后通过Token调用其他API时,出现返回JSON中提示:Authorization failed! Given policy has not granted. 需要修改apps ...
- python库--tensorflow--scope命名方式
方法 参数 说明 .name_scope() with...: name 在其下使用Variable, 变量名(V_n)前会被加上'name/...'且相同V_n会自动添加后缀加以区分, 使用ge ...
- 源码编译安装LAMP
LAMP架构是目前成熟的企业网站应用模式之一,指的是协同工作的一整套系统和相关软件,能够提供动态Web站点服务及其应用开发环境.LAMP是一个缩写词,具体包括Linux操作系统.Apache网站服务器 ...