2026超美壁纸小程序UI《心念壁纸》1.1.1版本心动每一刻

# 心念壁纸小程序源码 作者：林星情 qq：55580417

这是一套壁纸小程序完整源码，包含：

- `backend`：Spring Boot 后端接口服务
- `admin`：Vue3 管理后台
- `miniprogram`：微信小程序前端
- `database`：MySQL 初始化脚本
- `docs`：接口文档与部署说明

## 购买者需要自行配置

请不要直接上线默认配置，部署前必须替换以下内容：

1. 后端配置：`backend/src/main/resources/application.yml`
   - 数据库地址、账号、密码
   - `jwt.secret`
   - 微信小程序 `wx.appid`、`wx.secret`
   - 存储模式 `storage.type`：支持 `local`、`cos`、`qiniu`
   - 腾讯云 COS `secret-id`、`secret-key`、`bucket`、`region`、`domain`
   - 七牛云 Kodo `access-key`、`secret-key`、`bucket`、`region`、`domain`
   - 本地上传目录 `file.upload-path`

2. 小程序配置：`miniprogram/project.config.json`
   - 将 `appid: touristappid` 改成自己的微信小程序 AppID

3. 小程序接口域名：`miniprogram/miniprogram/utils/request.ts`
   - `BASE_URL` 改为自己的后端 API 地址，例如 `https://api.example.com/api`
   - `IMAGE_BASE_URL` 改为自己的资源域名，例如 `https://api.example.com`

4. 后台开发代理：`admin/vite.config.js`
   - 本地开发时把 `https://your-api-domain.com` 改成自己的后端域名
   - 线上部署后台时推荐用 Nginx 把 `/api` 反向代理到后端

5. 广告配置
   - 数据库初始化脚本中广告位为 `adunit-your-ad-id`
   - 部署后可在管理后台广告管理中填入自己的广告位 ID

## 快速部署流程

1. 创建 MySQL 数据库，例如 `xr_wallpaper`
2. 导入 `database/schema.sql`
3. 导入 `database/data.sql`
4. 修改 `backend/src/main/resources/application.yml`
5. 在 `backend` 目录执行：

```bash
./mvnw clean package -DskipTests
java -jar target/demo-0.0.1-SNAPSHOT.jar
```

6. 在宝塔或 Nginx 中配置 API 站点反向代理到 `http://127.0.0.1:8080`
7. 在 `admin` 目录执行：

```bash
npm install
npm run build
```

8. 将 `admin/dist` 上传到后台站点目录
9. 使用微信开发者工具打开 `miniprogram` 目录，填写 AppID，配置合法域名后上传审核

## 注意

- 本出售包不包含 `node_modules`、构建产物、上传图片、服务器日志和个人密钥。
- 默认配置均为占位值，不能直接用于生产环境。
- 上线前请在微信公众平台配置 request/uploadFile/downloadFile 合法域名。
- 存储配置请查看 `STORAGE_GUIDE.md`。

作者：林星情 QQ：55580417

文档用于项目交付、服务器部署、后台维护和后续更新。当前项目包含微信小程序端、Spring Boot 后端、Vue 管理后台和 MySQL 数据库。

## 一、项目组成

| 模块 | 路径 | 说明 |
| --- | --- | --- |
| 微信小程序 | `sart/` | 用户端，浏览、搜索、收藏、下载、上传壁纸 |
| 后端服务 | `demo/` | Spring Boot API 服务，提供小程序和后台接口 |
| 管理后台 | `client/` | Vue3 + Element Plus 后台管理系统 |
| 数据库脚本 | `database/` | 初始化表结构和测试数据 |
| 上传资源 | `uploads/` | 壁纸图片、头像、上传文件 |

## 二、线上域名

| 域名 | 用途 |
| --- | --- |
| `https://your-api-domain.com` | 后端 API 与图片资源 |
| `https://your-admin-domain.com` | 管理后台 |

小程序请求地址已配置为：

```ts
BASE_URL = 'https://your-api-domain.com/api'
IMAGE_BASE_URL = 'https://your-api-domain.com'
```

对应文件：

```text
sart/miniprogram/utils/request.ts
```

## 三、主要功能介绍

### 1. 小程序端

用户可以在小程序中完成：

- 首页推荐壁纸浏览
- 分类浏览
- 关键词搜索
- 壁纸详情查看
- 收藏/取消收藏
- 下载壁纸
- 浏览历史
- 用户上传壁纸投稿
- 上传记录查看
- 意见反馈
- 关于我们、隐私政策、用户协议查看

### 2. 管理后台

管理员可以在后台完成：

