# Wangxun Chuangzhi Official Website System (网讯创智官网系统)

This repository contains the complete source code for the Wangxun Chuangzhi official website system, comprising three main components: a customer-facing official website, a background management administration panel, and a backend API server.

## Project Structure

```
wxgw2/
├── admin-web/       # Background Management System (Vue 3)
├── official-web/    # Official Website Frontend (Vue 3)
└── backend/         # Backend API Server (Flask)
```

---

## 1. Official Web (`official-web`)

The public-facing portal for "Wangxun Chuangzhi" (网讯创智), showcasing company information, products, solutions, and news.

### Tech Stack
- **Framework:** Vue 3 (Composition API)
- **Build Tool:** Vite
- **UI Library:** Element Plus
- **State Management:** Pinia
- **Routing:** Vue Router
- **HTTP Client:** Axios
- **CSS Preprocessor:** Sass

### Key Features
- **Responsive Design:** Optimized for various screen sizes using Element Plus.
- **Dynamic Content:** Fetches real-time data (News, Honors, History, Company Info) from the backend.
- **Modules:**
  - Home, Products, Solutions
  - Education (产教融合), Service (产业服务)
  - News (新闻动态)
  - About Us (关于我们) - Includes dynamically configurable Introduction, Vision, Mission, History, and Honors.

### Setup & Run
```bash
cd official-web
npm install
npm run dev
```

---

## 2. Admin Web (`admin-web`)

The content management system (CMS) for administrators to manage the official website's data.

### Tech Stack
- **Framework:** Vue 3 (Composition API)
- **Build Tool:** Vite
- **UI Library:** Element Plus
- **State Management:** Pinia
- **Routing:** Vue Router
- **HTTP Client:** Axios
- **Rich Text Editor:** @vueup/vue-quill + quill-image-uploader
- **Charts:** ECharts

### Key Features
- **Authentication:** Secure login system using JWT.
- **Dashboard:** Overview of system status (integrated with ECharts).
- **Content Management:**
  - **News Management:** Rich text editing for news articles.
  - **Case Studies:** Manage educational and service cases.
  - **Partners & Strategic Cooperation:** Manage partner logos and links.
  - **Carousels:** Manage homepage and section banners.
  - **About Us:** Configure Company Info, Development History, and Honors.
  - **User Management:** Manage admin users.
- **Image Upload:** Integrated image uploading functionality.

### Setup & Run
```bash
cd admin-web
npm install
npm run dev
```

---

## 3. Backend (`backend`)

The RESTful API server that powers both the Official Web and Admin Web.

### Tech Stack
- **Language:** Python 3.11+
- **Framework:** Flask
- **ORM:** SQLAlchemy
- **Database:** MySQL (PyMySQL driver)
- **Authentication:** Flask-JWT-Extended
- **Migrations:** Flask-Migrate
- **CORS:** Flask-Cors

### Key Features
- **RESTful API:** Provides endpoints for all frontend resources.
- **JWT Authentication:** Secure token-based authentication.
- **File Upload:** Handles image uploads and serving static files.
- **Database Management:** Automated table creation and seeding.
- **Configurable:** Environment-based configuration.

### Database Configuration
The database connection string is configured in `app/config.py`. By default, it connects to a remote MySQL server.
```python
SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://user:password@host:port/database'
```

### Setup & Run

1.  **Create Virtual Environment:**
    ```bash
    cd backend
    python -m venv venv
    # Windows
    venv\Scripts\activate
    # Linux/Mac
    source venv/bin/activate
    ```

2.  **Install Dependencies:**
    ```bash
    pip install -r requirements.txt
    ```

3.  **Database Initialization (Optional):**
    *   **WARNING:** `drop_tables.py` will delete all existing data.
    ```bash
    python drop_tables.py  # Reset database schema
    python seed.py         # Seed initial data (Admin user, etc.)
    ```

4.  **Run Server:**
    ```bash
    python run.py
    ```
    The server runs on `http://localhost:5000` by default.

---

## Environment Configuration

### Frontend (`.env`)
Both `admin-web` and `official-web` use `.env` files to configure API endpoints.

**admin-web/.env:**
```env
VITE_API_BASE_URL=http://localhost:5000/api
VITE_IMG_BASE_URL=http://localhost:5000
VITE_UPLOAD_URL=http://localhost:5000/api/upload
```

**official-web/.env:**
```env
VITE_API_BASE_URL=http://localhost:5000/api
VITE_IMG_BASE_URL=http://localhost:5000
```

### Backend
Backend configuration is primarily handled in `app/config.py`. You can override settings using environment variables like `SECRET_KEY`, `DATABASE_URL`, and `JWT_SECRET_KEY`.

---

## Deployment

1.  **Backend:** Deploy the Flask app using Gunicorn or uWSGI behind Nginx/Apache. Ensure the `static/uploads` directory is writable.
2.  **Frontend:** Build both Vue apps using `npm run build` and serve the `dist/` directories using a web server (Nginx/Apache).

## License

[MIT License](LICENSE)