Vue.js 和 Node.js 全栈项目运行与部署指南

Vue.js 和 Node.js 全栈项目运行与部署指南

引用

CSDN

1.

https://blog.csdn.net/m0_74277350/article/details/140069569

前言

本指南将介绍一个包含前端和后端代码的全栈项目MoreMall。前端部分使用Vue.js，后端部分使用Node.js。以下是项目的整体结构：

• Client（前端）：

• node_modules/：存放项目依赖的模块。

• public/：存放公共资源的目录，比如网页中需要用到的图片素材等。

• src/：前端源代码目录，包含Vue组件和其他资源。

• package.json：项目依赖和脚本配置文件。

• Server（后端）：

• bin/：存放可执行文件的目录，通常用来启动服务器。

• commons/：公共模块目录，包含db.js（数据库配置）、JSONResponse.js和settings.js（设置文件）。

• controllers/：控制器目录，处理业务逻辑。

• node_modules/：存放项目依赖的模块。

• public/：存放公共资源的目录。

• app.js：主应用文件，通常是Express应用的入口文件。

• package.json：项目依赖和脚本配置文件。

• mall.sql：数据库SQL文件，包含数据库的初始化脚本。

具体运行方式

导入数据库初始化

这里使用MySQL数据库。首先确保MySQL已安装并配置好，然后创建一个名为mall的数据库：

create database mall;

使用以下命令确保使用的是新创建的数据库：

use mall;

为了兼容性，需要指定新的认证插件：

-- 指定新的认证插件
alter user 'root'@'localhost' identified with mysql_native_password by '你的密码';
-- 刷新权限
flush privileges;

接下来，执行mall.sql中的SQL语句以初始化数据库。

安装配置Node.js

按照Node.js的官方文档进行安装和环境变量配置。

启动Server（后端）

打开命令行窗口，导航到server目录并启动后端：

cd bin
node 需要启动的文件名

如果遇到端口冲突，可以在任务管理器中关闭冲突的命令行窗口。

启动Client（前端）

在命令行窗口中运行以下命令启动前端：

npm run serve

如果缺少依赖，先运行npm install。

确保前后端正确连接

检查server目录下的数据库配置：

1. 确认DB_HOST是否正确。
2. 确认DB_PASSWORD与MySQL用户密码一致。
3. 确认DB_DATABASE与创建的数据库名称一致。

最后，将前端访问地址中的localhost替换为DB_HOST的值，例如从http://localhost:8080/改为http://127.0.0.1:8080/。

如果一切配置正确，你将看到完整的项目界面：

同时，在后端命令行窗口中可以看到数据交互的日志。

恭喜你，项目运行和部署成功！