- 仪表盘数据查看
- 壁纸新增、编辑、删除、上下架
- 分类管理
- 标签管理
- 用户管理
- 用户投稿审核
- 帮助与反馈管理
- 关于我们配置
- 政策协议配置
- 广告配置
- 轮播图管理
- 系统设置
- 右上角待办通知

右上角通知会显示：

- 待审核投稿数量
- 未处理反馈数量

点击通知可直接跳转到对应处理页面。

### 3. 后端接口

后端统一前缀：

```text
/api
```

常用接口：

| 接口 | 说明 |
| --- | --- |
| `/api/auth/admin/login` | 管理员登录 |
| `/api/auth/wx/login` | 小程序登录 |
| `/api/wallpapers` | 壁纸列表/新增 |
| `/api/categories` | 分类列表 |
| `/api/tags` | 标签列表 |
| `/api/collects` | 收藏 |
| `/api/downloads` | 下载记录 |
| `/api/browse-history` | 浏览历史 |
| `/api/admin/upload-records` | 投稿审核 |
| `/api/admin/feedbacks` | 用户反馈 |
| `/uploads/**` | 图片资源 |

## 四、服务器目录约定

当前服务器推荐目录：

```text
/www/wwwroot/wallpaper-api
/www/wwwroot/wallpaper-api/demo
/www/wwwroot/wallpaper-api/uploads
/www/wwwroot/your-admin-domain.com
```

说明：

| 路径 | 用途 |
| --- | --- |
| `/www/wwwroot/wallpaper-api/demo` | 后端源码与 jar |
| `/www/wwwroot/wallpaper-api/application.yml` | 后端生产配置 |
| `/www/wwwroot/wallpaper-api/uploads` | 图片上传目录 |
| `/www/wwwroot/your-admin-domain.com` | 管理后台静态文件 |

## 五、后端生产配置

服务器配置文件：

```text
/www/wwwroot/wallpaper-api/application.yml
```

关键配置：

```yaml
server:
  port: 8080

spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/xr_wallpaper?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&connectionCollation=utf8mb4_unicode_ci
    username: xr_wallpaper
    password: 数据库密码

file:
  upload-path: /www/wwwroot/wallpaper-api/uploads/

wx:
  appid: 小程序AppID
  secret: 小程序AppSecret

cos:
  enabled: true
  secret-id: 腾讯云SecretId
  secret-key: 腾讯云SecretKey
  bucket: your-cos-bucket
  region: ap-guangzhou
  domain: https://your-bucket.cos.ap-guangzhou.myqcloud.com
```

注意：

- `file.upload-path` 必须是 Linux 路径，不能使用 `F:/Wallpaper/uploads/`
- `cos.enabled: true` 后，新上传图片会写入腾讯云 COS
- COS 密钥不要提交到代码仓库，只放服务器生产配置或环境变量
- 修改配置后必须重启 Java 项目
- `wx.appid` 和 `wx.secret` 不配置会影响小程序微信登录

## 六、宝塔部署流程

### 1. 数据库

宝塔创建数据库：

```text
数据库名：xr_wallpaper
用户名：xr_wallpaper
编码：utf8mb4
```

导入完整 SQL：

```bash
mysql -u xr_wallpaper -p xr_wallpaper < /www/wwwroot/wallpaper-api/xr_wallpaper.sql
```

检查表：

```bash
mysql -u xr_wallpaper -p -e "USE xr_wallpaper; SHOW TABLES;"
```

### 2. Java 后端

本地打包：

```powershell
cd F:\Wallpaper\demo
.\mvnw.cmd clean package -DskipTests
```

上传 jar：

```text
F:\Wallpaper\demo\target\demo-0.0.1-SNAPSHOT.jar
```

覆盖服务器：

```text
/www/wwwroot/wallpaper-api/demo/target/demo-0.0.1-SNAPSHOT.jar
```

宝塔 Java 项目启动命令：

```bash
/usr/bin/java -jar /www/wwwroot/wallpaper-api/demo/target/demo-0.0.1-SNAPSHOT.jar --spring.config.location=/www/wwwroot/wallpaper-api/application.yml
```

启动后测试：

```bash
curl http://127.0.0.1:8080/api/categories
```

正常返回：

```json
{"code":200,"message":"操作成功","data":[...]}
```

### 3. API 域名反向代理

宝塔添加站点：

```text
your-api-domain.com
```

反向代理：

```nginx
location / {
    proxy_pass http://127.0.0.1:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}
```

图片建议由 Nginx 直接读取：

```nginx
location ^~ /uploads/ {
    alias /www/wwwroot/wallpaper-api/uploads/;
    try_files $uri =404;
    access_log off;
    expires 30d;
}
```

申请 SSL 后测试：

```text
https://your-api-domain.com/api/categories
```

### 4. 管理后台

本地打包：

