flask+vue全棧開發實踐——1. 工程初始化

來自專欄 flask+vue全棧開發日記本實踐系列4 人贊了文章

簡單原則

1. 鑒於現在Docker越來越流行，我們也會使用Docker來部署環境和上線。為了方便，我們將前後端代碼放在一起打包。
2. 文中的命令，有時會省略路徑的切換步驟，請自行切換到對應的路徑中。
3. 我們會使用前、後端分離的技術，並採用Restful介面開發。

相關軟體安裝

本人開發環境為mac，這裡不詳解各個軟體的安裝，大家可以自行百度下列這些軟體在其他平台上的安裝方法。

1. nodejs

去官網下載nodejs安裝包安裝即可，這裡下載版本為：v8.11.1

2. vue-cli

命令行中使用npm全局安裝：

npm install -g vue-cli

3. python3

brew install python3

4. pipenv

pip3 install pipenv

5. nginx

• mac：brew install nginx
• 其他平台: 自行百度或google

6. Pycharm

下載免費版：https://download-cf.jetbrains.com/python/pycharm-community-2018.1.1.dmg

項目初始化

1. 創建項目頂層目錄並初始化python環境

mkdir py-notecd py-notepipenv --threepipenv install flask

這裡的py-note只是我們工程目錄的名字，不會出現在前、後端的代碼中，即代碼無關。

使用pipenv初始化完環境之後，打開Pycharm，設置一下工作環境：

2. 初始化前端項目

vue init webpack py-note-fe

如下：

? py-note vue init webpack py-note-fe? Project name py-note-fe? Project description A Vue.js project? Author wuxinlong <wuxinlong@shuidihuzhu.com>? Vue build standalone? Install vue-router? Yes? Use ESLint to lint your code? Yes? Pick an ESLint preset Standard? Set up unit tests No? Setup e2e tests with Nightwatch? No? Should we run `npm install` for you after the project has been created? (recommended) yarn vue-cli · Generated "py-note-fe".# Installing project dependencies ...# ========================yarn install v0.24.4info No lockfile found.[1/4] ?? Resolving packages...[2/4] ?? Fetching packages......

說明：

初始化完成之後，啟動前端開發環境：

cd py-note-fe && npm run dev

完成後，瀏覽器中打開http://127.0.0.1:8080，即可看到如下頁面：

3. 創建後端工程目錄

mkdir py_notetouch py_note/__init__.py

為什麼後端工程還以py_note命名呢？python工程的習慣而已，可以隨便命名為其他的。注意：後端工程內部需要以這個名字來import模塊，所以這個文件夾名字是跟代碼相關的。

注意：python包名中不能包含-，統一用下劃線_；而前端包卻用中劃線-。這只是不能的命名習慣而已。

• 3.1 編輯py_note/__init__.py：

# -*- coding: utf-8 -*-from flask import Flaskdef create_app(): app = Flask(__name__) @app.route(/) def root(): return Hello world return app

這裡定義了一個方法，用來創建我們後端的主app。@app.route用來註冊一個路由，當我們訪問/的時候返回Hello world。

• 3.2 工程頂層目錄創建文件run.py
  這個文件是用來啟動開發環境用的，文件名自己隨意。

# -*- coding: utf-8 -*-from py_note import create_appapp = create_app()app.run(debug=True, port=5555)

按快捷鍵:Ctrl + Shift + D，啟動程序。在瀏覽器中訪問http://127.0.0.1:5555，我們可以看到網頁上出現了Hello world。

此時文件目錄如下：

# tree -L 2 py-notepy-note├── Pipfile├── Pipfile.lock├── py-note-fe│ ├── README.md│ ├── build│ ├── config│ ├── index.html│ ├── node_modules│ ├── package.json│ ├── src│ ├── static│ └── yarn.lock├── py_note│ └── __init__.py└── run.py

結語

我們初始化了整個工程環境，並順利地啟動了前後端開發伺服器，通過http://127.0.0.1:8080正常訪問第一個前端頁面，通過http://127.0.0.1:5555正常訪問第一個後端頁面。我們後面的開發會使用Restful，後端介面基本不再通過瀏覽器來訪問。

原文鏈接

https://github.com/readyou/py-note/blob/master/docs/1.%20%E5%B7%A5%E7%A8%8B%E5%88%9D%E5%A7%8B%E5%8C%96.md

加QQ群共同成長

群號碼：1524563698829

http://qm.qq.com/cgi-bin/qm/qr?k=wLmc6Uvn4-pAb5oG6D1-Zj7AljUYeHzj (二維碼自動識別)