<h2>引言</h2>
校友信息管理系统是一个重要的工具，用于管理和维护校友的基本信息、活动参与情况等。本文将详细介绍如何创建这样一个系统。
<h2>数据库设计</h2>
使用MySQL作为数据库，首先定义数据表结构。以下为部分SQL代码：
<pre><code>
CREATE TABLE alumni (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) UNIQUE NOT NULL,
graduation_year YEAR NOT NULL,
phone_number VARCHAR(15)
);
</code></pre>
<h2>后端开发</h2>
使用Node.js和Express框架搭建后端服务。以下是获取所有校友信息的API示例：
<pre><code>
const express = require('express');
const mysql = require('mysql');
const app = express();
// 创建数据库连接
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'password',
database: 'alumni_system'
});
connection.connect();
app.get('/api/alumni', (req, res) => {
connection.query('SELECT * FROM alumni', (error, results) => {
if (error) throw error;
res.send(results);
});
});
app.listen(3000, () => console.log('Server running on port 3000'));
</code></pre>
<h2>前端界面</h2>
使用React框架来构建前端用户界面。以下为一个简单的组件代码示例，展示所有校友列表：
<pre><code>
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function AlumniList() {
const [alumni, setAlumni] = useState([]);
useEffect(() => {
axios.get('/api/alumni')
.then(response => {
setAlumni(response.data);
})
.catch(error => console.error('Error fetching data:', error));
}, []);
return (
<div>
<h1>Alumni List</h1>
<ul>
{alumni.map(alumni => (
<li key={alumni.id}>{alumni.name}, {alumni.email}, Graduated in {alumni.graduation_year}</li>
))}
</ul>
</div>
);
}
export default AlumniList;
</code></pre>