Go 言語と Vue.js を使用してユーザー管理コンポーネントを構築する方法

インターネット時代の継続的な発展に伴い、ますます多くの企業が業務運営や管理にソフトウェアを使用し始めています。優れたユーザー管理コンポーネントを備えたソフトウェアは、企業がユーザー情報をより適切に管理および維持し、より優れたユーザー エクスペリエンスを提供するのに役立ちます。この記事では、Go 言語と Vue.js を使用してユーザー管理コンポーネントを構築する方法を紹介し、読者が効率的で使いやすいユーザー管理ツールを作成できるようにします。

1. ユーザー管理 API の設計

まず、ビジネス ニーズを満たすユーザー管理 API インターフェイスを設計する必要があります。この例では、API インターフェイスを次のように定義します。

ユーザーの作成:

POST /api/users

ユーザー リストのクエリ:

GET / api/users

単一ユーザーのクエリ:

GET /api/users/{id}

ユーザーの更新:

PUT /api/users /{ id}

ユーザーの削除:

DELETE /api/users/{id}

認証部分をミドルウェアに置き、ID 認証に JWT を使用するなど:

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. バックエンド サービスを作成する

API 設計が完了したら、バックエンド サービスを作成して提供する必要があります。対応する API インターフェイスの実装。

Go 言語を使用してバックエンド サービスを作成すると、Gin、Echo、Goji などの人気のある Web フレームワークを使用できます。ここでは、Gin フレームワークを例として使用します。サンプル コードは次のとおりです:

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

上記のコードでは、AuthMiddleware を使用してルーティング リクエストを認証し、 router.POST および router.GET 、 router.PUT および router.DELETE メソッドを使用して API ルートを登録し、実装関数 CreateUser、GetUserList、GetUser、UpdateUser、および DeleteUser を関連付けます。

3. フロントエンド インターフェイス コンポーネントの作成

バックエンド サービスを使用して、フロントエンド インターフェイス コンポーネントを作成できます。 Vue.js を使用してフロントエンド コンポーネントをビルドすると、webpack や vue-cli などの一般的なビルド ツールを使用できます。ここでは vue-cli を使用します。サンプル コードは次のとおりです。

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>

上記のコードでは、App コンポーネントは UserList、UserForm、axios ライブラリ、およびバックエンド API は相互に通信して機能を実装します。

UserList コンポーネントは、users 属性をテーブル描画データとして受け取るテーブル コンポーネントです。

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

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

この関数のデータが変更される操作を行うと、UI のリロードがトリガーされます。

これで、Go 言語と Vue.js を使用したユーザー管理コンポーネントの開発が完了しました。開発者はそれをさらに改善・改善し、実際のビジネスニーズに応じて適切な修正や拡張を加え、自社のニーズに合ったユーザー管理ツールを作成することができます。

概要

この記事では、Go 言語と Vue.js を使用してユーザー管理コンポーネントを構築する方法を紹介します。 API 設計とバックエンド サービスの実装を通じて、ユーザー情報の CRUD 操作が実装され、Vue.js を通じてユーザー管理インターフェイス コンポーネントが実装されるため、ユーザー管理がより便利かつ効率的になります。同時に、この記事では、読者がこの分野の開発作業をより簡単に開始できるように、サンプル コードと開発手順を提供します。

以上がGo 言語と Vue.js を使用してユーザー管理コンポーネントを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。