使用Visual Studio Code学生管理系统

使用Visual Studio Code（VS Code）开发学生管理系统是一个很好的项目，可以帮助你熟悉前端和后端开发技术。以下是一个简单的步骤指南，帮助你开始使用VS Code开发学生管理系统：

### 1. 环境准备
1. **安装Node.js**：确保你已经安装了Node.js。可以通过在终端中运行`node -v`和`npm -v`来检查是否安装成功。
2. **安装Visual Studio Code**：从[VS Code官网](https://code.visualstudio.com/)下载并安装。

### 2. 初始化项目
1. **创建项目文件夹**：在你的计算机上创建一个新的文件夹，例如`student-management-system`。
2. **初始化npm**：打开终端，导航到项目文件夹，然后运行`npm init -y`来初始化npm项目。

### 3. 安装必要的依赖
1. **安装Express**：运行`npm install express`来安装Express框架。
2. **安装其他依赖**：根据需要安装其他依赖，例如`body-parser`用于解析请求体，`mongoose`用于MongoDB操作。

npm install body-parser mongoose

### 4. 创建服务器
在项目文件夹中创建一个名为`server.js`的文件，并添加以下代码：

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

const app = express();

// Middleware
app.use(bodyParser.json());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/student-management', { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => console.log('MongoDB Connected'))
    .catch(err => console.log(err));

// Define Student Schema
const studentSchema = new mongoose.Schema({
    name: String,
    age: Number,
    email: String
});

const Student = mongoose.model('Student', studentSchema);

// Routes
app.get('/students', (req, res) => {
    Student.find()
        .then(students => res.json(students))
        .catch(err => res.status(500).json({ error: err.message }));
});

app.post('/students', (req, res) => {
    const newStudent = new Student(req.body);
    newStudent.save()
        .then(student => res.json(student))
        .catch(err => res.status(500).json({ error: err.message }));
});

app.listen(5000, () => {
    console.log('Server is running on port 5000');
});

### 5. 运行服务器
在终端中运行`node server.js`来启动服务器。打开浏览器，访问`http://localhost:5000/students`应该会看到空的JSON数组。

### 6. 前端开发
你可以使用任何前端框架（如React、Vue或Angular）来创建用户界面。以下是一个简单的React示例：

1. **安装Create React App**：

npx create-react-app client

2. **启动React应用**：

cd client
npm start

3. **修改App.js**：

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

function App() {
  const [students, setStudents] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/students')
      .then(response => setStudents(response.data))
      .catch(error => console.log(error));
  }, []);

  return (
    <div>
      <h1>Student Management System</h1>
      <ul>
        {students.map(student => (
          <li key={student._id}>{student.name} - {student.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

### 7. 总结
通过以上步骤，你可以创建一个基本的学生管理系统。你可以根据需要进一步扩展功能，例如添加学生、删除学生、更新学生信息等。