markdown RESTful模块

Posted 2021-05-05

## 架構

![Imgur](https://i.imgur.com/JVaBZNW.png)

## Vue Pages

#### index.vue

```html
<script>
  import { mapGetters } from 'vuex'
  import TodoList from '@/components/Todos'
  import TodoItem from '@/components/TodoItem'

  export default {
    name: 'todo',
    data() {
      return {
        newTodo: ''
      }
    },
    computed: {
      ...mapGetters({
        // 未完成
        todos: 'getTodos',
        //已完成
        dones: 'getDones'
      })
    },
    components: {
      //已完成
      TodoList,
      // 未完成
      TodoItem
    },
    methods: {
      // ...mapActions(['actionTodoCreate'])
      actionTodoCreate() {
        this.$store.dispatch('actionTodoCreate', this.newTodo).then(res => {
          this.newTodo = ''
        })
      }
    },
    mounted() {
      // 讀取預設值
      this.$store.dispatch('actionTodoRead')
    }
  }
</script>

<template src="./template.html"></template>
<style lang="scss" src="./style.scss" scoped></style>
```

#### template.html

```html
<div class="todo">
  <div class="container">
    <h2>Todo List</h2>
    <div class="row">
      <div class="input-group col-md-4">
        <!--按下enter 即新增-->
        <input
          class="form-control"
          type="text"
          v-model="newTodo"
          @keyup.enter="actionTodoCreate"
        />
        <span class="input-group-btn">
          <button class="btn btn-success" @click="actionTodoCreate">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
          </button>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <h4>未完成</h4>
        <ol>
          <!--未成完的component-->
          <!--透過v-for 將值傳入component-->
          <TodoItem v-for="item in todos" :item="item" :key="item.id" />
        </ol>
      </div>
      <div class="col-md-6">
        <!--已完成的component-->
        <TodoList :dones="dones" />
      </div>
    </div>
  </div>
</div>
```

## Component - TodoItem

#### index.vue

```html
<script>
  import { mapActions } from 'vuex'
  export default {
    name: 'todoItem',
    props: {
      item: Object
    },
    data() {
      return {
        // 修改模式預設值
        updateMode: false
      }
    },
    // 自訂v-xxx 指令
    directives: {
      // 功能: focus input
      // el: 該input
      // value: updateMode
      // context: VueComponent
      focus(el, { value }, { context }) {
        if (value) {
          // $nextTick: 個動作完成後，才執行裡面包含的程式
          context.$nextTick(() => {
            el.focus()
          })
        }
      }
    },
    methods: {
      ...mapActions(['deleteTodo', 'updateTodo']),
      // hide checkbox, display, delete button
      // show edit input
      showEditMode() {
        this.updateMode = true
      },
      // change「done」status
      toggleTodo() {
        this.$store.dispatch('toggleTodo', this.item.id)
      },
      // change「content」
      actionEdit(e) {
        // e: KeyboardEvent
        const userChange = e.target.value.trim()
        this.updateTodo({
          id: this.item.id,
          change: userChange
        })
        this.updateMode = false
      },
      cancelEdit(e) {
        // e: FocusEvent
        // e.target: input.edit-input
        e.target.value = this.item.content
        this.updateMode = false
      }
    }
  }
</script>

<template src="./template.html"></template>
<style lang="scss" src="./style.scss" scoped></style>
```

#### template.html

```html
<div class="todoItem">
  <li>
    <div v-if="!updateMode">
      <label>
        <input type="checkbox" :checked="item.done" @change="toggleTodo" />
        {{ item.content }}
      </label>
      <!-- 修改按鈕 -->
      <button class="btn btn-xs btn-primary" @click="showEditMode">
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
      </button>
      <!-- 刪除按鈕 -->
      <button class="btn btn-xs btn-danger" @click="deleteTodo( item.id )">
        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
      </button>
    </div>
    <!--編輯視窗-->
    <div v-if="updateMode">
      <input
        class="edit-input"
        v-focus="updateMode"
        placeholder=""
        :value="item.content"
        @keyup.enter="actionEdit"
        @blur="cancelEdit"
        @keyup.esc="cancelEdit"
      />
    </div>
  </li>
</div>
```

## Component - DoneList

#### index.vue

```html
<script>
  import { mapActions } from 'vuex'

  export default {
    name: 'todos',
    props: {
      dones: Array
    },
    methods: {
      ...mapActions(['toggleTodo'])
    }
  }
</script>

<template src="./template.html"></template>
<style lang="scss" src="./style.scss" scoped></style>
```

#### template.html

```html
<div class="todos">
  <h4>完成</h4>
  <ul>
    <li v-for="(done, index) in dones">
      <p>
        <input
          type="checkbox"
          :checked="done.done"
          @change="toggleTodo(done.id)"
          :id="done.id"
        />
        <label>{{ done.content }}</label>
      </p>
    </li>
  </ul>
</div>
```

## Vuex Store

#### action.js

```javascript
import * as types from './mutations_type.js'

const axios = require('axios')

// 使用JS的解構，將$store.commit-> {commit}
// commit is function
// boundCommit (type, payload, options) {
//  return commit.call(store, type, payload, options)
// }
// 讀取預設值至 $store
export const actionTodoRead = ({ commit }) => {
  axios.get('http://localhost:8080/api/todos').then(res => {
    commit(types.TODO_READ, res.data)
  })
}

// 新增
export const actionTodoCreate = ({ commit }, value) => {
  if (!value) return false
  axios
    .post('http://localhost:8080/api/todos', {
      content: value,
      done: false
    })
    .then(res => {
      commit(types.TODO_CREATE, res.data)
    })
}

// 修改狀態
export const toggleTodo = ({ commit }, id) => {
  // 取得當筆資料
  axios.get(`http://localhost:8080/api/todos/${id}`).then(res => {
    axios
      .patch(`http://localhost:8080/api/todos/${res.data.id}`, {
        done: !res.data.done
      })
      .then(res => {
        commit(types.TOGGLE_TODO, res.data.id)
      })
  })
}

