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}

인증 부분을 미들웨어에 넣고 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와 같은 인기 있는 웹 프레임워크를 사용할 수 있습니다. 여기서는 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 컴포넌트는 사용자 속성을 테이블 렌더링 데이터로 받는 테이블 컴포넌트입니다.

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

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

이 함수의 데이터가 변경되는 모든 작업은 UI 다시 로드를 트리거합니다.

이 시점에서 Go 언어와 Vue.js를 사용하여 사용자 관리 구성 요소 개발을 완료했습니다. 개발자는 이를 더욱 개선하고 개선할 수 있으며 실제 비즈니스 요구에 따라 적절하게 수정 및 확장하고 자신의 요구에 맞는 사용자 관리 도구를 만들 수 있습니다.

요약

이 글에서는 Go 언어와 Vue.js를 사용하여 사용자 관리 구성 요소를 구축하는 방법을 소개합니다. API 설계 및 백엔드 서비스 구현을 통해 사용자 정보에 대한 CRUD 연산을 구현하고, Vue.js를 통해 사용자 관리 인터페이스 구성요소를 구현하여 사용자 관리를 보다 편리하고 효율적으로 만듭니다. 동시에 이 기사에서는 독자가 이 분야의 개발 작업을 보다 쉽게 ​​시작할 수 있도록 샘플 코드와 개발 단계를 제공합니다.

위 내용은 Go 언어와 Vue.js를 사용하여 사용자 관리 구성 요소를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!