company_official

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

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

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.

SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://user:password@host:port/database'

Setup & Run

1. Create Virtual Environment:

   cd backend
   python -m venv venv
   # Windows
   venv\Scripts\activate
   # Linux/Mac
   source venv/bin/activate
   

2. Install Dependencies:

   pip install -r requirements.txt
   

3. Database Initialization (Optional):

   • WARNING: drop_tables.py will delete all existing data.

     python drop_tables.py  # Reset database schema
     python seed.py         # Seed initial data (Admin user, etc.)
     

4. Run Server:

   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:

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:

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