```powershell
cd F:\Wallpaper\client
npm run build
```

上传：

```text
F:\Wallpaper\client\dist\*
```

覆盖服务器：

```text
/www/wwwroot/your-admin-domain.com
```

后台站点需要配置 Vue history 模式：

```nginx
location / {
    try_files $uri $uri/ /index.html;
}
```

后台 API 反代：

```nginx
location ^~ /api/ {
    proxy_pass http://127.0.0.1:8080/api/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}
```

后台图片资源：

```nginx
location ^~ /uploads/ {
    alias /www/wwwroot/wallpaper-api/uploads/;
    try_files $uri =404;
    access_log off;
    expires 30d;
}
```

访问：

```text
https://your-admin-domain.com
```

默认账号：

```text
admin / admin123
```

上线后建议立即修改默认密码。

## 七、腾讯云 COS 对象存储

项目已支持腾讯云 COS 上传。启用后，后台上传、用户投稿、头像上传、Logo 上传等新文件会保存到 COS。

### 1. COS 存储桶建议配置

| 配置项 | 建议值 |
| --- | --- |
| 存储桶名称 | `xinnianbizhi` |
| Bucket | `your-cos-bucket` |
| 地域 | `ap-guangzhou` |
| 数据冗余 | 单 AZ 存储 |
| 访问权限 | 公有读私有写 |
| 版本控制 | 关闭 |
| 服务端加密 | 不加密 |
| 日志存储 | 关闭 |

`公有读私有写` 适合壁纸业务：

- 小程序和后台可以直接显示图片
- 用户不能直接向 COS 写入
- 只有后端服务持有密钥并负责上传

### 2. 后端 COS 配置

服务器配置文件：

```text
/www/wwwroot/wallpaper-api/application.yml
```

增加或修改：

```yaml
cos:
  enabled: true
  secret-id: 腾讯云SecretId
  secret-key: 腾讯云SecretKey
  bucket: your-cos-bucket
  region: ap-guangzhou
  domain: https://your-bucket.cos.ap-guangzhou.myqcloud.com
```

注意：

- 密钥不要写入代码仓库
- 密钥泄露后应立即在腾讯云控制台禁用并重新生成
- 修改配置后必须重启 Java 项目

### 3. COS 上传路径规则

后端上传后，COS 对象路径保持为：

```text
uploads/2026/05/xxx.jpg
uploads/images/xxx.png
uploads/avatars/xxx.jpg
```

数据库中新上传图片会保存为完整 HTTPS 地址：

```text
https://your-bucket.cos.ap-guangzhou.myqcloud.com/uploads/2026/05/xxx.jpg
```

旧图片如果仍然是：

```text
/uploads/2026/05/xxx.jpg
```

则继续由服务器 Nginx 的 `/uploads/` 静态目录提供访问。

### 4. 迁移旧图片到 COS

旧图片本地目录：

```text
F:\Wallpaper\uploads
```

服务器目录：

```text
/www/wwwroot/wallpaper-api/uploads
```

上传到 COS 时，需要保持路径前缀一致：

```text
uploads/2026/05/xxx.jpg
```

不要上传成：

```text
uploads/uploads/2026/05/xxx.jpg
```

迁移后，如果希望数据库也全部指向 COS，可执行类似 SQL：

```sql
UPDATE x_wallpaper
SET cover_url = CONCAT('https://your-bucket.cos.ap-guangzhou.myqcloud.com', cover_url)
WHERE cover_url LIKE '/uploads/%';

UPDATE x_wallpaper
SET original_url = CONCAT('https://your-bucket.cos.ap-guangzhou.myqcloud.com', original_url)
WHERE original_url LIKE '/uploads/%';

UPDATE x_wallpaper
SET thumb_url = CONCAT('https://your-bucket.cos.ap-guangzhou.myqcloud.com', thumb_url)
WHERE thumb_url LIKE '/uploads/%';

UPDATE x_upload_record
SET image_url = CONCAT('https://your-bucket.cos.ap-guangzhou.myqcloud.com', image_url)
WHERE image_url LIKE '/uploads/%';
```

执行前必须先备份数据库。

### 5. 小程序域名配置

如果使用 COS 默认域名展示图片，微信公众平台需要增加：

```text
downloadFile合法域名：https://your-bucket.cos.ap-guangzhou.myqcloud.com
```

如果后续绑定自定义图片域名，例如：

```text
https://your-cdn-domain.com
```

则应配置：

```text
downloadFile合法域名：https://your-cdn-domain.com
```

## 八、微信小程序配置

微信公众平台配置合法域名：

```text
request合法域名：https://your-api-domain.com
uploadFile合法域名：https://your-api-domain.com
downloadFile合法域名：https://your-api-domain.com
```

