Flask Vue.js全栈开发|第1章:创建第一个Flask RESTful API

  • 原创
  • Madman
  • /
  • /
  • 33
  • 60892 次阅读

flask vuejs 全栈开发-min.png

Synopsis: 本文是Flask+Vue.js全栈开发的第一篇,主要是以比较优化的结构搭建Flask应用,并提供一个测试的API,客户端访问 /ping 后会返回 Pong! 响应,用于下一篇前端Vue.js测试与后端的连通性

代码已上传到 https://github.com/wangy8961/flask-vuejs-madblog/tree/v0.1 ,欢迎star

1. 代码管理

1.1 安装 git

使用 Win10 系统开发,先安装 Git for Windows请移步

1.2 创建 Github 仓库

登录你的 Github 账户,创建个人项目,我的命名为 flask-vuejs-madblog。在你的 Github 账户中添加该电脑的 SSH keys,请移步

1.3 git clone

克隆到本地,打开 Git Bash

$ cd /d/python-code/
$ git clone git@github.com:wangy8961/flask-vuejs-madblog.git

1.4 init commit

添加 MIT License,然后第一次提交:

$ cd flask-vuejs-madblog/
$ git status
On branch master
Your branch is up-to-date with 'origin/master'.
Untracked files:
  (use "git add <file>..." to include in what will be committed)

        LICENSE

nothing added to commit but untracked files present (use "git add" to track)
$ git add .
$ git commit -m "init"
$ git push

1.5 分支管理

创建 dev 开发分支:

$ git checkout -b dev
$ git branch
* dev
  master

2. 配置 Flask

安装 Python 3,请前往 官方网站 下载 Windows 对应版本

请确保有 Flask 基础,阅读官方文档

打开 cmd ,切换到项目目录,创建 back-end 目录,这是我们的后端API应用所在位置:

Microsoft Windows [版本 10.0.14393]
(c) 2016 Microsoft Corporation。保留所有权利。

C:\Users\wangy>D:

D:\>cd python-code\flask-vuejs-madblog

D:\python-code\flask-vuejs-madblog>mkdir back-end

D:\python-code\flask-vuejs-madblog>cd back-end

D:\python-code\flask-vuejs-madblog\back-end>python -m venv venv

D:\python-code\flask-vuejs-madblog\back-end>venv\Scripts\activate
(venv) D:\python-code\flask-vuejs-madblog\back-end>pip install flask
(venv) D:\python-code\flask-vuejs-madblog\back-end>pip freeze > requirements.txt

使用 Visual Studio Code 打开项目,提供 .gitignore 文件:

.idea/
__pycache__/
venv/
.env

                                
                            
分类: Vue.js Flask
标签: RESTful API vuejs flask
  • terr1blec
  • codeblind
  • nihao
  • 李姝雨
  • mosyman
  • serendipity_800
  • Dawn Inator
  • zhuyulin
  • ygren
  • wulvtutu
  • Annie20030301
  • Lunaticsky-tql
  • Hello.殷
  • sunny
  • nickzxhfjsm
  • 雀AI2023
  • anthony
  • qingtianwq
  • Team12
  • vafvfdA
  • tttker
  • kasbar
  • ReinXD
  • sdwfqhy
未经允许不得转载: LIFE & SHARE - 王颜公子 » Flask Vue.js全栈开发|第1章:创建第一个Flask RESTful API

分享

作者

作者头像

Madman

如需 Linux / Python 相关问题付费解答,请按如下方式联系我

33 条评论

小神龙
小神龙

文章内容很丰富,期待完整的Flask + Vue.js项目系列,感谢:)

Madman
Madman 小神龙 Author

谢谢😜,喜欢就好,最近工作忙,争取下个月写完整个系列

charming
charming

希望能够更新

Madman
Madman charming Author

已经更新到第16章了

shijl0925
shijl0925 Madman

赞👍🏻

tuanyuan xiao
tuanyuan xiao

