搭建类似小红书的社区 - 小石榴图文社区系统完整教程

使用宝塔搭建一个类似于小红书的图文社区!小石榴社区系统

项目简介

一个高仿小红书的图文社区项目,支持图文发布、社交互动等核心功能,旨在提供从前端到后端的完整实践范本

效果展示

20250909004827938-Screenshot_2025-09-09-00-47-31-052_mark.via-edit

1.演示的运行环境

nodejs v22.19.0

mysql 5.7

cnpm 9.4.0

npm 10.9.3

在宝塔nodejs管理器中安装

20250909010244332-Screenshot_2025-09-09-01-01-10-978_com.android.chrome-edit

20250909010313410-Screenshot_2025-09-09-01-02-52-973_com.android.chrome-edit

2.项目部署

文件下载

https://github.com/ZTMYO/XiaoShiLiu/archive/refs/heads/master.zip

下载到 /www/wwwroot/ 目录下,然后解压

20250909011015167-Screenshot_2025-09-09-01-09-55-372_com.android.chrome-edit

3.编辑后端配置

进入

/www/wwwroot/XiaoShiLiu-master/express-project

目录下

20250909011117500-Screenshot_2025-09-09-01-10-37-850_com.android.chrome-edit

找到

.env.example

重命名为

.env

20250909011555205-Screenshot_2025-09-09-01-15-25-413_com.android.chrome-edit

打开编辑

20250909012000475-Screenshot_2025-09-09-01-17-39-239_com.android.chrome-edit

主要修改这个参数

DB_PASSWORD=数据库root密码

获取root密码

打开数据库,root的密码

20250909012309109-Screenshot_2025-09-09-01-22-28-914_com.android.chrome-edit

粘贴过去就行

20250909031106199-image

config.js 也一样

20250909031157889-image

4.导入数据库

20250909025630662-image

20250909025736979-image

20250909025758170-image

20250909025926570-image

20250909030007526-image

20250909030051484-image

5.启动后端

20250909013033279-Screenshot_2025-09-09-01-30-09-924_com.android.chrome-edit

项目文件路径

/www/wwwroot/XiaoShiLiu-master/express-project

启动命令

npm start

包管理器

npm

20250909013224400-Screenshot_2025-09-09-01-31-39-413_com.android.chrome-edit

20250909013229802-Screenshot_2025-09-09-01-32-03-673_com.android.chrome-edit

后端就运行成功了

重命名前端配置

进入

/www/wwwroot/XiaoShiLiu-master/vue3-project

.env.example

重命名为

.env

20250909013549927-Screenshot_2025-09-09-01-34-19-854_com.android.chrome-edit

6.运行前端

20250909014641107-Screenshot_2025-09-09-01-44-42-770_com.android.chrome-edit

20250909014654670-Screenshot_2025-09-09-01-44-57-730_com.android.chrome-edit

项目目录

/www/wwwroot/XiaoShiLiu-master/vue3-project

启动命令

npm run dev

包管理器

npm

端口

5173

域名有的话就填域名,没有的话就填ip

成功搞定

20250909014713826-Screenshot_2025-09-09-01-45-34-216_com.android.chrome-edit

7其他

如果启动失败就去这个目录,然后打开终端

/www/wwwroot/XiaoShiLiu-master/vue3-project

执行

cnpm install

20250909025002671-image

完成后再启动就可以了

后台地址

/admin

默认用户名

admin

密码

admin123
请登录后发表评论

    没有回复内容

樱花云