flask + vue.js 实现简单todolist应用

https://github.com/yangzhezjgs/flask_demo/tree/master/todolist

使用vuejs,axios,flask,sqlalchemy,sqlite3(一个简单的单文件数据库)构建的一个TODOlist应用,练习前后端交互和增删查改。

使用的手脚架为:

vue init webpack-simple todolist

搭建环境和依赖略过
核心文件

todolist.py
/src/App.vue

使用:

npm run dev
python todolist.py

效果图:
回车添加,点击delete删除,点击item修改状态。
这里写图片描述

—–9.14更新
(1)修正点击delete会出错的bug
(2)添加了表单验证功能,表单为空的情况下无法提交并有错误提示。
—–18.1.7更新
前后端接口修改为restful接口
使用了flask的MethodView替换装饰器路由
todolist.py替换为app.py

使用说明:
(1)确认安装node,npm,vue-cli,flask,flask-alchemy,flask-wtf,sqlite3
(2)
npm install 安装前端依赖
npm run dev开启前端node服务器
(3)
app.py目录下执行如下命令,创建数据库

>>> from app import db
>>> db.create_all()

(4)执行Python app.py,开启后端服务器

猜你喜欢

转载自blog.csdn.net/yz764127031/article/details/77954677