[學習筆記] React App and Django restful Api Using MongoDB with JWT authentication (一)

最近想學一點新東西來重溫寫程式的快樂，

就選了比較熱門的framework和程式語言，

大致會用到的技能樹有:

前端：React +Material UI + Redux 

後端：Python + Django +MongoDB+ Restful API+ JWT authentication 

邊學邊寫了一個小專案:餐酒館系統(MyBistro App)

其本上不是什麼教學，

只是個人練習記錄而己，

所以可能會有一些錯誤也没法回答没遇到的狀況或問題，

Source code 會更新到個人的GitHub，

(技術文件會放在GitHub Pages上)

目前的進度是V1.0-alpha，

功能還很陽春，

但前後端已經可以串接，

本篇先介紹已完成的項目，

安裝說明放到下面。

簡單的登入畫面:

註册新使用者畫面:

登入後的首頁:

側邊的選單在小螢幕時可以自動隱藏，點擊上方的小圖示可以展開。

選單/前台/菜單，會讀取資料庫的菜單，有篩選和排序功能。

菜單圖片放大

可以切換畫面的主題樣式(theme)

主題樣式:botanical

主題樣式:dark

測試頁面1:Call API

測試頁面4:選單練習

Error handling:

 

安裝說明:

前端App下載點:(or use git clone)

https://github.com/vuzzil/react-my-app/archive/refs/tags/v1.0-alpha.zip

安裝:

1.解壓縮至工作目錄:ex:D:\working\react-my-app

2.安裝指令: 需要 npm (請先安裝)

$>npm install

會自動安裝package.json檔內所需要相依的packages,

--------------------------------------------------------

啟動前端app指令:

$>npm start

後端App下載點:(or use git clone)

https://github.com/vuzzil/mybistro/archive/refs/tags/v1.0-alpha.zip

安裝:

1.解壓縮至工作目錄:ex:D:\working\python\mybistro

2.安裝指令: 需要 pipenv (請先安裝 ,指令: $>pip3 install pipenv)

$>pipenv install

安裝時建立虛擬環境，並自動安裝Pipfile檔內所需要相依的packages,

一般虛擬環境會安裝到類似以下路徑 :

C:\Users\yourname\.virtualenvs\mybistro-YTiYePRb

3.新增 .env檔 到專案根目錄(=1.工作目錄)

將Django SECRET_KEY和DB連線資料加到此檔:

SECRET_KEY = 'django-insecure-atvkjkx0z1xic5a69%m$h6mi9m1n+)_b+qs(4q63w_u!c)#%45'

DATABASE_HOST = 'localhost'
DATABASE_PORT = '27017'
DATABASE_USERNAME = 'db_username'
DATABASE_PASSWORD = 'db_password' 

註:SECRET_KEY在Django創建新project時會産生:

(以上列的只是舉例，測試可用，正式請重新産生。)

$>django-admin startproject bistro_backend . (.代表目前目錄當根目錄，才不會又多一層目錄)

--------------------------------------------------------------------------------

啟動後端Server指令:

$>pipenv shell  (進入shell)

(mybistro-YTiYePRb) D:\working\python\mybistro\>python manage.py runserver

資料庫:MongbDB  下載安裝Community版(5.0.x)即可。

可順便安裝MongoDB Compass，有圖型化介面可用。