iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

「VR 」前端後端交響曲 - 30天開發 Vue.js feat. Ruby on Rails即時互動網站 系列

聽說:Javascript快統治全地球了!(誤)
聽說:javascript因為有了最近大熱門的前端框架御三家(React、Vue、Angular),
最近軟體公司的職缺都會在求職條件及加分項目中提到目前的三大框架!

相對容易上手的前端框架Vue.js,要如何整合網站後端開發最迅速的框架Rails呢?
讓我們用30天來探索及實作~來一場「VR」Vue.js feat. Ruby on Rails前端後端交響曲吧!

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

[VR 前後端交響曲Day11] Vue元件單向傳遞: $emit 製作todo list

經過昨天介紹$emit可以傳遞自訂的事件給父層元件之後,今天來利用$emit的特性,設計一個有3M便利貼風格的to-do list吧! 實作需求: 新增...

DAY 12

[VR 前後端交響曲Day12] 跨多層的Vue元件資料傳遞: event bus

這週都在討論props(從外層傳到內層元件)與emit(從內層傳到外層),如果是平行關係的元件(而非父子關係),要如何進行資料傳遞呢? 這時候就會出動一台公車,...

DAY 13

[VR 前後端交響曲Day13] Vuex狀態管理

昨天的鐵人賽文章有聊到event bus雖然方便,但是不容易偵錯及維護。隨著專案變大、元件變得越來越多,元件間的架構越來越複雜,有時候會遇到多個元件需要共用同一...

DAY 14

[VR 前後端交響曲Day14] Vue instance的生命週期

在第12天鐵人賽前在利用event bus傳情書給某個元件的時候, 可能眼尖的客倌會注意到,疑? 這個created()是不是還沒介紹到呢? created()...

DAY 15

[VR 前後端交響曲Day15] Vue instance的lifecycle hook: mounted()

昨天在理解Vue的生命週期時提到,Vue在前端處理上有一個透過掛載mounting的hook處理畫面渲染至瀏覽器前的階段。所以我們今天試著在Rails App裡...

DAY 16

[VR 前後端交響曲Day16] Rails 專案開發 - 網站進度規劃

前情提要:我們在鐵人賽第3天的時候為Rails專案裡導入了Vue.js框架, 接著花了10天左右的時間熟悉Vue重要的基本語法~ 嘗試2週內走一輪敏捷開發 在接...

DAY 17

[VR 前後端交響曲Day17] Rails專案開發 - 第1個Model : User註冊登入. UI修改

今天是中秋連假第二天~祝大家月餅柚子烤肉吃爽爽! 話說使用者的註冊登入系統是一個完整的網站不可或缺的功能, 昨天規劃好KanbanRails專案進度,把首頁做出...

DAY 18

[VR 前後端交響曲Day18] Rails專案開發 - 第2個Model: 建立看板 Kanban

話說前幾天聽了星箭廣播「如何變強」特輯:工程師學習新技術,深受啟發。這集的來賓是創業家林宜儒(Lawrence)同時也是一位資深的Rails後端工程師,他分享了...

DAY 19

[VR 前後端交響曲Day19] Rails專案開發 - 建立Vue元件: Column component

在昨天的鐵人賽,我們利用rails的scaffold指令,迅速地將看板Kanban的CRUD調整成符合專案適合的樣貌,並完成了使用者登入後頁面,列出了目前筆者在...

DAY 20

[VR 前後端交響曲Day20] Rails專案開發 - 建立Vue元件: Ticket component

昨天的鐵人賽我們終於開始真正把手上在開發的系統變成,Vue.js x Rails專案了,可喜可賀! 今天,我想開給自己兩張票ticket,包括明後兩天要製作的t...

貓貓工程師 / PM Ting的收藏
貓貓工程師 / PM Ting的追蹤
貓貓工程師 / PM Ting的Like
貓貓工程師 / PM Ting的紀錄