如何使用Go语言和Vue.js构建用户管理组件

func AuthMiddleware(next http.Handler) http.Handler {
  return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
    // verify token
    tokenStr := r.Header.Get("Authorization")
    if tokenStr == "" {
        http.Error(w, "Authorization required", http.StatusUnauthorized)
        return
    }

    token, err := jwt.Parse(tokenStr, func(token *jwt.Token) (interface{}, error) {
        return []byte("Secret"), nil
    })

    if err != nil || !token.Valid {
        http.Error(w, "Invalid authorization token", http.StatusUnauthorized)
    }

    // Call the next handler, which can be another middleware in the chain, or the final handler.
    next.ServeHTTP(w, r)
})
}

func main() {
router := gin.Default()

// Register middleware
router.Use(middleware.AuthMiddleware)

// Create user
router.POST("/api/users", CreateUser)

// Query user list
router.GET("/api/users", GetUserList)

// Query single user
router.GET("/api/users/:id", GetUser)

// Update user
router.PUT("/api/users/:id", UpdateUser)

// Delete user
router.DELETE("/api/users/:id", DeleteUser)

// Start server
router.Run(":8080")
}

<template>
    <div>
        <!-- User list component -->
        <user-list :users="users" @update="handleUpdate" @delete="handleDelete" />

        <!-- User form component -->
        <user-form v-if="showForm" :user="user" @submit="handleSubmit" @cancel="handleCancel" />
    
        <!-- Button to show user form component -->
        <el-button type="primary" @click="showForm = true">Create User</el-button>
    </div>
</template>

<script>
    import UserList from './components/UserList.vue'
    import UserForm from './components/UserForm.vue'
    import axios from 'axios'
    
    export default {
        components: {
            UserList,
            UserForm
        },

        data() {
            return {
                users: [],
                user: {},
                showForm: false
            }
        },

        methods: {
            // Get user list from backend API
            async loadUsers() {
                const response = await axios.get('/api/users')
                this.users = response.data
            },

            // Handle user update
            handleUpdate(user) {
                this.user = user
                this.showForm = true
            },

            // Handle user delete
            async handleDelete(userId) {
                await axios.delete(`/api/users/${userId}`)
                await this.loadUsers()
            },

            // Handle form submit
            async handleSubmit(user) {
                if (user.id) {
                    await axios.put(`/api/users/${user.id}`, user)
                } else {
                    await axios.post('/api/users', user)
                }
                
                this.showForm = false
                await this.loadUsers()
            },

            // Handle cancel button click
            handleCancel() {
                this.showForm = false
            }
        },

        created() {
            this.loadUsers()
        }
    }
</script>

UserForm组件用于创建和编辑userdata。如果用户信息为新用户数据， updateUser则设置为空对象，否则它设置为要编辑的用户。

async函数 handleSubmit处理与API的交互。如果用户存在，将其作为HTTP PUT请求发出，否则将其记录下来并存储到backend中。