iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

Vue+Django+MongoDB+Nginx 全端開發 系列

比起詳細教學單一技能,網路上或者市面上整合多項技能的教學相對少很多,但要真的完成一項專案往往不是只靠一項技能便能做到。

而且教科書式的完整教學也比較枯燥乏味,因此我想以自身的經驗為例,以全端開發各項技能中最常用到的部分進行講解,讓讀者能夠快速上手掌握全端技能。

我將以 Vue 為前端框架, Django 為後端, 資料庫使用 MongoDB,最後以 Nginx 部署 web server,實作完整的 web 開發。

鐵人鍊成 | 共 30 篇文章 | 18 人訂閱 訂閱系列文 RSS系列文
DAY 1

Introduction of Vue, Django, MongoDB, Nginx

Vue 目前前端三大框架包含 facebook 開發的 React ,google 開發的 Angular,以及由 Evan You 開發的 Vue ,Vue...

DAY 2

Vue: getting started

前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,這 30 天我將以最新的 composition api + types...

DAY 3

Vue 專案架構

專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁...

DAY 4

Vue 頁面結構

在寫頁面之前,先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像,一樣是分成...

DAY 5

寫一個 Vue 頁面

定義路由 首先先來定義路由,先把上一篇寫的 home.vue 定義在根路由。 打開 src/router/index.ts,在 routes 內定義 {...

DAY 6

Vue 指令

v-bind v-bind 可以讓 template 內的標籤去綁定 script 內定義的變數,舉個例子 <template> <div...

DAY 7

Vue: Life cycle

今天來介紹 vue 的生命週期,什麼是生命週期呢?講簡單一點就是從你用瀏覽器打開網頁開始,到網頁內的元件一個一個生成,到整個完整的網頁建立的過程就叫生命週期,完...

DAY 8

Vue Router

Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 const routes: Array&l...

DAY 9

State management

狀態管理有點像是 cookie 或 localStorage,可是又多了更多操作可以用,讓你再切換頁面時可以使用相同的變數。 用來使用這個功能的套件叫做 vue...

DAY 10

Django getting started

Introduction 如果以 python 為後端,那最常見而且我覺得也比較穩定的框架是 django 和 flask 適合 flask 的使用場景是如果你...