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 篇文章 | 13 人訂閱 訂閱系列文 RSS系列文
DAY 21

[VR 前後端交響曲Day21] Rails專案開發 - Vue draggable套件拖拉column

隨著鐵人賽過了2/3來到尾聲,我們的Kanban開始有了雛形。 而今天實作的目的,是要讓Kanban裡的欄位可以拖拉,而且能將拖拉完的結果存入資料庫! 想到系...

DAY 22

[VR 前後端交響曲Day22] Rails專案開發 - Vue draggable套件拖拉ticket

已經來到第22天了!剩下一週的時間我的專案就要部署(顯示為加緊趕工)~ 昨天的鐵人賽把column拖拉完成, 今天的需求:拖拉ticket,而且可以移動到不同的...

DAY 23

[VR 前後端交響曲Day23] Rails專案開發 - Vuex狀態管理 (1)

昨天我把一張自己開給自己的票:拖拉ticket解決了! 接著換下一張票、同時也就是今天的鐵人賽主題:改寫成Vuex來管理狀態~ 在鐵人賽第13天的時候曾經聊到...

DAY 24

[VR 前後端交響曲Day24] Rails專案開發 - Vuex狀態管理(2) mapState、mapGetters、mapActions、mapMutations

昨天鐵人賽我們kanban專案裡,把column改寫為Vuex狀態管理並透過beforeMount的方式從後端得到資料渲染在網頁上! 看起來好像前進了一大步,但...

DAY 25

[VR 前後端交響曲Day25] Rails專案開發 - 新增ticket

盤點這一週的完成項目: 我們現在學會了: 把Rails專案裡會重複使用的部分改寫成Vue 元件(column, ticket) 使用Vue套件Vue drag...

DAY 26

[VR 前後端交響曲Day26] Rails專案開發 - 新增ticket(v-if語法介紹)

昨天鐵人賽做完了新增ticket!所以現在專案裡,Done欄位完成了三張票~ 不過,在繼續實作編輯及刪除ticket功能之前,昨天的完成品有個地方我還不太滿意...

DAY 27

[VR 前後端交響曲Day27] Rails專案開發 - 編輯ticket (使用vuex狀態管理)

前情提要:前天我們完成了新增ticket,昨天也順便介紹了v-if語法;今天就延續著前兩天的tempo~~,介紹以Vue.js實作CRUD裡的編輯功能! Ste...

DAY 28

[VR 前後端交響曲Day28] Rails專案開發 - 刪除ticket (使用vuex狀態管理)

CRUD新增、刪除、修改、顯示功能是一個完整的線上系統不可或缺的功能。昨天我們完成了更新 ticket,以及介紹了dispatch讓Vue可以聯絡到Vuex的a...

DAY 29

[VR 前後端交響曲Day29] Rails專案開發 - Action Cable即時互動功能: 以edit和delete ticket為例

來到倒數第二天啦!感動流淚O_Q 前兩天裡用Vuex狀態管理的方式實作編輯和刪除ticket 本日待實作的功能:利用Action Cable廣播,在任何的瀏覽器...

DAY 30

[VR 前後端交響曲Day30] Rails專案開發 - 網站部署 + 完賽感言

今天就是網站部署、公開上線的日子了! 不過,因為現在只是最小可行產品而已,還有很多預計規劃的功能還沒完成(例如column component的CRUD),所以...

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