反思我的旅程：建立初學者房地產清單全端應用程式-Python教學-PHP中文網

反思我的旅程：建立初學者房地產清單全端應用程式

DDD

發布： 2024-09-13 18:17:51

原創

797 人瀏覽過

Reflecting on My Journey: Building a Beginner Real Estate Listing Fullstack App

當我第一次開始學習Python時，我不知道這段旅程會帶我去哪裡。我記得深入研究 Python 教程，努力學習循環、函數和物件導向程式設計等基本概念。快進到今天，我使用 Flask 後端和 React 前端的組合建立了一個全端房地產清單應用程式。這個專案不僅是一個挑戰，也是一個令人難以置信的學習經歷，幫助我成長為一名開發人員。讓我帶您完成整個旅程，並重點介紹我在建立此應用程式時學到的一些關鍵方面。

開始：學習 Python 基礎知識

當我開始使用 Python 時，我知道它是一種多功能且適合初學者的語言。然而，像大多數初學者一樣，我也面臨一些挑戰。理解文法、學習如何調試、熟悉 Python 的函式庫都是我必須克服的障礙。我花了無數的時間在一些小專案上，例如一個簡單的計算器和一個待辦事項清單 CLI 應用程序，以掌握基礎知識。

當我開始開發我的房地產清單應用程式時，這些基礎練習得到了回報。 Python 基礎知識對於編寫乾淨、高效的程式碼至關重要，尤其是在為應用程式建立模型和處理資料時。

我先使用 Flask（一個輕量級 Web 框架）來建立後端。 Flask 使用簡單，但也需要對 Python 基礎知識有充分的了解。我的初始步驟包括設定虛擬環境和建置項目，確保安裝了所有必要的庫，例如用於 ORM（物件關係映射）的 SQLAlchemy，它簡化了資料庫互動。

使用 Flask 建置後端

房地產清單應用程式的後端旨在處理使用者身份驗證、房產清單、應用程式和願望清單。這要求我創建多個模型，包括使用者、屬性和應用程序，每個模型都有自己的一組欄位和關係。

這是我如何使用 SQLAlchemy 定義使用者模型的片段：

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

class User(db.Model):
    __tablename__ = 'users'

    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(50), unique=True, nullable=False)
    email = db.Column(db.String(100), unique=True, nullable=False)
    password = db.Column(db.String(100), nullable=False)
    # Relationships
    properties = db.relationship('Property', backref='owner', lazy=True)

登入後複製

此程式碼片段顯示了使用者模型的創建，其中包含使用者名稱、電子郵件和密碼等欄位。我還與 Property 模型建立了一對多關係，這對於將使用者（代理）連結到他們列出的屬性至關重要。

使用 React 應對前端挑戰

雖然由於我對 Python 的熟悉，後端大部分都很簡單，但前端卻提出了一個全新的挑戰。我選擇 React 是因為它基於組件的架構和充滿活力的生態系統。然而，學習 React 意味著深入研究 JavaScript——一種我不太熟悉的語言。

我首先為應用程式的不同部分建立可重複使用的元件，例如屬性清單頁面、使用者註冊頁面和應用程式管理頁面。例如，PropertyAgent 元件允許代理商建立、編輯和刪除房產清單：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './PropertyAgent.css';

const PropertiesAgent = () => {
    const [properties, setProperties] = useState([]);
    const [newProperty, setNewProperty] = useState({ title: '', description: '', price: '', location: '', property_type: 'Apartment' });
    const [error, setError] = useState('');
    const [success, setSuccess] = useState('');

    useEffect(() => {
        fetchProperties();
    }, []);

    const fetchProperties = async () => {
        try {
            const response = await axios.get('/properties', {
                headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
            });
            setProperties(response.data || []);
        } catch (error) {
            setError('Error fetching properties');
        }
    };

    const handleCreateProperty = async (event) => {
        event.preventDefault();
        try {
            await axios.post('/properties', newProperty, {
                headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
            });
            setSuccess('Property created successfully!');
            fetchProperties();
        } catch (error) {
            setError('Error creating property');
        }
    };

    return (
        <div>
            {/* JSX for rendering the properties and the form to create a new property */}
        </div>
    );
};

export default PropertiesAgent;

登入後複製

此程式碼片段說明如何使用 React hooks（useState 和 useEffect）來管理狀態和處理副作用，例如從後端 API 取得資料。

有用的技術面：了解 JavaScript 的非同步特性

我在使用 React 和 JavaScript 時學到的最重要的方面之一是如何處理非同步操作。 JavaScript 的非阻塞、非同步特性對於初學者來說可能有點令人畏懼，尤其是在處理 API 呼叫時。

例如，從後端取得資料需要使用async/await語法的非同步函數：

const fetchProperties = async () => {
    try {
        const response = await axios.get('/properties', {
            headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
        });
        setProperties(response.data || []);
    } catch (error) {
        setError('Error fetching properties');
    }
};

登入後複製

與使用 Promise 相比，使用 async/await 讓程式碼更具可讀性且更易於除錯。它還確保在執行任何依賴該數據的操作之前獲取數據，這對於維持無縫的用戶體驗至關重要。