golang 框架与 VuetifyJS: UI 框架的强强联手

package main

import (
    "fmt"
    "net/http"

    "github.com/gorilla/mux"
)

func main() {
    router := mux.NewRouter()
    router.HandleFunc("/todos", getTodos).Methods(http.MethodGet)
    router.HandleFunc("/todos", createTodo).Methods(http.MethodPost)
    router.HandleFunc("/todos/{id}", updateTodo).Methods(http.MethodPut)
    router.HandleFunc("/todos/{id}", deleteTodo).Methods(http.MethodDelete)

    http.ListenAndServe(":8080", router)
}

// 其他 API 函数的代码 ......

<template>
  <v-app>
    <v-container>
      <v-data-table
        :headers="headers"
        :items="todos"
      >
        <template v-slot:item.actions="{ item }">
          <v-icon
            small
            class="mr-2"
            @click="editTodo(item.id)"
          >
            mdi-pencil
          </v-icon>
          <v-icon
            small
            @click="deleteTodo(item.id)"
          >
            mdi-delete
          </v-icon>
        </template>
      </v-data-table>
    </v-container>
  </v-app>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['todos']),
  },
  methods: {
    ...mapActions(['getTodos', 'editTodo', 'deleteTodo']),
  },
  mounted() {
    this.getTodos()
  },
}
</script>

// Vuex store
export const state = () => ({
  todos: [],
})

export const getters = {
  // getters
}

export const mutations = {
  // mutations
}

export const actions = {
  getTodos: async ({ commit }) => {
    // API 调用
  },

  editTodo: async ({ commit }, id) => {
    // API 调用
  },

  deleteTodo: async ({ commit }, id) => {
    // API 调用
  },
}