希望能有全买的~优惠一点的~ 一个一个买有点承受不住

Madman
Madman tuanyuan xiao Author

联系我的微信,优惠可以谈

sinodrop
sinodrop

在 "app/init.py" 中

from flask import Flask
from config import Config


...
...

目录结构是 "backend/app/init.py" 那么是如何 "from config import Config" 的呢 config.py的路径是 "backend/config.py" 还是我目录结构理解错误了

Madman
Madman sinodrop Author

你说的是 app/__init__.py 吧,首先 app/ 是一个 Python 包,所以它里面必须有 __init__.py 文件,可以是空的

应用入口文件是 madblog.py,其他文件要导入额外模块时都是相对于它来查找的。所以 app/__init__.py 要从与应用入口文件同级的 config.py 导入 Config 类的话,使用 from config import Config

sinodrop
sinodrop Madman

从你所说的内容切入,去仔细看了python引用导入,现在明白了。你的解答非常准确易懂,非常感谢~

slinzhang007
slinzhang007

不错

novolei
novolei

`````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````adsad asd

asdasdasd asd asd asd

novolei
novolei

1212121212

Xi Cheng
Xi Cheng

为什么我已经pip install python-dotenv 之后仍旧出现了 ModuleNotFoundError: No module named 'dotenv'?请问有什么解决办法吗?

Madman
Madman Xi Cheng Author

加我微信,发截图

diyun
diyun

每篇都要付费莫

草样wyh
草样wyh diyun

我也想知道

Madman
Madman 草样wyh Author
Bili认真
Bili认真

刚入门flask,请问如何打包后的dist文件如何使用flask打开呢

Bili认真
Bili认真 Bili认真

昨天已经解决了,不过还是要感谢!!

Tiffany疯孩子
Tiffany疯孩子

从知乎慕名过来~跟着大佬已经学完了Flask这一整个系列~还好自己有些基础~学起来也轻松一点~博主写的教程真的很棒~之前也找了很多资料~但是还是这里的最完整最高效~~感谢大佬!!!希望大佬能继续更新新的系列!!支持!!!

__豆约翰__
__豆约翰__

不错 谢谢分享

bill19920920
bill19920920

没法白嫖不开心······· 不过为知识花一些钱也是值,省却自己采坑

Madman
Madman bill19920920 Author

😁

hongshao123
hongshao123

我刚开始第一章的学习,项目起来了,但打开网址前端不显示任何东西,怎么开启前端呢

dongjie110
dongjie110

可不可以一次付费,每篇一次。难受

leoduan
leoduan

github拉的代码,可以运行不报错,本地自己写的,完全一样,就报错,ModuleNotFoundError: No module named 'config',什么问题呢?

leoduan
leoduan leoduan

config是导入问题,已修改;重新运行后github的代码也报错了,都是404,

Not Found
The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.
mingkai
mingkai leoduan

url 写的有问题吧? 我刚开始叶碰到这个问题,仔细一看浏览里输入的是http://127.0.0.1:5000, 而不是http://127.0.0.1:5000/api/ping。 写成这样就没问题了。

Madman
Madman leoduan Author

跟着教程仔细点,理解了后自己能手写出来就差不多了。这一章就是搭个项目结构,一个最简单的路由处理函数而已,404说明路由没配置对

用户7206094097
用户7206094097

File "C:\Users\David.virtualenvs\pythonProject1-cSVtTpg4\lib\site-packages\flask_sqlalchemy\extension.py", line 629, in engines return self._app_engines[app] File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.10_3.10.2032.0_x64__qbz5n2kfra8p0\lib\weakref.py", line 416, in getitem return self.data[ref(key)] KeyError: <weakref 'flask'="" 0x0000016d2e2f1630="" 0x0000016d2e965d00;="" at="" to=""></weakref>

进行数据库迁移flask db migrate,报错看不太明白为什么

用户7206094097
用户7206094097 用户7206094097

忘记db = SQLAlchemy(app)l

专题系列