How to build user management components using Go language and Vue.js

With the continuous development of the Internet era, more and more companies are beginning to use software for business operations and management. Software with excellent user management components can help companies better manage and maintain user information and provide a better user experience. This article will introduce how to use Go language and Vue.js to build user management components, helping readers create an efficient and easy-to-use user management tool.

1. Design user management API

First, you need to design a user management API interface that meets business needs. In this example, we will define the API interface as follows:

Create user:

POST /api/users

Query user list:

GET / api/users

Query a single user:

GET /api/users/{id}

Update user:

PUT /api/users/{ id}

Delete user:

DELETE /api/users/{id}

Put the authentication part in a middleware and use JWT for identity authentication, for example:

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. Write the back-end service

After completing the API design, you need to write the back-end service and provide the implementation of the corresponding API interface.

Using Go language to write back-end services, we can use some popular web frameworks, such as Gin, Echo or Goji. Here we use the Gin framework as an example. The sample code is as follows:

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

In the above code, AuthMiddleware is used to authenticate routing requests, and then uses router.POST and router.GET , router.PUT and router.DELETE methods register API routes and associate implementation functions CreateUser, GetUserList, GetUser, UpdateUser and DeleteUser.

3. Writing front-end interface components

With the back-end service, we can write front-end interface components. Using Vue.js to build front-end components, we can use common build tools such as webpack or vue-cli. Here we use vue-cli, the sample code is as follows:

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>

In the above code, the App component uses UserList, UserForm, axios library and backend API to interact with each other to implement functions .

The UserList component is a table component that receives the users attribute as table rendering data.

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

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

Any operation that results in changes to the data in this function will trigger a UI reload.

At this point, we have completed the development of user management components using Go language and Vue.js. Developers can further improve and improve it, make appropriate modifications and extensions according to actual business needs, and create a user management tool that meets their own needs.

Summary

This article introduces how to use Go language and Vue.js to build user management components. Through API design and back-end service implementation, CRUD operations of user information are implemented, and user management interface components are implemented through Vue.js, making user management more convenient and efficient. At the same time, this article provides sample code and development steps to help readers get started with development work in this area more easily.

The above is the detailed content of How to build user management components using Go language and Vue.js. For more information, please follow other related articles on the PHP Chinese website!