This web application delivers an interactive real estate analytics platform for second-hand residential properties. It combines automated data acquisition, relational storage, statistical analysis, and responsive visualization to support market exploration and price estimation.
System Architecture
The solution follows a decoupled client-server model: a Vue.js frontend handles UI rendering and user interactions, while a Flask backend processes HTTP requests, orchestrates database operations, and serves structured JSON responses. Communication occurs over RESTful endpoints, with MySQL serving as the persistent data layer. Visualizations are rendered using ECharts, and text-based insights leverage word cloud generation via Python’s wordcloud and jieba libraries.
Core Components
- Data Ingestion: A configurable crawler fetches property listings—including price, area, orientation, district, and descriptive text—from public real estate portals. Admins specify target cities and pagination depth.
- Data Processing: Raw entries undergo cleaning (e.g., unit normalization, null handling), deduplication, and schema alignment before insertion into MySQL tables.
- Analytics Engine: Implements multiple analytical methods:
- Aggregated metrics (e.g., median price per district)
- Bivariate scatter plots (area vs. price)
- Price-range distribution histograms
- Text mining for keyword prominence in listing descriptions
- Association rule mining (Apriori) to identify frequent attribute combinations linked to price tiers
- Interactive Dashboard: Vue components dynamically render charts, tables, and filters—enabling drill-down by city, district, or price bracket without full page reloads.
Key Functional Modules
Market Overview
Displays paginated, searchable listings with metadata (location, price, area, listing date). Each entry includes a direct link to the original source page.
Regional Price Trends
Generates comparative bar charts and trend lines showing average transaction prices across administrative regions. Users can toggle between city-level and district-level granularity.
Area–Price Distribution
Renders an interactive scatter plot where each point represents a listing. Color intensity and size encode density and price tier, highlighting prevalent area-price clusters.
Descriptive Text Insights
Processes free-text fields (e.g., "selling points", "community features") to generate weighted word clouds—revealing dominant themes like "subway access", "renovated", or "green space" with in selected geographies.
Price Bracket Distribution
Segments listings into six predefined price bands (≤¥4k, ¥4–7k, ¥7–10k, ¥10–20k, ¥20–30k, >¥30k/m²) and renders proportional pie or stacked bar charts per region.
Inventory Heatmap
Visualizes housing supply volume across districts using choropleth shading or bubble sizing, supporting macro-level market saturation assessment.
Predictive Estimation
Accepts user-defined constraints (city, area range, orientation) and returns a statistically derived price interval—calculated as the interquartile range of matching historical listings.
Association Rule Mining
Leverages Apriori to uncover high-support, high-confidence itemsets—for example, "Beijing + 80–100m² + south-facing → ¥80k–120k/m²"—to guide targeted filtering and recommendation logic.
User Management
Role-based administration includes account CRUD operations, status toggling (active/inactive), password resets, and audit logging—all accessible only to authorized users.
Operational Logging
Maintains timestamped records of crawl executions, including success/failure status, fetched record count, and execution duration—visible exclusively to administrators.
Setup Instructions
Backend (Flask)
- Install Python 3.8+ and MySQL 5.7+.
- Import the provided SQL schema into a new database.
- Update database credantials in
mysqlHelper.py. - Install dependencies: ```
pip install flask pymysql requests pandas jieba wordcloud lxml beautifulsoup4 xlwt coloredlogs fake-useragent
- Launch the server: ```
python app.py
Frontend (Vue.js)
- Install Node.js v14.x and
cnpm. - Navigate to
house-web/and run: ``` cnpm install npm run serve - Access the dashboard at http://localhost:8099.
Project Structure
house-second/
├── house-server/ # Flask backend
│ ├── app.py # Entry point
│ ├── app_business.py # Business logic endpoints
│ ├── app_user.py # Authentication & admin routes
│ ├── getCloud.py # Word cloud generator
│ ├── getData.py # Web scraper module
│ ├── mysqlHelper.py # DB connection & query utilities
│ ├── u_saveLog.py # Audit logging handler
│ ├── u_zhongweishu.py # Median calculation utility
│ └── u_timeHelper.py # Date/time formatting helpers
└── house-web/ # Vue.js frontend
├── src/
│ ├── api/ # Axios service wrappers
│ ├── components/ # Reusable UI elements
│ ├── router/ # Vue Router configuration
│ ├── store/ # Vuex state management
│ ├── utils/ # Helper functions (e.g., chart formatters)
│ └── views/ # Page-level components (dashboard, maps, forms)
└── vue.config.js # Build & dev server settings