Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你

張哲嘉

2022/10/10

Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證在 nginx/sites-available 再增加一個網站設定，然後再做個連結到 nginx/sites-enabled，設定的內容就隨便寫個 server_name 和 listen 就好了然後

#網頁開發 #投資理財

張哲嘉

2022/10/10

[30] TLS/SSL for MongoDB

Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證在 nginx/sites-available 再增加一個網站設定，然後再做個連結到 nginx/sites-enabled，設定的內容就隨便寫個 server_name 和 listen 就好了然後

#網頁開發 #投資理財

張哲嘉

2022/10/10

[29] 讓網站更安全，不准直接連我的網站 IP

Block direct access by ip 一旦將網站對外，就要開始面對這個險惡的世界每天遭受一堆攻擊，雖然大部分都無關痛癢，幾乎都是機器人在 scan ip 然後在發一些無意義的請求，或者亂試 api，看能不能試出來...，最好是哪麼好試啦，而且加上我們之前在 JWT 篇章講到的 prot

#網站

張哲嘉

2022/10/10

[29] 讓網站更安全，不准直接連我的網站 IP

Block direct access by ip 一旦將網站對外，就要開始面對這個險惡的世界每天遭受一堆攻擊，雖然大部分都無關痛癢，幾乎都是機器人在 scan ip 然後在發一些無意義的請求，或者亂試 api，看能不能試出來...，最好是哪麼好試啦，而且加上我們之前在 JWT 篇章講到的 prot

#網站

張哲嘉

2022/10/10

[28] 用 Nginx 部署 production back-end server

保護後端重要資訊在 django 專案中我們會把設定都寫在 settings.py 內，包含了 SECRET_KEY 等機密資訊，通常專案都會做版本控制上 git，但把這些機密資訊也上 git 是很不好的一件事，畢竟 github 也是曾經被駭過的，所以最好是把這些不想讓別人知道的資訊寫在另外一個

#部署 #網站

張哲嘉

2022/10/10

[28] 用 Nginx 部署 production back-end server

保護後端重要資訊在 django 專案中我們會把設定都寫在 settings.py 內，包含了 SECRET_KEY 等機密資訊，通常專案都會做版本控制上 git，但把這些機密資訊也上 git 是很不好的一件事，畢竟 github 也是曾經被駭過的，所以最好是把這些不想讓別人知道的資訊寫在另外一個

#部署 #網站

張哲嘉

2022/10/10

[27] 用 Nginx 部署前端網站

打包網頁在部署網站之前，我們要先來打包我們的網頁前端專案為什麼要打包呢？什麼是打包呢？這有點像是編譯，如果你寫過 C 應該講到這裡就理解為什麼要這樣做了在網頁開發中網頁內容最原始就是直接用 html 下去寫，但一個成熟的開發者會善用框架來開發，不論是用 vue 或 react，樣式的部分也會從

#網頁 #網站 #部署

張哲嘉

2022/10/10

[27] 用 Nginx 部署前端網站

打包網頁在部署網站之前，我們要先來打包我們的網頁前端專案為什麼要打包呢？什麼是打包呢？這有點像是編譯，如果你寫過 C 應該講到這裡就理解為什麼要這樣做了在網頁開發中網頁內容最原始就是直接用 html 下去寫，但一個成熟的開發者會善用框架來開發，不論是用 vue 或 react，樣式的部分也會從

#網頁 #網站 #部署

張哲嘉

2022/10/10

[26] Nginx 介紹

歷經千辛萬苦，終於要來架站啦！首先先來介紹我們的架站工具 Nginx，最常用的架站工具主要有兩個，Apache 和 Nginx Apache 的歷史悠久，使用的人數也最多，之前在選擇架站工具時，考量的點是 Apache 比較肥，設定也比較難寫，所以最後選擇 Nginx 作為我的架站工具 Nginx

#網站

張哲嘉

2022/10/10

[26] Nginx 介紹

