重构谷粒商城09:人人开源框架的快速入门

谷粒商城09——人人开源框架的快速入门

前言：这个系列将使用最前沿的cursor作为辅助编程工具，来快速开发一些基础的编程项目。目的是为了在真实项目中，帮助初级程序员快速进阶，以最快的速度，效率，快速进阶到中高阶程序员。

本项目将基于谷粒商城项目，并且对谷粒商城项目进行二次重构，使其满足最新的主流技术栈要求。

这篇文章主要介绍，人人开源框架的快速入门，使用它快速搭建项目后台。后面下篇文章考虑使用若依重构。敬请期待。

1、人人开源框架简介

人人开源（Renren Open Source）是一个专注于Java开发的开源社区，提供一系列旨在提高开发效率、降低开发成本的开源项目。这些项目涵盖权限管理、快速开发平台、代码生成等多个方面，帮助开发者快速构建和部署应用。

我们将借助它来实现我们后台管理系统的快速搭建。

至于里面各个项目的详细介绍，可以自行了解。

网址：https://gitee.com/renrenio

2、后端导入

我们今天使用的是renren-fast和renren-fast-vue，分别来搭建后端、前端。

clone下代码。

将后端的.git删除。

将其整个拖到我们之前建立的guilimall后端工程文件夹下面。

在项目结构目录下，导入这个项目模块。

同样的，把前端的git目录删除。我们后面再讲解前端部分。

先在idea中，将工程的pom文件进行下更新。

renren子模块的pom文件也需要修改下。避免项目使用jdk版本导致兼容问题，和你项目中jdk版本保持一致即可。

打开navicat，连接我们前面创建的数据库，执行下面sql。当然，实际上，我们前面一篇学习数据库设计，已经执行过了，所以这里就不用重复执行了。

更改下数据库配置，先看application.yml。默认使用的是dev环境。

更改下数据库配置信息。将其替换为你自己创建的数据库。

idea编辑器可能出现如下报错：

Some problems were encountered while building the effective model for org.springframework.boot:test01:jar:2.4.0
'parent.relativePath' of POM org.springframework.boot:test01:2.4.0 (E:\JavaWeb_base\springbootTest\test01\pom.xml) points at com.ltb:springbootTest instead of org.springframework.boot:spring-boot-starter-parent, please verify your project structure @ line 7, column 13
It is highly recommended to fix these problems because they threaten the stability of your build.
For this reason, future Maven versions might no longer support building such malformed projects.

解决办法：在该模块的pom文件中，在<parent>标签中加上<relativePath />

<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.4.0</version><relativePath   />
</parent>

如果项目出现大量爆红，开源reload下maven project。清理idea缓存重新打开项目。

启动项目，成功了。

访问下项目吧。okk，这样就可以了。

3、运行前端项目

使用vscode打开前端项目。

需要具有node环境，我们前面文章早就教过了，这里不再赘述了。没有的同学自己安装。

执行命令。

发现报错。

出现报错，看错误信息，是需要环境中python。

安装一个。记得添加到环境变量。如果自动安装报错，可以去官网下周zip包解压，手动添加导PATH环境变量。

安装官网：https://www.python.org/downloads/windows/

测试下。

关闭vscode，重新打开，在vscode终端也测试下，确保能找到python。

重新执行pnpm install，报错。错误信息如下。

从错误信息来看，node-gyp 无法找到合适的 Visual Studio 安装来编译原生模块。这是因为 node-gyp 需要 Visual Studio 的 C++ 构建工具来编译某些依赖项。

下周安装：https://visualstudio.microsoft.com/zh-hans/visual-cpp-build-tools/

在安装过程中，确保勾选以下组件：

可能会弹窗，需要重启电脑。那你就按提示重启电脑再安装。

再执行，发现还是不行。

仔细观察错误信息：

gyp ERR! UNCAUGHT EXCEPTION
│ gyp ERR! stack TypeError: Cannot assign to read only property 'cflags' of object '#<Object>'
│ gyp ERR! stack     at createConfigFile (C:\Users\半旧\Desktop\wz\javawrokspace\renren-fast-vue\node_modules\.pnpm\node-gyp@7.1.2\node_modules\…  
│ gyp ERR! stack     at process.processTicksAndRejections (node:internal/process/task_queues:85:11)
│ gyp ERR! System Windows_NT 10.0.26100
│ gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\半旧\\Desktop\\wz\\javawrokspace\\renren-fast-vue\\node_modules\\.pnpm\\nod…  
│ gyp ERR! cwd C:\Users\半旧\Desktop\wz\javawrokspace\renren-fast-vue\node_modules\.pnpm\node-sass@6.0.1\node_modules\node-sass
│ gyp ERR! node -v v22.14.0
│ gyp ERR! node-gyp -v v7.1.2
│ gyp ERR! Node-gyp failed to build your package.
│ gyp ERR! Try to update npm and/or node-gyp and if it does not help file an issue with the package author.
│ Build failed with error code: 7

核心问题：

Node.js 版本过高
你使用的 Node.js v22.14.0 已超出 node-sass@6.0.1 的兼容范围。node-sass 官方明确表示其最高仅支持到 Node.js 16。

node-gyp 配置冲突
错误 Cannot assign to read only property 'cflags' 表明 node-gyp 在生成构建配置时遇到权限或语法冲突，可能与高版本 Node.js 的模块加载机制不兼容有关。

Windows 编译工具链缺失
node-sass 需要 Visual Studio Build Tools 和 Python 2.x 支持，但新版本 Node.js 默认不再集成这些工具。

（1）开代理。进行如下操作,降级 Node.js 至兼容版本：

# 安装 nvm-windows（需管理员权限）
choco install nvm
# 安装并切换到 Node.js v16
nvm install 16.20.2
nvm use 16.20.2

验证环境：

node -v  # 应显示 v16.x.x
npm -v   # 应显示 6.x.x 或 8.x.x

(2). 替换 node-sass 为 sass

node-sass 已弃用，建议改用官方推荐的 sass（Dart Sass）：

卸载旧依赖：

npm uninstall node-sass

安装 sass：

npm install sass --save-dev

修改项目代码：
将所有 node-sass 的引用替换为 sass（例如在 Webpack 或 Vue CLI 配置中）。

（3）. 安装 Windows 编译工具链

若仍需使用 node-sass，需补充环境依赖：

安装 Visual Studio Build Tools（网页1、网页4）：

• 勾选「Desktop development with C++」工作负载。
• 安装 Python 3（从 Python 官网 下载）。

配置环境变量：

npm config set python "C:\Python313\python.exe"
npm config set msvs_version 2022

npm install没有报错.

咱们接下来运行下这个项目。

npm run dev

没有问题。

还挺漂亮的。

4、前后端联调

启动后端，会出现验证码。点击验证码。

验证码刷新，后端会接收到请求消息。

默认管理员账户：admin/admin，登录。

好的，你自己玩玩吧。这节就介绍到这里。后面两节我可能考虑补充下node和npm的知识。也可以考虑使用若依来替换人人开源框架，如果你有这方面的需求。可以评论区留言。