【源码】基于Next.js和Node.js的用户管理系统

项目简介

本项目构建了一个用户管理系统，前端运用Next.js框架搭建UI界面，其具备约定大于配置的特性，能够高效完成界面搭建；后端采用Node.js并结合Express框架，处理用户的添加与查询逻辑。用户可通过浏览器添加用户，查看已添加用户数量，还能查询用户列表。

项目的主要特性和功能

1. 前后端分离开发：开发时，Next.js应用和Node.js服务端分别运行在不同端口，方便进行开发与测试。
2. 丰富的接口功能：Node.js服务端提供 /api/users 用于查询所有用户、/api/user 用于添加用户两个接口。
3. 灵活的代理配置：Next.js应用可通过配置式或编程式方式，将API调用代理到Node.js服务端。
4. 便捷的生产部署：编译Next.js应用后，把结果放在Node.js服务端，即可在生产环境部署。

安装使用步骤

开发环境

1. 下载项目源码，项目包含 api（Node.js服务端）和 my-app（Next.js应用）两个文件夹。
2. 分别进入 api 和 my-app 文件夹，执行 npm install 安装依赖。
3. 配置Next.js应用的代理，可选择配置式（在 package.json 中添加 "proxy": "http://localhost:3080"）或编程式（安装 http-proxy-middleware 并创建代理服务）。
4. 启动Node.js服务端：在 api 文件夹中执行命令启动服务，监听3080端口。
5. 启动Next.js应用：在 my-app 文件夹中执行启动命令。
6. 打开浏览器，访问Next.js应用地址，进行用户添加和查询操作。

生产环境

1. 编译Next.js应用：在 my-app 文件夹中执行编译命令，生成 out 文件夹。
2. 修改Node.js服务端：使用 express.static 加载 out 文件夹，并通过 / 加载 index.html。
3. 启动Node.js服务端，在浏览器访问3080端口，即可使用整个应用。

注意事项

• 在生产环境修改Next.js应用后，需重新编译才会生效。
• Windows系统中设置环境变量，需使用 set NODE_ENV=development && node dev-server.js 格式。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】