歷經千辛萬苦，終於要來架站啦！首先先來介紹我們的架站工具 Nginx，最常用的架站工具主要有兩個，Apache 和 Nginx Apache 的歷史悠久，使用的人數也最多，之前在選擇架站工具時，考量的點是 Apache 比較肥，設定也比較難寫，所以最後選擇 Nginx 作為我的架站工具 Nginx

#網站

張哲嘉

2022/10/10

[25] MongoDB 匯出整個資料庫

資料庫複制、身份驗證都有了，還能做什麼讓我們的資料更加安全呢？喔對了，還可以備份我們的資料！接下來來講匯出整個資料庫的資料來做備份安裝 MongoDB Database Tools MongoDB 這邊有一個指令叫 mongodump 是用來匯出資料庫的資料，你可以匯出整個資料庫，也可以選擇匯出部

#網頁開發 #資料庫

張哲嘉

2022/10/10

[25] MongoDB 匯出整個資料庫

資料庫複制、身份驗證都有了，還能做什麼讓我們的資料更加安全呢？喔對了，還可以備份我們的資料！接下來來講匯出整個資料庫的資料來做備份安裝 MongoDB Database Tools MongoDB 這邊有一個指令叫 mongodump 是用來匯出資料庫的資料，你可以匯出整個資料庫，也可以選擇匯出部

#網頁開發 #資料庫

張哲嘉

2022/10/10

[24] MongoDB 資料庫複制 & 身份驗證

資料庫複製不知道大家有沒有聽過負載均衡或者水平擴展呢？在網站佈署中我們會透過這些技術把網站架在多台 server 上，以避免萬一某台 server 掛掉，讓網頁服務仍能維持運作，或者去分擔負載 MongoDB 這邊有一個叫資料庫複製的技術，建立多個相同的 MongoDB service 在不同的

#網頁開發 #資料庫

張哲嘉

2022/10/10

[24] MongoDB 資料庫複制 & 身份驗證

資料庫複製不知道大家有沒有聽過負載均衡或者水平擴展呢？在網站佈署中我們會透過這些技術把網站架在多台 server 上，以避免萬一某台 server 掛掉，讓網頁服務仍能維持運作，或者去分擔負載 MongoDB 這邊有一個叫資料庫複製的技術，建立多個相同的 MongoDB service 在不同的

#網頁開發 #資料庫

張哲嘉

2022/10/10

[23] MongoDB: 更有技巧的查詢資料方法

在上一篇文章中，我們講解了 MongoDB 的基本操作，接下來想講講如何更有效率的查詢想要找的資料模糊查詢就是查詢的條件只要部分符合就可以找到了，不用查找的關鍵字完全正確，我們直接來舉個例子比較好理解先假設有以下這些資料模糊查詢，查找的資料 item 值內有包含 book 就返回這樣就會找

#網頁開發 #資料庫

張哲嘉

2022/10/10

[23] MongoDB: 更有技巧的查詢資料方法

在上一篇文章中，我們講解了 MongoDB 的基本操作，接下來想講講如何更有效率的查詢想要找的資料模糊查詢就是查詢的條件只要部分符合就可以找到了，不用查找的關鍵字完全正確，我們直接來舉個例子比較好理解先假設有以下這些資料模糊查詢，查找的資料 item 值內有包含 book 就返回這樣就會找

#網頁開發 #資料庫

張哲嘉

2022/10/10

[22] 用 python 來操作 MongoDB

