依賴環境
根據使用的電腦系統自行安裝,環境的配置是一個基本功,搜索引擎搜索很多,也是考驗辨別哪些是有效教程的基本能力,這邊建議是參考簡書的.
node npm 前端Vue運行編譯環境
element-ui-admin 后台前端開箱即用模版
python3 服務開發語言環境
pip3 python的包管理工具
flask 接口開發包
git 代碼工具
初始化后台前端
Vue 是一位叫尤雨溪大牛開發漸近交互式前端框架,是一個很容易入手開發的框架,element-ui是餓了么團隊基於vue封裝一個UI框架,然后element-ui-admin又是一位叫PanJiaChen基於前邊開發的一個開箱即用的后台模版框架,反正我們是得意於這些大牛們的無私貢獻,讓我們自己開發個平台沒有像以前那么難了。
打開終端,檢查前端依賴環境
node --versionnpm -version
切換到代碼保存路徑,下載代碼,並進入項目目錄
git clone https://github.com/PanJiaChen/vue-element-admin.git cd vue-element-admin
安裝依賴, 直接用國內鏡像, 解決外網超時或者慢問題
npm install --registry=https://registry.npm.taobao.org
啟動服務
npm run dev
如果沒有環境和編譯錯誤的話,就可以看到控制台輸出的地址,瀏覽器訪問即可,默認是 http://localhost:9527 會看到登錄界面,然后輸入任意用戶名和密碼就看主界面了,如圖:
那么很簡單一個開箱即用的后台就配置初始化起來了,這里說明的是目前數據都是框架自己mock的,所以並沒有實際后端服務的數據。
初始化后端服務
Python flask 一個web微框架,這里我們用來實現resful api服務,其實現在一些項目用的是tornado, 不過想了想還是用flask,其一因為我本身沒有用,所以當成一個學習機會,其二說到另一個項目后端服務是要用spring boot, 在接口路徑實現(controller) 都是類似注解的方式,所以在過度學習的時候會容易些。下面依然不借助任何高級IDE,硬編碼實現個最簡單的接口
安裝依賴包
pip3 install -U flask
創建run.py 使用vim run_flask.py 或者任意文本編輯器,敲如下代碼
運行代碼
python run_flask.py
沒有手誤單詞或者語法錯誤的話,就能看到正常debug模式啟動了,我們可以通過瀏覽器直接訪問 http://127.0.0.1:5000/api/hello 或者用curl命令行測試
curl "http://127.0.0.1:5000/api/hello"
均能看到返回 Hello, World! 至此前后端服務也初始化並啟動完成。
下篇准備分享內容:element-ui-admin結構介紹和實現前后端互通登錄
最后,文章內容僅為自己總結和分享,難免有理解不足和錯誤之處,歡迎隨時交流指正,如果你有任何嘗試過程中的問題也可以留言或者加我交流,但特別強調的是拒絕回答不經過自己排查和搜索嘗試就直接問的這種,但如果你努力仍然沒有解決,即使簡單問題也不怕,所謂旁觀者清,有時我也常有這種情況,那就及時交流求助快速解決問題,保持學習積極性。
附官方地址:
-
node: http://nodejs.cn/download/
-
element-ui-admin: https://panjiachen.github.io/
-
python3: https://www.python.org/downloads/
-
pip3: https://pypi.org/project/pip/#files
-
flask: https://flask.palletsprojects.com/
-
git: https://git-scm.com/downloads