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的安装配置后，打开MySQL命令行，创建一个名为mall的数据库：

create database mall;

使用show databases;指令检查数据库列表，确保mall数据库存在。然后使用use mall;指令选择该数据库。

为了确保客户端或应用程序可以与MySQL服务器兼容，需要指定新的认证插件：

-- 指定新的认证插件
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（前端）

在命令行窗口中，切换到client目录，运行以下命令启动前端：

npm run serve

如果提示缺少依赖，先运行npm install安装所需依赖。

确保前后端正确连接

在server目录下找到数据库配置文件（可能在db.js或settings.js中），确认以下配置：

1. DB_HOST：数据库服务器地址。
2. DB_PASSWORD：数据库用户密码。
3. DB_DATABASE：数据库名称。

在前端命令行窗口中，将localhost替换为DB_HOST的值（例如，从http://localhost:8080/改为http://127.0.0.1:8080/）。如果配置正确，浏览器中会显示完整的项目界面，并且后端命令行窗口会显示数据交互信息。

恭喜你，到此为止，这个项目的运行和部署就成功啦！