# SKILLITH-OFFICIAL-WEBSITE

**Repository Path**: skillith/skillith-official-website

## Basic Information

- **Project Name**: SKILLITH-OFFICIAL-WEBSITE
- **Description**: 企业官网+项目介绍
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-28
- **Last Updated**: 2025-10-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# showcompany

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

# 智索真源 - 企业官网

> 一家专注于智能化企业服务创新的科技公司，已在芜湖市政府支持下在"神山智谷"完成落地

![Vue](https://img.shields.io/badge/Vue-3.2.13-brightgreen.svg)
![Spring Boot](https://img.shields.io/badge/Spring%20Boot-2.x-brightgreen.svg)
![License](https://img.shields.io/badge/license-MIT-blue.svg)

## 📋 目录

- [项目简介](#项目简介)
- [核心特性](#核心特性)
- [技术栈](#技术栈)
- [项目结构](#项目结构)
- [快速开始](#快速开始)
- [功能模块](#功能模块)
- [API接口](#api接口)
- [部署指南](#部署指南)
- [开发规范](#开发规范)
- [常见问题](#常见问题)
- [联系我们](#联系我们)

## 🎯 项目简介

智索真源是一家专注于智能化企业服务创新的科技公司，致力于通过人工智能技术为企业提供更智能、更灵活的外包服务解决方案。本项目是公司的企业官网，采用现代化的前后端分离架构，提供多角色（企业方、投资方、学生方）的个性化展示和交互功能。

### 核心价值主张

- **技术股+现金混合模式**：创新性地引入技术股模式，降低企业现金流压力，激励人才深度参与
- **AI智能精准匹配**：基于机器学习算法，实现精准匹配，匹配成功率达92%以上
- **企业统一信用代码认证**：确保企业真实存在且具备基本资质
- **支持鼓励线下交流**：提供交流补贴，确保需求精准传达
- **股权激励长期价值**：优秀人才可获得项目股权，参与企业成长
- **用户成长化能力认证**：基于区块链技术的能力认证体系
- **多维度智能算法**：综合分析多个维度，构建360度人才画像

## ✨ 核心特性

### 多角色身份切换
- **企业方**：展示企业服务平台优势、成功案例、解决方案
- **投资方**：展示投资价值和商业机会
- **学生方**：展示学习成长机会和项目实践

### 平台核心优势对比
- 视觉化的平台优势对比展示
- 悬停显示详细说明
- 关键词智能高亮
- 动态动画效果

### 成功案例展示
- 英语音标智能学习系统
- 制造业信息智能调度平台
- 教育考试反作弊系统

### 安全可靠的联系表单
- 设备指纹识别
- 每日限制（5条/设备/天）
- 输入验证和XSS防护
- 敏感词过滤

### 数据可视化
- 基于 ECharts 的动态数据展示
- 阶段性目标可视化
- 交互式图表

## 🛠 技术栈

### 前端
- **框架**: Vue 3.2.13
- **路由**: Vue Router 4.5.1
- **图表**: ECharts 5.4.3, vue-echarts 6.6.1
- **构建工具**: Vue CLI 5.0
- **代码规范**: ESLint, Babel

### 后端
- **框架**: Spring Boot 2.x
- **构建工具**: Gradle
- **数据库**: MySQL
- **安全框架**: Spring Security

### 开发工具
- **IDE**: VS Code / IntelliJ IDEA
- **版本控制**: Git
- **API测试**: Postman / test-api.bat

## 📁 项目结构

```
showcompany/
├── src/                          # 前端源码
│   ├── components/              # Vue组件
│   │   ├── About.vue           # 关于我们
│   │   ├── Contact.vue         # 联系表单
│   │   ├── EnterpriseContent.vue  # 企业方内容
│   │   ├── InvestorContent.vue    # 投资方内容
│   │   ├── StudentContent.vue     # 学生方内容
│   │   ├── Navbar.vue          # 导航栏
│   │   ├── Footer.vue          # 页脚
│   │   ├── DataVisualization.vue  # 数据可视化
│   │   ├── WuhuMap.vue         # 芜湖地图
│   │   └── ...
│   ├── views/                   # 页面视图
│   │   ├── Home.vue            # 首页
│   │   ├── EnterprisePlatform.vue  # 企业平台页
│   │   └── TeamCollaboration.vue   # 团队协作页
│   ├── router/                 # 路由配置
│   │   └── index.js
│   ├── config/                 # 配置文件
│   │   └── api.js             # API配置
│   ├── assets/                 # 静态资源
│   │   ├── images/            # 图片
│   │   └── styles/            # 样式
│   └── main.js                # 入口文件
├── showcompanybackend/         # 后端项目
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/          # Java源码
│   │   │   │   └── cn/skillith/showcompanybackend/
│   │   │   │       ├── controller/   # 控制器
│   │   │   │       ├── service/      # 服务层
│   │   │   │       ├── entity/       # 实体类
│   │   │   │       ├── mapper/       # 数据访问
│   │   │   │       └── config/       # 配置
│   │   │   └── resources/     # 资源文件
│   │   │       ├── templates/ # 模板文件
│   │   │       ├── static/    # 静态资源
│   │   │       └── sql/       # SQL脚本
│   │   └── test/              # 测试代码
│   ├── build.gradle           # Gradle配置
│   ├── start-prod.bat         # 生产环境启动脚本
│   └── start.sh              # Linux启动脚本
├── public/                    # 公共资源
├── dist/                     # 构建输出
├── package.json              # 前端依赖
├── vue.config.js            # Vue配置
├── babel.config.js          # Babel配置
├── FRONTEND_BACKEND_INTEGRATION.md  # 前后端对接说明
└── PRODUCTION_DEPLOYMENT.md         # 生产环境部署指南
```

## 🚀 快速开始

### 环境要求

- Node.js >= 14.x
- npm >= 6.x
- Java >= 11
- MySQL >= 5.7
- Gradle >= 6.x

### 安装步骤

#### 1. 克隆项目

```bash
git clone <repository-url>
cd showcompany
```

#### 2. 安装前端依赖

```bash
npm install
```

#### 3. 配置后端

```bash
cd showcompanybackend
# 编辑 src/main/resources/application.properties
# 配置数据库连接信息
```

#### 4. 创建数据库

```bash
mysql -u root -p
CREATE DATABASE showcompany;
source src/main/resources/sql/init.sql;
```

#### 5. 启动后端服务

```bash
cd showcompanybackend
# Windows
gradlew.bat bootRun

# Linux/Mac
./gradlew bootRun
```

#### 6. 启动前端服务

```bash
npm run serve
```

#### 7. 访问应用

- 前端: http://localhost:8080
- 后端API: http://localhost:8080/api
- 管理后台: http://localhost:8080/admin

## 📦 功能模块

### 1. 首页 (Home)
- 英雄区块展示
- 公司介绍
- 核心服务
- 成功案例
- 团队介绍
- 联系我们

### 2. 企业平台 (Enterprise Platform)
**核心优势对比**
- 技术股+现金混合模式
- 支持鼓励线下交流
- AI智能精准匹配
- 企业统一信用代码认证
- 股权激励长期价值
- 用户成长化能力认证
- 多维度智能算法

**成功案例**
- 英语音标智能学习系统
- 制造业信息智能调度平台
- 教育考试反作弊系统

**行业解决方案**
- 软件外包与科技创新
- 教育培训与人才服务
- 中小型企业外包

### 3. 投资方页面 (Investor)
- 投资价值展示
- 市场机会分析
- 商业模式说明

### 4. 学生方页面 (Student)
- 学习成长机会
- 项目实践平台
- 能力认证体系

### 5. 联系我们
- 联系表单
- 地图展示
- 公司信息

## 🔌 API接口

### 联系表单

**POST** `/api/contact`

提交联系表单

**请求体**:
```json
{
  "name": "张三",
  "email": "zhangsan@example.com",
  "phone": "13800138000",
  "message": "我想了解贵公司的产品"
}
```

**响应**:
```json
{
  "success": true,
  "message": "消息发送成功"
}
```

**错误响应**:
```json
{
  "success": false,
  "error": "今日发送次数已达上限"
}
```

### 管理员接口

- **GET** `/admin` - 管理后台首页
- **GET** `/admin/messages` - 获取消息列表
- **PUT** `/admin/messages/{id}` - 更新消息状态
- **POST** `/admin/devices/{deviceId}/ban` - 封禁设备

## 🚢 部署指南

### 开发环境

1. 启动MySQL服务
2. 导入数据库
3. 启动后端服务
4. 启动前端服务

### 生产环境部署

详见 [PRODUCTION_DEPLOYMENT.md](./PRODUCTION_DEPLOYMENT.md)

#### 后端部署

```bash
cd showcompanybackend
# Windows
start-prod.bat

# Linux/Mac
./start.sh
```

#### 前端部署

```bash
# 构建生产版本
npm run build

# 上传 dist/ 目录到服务器
# 配置 Nginx 反向代理
```

#### Nginx配置示例

```nginx
server {
    listen 80;
    server_name www.skillith.cn;
    
    root /var/www/showcompany/dist;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

## 📝 开发规范

### 代码规范

- 使用 ESLint 进行代码检查
- 遵循 Vue 官方风格指南
- 组件命名使用 PascalCase
- 文件命名使用 kebab-case

### Git 提交规范

```
feat: 新功能
fix: 修复bug
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
test: 测试相关
chore: 构建/工具相关
```

### 组件开发规范

```vue
<template>
  <!-- 模板内容 -->
</template>

<script>
export default {
  name: 'ComponentName',
  components: {},
  props: {},
  data() {
    return {}
  },
  methods: {},
  mounted() {}
}
</script>

<style scoped>
/* 组件样式 */
</style>
```

## ❓ 常见问题

### Q: 前端无法连接到后端？
A: 检查后端服务是否启动，端口是否正确，CORS配置是否正确。

### Q: 消息提交失败？
A: 检查网络连接，查看浏览器控制台错误信息，检查后端日志。

### Q: 设备限制不生效？
A: 检查数据库连接，确认设备指纹生成逻辑，查看后端日志。

### Q: 管理页面无法访问？
A: 检查后端服务状态，确认端口8080是否被占用。

### Q: 构建失败？
A: 检查 Node.js 版本，清理 node_modules 后重新安装依赖。

### Q: 样式显示异常？
A: 检查 CSS 文件是否正确引入，清除浏览器缓存。

## 🔐 安全特性

- **设备指纹识别**：基于IP、User-Agent等信息生成唯一设备指纹
- **每日限制**：每个设备每天最多发送5条消息
- **输入验证**：邮箱格式、手机号格式、敏感词过滤
- **XSS防护**：自动清理用户输入内容
- **SQL注入防护**：使用参数化查询
- **CSRF防护**：跨站请求伪造防护

## 📄 许可证

MIT License

## 👥 联系我们

- **公司名称**: 智索真源
- **官网**: https://www.skillith.cn
- **地址**: 芜湖市神山智谷科技园区
- **邮箱**: contact@skillith.cn

## 🙏 致谢

- Vue.js 团队
- Spring Boot 团队
- ECharts 团队
- 芜湖市政府

## 📚 相关文档

- [前后端对接说明](./FRONTEND_BACKEND_INT了一个RATION.md)
- [生产环境部署指南](./PRODUCTION_DEPLOYMENT.md)
- [Vue 官方文档](https://vuejs.org/)
- [Spring Boot 官方文档](https://spring.io/projects/spring-boot)

---

**Made with ❤️ by 智索真源团队**