用 Rails 5.1 + Vue.js 實做 TodoLists (CRUD)

2018-05-06

Ruby on Rails

vuejs

基本要求

Rails version: 5.1 以上

基礎建設

建立帶 vue 的 rails 專案

rails new rails-vue-todolist --skip-turbolinks --skip-spring --webpack=vue

除了 Rails 建立以外，還會有 webpack 的安裝，過程需要等待一下

cd rails-vue-todolist

git add . git commit -m "Initialize Rails App"

快速建立 scaffold 的 CRUD

rails g scaffold Todolist item:string

別忘記 migrate, 生成 table

rake db:migrate

# 指定一下首頁
root "todolists#index"

可以先嘗試一下 vue 的 hello world

加入 javascript pack tag

# app/views/layout/application.html.erb
...
<%= javascript_pack_tag 'hello_vue' %>
...

然後在 todolists 的 index 設置進入點

# app/views/todolists/index.html.erb
<div id="hello"></div>
...

刷新頁面後，應該能在首頁看到 Hello Vue! 的字樣

大概知道這樣的關係後，就可以將 vue 逐步的動手改造 todolists 啦

首先，我們先把 app/views/todolists/index.html.erb 中的內容清空

只留下

# app/views/todolists/index.html.erb
<div id="todolists"></div>

這意味著 index 頁面，將不直接從 server side render, 直接用 vue 來做，而這是一個入口點的設置。

修改進入的主要檔案, 不用 demo file 了

# app/views/layout/application.js
# 把原本的 <%= javascript_pack_tag 'hello_vue' %> 替換如下
<%= javascript_pack_tag 'application' %>

宣告抓取 element todolists

# app/javascript/pack/application.js
import Vue from 'vue'
import App from '../todolists.vue'

document.addEventListener('DOMContentLoaded', () => {
  const el = "#todolists"
  const app = new Vue({
    el,
    render: h => h(App)
  })

  console.log(app)
})

並且生成 todolists.vue 在 app/javascript 之下

指令： touch app/javascript/todolists.vue

Index

接下來我們的 todolists/index, 就會直接從這個 vue 檔案渲染出來。

# app/javascript/todolists.vue
<template>
  <div>
    <h1>Todo Lists</h1>
    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>Item</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="todo in list" >
          <td>{{ todo.id }}</td>
          <td>{{ todo.item }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      list: [
        { id: 1, item: "Foo" },
        { id: 2, item: "Bar" }
      ]
    }
  }
}
</script>

這時候，刷新頁面，應該可以看到我們 default 的數據 foo & bar 了。

再來要確保資料的生成，可以進 rails console 建立幾筆資料

Todolist.create(item: "Test1")
Todolist.create(item: "Test2")

再來我們期望能夠在畫面正確輸出 Test1 & Test2, 就要開始動手寫 vue method 了

# app/javascript/todolists.vue
<script>
export default {
  data: function () {
    return {
      list: [
        { id: 1, item: "Foo" },
        { id: 2, item: "Bar" }
      ]
    }
  },

  created: function() {
   this.fetchTodoLists();
  },

  methods: {
    fetchTodoLists: function() {
       const resource = this.$resource('/todolists.json/{ id }');
       resource.get().then(function(response){
         this.list = response.data
       });
    }
  }
}

這時候刷新頁面，你會發現什麼都沒改變，並且 console 出現

TypeError: this.$resource is not a function

因為這時我們還沒有引入這個 Vue 的 resource 套件，方便我們操作 http method

先安裝相關的套件，下指令

yarn add vue-resource

安裝完後修改 app/javascript/application.js 在頂部加上這兩行，把他import 進去

import VueResource from 'vue-resource'
Vue.use(VueResource);

刷新頁面，應該就會發現我們的 item 是從我們 DB 拉出來的吧？

完成 index lists 的部分了

Create & Delete

接下來我們做 Create 的部分

# app/javascript/todolists.vue
<template>
    ...
    
    <input type="text" v-model="todo" class="form-control" autofocus="true">
    <button @click="addTodo()" class="btn btn-primary" :disabled="!todo.length">Add Todo</button>
    
    ...
</template>

<script>
export default {
  data: function () {
    return {
      todo: '',
      list: [
        { id: 1, item: "Foo" },
        { id: 2, item: "Bar" }
      ]
    }
  },
  ...
  ......
</script>

操作一下，是不是發現有輸入框和按鈕了？而且當輸入框沒任何字串時，按鈕的樣式會是 disable

再來就是綁定 addTodo 的事件了，一樣是寫在 method

# app/javascript/todolists.vue
<script>
...
...
methods: {
...
    addTodo(){
      this.$http.post('todolists.json', { item: this.todo }, {})
      .then((res) => this.fetchTodoLists(), this.todo = '')
      .catch((error) => console.log('Got a problem' + error));
    },
</script>

迫不及待按下 add Todo 了吧？這時候你會收到 422 的 response, 是因為 csrf token 的保護，導致你送出的表單被否決了。

簡單的解決方法如下

# app/javascript/appliation.js
    ...
    ...
document.addEventListener('DOMContentLoaded', () => {
  Vue.http.headers.common['X-CSRF-Token'] = document.getElementsByName('csrf-token')[0].getAttribute('content')
    ...
    ...
})

這樣一來 Create 就做好了吧？ Delete 也是一樣意思，只是從發 POST 變成發 Delete，這邊就只放 code 了

# app/javascript/todolists.vue
<template>
  <div>
    <h1>Todo Lists</h1>

    <input type="text" v-model="todo" class="form-control" autofocus="true">
    <button @click="addTodo()" class="btn btn-primary" :disabled="!todo.length">Add Todo</button>

    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>Item</th>
           <th>operate</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="todo in list" >
          <td>{{ todo.id }}</td>
          <td>{{ todo.item }}</td>
          <td>
            <button @click="deleteTodo(todo.id)" class="btn btn-primary">Delete Todo</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      todo: '',
      list: [
        { id: 1, item: "Foo" },
        { id: 2, item: "Bar" }
      ]
    }
  },

  created: function() {
   this.fetchTodoLists();
  },

  methods: {
    addTodo(){
      this.$http.post('todolists.json', { item: this.todo }, {})
      .then((res) => this.fetchTodoLists(), this.todo = '')
      .catch((error) => console.log('Got a problem' + error));
    },

    deleteTodo(todo_id){
      this.$http.delete('todolists/'+ todo_id +'.json')
      .then((res) => this.fetchTodoLists())
      .catch((error) => console.log('Got a problem' + error));
    },

    fetchTodoLists: function() {
       const resource = this.$resource('/todolists.json/{ id }');
       resource.get().then(function(response){
         this.list = response.data
       });
    }
  }
}
</script>

Edit & Update

實做方式有兩種

vue routes(換頁）
SPA（不換頁）

這邊我用 SPA 的方式去做，直接點擊文字可以出現一個輸入框以及更新的按鈕，詳細實做就看我的 github 參考了

Nic Lin's Blog

基本要求

基礎建設

Index

Create & Delete

Edit & Update