校友会管理平台的免费开发实践

2025-12-19 23:02

小明：最近我听说一个校友会想做一个管理平台，但预算有限，他们想找一些免费的技术方案来实现。

小红：对啊，现在有很多开源工具和框架可以用来做这种项目。比如用Python的Django或者Flask来开发后端，前端可以用React或Vue。

小明：那数据库方面呢？有没有什么推荐的免费数据库？

小红：PostgreSQL和MySQL都是不错的选择，而且它们都有免费版本。另外，MongoDB也是一个选择，适合需要灵活数据结构的场景。

小明：听起来不错。那具体的代码怎么写呢？有没有例子可以参考？

小红：当然有。我们可以从一个简单的校友信息管理开始。比如创建一个用户注册页面，然后展示所有校友的信息。

小明：那我们先从后端开始吧。用Django的话，应该怎么做？

小红：好的，首先我们需要安装Django。可以通过pip来安装：

pip install django

然后创建一个新的项目：

django-admin startproject alumni_project

接着进入项目目录并创建一个应用：

cd alumni_project
python manage.py startapp alumni

然后在settings.py中添加这个应用到INSTALLED_APPS列表里。

小明：接下来是不是要定义模型？比如校友的信息。

小红：没错。在alumni/models.py里定义一个Alumni模型，包含姓名、邮箱、毕业年份等字段。

from django.db import models

class Alumni(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField(unique=True)
    graduation_year = models.IntegerField()
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.name

小明：然后还需要迁移数据库对吧？

小红：是的。运行以下命令来生成迁移文件并应用它：

python manage.py makemigrations
python manage.py migrate

小明：接下来是前端部分，如果用React的话，应该怎么搭建？

小红：我们可以用React的脚手架工具create-react-app来快速搭建前端项目。安装方式如下：

npx create-react-app alumni-frontend

然后进入项目目录，启动开发服务器：

cd alumni-frontend
npm start

小明：那前端怎么和后端交互呢？比如获取校友列表。

小红：我们可以使用Django REST Framework来构建API接口。首先安装它：

pip install djangorestframework

然后在settings.py中添加rest_framework到INSTALLED_APPS。

接下来，在alumni/views.py中创建一个视图，返回校友列表：

from rest_framework import generics
from .models import Alumni
from .serializers import AlumniSerializer

class AlumniList(generics.ListCreateAPIView):
    queryset = Alumni.objects.all()
    serializer_class = AlumniSerializer

校友会

小明：那序列化器怎么写？

小红：序列化器用于将模型对象转换为JSON格式。在alumni/serializers.py中定义：

from rest_framework import serializers
from .models import Alumni

class AlumniSerializer(serializers.ModelSerializer):
    class Meta:
        model = Alumni
        fields = ['id', 'name', 'email', 'graduation_year', 'created_at']

小明：然后配置URL路由，让前端可以访问API。

小红：对，我们在alumni/urls.py中设置路由，并将其包含到主项目的urls.py中。

from django.urls import path
from .views import AlumniList

urlpatterns = [
    path('alumni/', AlumniList.as_view(), name='alumni-list'),
]

然后在alumni_project/urls.py中引入：

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('alumni.urls')),
]

小明：这样前端就可以通过http://localhost:8000/api/alumni来获取数据了。

小红：没错。前端可以用fetch或者axios来请求这些数据，并展示出来。

小明：那前端怎么显示这些数据呢？比如用表格展示。

小红：可以在React组件中使用map方法遍历数据，并渲染成表格。

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function AlumniList() {
    const [alumni, setAlumni] = useState([]);

    useEffect(() => {
        axios.get('http://localhost:8000/api/alumni/')
            .then(response => setAlumni(response.data))
            .catch(error => console.error(error));
    }, []);

    return (
        
                {alumni.map(al => (
                    
                ))}
            
            
                
                    姓名
                    邮箱
                    毕业年份
                
            
            
                        {al.name}
                        {al.email}
                        {al.graduation_year}
                    
        
    );
}

export default AlumniList;