微信开发者工具打开：

```text
F:\Wallpaper\sart
```

发布流程：

```text
微信开发者工具编译测试 -> 上传代码 -> 微信公众平台提交审核 -> 发布
```

## 九、更新维护流程

### 1. 更新小程序

```text
修改 sart -> 微信开发者工具测试 -> 上传代码 -> 提交审核
```

### 2. 更新后台

```powershell
cd F:\Wallpaper\client
npm run build
```

然后上传：

```text
F:\Wallpaper\client\dist\*
```

覆盖：

```text
/www/wwwroot/your-admin-domain.com
```

不需要重启 Java。

### 3. 更新后端

```powershell
cd F:\Wallpaper\demo
.\mvnw.cmd clean package -DskipTests
```

上传并覆盖：

```text
/www/wwwroot/wallpaper-api/demo/target/demo-0.0.1-SNAPSHOT.jar
```

然后宝塔重启：

```text
Java项目 -> wallpaper-api -> 重启
```

### 4. 更新数据库

更新数据库前先备份：

```bash
mysqldump -u xr_wallpaper -p xr_wallpaper > /www/wwwroot/wallpaper-api/backup.sql
```

再执行新的 SQL。

## 十、常见问题

### 1. 后台刷新页面 404

原因：Vue 使用 history 路由，Nginx 未回退到 `index.html`。

修复：

```nginx
location / {
    try_files $uri $uri/ /index.html;
}
```

### 2. 后台登录返回 401

检查 `your-admin-domain.com` 的 `/api/` 反代：

```nginx
location ^~ /api/ {
    proxy_pass http://127.0.0.1:8080/api/;
}
```

如果路径转丢 `/api`，后端会返回未登录。

### 3. 图片显示破图

检查数据库图片路径：

```bash
mysql -u xr_wallpaper -p xr_wallpaper -e "SELECT cover_url FROM x_wallpaper LIMIT 1;"
```

假设返回：

```text
/uploads/2026/05/xxx.jpg
```

服务器文件必须存在：

```text
/www/wwwroot/wallpaper-api/uploads/2026/05/xxx.jpg
```

Nginx 图片配置：

```nginx
location ^~ /uploads/ {
    alias /www/wwwroot/wallpaper-api/uploads/;
    try_files $uri =404;
}
```

### 4. 新增壁纸 500

常见原因：

- 上传路径仍是 `F:/Wallpaper/uploads/`
- 服务器上传目录没有写权限
- Java 项目没有读取生产 `application.yml`

检查配置：

```bash
grep -n "upload-path" /www/wwwroot/wallpaper-api/application.yml
```

正确值：

```yaml
upload-path: /www/wwwroot/wallpaper-api/uploads/
```

修复权限：

```bash
chown -R www:www /www/wwwroot/wallpaper-api/uploads
chmod -R 755 /www/wwwroot/wallpaper-api/uploads
```

### 5. Java 项目启动失败

检查端口：

```bash
lsof -i:8080
```

如旧进程占用：

```bash
pkill -f demo-0.0.1-SNAPSHOT.jar
```

检查 Java：

```bash
java -version
```

必须是 Java 17。

### 6. 数据库连接失败

测试数据库账号：

```bash
mysql -u xr_wallpaper -p xr_wallpaper -e "SELECT COUNT(*) FROM x_admin;"
```

如果能返回数量，说明数据库账号正常；再检查后端 `application.yml` 是否读取正确。

### 7. COS 上传失败

检查配置：

```bash
grep -n "cos:" -A 8 /www/wwwroot/wallpaper-api/application.yml
```

常见原因：

- `cos.enabled` 没有设为 `true`
- `secret-id` 或 `secret-key` 错误
- `bucket` 写错，必须包含 APPID 后缀
- `region` 写错，广州为 `ap-guangzhou`
- Bucket 权限不是公有读私有写

查看 Java 日志：

```text
宝塔 -> Java项目 -> wallpaper-api -> 设置 -> 日志管理
```

## 十一、上线检查清单

- [ ] `https://your-api-domain.com/api/categories` 返回 `code:200`
- [ ] `https://your-admin-domain.com` 可访问
- [ ] 后台可登录
- [ ] 后台刷新任意页面不 404
- [ ] 后台新增壁纸成功
- [ ] 后台图片正常显示
- [ ] 小程序首页可加载
- [ ] 小程序详情页可打开
- [ ] 小程序收藏、下载正常
- [ ] 小程序用户上传正常
- [ ] 后台右上角通知能看到待审核投稿/未处理反馈
- [ ] 微信公众平台合法域名已配置
- [ ] 管理员默认密码已修改

已售2

2026超美壁纸小程序UI《心念壁纸》1.1.1版本

￥99