手把手联调ai时代最火框架！30分钟搭建Vue3+Node+PostgreSQL前后端全栈项目

史蒂芬五重星系

391人浏览 · 2026-06-21 11:50:00

史蒂芬五重星系 · 2026-06-21 11:50:00 发布

😮 前言：解决90%新手的全栈入门难题

很多前端初学全栈时，都会遇到这些崩溃问题：

装好数据库不知道怎么和后端连接
写好接口，前端调不通、跨域报错满天飞
数据存不进数据库，不知道是前端、后端还是数据库的问题
网上教程残缺不全，步骤跳步，新手根本跑不通

今天这篇零门槛、纯实操教程，不用懂底层原理，全程复制粘贴命令、代码即可。

在这里插入图片描述

30分钟带你完整跑通：Vue3前端页面 + Express后端接口 + PostgreSQL数据库增查全套流程。

读完你能掌握：

从零搭建 Node 后端服务，解决跨域问题
PostgreSQL 数据库建库、建表、代码连接全流程
Vue3 + Axios 调用后端接口，实现数据新增、查询
全栈联调排错思路，搞定常见报错

技术栈（极简稳定版）

前端：Vue3 + Vite + Axios
后端：Node.js + Express
数据库：PostgreSQL

💻 前置准备：3个必装软件（零基础必看）

所有软件均为官方正版，无脑下一步安装即可，全程免费。

1. 安装 Node.js（自带 npm）

官网地址：https://nodejs.org/

安装完成后，打开终端/CMD，输入以下命令，输出版本号即为安装成功：

node -v
npm -v

2. 安装 PostgreSQL 数据库（一路点下一步即可）

官网地址：https://www.postgresql.org/download/

安装核心要点（务必牢记）：

自定义设置数据库密码（推荐：123456，方便开发测试）
默认端口：5432（无需修改）
自带可视化工具 pgAdmin4，无需额外安装

3. 安装 VS Code

普通编辑器安装即可，用于编写前后端代码。

🚀 第一部分：初始化 Node + Express 后端项目

步骤1：创建后端项目文件夹

桌面新建文件夹：project-backend

打开终端，进入该文件夹目录：

cd 桌面/project-backend
# 一键初始化配置文件，无需手动回车
npm init -y

步骤2：安装后端核心依赖

复制整条命令执行，一次性安装所有必备依赖：

# express：后端核心框架
# pg：PostgreSQL数据库连接驱动
# cors：解决前后端跨域问题
# nodemon：热更新，改代码无需重启服务
npm install express pg cors
npm install -D nodemon

步骤3：配置启动命令

打开项目中的package.json，替换原有 scripts 配置：

"scripts": {
  "dev": "nodemon index.js"
}

步骤4：pgAdmin4 创建数据库和数据表（最新版的pgadmin可以修改成中文）

打开 pgAdmin4，输入安装时设置的数据库密码登录
找到以下PostgreSQL连接

在这里插入图片描述

右键数据库 → 新建数据库，数据库名称填写：test_db
展开 test_db → 模式 → public → 右键表 → 创建表（再下面的架构里面去找表）

在这里插入图片描述

表名填写：user_list，添加两列字段：

id：整数、主键、自增（唯一标识每条数据）（详细不懂可以问）
name：文本类型（存储用户名称）

步骤5：编写后端核心代码 index.js

项目根目录新建 index.js，直接复制以下完整可运行代码：

// 导入依赖
const express = require('express')
const cors = require('cors')
const { Pool } = require('pg')

// 创建服务实例
const app = express()
// 全局解决跨域，允许前端访问后端接口
app.use(cors())
// 解析前端传递的JSON格式参数
app.use(express.json())

// ========== 数据库连接配置（根据自己安装信息修改） ==========
const dbPool = new Pool({
  user: 'postgres', // PG默认用户名，固定不变
  host: 'localhost',
  database: 'test_db', // 刚刚创建的数据库名
  password: '123456', // 你自己设置的数据库密码
  port: 5432, // PG默认端口，无需修改
})

// 接口1：查询数据库所有数据（前端展示列表）
app.get('/api/getUser', async (req, res) => {
  const result = await dbPool.query('SELECT * FROM user_list')
  res.json({
    code: 200,
    msg: '查询成功',
    data: result.rows
  })
})

