Comment créer des composants de gestion des utilisateurs à l'aide du langage Go et de Vue.js

Avec le développement continu de l'ère Internet, de plus en plus d'entreprises commencent à utiliser des logiciels pour les opérations et la gestion commerciales. Un logiciel doté d'excellents composants de gestion des utilisateurs peut aider les entreprises à mieux gérer et conserver les informations sur les utilisateurs et à offrir une meilleure expérience utilisateur. Cet article expliquera comment utiliser le langage Go et Vue.js pour créer des composants de gestion des utilisateurs, aidant ainsi les lecteurs à créer un outil de gestion des utilisateurs efficace et facile à utiliser.

1. Concevoir une API de gestion des utilisateurs

Tout d'abord, vous devez concevoir une interface API de gestion des utilisateurs qui répond aux besoins de l'entreprise. Dans cet exemple, nous définirons l'interface API comme suit :

Créer un utilisateur :

POST /api/users

Interroger la liste des utilisateurs :

GET /api/users

Interroger un seul utilisateur :

GET /api/users /{id}

Mettre à jour l'utilisateur :

PUT /api/users/{id}

Supprimer l'utilisateur :

DELETE /api/users/{id}

Mettre la partie authentification dans un middleware et utilisez JWT Effectuez l'authentification d'identité, par exemple :

middleware/auth.go

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)
})
}

2 Écrivez des services back-end

Après avoir terminé la conception de l'API, vous devez écrire des services back-end et fournir l'implémentation de l'API correspondante. interface.

Pour écrire des services backend en utilisant le langage Go, nous pouvons utiliser certains frameworks Web populaires tels que Gin, Echo ou Goji. Ici, nous utilisons le framework Gin comme exemple. L'exemple de code est le suivant :

backend/main.go

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")
}

Dans le code ci-dessus, AuthMiddleware est utilisé pour authentifier les requêtes de routage, puis utilise router.POST, router.GET. , router.PUT et router.DELETE La méthode enregistre la route API et associe les fonctions d'implémentation CreateUser, GetUserList, GetUser, UpdateUser et DeleteUser.

3. Écrire des composants d'interface front-end

Avec le service back-end, nous pouvons écrire des composants d'interface front-end. En utilisant Vue.js pour créer des composants frontaux, nous pouvons utiliser des outils de construction courants tels que webpack ou vue-cli. Ici, nous utilisons vue-cli, l'exemple de code est le suivant :

frontend/src/App.vue

<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>

Dans le code ci-dessus, le composant App utilise UserList, UserForm, la bibliothèque axios et l'API backend pour interagir les uns avec les autres pour mettre en œuvre des fonctions.

Le composant UserList est un composant de table qui reçoit l'attribut des utilisateurs sous forme de données de rendu de table.

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

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

Toute opération entraînant une modification des données dans cette fonction déclenchera un rechargement de l'interface utilisateur.

À ce stade, nous avons terminé le développement de composants de gestion des utilisateurs en utilisant le langage Go et Vue.js. Les développeurs peuvent l'améliorer encore davantage, apporter les modifications et extensions appropriées en fonction des besoins réels de l'entreprise et créer un outil de gestion des utilisateurs qui répond à leurs propres besoins.

Résumé

Cet article explique comment créer des composants de gestion des utilisateurs à l'aide du langage Go et de Vue.js. Grâce à la conception d'API et à la mise en œuvre de services back-end, les opérations CRUD sur les informations utilisateur sont mises en œuvre et les composants de l'interface de gestion des utilisateurs sont implémentés via Vue.js, rendant la gestion des utilisateurs plus pratique et efficace. Dans le même temps, cet article fournit des exemples de code et des étapes de développement pour aider les lecteurs à démarrer plus facilement les travaux de développement dans ce domaine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!