学生信息管理系统源码 前后端分离
时间: 2023-06-11 20:06:56 浏览: 64
这是一个比较大的课题,需要涉及到前端、后端、数据库等多个领域。下面给出一个简单的前后端分离的学生信息管理系统的源码示例,供你参考。
前端代码:
```
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生信息管理系统</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>学生信息管理系统</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr v-for="(student, index) in students" :key="index">
<td>{{ student.id }}</td>
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
<td>{{ student.gender }}</td>
</tr>
</tbody>
</table>
</div>
<script src="js/app.js"></script>
</body>
</html>
// app.js
var app = new Vue({
el: '#app',
data: {
students: []
},
mounted: function() {
axios.get('/api/students').then(response => {
this.students = response.data;
});
}
});
```
后端代码:
```
// server.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
const students = [
{ id: '001', name: '张三', age: 18, gender: '男' },
{ id: '002', name: '李四', age: 19, gender: '女' },
{ id: '003', name: '王五', age: 20, gender: '男' }
];
app.get('/api/students', (req, res) => {
res.send(students);
});
const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on port ${port}...`));
```
前端代码使用了Vue.js框架和Axios库,从后端API获取学生信息并呈现在页面上。后端代码使用了Express框架和BodyParser库,提供了获取学生信息的API接口。前后端通过API接口进行数据交互,实现了前后端分离。需要注意的是,这里的后端代码仅仅是一个简单的示例,实际项目中需要更加完整和健壮的后端实现。