1. 后端代码(NestJS + GraphQL)
首先,您需要创建一个NestJS项目,并安装必要的依赖项。
```bash
$ nest new education-platform
```
然后,创建一个用于处理学生信息的GraphQL解析器(StudentResolver)。
```typescript
import { Resolver, Query, Mutation, Args } from '@nestjs/graphql';
import { StudentService } from './student.service';
import { Student } from './student.entity';
import { CreateStudentInput } from './create-student.input';
@Resolver('Student')
export class StudentResolver {
constructor(private readonly studentService: StudentService) {}
@Query('students')
async getStudents(): Promise<Student[]> {
return this.studentService.findAll();
}
@Mutation('createStudent')
async createStudent(
@Args('input') createStudentInput: CreateStudentInput,
): Promise<Student> {
return this.studentService.create(createStudentInput);
}
}
```
接下来,创建一个用于定义学生实体的类(Student)。
```typescript
import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';
@Entity()
export class Student {
@PrimaryGeneratedColumn()
id: number;
@Column()
firstName: string;
@Column()
lastName: string;
}
```
最后,在应用模块中添加GraphQL模块和TypeORM模块。
```typescript
import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { TypeOrmModule } from '@nestjs/typeorm';
import { StudentModule } from './student/student.module';
@Module({
imports: [
GraphQLModule.forRoot({
autoSchemaFile: 'schema.gql',
}),
TypeOrmModule.forRoot({
type: 'sqlite',
database: 'db.sqlite',
entities: [__dirname + '/**/*.entity{.ts,.js}'],
synchronize: true,
}),
StudentModule,
],
})
export class AppModule {}
```
2. 前端代码(React + TypeScript)
首先,您需要创建一个React项目,并安装必要的依赖项。
```bash
$ npx create-react-app education-platform
$ cd education-platform
```
然后,创建一个用于显示学生信息的组件(StudentList)。
```tsx
import React, { useEffect, useState } from 'react';
type Student = {
id: number;
firstName: string;
lastName: string;
};
const StudentList: React.FC = () => {
const [students, setStudents] = useState<Student[]>([]);
useEffect(() => {
fetch('/graphql', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
query: `
{
students {
id
firstName
lastName
}
}
`,
}),
})
.then((response) => response.json())
.then((data) => setStudents(data.data.students));
}, []);
return (
<div>
<h1>Student List</h1>
{students.map((student) => (
<div key={student.id}>
<h3>{student.firstName} {student.lastName}</h3>
</div>
))}
</div>
);
};
export default StudentList;
```
最后,在入口组件(App)中使用StudentList组件。
```tsx
import React from 'react';
import StudentList from './components/StudentList';
const App: React.FC = () => {
return (
<div>
<h1>Education Platform</h1>
<StudentList />
</div>
);
};
export default App;
```
以上代码示例展示了如何使用React、TypeScript、NestJS和GraphQL进行全栈开发。您可以根据实际需求进行进一步的开发和修改。要完成整个在线教育平台的开发,涉及到更多功能和模块,例如课程管理、用户认证等。这需要更多的开发工作和配置。