Cara membina komponen pengurusan pengguna menggunakan bahasa Go dan Vue.js

Dengan perkembangan berterusan era Internet, semakin banyak syarikat mula menggunakan perisian untuk operasi dan pengurusan perniagaan. Perisian dengan komponen pengurusan pengguna yang cemerlang boleh membantu syarikat mengurus dan mengekalkan maklumat pengguna dengan lebih baik serta memberikan pengalaman pengguna yang lebih baik. Artikel ini akan memperkenalkan cara menggunakan bahasa Go dan Vue.js untuk membina komponen pengurusan pengguna, membantu pembaca mencipta alat pengurusan pengguna yang cekap dan mudah digunakan.

1. Reka bentuk API pengurusan pengguna

Pertama, anda perlu mereka bentuk antara muka API pengurusan pengguna yang memenuhi keperluan perniagaan. Dalam contoh ini, kami akan mentakrifkan antara muka API seperti berikut:

Buat pengguna:

POST /api/users

Senarai pengguna pertanyaan:

DAPATKAN / api/users

Tanya pengguna tunggal:

DAPATKAN /api/users/{id}

Kemas kini pengguna:

PUT /api/users /{ id}

Padam pengguna:

DELETE /api/users/{id}

Letakkan bahagian pengesahan dalam middleware dan gunakan JWT untuk pengesahan identiti, contohnya :

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 Tulis perkhidmatan back-end

Selepas melengkapkan reka bentuk API, anda perlu menulis perkhidmatan back-end dan menyediakan pelaksanaan. antara muka API yang sepadan.

Menggunakan bahasa Go untuk menulis perkhidmatan bahagian belakang, kami boleh menggunakan beberapa rangka kerja web yang popular seperti Gin, Echo atau Goji. Di sini kita menggunakan rangka kerja Gin sebagai contoh. Kod sampel adalah seperti berikut:

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

Dalam kod di atas, AuthMiddleware digunakan untuk mengesahkan permintaan penghalaan, dan kemudian menggunakan penghala.POST dan penghala.GET , penghala.PUT dan penghala. kaedah DELETE mendaftar laluan API dan mengaitkan fungsi pelaksanaan CreateUser, GetUserList, GetUser, UpdateUser dan DeleteUser.

3. Tulis komponen antara muka bahagian hadapan

Dengan perkhidmatan bahagian belakang, kami boleh menulis komponen antara muka bahagian hadapan. Menggunakan Vue.js untuk membina komponen bahagian hadapan, kami boleh menggunakan alat binaan biasa seperti webpack atau vue-cli. Di sini kami menggunakan vue-cli, kod sampel adalah seperti berikut:

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>

Dalam kod di atas, komponen Apl menggunakan UserList, UserForm, perpustakaan axios dan API bahagian belakang untuk melaksanakan fungsi secara interaktif.

Komponen Senarai Pengguna ialah komponen jadual yang menerima atribut pengguna sebagai data pemaparan jadual.

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

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

Sebarang operasi yang menyebabkan data dalam fungsi ini berubah akan mencetuskan muat semula UI.

Pada ketika ini, kami telah menyelesaikan pembangunan komponen pengurusan pengguna menggunakan bahasa Go dan Vue.js. Pembangun boleh menambah baik dan menambah baiknya lagi, membuat pengubahsuaian dan sambungan yang sesuai mengikut keperluan perniagaan sebenar, dan mencipta alat pengurusan pengguna yang memenuhi keperluan mereka sendiri.

Ringkasan

Artikel ini memperkenalkan cara menggunakan bahasa Go dan Vue.js untuk membina komponen pengurusan pengguna. Melalui reka bentuk API dan pelaksanaan perkhidmatan bahagian belakang, operasi CRUD bagi maklumat pengguna dilaksanakan, dan komponen antara muka pengurusan pengguna dilaksanakan melalui Vue.js, menjadikan pengurusan pengguna lebih mudah dan cekap. Pada masa yang sama, artikel ini menyediakan contoh kod dan langkah pembangunan untuk membantu pembaca memulakan kerja pembangunan di kawasan ini dengan lebih mudah.

Atas ialah kandungan terperinci Cara membina komponen pengurusan pengguna menggunakan bahasa Go dan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!