基于React和Flask的前后端分离项目入门级 Demo--ToDo WebApp
email: 1329441308@qq.com; password: 1234567890
一个基础的 To-Do WebApp,实现了基本的CRUD功能,数据库使用的是MongDB。前端的React APP使用Ajax与后端的Flask RESTful APIs交互。
- React APP部署在Netlify,👉https://kind-mclean-15510a.netlify.com/,
- React + Ajax 部署在Netlify,👉https://vibrant-benz-4eff09.netlify.com/
- React + Ajax + 简略登录,👉https://hardcore-swirles-fbea59.netlify.com/
- Flask RESTful APIs部署在Heroku,👉https://flask-react-todo.herokuapp.com/api/v1/info
前端部署分支:netlify-frontend-service
REST后端部署分支:heroku-backend-service
Docker 部署:https://github.com/yeshan333/Flask-React-ToDoList/tree/docker
REST 资源未做保护(Bearer Token 实现分支: https://github.com/yeshan333/Flask-React-ToDoList/tree/bearer-token)
- 前端React部分主要依赖
- Material UI
- axios
- React
- React-Router-Dom
- 后端Flask部分主要依赖
- Flask
- pymongo
- gunicorn
- flask-cors
- 后端单元测试依赖
- nose2 0.9.1
- 前端性能优化
- 应用容器化部署
- 前端UX/UI优化
- 加个登录表单
- 登录安全性,资源保护
- 环境配置剥离
Apache 2.0
Start frontend development server
cd frontend
# install dependencies
npm install
# start front-end service
npm start # served at http://localhost:3000/
Start backend development server
cd backend
# create virtual environment
virtualenv env
# activate virtual environment
source env/Scripts/activate
# install dependencies
pip install -r requirements.txt
# initial Mongo Database, .\mongod.exe --config .\mongod.conf
flask create-database # drop database: flask drop-database name
# start flask service
flask run # served at http://localhost:5000/
Run in Docker Container @docker-compose🤣
git clone https://github.com/yeshan333/Flask-React-ToDoList
cd Flask-React-ToDoList
git checkout docker
docker-compose up