# guanwang

**Repository Path**: robo/guanwang

## Basic Information

- **Project Name**: guanwang
- **Description**: 企业官网 + 管理后台
基于 Vue 3 + Vite + Element Plus + TypeScript（前端）与 Spring Boot3 + JPA + SQLite（后端）的企业官网与管理后台系统。
- **Primary Language**: TypeScript
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: http://harrison.xin
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2025-12-23
- **Last Updated**: 2025-12-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 企业官网 + 管理后台

基于 Vue 3 + Vite + Element Plus + TypeScript（前端）与 Spring Boot + JPA + SQLite（后端）的企业官网与管理后台系统。

### 技术栈
- **前端**: Vue 3, Vite, Element Plus, TypeScript, Vue Router, Pinia
- **后端**: Spring Boot 2.7.x, Spring Data JPA, SQLite
- **构建与包管理**: pnpm, Maven

### 功能特性
- **官网**：首页、关于我们（发展历程动态）、产品服务（动态）、解决方案（动态）、合作企业、联系我们（提交消息）
- **管理后台**：
  - 轮播图管理、合作企业管理、我们的优势（Feature）管理、核心服务管理
  - 产品管理、发展历程（Milestone）管理、解决方案管理
  - 联系消息管理（分页、标记已读、删除）
  - 系统设置（基本信息/联系方式/安全设置）
- **登录**：前端本地登录（localStorage 简易鉴权），路由守卫保护 `/admin` 下页面

---

## 快速开始

### 前置要求
- Node.js 16+
- pnpm 8+
- Java 17+
- Maven 3.8+

安装 pnpm（如未安装）：
```bash
npm i -g pnpm
```

### 前端
```bash
# 安装依赖
pnpm install

# 开发启动（默认 http://localhost:3000）
pnpm dev

# 生产构建（产物在 dist/）
pnpm build

# 本地预览生产包
pnpm preview
```

### 后端
```bash
cd backend
mvn clean package -DskipTests

# 启动（首次会自动初始化 SQLite 数据库文件夹）
java -jar target/guanwang-system-1.0.0.jar
```

---

## 目录结构（简）

```
.
├── src/                    # 前端源码
│   ├── layouts/            # 布局（官网/后台）
│   ├── views/              # 页面（website / admin）
│   ├── api/                # 前端 API 客户端（按服务拆分）
│   ├── router/             # Vue Router
│   └── main.ts             # 入口
└── backend/                # 后端源码（Spring Boot）
    ├── src/main/java/...   # 控制器/服务/实体/仓库/配置
    ├── src/main/resources/ # application.yml 等
    └── pom.xml             # Maven 配置
```

---

## 部署指南

### 前端（Nginx）
1. 构建前端：`pnpm build`
2. 将 `dist/` 内容上传至服务器 Web 根目录（如 `/var/www/html`）
3. Nginx 示例配置：

```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /var/www/html;
    index index.html;

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

    # 将 /api 转发到后端服务（示例：8080）
    location /api/ {
        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;
    }
}
```

### 后端（Java Jar）
```bash
# 生产推荐指定 profile
java -jar target/guanwang-system-1.0.0.jar --spring.profiles.active=prod

# 后台运行
nohup java -jar target/guanwang-system-1.0.0.jar > app.log 2>&1 &
```

生产配置示例 `application-prod.yml`：
```yaml
server:
  port: 8080

spring:
  datasource:
    url: jdbc:sqlite:./data/guanwang.db
  jpa:
    hibernate:
      ddl-auto: update
    show-sql: false

logging:
  level:
    com.guanwang: INFO
  file:
    name: logs/guanwang.log
```

---

## 管理后台
- 入口：`/admin`（官网导航已隐藏该入口，请直接在地址栏访问）
- 登录：本地简易鉴权（默认密码 `admin123`，前端存储于 localStorage）
- 路由守卫：未登录访问 `/admin/*` 将跳转至 `/admin/login`

---

## 前端 API 说明（概览）
前端 `src/api/` 按服务拆分：`product.ts`、`feature.ts`、`core-service.ts`、`carousel.ts`、`partner.ts`、`milestone.ts`、`solution.ts`、`settings.ts`、`contact.ts`，统一通过 `client.ts` 发送请求（自动处理 GET params、非 JSON/204 响应）。

---

## 常见问题（Troubleshooting）
- **TS6504 .vue.js 被当根文件**：已在 `tsconfig.json` 排除 `src/**/*.vue.js` 与 `src/**/*.js`。如仍报错，清理缓存（`node_modules/.vite`、`node_modules/.cache`、`dist`），必要时临时跳过 `vue-tsc`。
- **缺少 pinia 依赖**：安装 `pnpm add -w pinia`。
- **操作成功但 JSON 解析报错**：`client.ts` 已在 204/非 JSON 响应时跳过 `response.json()`。
- **Element Plus 图标命名不匹配**：使用 `* as Icons` 并通过映射函数兜底 `QuestionFilled`。
- **分页控件 min>max**：确保页数至少为 1。
- **PowerShell 连续命令 & Maven**：在 PowerShell 中不要使用 `&&`；确保 `mvn` 在 PATH 中或使用 Maven Wrapper。

---

## 脚本
```json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "install:pnpm": "pnpm install",
    "start": "pnpm dev"
  }
}
```

---

## 访问地址（本地）
- 官网首页: `http://localhost:3000/`
- 管理后台: `http://localhost:3000/admin`（导航不显示入口，需手动访问）