手把手教你实现Vue3+TS+NodeJS后台管理系统（七）

2023-12-18 14:43:22

如何构建强大的 Vue3 + TypeScript + Node.js 后台管理系统：用户管理

在构建健壮的后端系统时，用户管理是一个至关重要的方面。本文将深入探讨如何使用 Vue3、TypeScript 和 Node.js 构建一个用户管理模块，包括获取分页用户列表和修改用户信息。

获取用户分页列表

分页是处理大量数据时的常见技术。以下是如何实现分页用户列表：

后端（Node.js）：

app.get('/api/user/list', async (req, res) => {
  const { page, size } = req.query;
  const users = await User.findAndCountAll({
    offset: (page - 1) * size,
    limit: size
  });
  res.json({
    code: 200,
    data: users
  });
});

前端（Vue3 + TypeScript）：

import axios from 'axios';

export default {
  data() {
    return {
      userList: []
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    getUserList() {
      axios.get('/api/user/list', {
        params: {
          page: 1,
          size: 10
        }
      }).then(res => {
        this.userList = res.data.data;
      });
    }
  }
};

修改用户

修改用户信息是用户管理中的另一个关键功能：

后端（Node.js）：

app.post('/api/user/update', async (req, res) => {
  const { id, username, password, email } = req.body;
  const user = await User.findByPk(id);
  if (user) {
    user.username = username;
    user.password = password;
    user.email = email;
    await user.save();
    res.json({
      code: 200,
      data: user
    });
  } else {
    res.json({
      code: 404,
      message: '用户不存在'
    });
  }
});

前端（Vue3 + TypeScript）：

import axios from 'axios';

export default {
  data() {
    return {
      user: {}
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser() {
      axios.get('/api/user/info', {
        params: {
          id: this.$route.params.id
        }
      }).then(res => {
        this.user = res.data.data;
      });
    },
    updateUser() {
      axios.post('/api/user/update', {
        id: this.user.id,
        username: this.user.username,
        password: this.user.password,
        email: this.user.email
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success('修改成功');
          this.$router.push('/user/list');
        } else {
          this.$message.error(res.data.message);
        }
      });
    }
  }
};