// 修改內容
// context: $store
export const updateTodo = (context, { id, change }) => {
  axios
    .patch(`http://localhost:8080/api/todos/${id}`, {
      content: change
    })
    .then(res => {
      context.commit(types.UPDATE_TODO, { id, change })
    })
}

// 刪除
export const deleteTodo = ({ commit }, id) => {
  axios.delete(`http://localhost:8080/api/todos/${id}`).then(res => {
    commit(types.DELETE_TODO, id)
  })
}
```

#### getters.js

```javascript
// 未完成資料
export const getTodos = state => {
  return state.todos.filter(item => {
    return !item.done
  })
}

// 已完成資料
export const getDones = state => {
  return state.todos.filter(item => {
    return item.done
  })
}
```

#### mutation_type.js

```javascript
export const TODO_READ = 'TODO_READ'
export const TODO_CREATE = 'TODO_CREATE'
export const TOGGLE_TODO = 'TOGGLE_TODO'
export const UPDATE_TODO = 'UPDATE_TODO'
export const DELETE_TODO = 'DELETE_TODO'
```

#### mutations.js

```javascript
import * as types from './mutations_type.js'

// $store.state
export const state = {
  // 全部事件
  todos: []
}

export const mutations = {
  // 預設值賦值
  [types.TODO_READ](state, data) {
    state.todos = data
  },
  // 新增
  [types.TODO_CREATE](state, data) {
    state.todos.push({
      id: data.id,
      content: data.content,
      done: data.done
    })
  },
  // 改變狀態
  [types.TOGGLE_TODO](state, id) {
    let item = state.todos.find(value => {
      return value.id === id
    })
    item.done = !item.done
  },
  // 更新內容
  [types.UPDATE_TODO](state, { id, change }) {
    let item = state.todos.find(value => {
      return value.id === id
    })
    item.content = change
  },
  // 刪除
  [types.DELETE_TODO](state, id) {
    let item = state.todos.find(value => {
      return value.id === id
    })
    let index = state.todos.indexOf(item)
    state.todos.splice(index, 1)
  }
}
```

#### index.js

```javascript
import Vue from 'vue'
import Vuex from 'vuex'
import { state, mutations } from './mutations.js'
import * as getters from './getters.js'
import * as actions from './actions.js'

Vue.use(Vuex)

export default new Vuex.Store({
  // 嚴格模式，禁止直接修改 state
  strict: true,

  state,
  getters,
  actions,
  mutations
})
```