So erstellen Sie Benutzerverwaltungskomponenten mit der Go-Sprache und Vue.js

Mit der kontinuierlichen Weiterentwicklung des Internetzeitalters beginnen immer mehr Unternehmen, Software für den Geschäftsbetrieb und das Management einzusetzen. Software mit hervorragenden Benutzerverwaltungskomponenten kann Unternehmen dabei helfen, Benutzerinformationen besser zu verwalten und zu pflegen und ein besseres Benutzererlebnis zu bieten. In diesem Artikel wird erläutert, wie Sie mithilfe der Go-Sprache und Vue.js Benutzerverwaltungskomponenten erstellen und den Lesern dabei helfen, ein effizientes und benutzerfreundliches Benutzerverwaltungstool zu erstellen.

1. Benutzerverwaltungs-API entwerfen

Zunächst müssen Sie eine Benutzerverwaltungs-API-Schnittstelle entwerfen, die den Geschäftsanforderungen entspricht. In diesem Beispiel definieren wir die API-Schnittstelle wie folgt:

Erstellen Sie einen Benutzer:

POST /api/users

Fragen Sie die Benutzerliste ab:

GET /api/users

Fragen Sie einen einzelnen Benutzer ab:

GET /api/users /{id}

Benutzer aktualisieren:

PUT /api/users/{id}

Benutzer löschen:

DELETE /api/users/{id}

Fügen Sie den Authentifizierungsteil in eine Middleware ein und Verwenden Sie JWT. Führen Sie eine Identitätsauthentifizierung durch, zum Beispiel:

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. Schreiben Sie Back-End-Dienste

Nach Abschluss des API-Designs müssen Sie Back-End-Dienste schreiben und die Implementierung der entsprechenden API bereitstellen Schnittstelle.

Um Backend-Dienste mit der Go-Sprache zu schreiben, können wir einige beliebte Web-Frameworks wie Gin, Echo oder Goji verwenden. Hier verwenden wir das Gin-Framework als Beispiel:

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

Im obigen Code wird AuthMiddleware zur Authentifizierung von Routing-Anfragen verwendet und verwendet dann router.POST, router.GET , router.PUT und router.DELETE Die Methode registriert die API-Route und ordnet die Implementierungsfunktionen CreateUser, GetUserList, GetUser, UpdateUser und DeleteUser zu.

3. Front-End-Schnittstellenkomponenten schreiben

Mit dem Back-End-Dienst können wir Front-End-Schnittstellenkomponenten schreiben. Wenn wir Vue.js zum Erstellen von Front-End-Komponenten verwenden, können wir gängige Build-Tools wie Webpack oder Vue-Cli verwenden. Hier verwenden wir vue-cli. Der Beispielcode lautet wie folgt:

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>

Im obigen Code verwendet die App-Komponente UserList, UserForm, die Axios-Bibliothek und die Backend-API, um miteinander zu interagieren Funktionen implementieren.

Die UserList-Komponente ist eine Tabellenkomponente, die das Benutzerattribut als Tabellenrenderingdaten empfängt.

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

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

Jeder Vorgang, der zu einer Änderung der Daten in dieser Funktion führt, löst ein Neuladen der Benutzeroberfläche aus.

Zu diesem Zeitpunkt haben wir die Entwicklung von Benutzerverwaltungskomponenten mithilfe der Go-Sprache und Vue.js abgeschlossen. Entwickler können es weiter verbessern und verbessern, entsprechend den tatsächlichen Geschäftsanforderungen entsprechende Änderungen und Erweiterungen vornehmen und ein Benutzerverwaltungstool erstellen, das ihren eigenen Anforderungen entspricht.

Zusammenfassung

In diesem Artikel wird erläutert, wie Benutzerverwaltungskomponenten mithilfe der Go-Sprache und Vue.js erstellt werden. Durch API-Design und Back-End-Service-Implementierung werden CRUD-Operationen für Benutzerinformationen implementiert und Benutzerverwaltungsschnittstellenkomponenten werden über Vue.js implementiert, wodurch die Benutzerverwaltung bequemer und effizienter wird. Gleichzeitig stellt dieser Artikel Beispielcode und Entwicklungsschritte bereit, um den Lesern den Einstieg in die Entwicklungsarbeit in diesem Bereich zu erleichtern.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Benutzerverwaltungskomponenten mit der Go-Sprache und Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!