Flask Vue.js全棧開發

1. Flask Vue.js全棧開發教程系列

• Flask Vue.js全棧開發｜第1章：建立第一個Flask RESTful API
• Flask Vue.js全棧開發｜第2章：Vue.js通過axios訪問Flask RESTful API
• Flask Vue.js全棧開發｜第3章：Flask設計User使用者相關API
• Flask Vue.js全棧開發｜第4章：Vue.js呼叫API實現使用者註冊/登入/退出
• Flask Vue.js全棧開發｜第5章：個人主頁與使用者頭像
• Flask Vue.js全棧開發｜第6章：部落格文章CURD與Markdown
• Flask Vue.js全棧開發｜第7章：粉絲關注大神
• 單元測試 (敬請期待)
• 使用者評論 (敬請期待)
• 站內訊息 (敬請期待)
• 許可權管理 (敬請期待)
• 郵件的用處 (敬請期待)
• 修改使用者設定 (敬請期待)
• 管理員視角 (敬請期待)
• Celery任務佇列與定時任務 (敬請期待)
• Elasticsearch全站搜尋 (敬請期待)
• 國際化 (敬請期待)
• 效能優化 (敬請期待)
• Linux雲主機部署 (敬請期待)
• Docker容器部署 (敬請期待)

2. 如何使用

2.1 git clone

$ git clone https://github.com/wangy8961/flask-vuejs-madblog.git
 

2.2 Backend

Open a new terminal:

$ cd back-end
$ python -m venv venv
$ source venv/bin/activate
(venv)$ pip install -r requirements.txt

# Flask-Migrate create database
(venv)$ flask db upgrade

# create back-end/.env file, like this
FLASK_APP=madblog.py
FLASK_DEBUG=1

(venv)$ flask run

瀏覽器訪問: http://localhost:5000/api/ping

2.3 Frontend

Open a new terminal:

$ cd front-end
$ npm install
$ npm run dev

瀏覽器訪問: http://localhost:8080