// 接口2：新增数据到PostgreSQL数据库
app.post('/api/addUser', async (req, res) => {
  // 获取前端传递的name参数
  const { name } = req.body
  // 执行SQL插入语句
  await dbPool.query('INSERT INTO user_list(name) VALUES($1)', [name])
  res.json({
    code: 200,
    msg: '新增成功'
  })
})

// 启动后端服务
const port = 3000
app.listen(port, () => {
  console.log(`后端服务运行在 http://localhost:${port}`)
})

步骤6：启动后端服务

终端输入启动命令：

npm run dev

终端输出 **后端服务运行在 http://localhost:3000**，即代表后端服务启动、数据库连接成功。

想看到数据库传过来的数据可以根据后端里面调用获取数据的api来查看例如这里的就是（这也可以查看联调是否成功）http://localhost:3000/api/getUser

新手误区提醒：此时浏览器打开 3000 端口显示「无法获取 /」是正常现象！因为我们只配置了业务接口，没有配置首页路由，完全不影响数据交互。

🌈 第二部分：初始化 Vue3 前端项目

步骤1：Vite 创建 Vue3 项目

新开一个终端，切换到桌面目录，执行以下命令创建项目：

cd 桌面
# 创建Vue3项目，项目名project-frontend
npm create vite@latest project-frontend -- --template vue
# 进入项目目录
cd project-frontend
# 安装基础依赖
npm install

步骤2：安装 Axios（接口请求必备）

npm install axios

步骤3：启动前端项目

npm run dev

终端生成前端地址（默认 **http://localhost:5173**），浏览器打开看到 Vue 默认页面即为启动成功。

步骤4：编写前端业务页面（增查数据）

打开 src/App.vue，删除默认所有代码，替换为以下完整代码：

<template>
  <div class="box">
    <h2>Vue+Node+PostgreSQL 全栈联调演示</h2>
    <!-- 数据新增输入框 -->
    <input v-model="inputName" placeholder="输入名字存入数据库" />
    <button @click="addUser">提交保存</button>

    <h3>数据库存储的数据列表：</h3>
    <ul>
      <li v-for="item in userList" :key="item.id">
        ID：{{ item.id }} ｜ 姓名：{{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

// 输入框绑定值
const inputName = ref('')
// 数据库数据列表
const userList = ref([])

// 获取数据库所有数据
const getUserList = async () => {
  const res = await axios.get('http://localhost:3000/api/getUser')
  userList.value = res.data.data
}

// 新增数据到数据库
const addUser = async () => {
  if (!inputName.value) return alert('请输入内容')
  await axios.post('http://localhost:3000/api/addUser', {
    name: inputName.value
  })
  // 清空输入框，刷新数据列表
  inputName.value = ''
  getUserList()
}

// 页面加载自动请求数据
onMounted(() => {
  getUserList()
})
</script>

<style scoped>
.box {
  width: 600px;
  margin: 50px auto;
}
input {
  padding: 6px;
  width: 300px;
  margin-right: 10px;
  font-size: 14px;
}
button {
  padding: 6px 16px;
  cursor: pointer;
}
li {
  margin: 8px 0;
  font-size: 15px;
}
</style>

✅ 第三部分：全栈联调最终测试

1. 保持两个终端同时运行

终端A（后端）：npm run dev（3000端口）
终端B（前端）：npm run dev（5173端口）

2. 功能测试流程

浏览器打开前端地址：http://localhost:5173
输入任意名字，点击提交保存
页面实时刷新，展示新增的数据
打开 pgAdmin4，打开 user_list 表，可看到刚刚新增的数据

以上全部生效，代表整套全栈流程完美跑通！

❌ 零基础常见报错一键解决

1. 前端跨域报错

原因：后端未配置跨域或配置不生效

解决：确认后端代码有 app.use(cors())，保存后重启后端服务

2. 数据库连接失败

逐一核对3个关键点：

pgAdmin 已创建 test_db 数据库和 user_list 表
代码中数据库密码、端口、库名和本地配置一致
PostgreSQL 服务已正常启动

3. npm 不是内部命令

解决：Node.js 安装未配置环境变量，重装 Node，安装时勾选自动配置环境变量

4. 端口被占用

解决：修改后端 index.js 中端口为 3001，重启服务即可

📁 项目整体结构总结

桌面
├─ project-backend  # 后端项目
│  ├─ index.js      # 服务启动+数据库连接+接口逻辑
│  └─ package.json  # 依赖+启动配置
└─ project-frontend # 前端项目
   ├─ src
   │  └─ App.vue    # 页面渲染+接口请求
   └─ package.json