Real Estate Analytics Dashboard with Flask and Vue.js

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)

  1. Install Python 3.8+ and MySQL 5.7+.
  2. Import the provided SQL schema into a new database.
  3. Update database credantials in mysqlHelper.py.
  4. Install dependencies: ``` pip install flask pymysql requests pandas jieba wordcloud lxml beautifulsoup4 xlwt coloredlogs fake-useragent
  5. Launch the server: ``` python app.py
    
    

Frontend (Vue.js)

  1. Install Node.js v14.x and cnpm.
  2. Navigate to house-web/ and run: ``` cnpm install npm run serve
  3. 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

Tags: Flask Vue.js echarts MySQL apriori

Posted on Wed, 19 Aug 2026 16:03:59 +0000 by Steve Angelis