Connect database 因爲我們後端是用 django，所以我們要用 python 來操作 MongoDB，MongoDB 官方推薦的 python driver 是 pymongo，首先來安裝在想使用的檔案內加入 myclient = pymongo.MongoClient("mong

#網頁開發 #資料庫

張哲嘉

2022/10/10

[22] 用 python 來操作 MongoDB

Connect database 因爲我們後端是用 django，所以我們要用 python 來操作 MongoDB，MongoDB 官方推薦的 python driver 是 pymongo，首先來安裝在想使用的檔案內加入 myclient = pymongo.MongoClient("mong

#網頁開發 #資料庫

張哲嘉

2022/10/10

[21] MongoDB Compass

上一篇有提到 MongoDB Compass，而且也已經裝好了，那就來介紹一下吧 MongoDB Compass 是官方做的圖形介面工具用來操作架好的 MongoDB service，這樣就不用什麼事情都辛苦的用 mongo shell 操作了 New connection 輸入想要連接的 Mong

#網頁開發 #資料庫

張哲嘉

2022/10/10

[21] MongoDB Compass

上一篇有提到 MongoDB Compass，而且也已經裝好了，那就來介紹一下吧 MongoDB Compass 是官方做的圖形介面工具用來操作架好的 MongoDB service，這樣就不用什麼事情都辛苦的用 mongo shell 操作了 New connection 輸入想要連接的 Mong

#網頁開發 #資料庫

張哲嘉

2022/10/10

[20] MongoDB getting started

Introduction MongoDB 應該是目前 NoSQL 陣營中最大家的資料庫，另外 Redis 也蠻多人使用，兩者主要區別是，Redis 更高效能，但是預設佔用的資源也較多 Installation 基本上就從 MongoDB 官網下載，然後解壓縮後一直點下去就好執行安裝檔有一個 Ins

#網頁開發 #資料庫

張哲嘉

2022/10/10

[20] MongoDB getting started

Introduction MongoDB 應該是目前 NoSQL 陣營中最大家的資料庫，另外 Redis 也蠻多人使用，兩者主要區別是，Redis 更高效能，但是預設佔用的資源也較多 Installation 基本上就從 MongoDB 官網下載，然後解壓縮後一直點下去就好執行安裝檔有一個 Ins

#網頁開發 #資料庫

張哲嘉

2022/10/09

[19] JWT --part4: interceptor & api authentication

前言只要把後端對外，或者網站對外，就一定會被攻擊，有自己用自己的電腦當 server 架站過就一定知道，只要一對外，每天都會收到一些隨機的攻擊，最常見就是別人在亂試 api 看能不能猜對，通常是猜不到啦，鬼知道你的 api 長什麼樣子，更別提要帶什麼參數，能猜對真的是會通靈。儘管如此，你可能還是

#網頁開發

張哲嘉

2022/10/09

[19] JWT --part4: interceptor & api authentication

前言只要把後端對外，或者網站對外，就一定會被攻擊，有自己用自己的電腦當 server 架站過就一定知道，只要一對外，每天都會收到一些隨機的攻擊，最常見就是別人在亂試 api 看能不能猜對，通常是猜不到啦，鬼知道你的 api 長什麼樣子，更別提要帶什麼參數，能猜對真的是會通靈。儘管如此，你可能還是

#網頁開發

張哲嘉

2022/10/09

[18] Json web token authentication --part3: Vue

State management 首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management，檔案位置在 src/store/index.ts Login 接下來我們來寫一下登入頁面在 src/components/login.vue ，以下是 sc

張哲嘉

2022/10/09

[18] Json web token authentication --part3: Vue

State management 首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management，檔案位置在 src/store/index.ts Login 接下來我們來寫一下登入頁面在 src/components/login.vue ，以下是 sc

張哲嘉

2022/10/09

[17] Json web token authentication --part2: Django

django 這邊需要使用 Django REST framework (drf) 及 drf 官方推薦實作 JWT 的 Django-rest-framework-simplejwt 這兩個套件。 settings.py 再來設定 django 的 back_end/settings.py 引入，

#網頁開發

張哲嘉

2022/10/09

[17] Json web token authentication --part2: Django

django 這邊需要使用 Django REST framework (drf) 及 drf 官方推薦實作 JWT 的 Django-rest-framework-simplejwt 這兩個套件。 settings.py 再來設定 django 的 back_end/settings.py 引入，

#網頁開發

張哲嘉

2022/10/09

[16] Json web token authentication --part1: JWT introduction

session & token 驗證機制早期是用 session，server 這裡會發一個 session 給 client，並在資料庫記錄這個 session 屬於誰，而且每個裝置都會記一組 session，這會造成 server 這邊需要記錄大量的資料。後來發展出 token，client

#網頁開發

張哲嘉

2022/10/09

[16] Json web token authentication --part1: JWT introduction

session & token 驗證機制早期是用 session，server 這裡會發一個 session 給 client，並在資料庫記錄這個 session 屬於誰，而且每個裝置都會記一組 session，這會造成 server 這邊需要記錄大量的資料。後來發展出 token，client

#網頁開發

張哲嘉

2022/10/09

[15] 用 POST 串起前後端

講完 get 來講 post，那這兩個 call api 的方法有什麼差別呢？先記得一個原則，要傳遞機密的資料用 post，如果要傳遞的參數被別人知道也無所謂就用 get post 是傳遞資料到後台，資料不會顯示在 url 上，get 是傳遞參數到後台，參數會直接顯示在 url 上和後端的終端上，像

#網頁開發

張哲嘉

2022/10/09

[15] 用 POST 串起前後端

講完 get 來講 post，那這兩個 call api 的方法有什麼差別呢？先記得一個原則，要傳遞機密的資料用 post，如果要傳遞的參數被別人知道也無所謂就用 get post 是傳遞資料到後台，資料不會顯示在 url 上，get 是傳遞參數到後台，參數會直接顯示在 url 上和後端的終端上，像

#網頁開發

張哲嘉

2022/10/07

[14] 用 GET 串起前後端

前端和後端溝通，最常用就是 get 和 post 後端先在 django 專案這邊的 views.py 內建立一個讓前端以 get 方法呼叫的 api function1 內的第一個參數是前端的 request，之後第二個參數第三個參數可以隨便你設，這倒是沒有限制用 request.GET 這個

#python

張哲嘉

2022/10/07

[14] 用 GET 串起前後端

前端和後端溝通，最常用就是 get 和 post 後端先在 django 專案這邊的 views.py 內建立一個讓前端以 get 方法呼叫的 api function1 內的第一個參數是前端的 request，之後第二個參數第三個參數可以隨便你設，這倒是沒有限制用 request.GET 這個

#python

張哲嘉

2022/10/07

[13] Compare axios, ajax, fetch

接下來要講前後端怎麼溝通，最常見應該都是用 axios, ajax 或 fetch 來 call api。先講結論，個人推薦使用 axios，那他們又有什麼優缺點呢？讓我簡單講解一下 ajax ajax 用法有點麻煩，要先引入 jQuery，用法如下 ajax 比起 axios 較為笨重也較不安全

#python

張哲嘉

2022/10/07

[13] Compare axios, ajax, fetch

接下來要講前後端怎麼溝通，最常見應該都是用 axios, ajax 或 fetch 來 call api。先講結論，個人推薦使用 axios，那他們又有什麼優缺點呢？讓我簡單講解一下 ajax ajax 用法有點麻煩，要先引入 jQuery，用法如下 ajax 比起 axios 較為笨重也較不安全

#python

張哲嘉

2022/10/07

[12] Django app

Create app django 的架構是這樣的，在專案底下有 app，你的 api 會寫在 app 底下，這樣好處就是可以分門別類，不同功能寫在不同 app 內建立 app 的指令如下比方說我建立了一個 app 叫 app，那專案內就會多了個 app 路徑 settings.py 把這個 a

#python

張哲嘉

2022/10/07

[12] Django app

Create app django 的架構是這樣的，在專案底下有 app，你的 api 會寫在 app 底下，這樣好處就是可以分門別類，不同功能寫在不同 app 內建立 app 的指令如下比方說我建立了一個 app 叫 app，那專案內就會多了個 app 路徑 settings.py 把這個 a

#python

張哲嘉

2022/10/07

[11] Create Django project

Create project 那來建立 django 專案吧 django 的專案結構長這個樣子 settings.py 是 django 專案的設定檔，之後會常常提到 urls.py 是設定路由 wsgi.py 和 asgi.py 是正式部署後端時相關的檔案 manage.py 是部署開發模式時或

#python

張哲嘉

2022/10/07

[11] Create Django project

Create project 那來建立 django 專案吧 django 的專案結構長這個樣子 settings.py 是 django 專案的設定檔，之後會常常提到 urls.py 是設定路由 wsgi.py 和 asgi.py 是正式部署後端時相關的檔案 manage.py 是部署開發模式時或

#python