要通过 Node.js 连接数据库获取数据并将其渲染到 Vue 前端，你需要完成以下几个步骤：

1. 后端（Node.js）连接数据库并提供 API 接口
2. 前端（Vue.js）调用后端 API 获取数据并渲染

1. 后端（Node.js）连接数据库并提供 API 接口

假设你使用的是 MySQL 数据库作为例子，你需要使用 mysql2 或 sequelize 等库来连接数据库。下面是一个简单的示例，展示如何使用 mysql2 库连接数据库并提供 API。

安装必要的库

首先，安装 express 和 mysql2 库。

创建后端代码

这段代码做了以下几件事：

• 通过 mysql2 库连接 MySQL 数据库。
• 创建一个 API 接口 /api/data，查询数据库中的数据并返回 JSON 格式的结果。
• 使用 cors 库允许前端跨域请求后端接口。

启动后端服务器

在命令行中运行下面的命令来启动你的 Node.js 服务器：

服务器启动后，你可以通过 http://localhost:3000/api/data 来访问 API。

2. 前端（Vue.js）调用 API 获取数据并渲染

接下来，在 Vue 项目中调用这个后端 API 获取数据，并在页面中渲染它。

安装 Axios

首先，安装 axios 用于发起 HTTP 请求：

Vue 组件中调用 API 获取数据

在 Vue 组件中，你可以使用 mounted 生命周期钩子来发起 HTTP 请求，获取后端数据，并将其渲染到页面上。

解释代码：

• 在 mounted 生命周期钩子中，通过 axios.get() 向后端 API 发起 GET 请求。
• 请求成功后，将返回的数据保存到组件的 data 属性中。
• 在模板中，通过 v-for 指令遍历 data 数组，并渲染每一项。

启动 Vue 应用

如果你使用的是 Vue CLI 创建的项目，可以通过以下命令启动开发服务器：

现在，打开浏览器并访问 http://localhost:8080，你应该能看到从数据库中获取的数据渲染到页面上。

总结

1. 后端部分： 使用 Node.js 和 mysql2 库连接 MySQL 数据库，提供一个 API 接口，返回查询结果。
2. 前端部分： 使用 Vue.js 和 axios 发起 HTTP 请求，获取后端数据，并在页面中渲染。

这样就完成了从数据库获取数据并在 Vue 前端中渲染的过程。如果你使用的是其他数据库（例如 MongoDB 或 PostgreSQL），可以替换数据库连接部分的代码，其他流程基本相同。