[實戰] 使用 Vue.js 和 Iris 共建一個簡單的 Todo MVC 應用

pardon110發表於2019-11-24
Vue.jsMVC

本文用Golang的Iris框架作為後端服務，vuejs渲染前端UI，用websocket通訊。基於監聽hash變化 director.js庫實現簡單路由，axios庫與後方溝通，netoffos.js庫事件交流，小而美。

資料服務

package todo

import "sync"

// Item 條目資料
type Item struct {
    SessionID string `json:"-"`
    ID        int64  `json:"id,omitempty"`
    Title     string `json:"title"`
    Completed bool   `json:"completed"`
}

// Service 通用介面
type Service interface {
    Get(owner string) []Item
    Save(owner string, newItems []Item) error
}

// MemoryService 記憶體服務儲存結構
type MemoryService struct {
    // 對映鍵為sessionid，值是攜帶sesseionid的item型別組成的列表
    items map[string][]Item
    // 併發訪問讀寫鎖
    mu sync.RWMutex
}

// NewMemoryService 初始化
func NewMemoryService() *MemoryService {
    return &MemoryService{
        items: make(map[string][]Item, 0),
    }
}

// Get 讀
func (s *MemoryService) Get(sessionOwner string) []Item {
    s.mu.RLock()
    items := s.items[sessionOwner]
    s.mu.RUnlock()
    return items
}

// Save 寫
func (s *MemoryService) Save(sessionOwner string, newItems []Item) error {
    var prevID int64
    for i := range newItems {
        if newItems[i].ID == 0 {
            newItems[i].ID = prevID
            prevID++
        }
    }

    s.mu.Lock()
    s.items[sessionOwner] = newItems
    s.mu.Unlock()
    return nil
}

前端vuejs

        <section class="main" v-show="todos.length" v-cloak="">
            <input type="checkbox" v-model="allDone" class="toggle-all">
            <ul class="todo-list">
                <li v-for="todo in filteredTodos" class="todo" :key="todo.id"
                    :class="{ completed:todo.completed,editing:todo == editedTodo }">
                    <div class="view">
                        <input type="checkbox" @click="completeTodo(todo)" class="toggle">
                        <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
                        <button @click="removeTodo(todo)" class="destroy"></button>
                    </div>
                    <input type="text" v-model="todo.title" v-todo-focus="todo==editedTodo" @blur="doneEdit(todo)"
                        @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)" class="edit">
                </li>
            </ul>
        </section>

相關文章