用vue实现一个学生信息管理系统
时间: 2023-06-16 08:02:34 浏览: 322
好的,下面是一个简单的学生信息管理系统的实现步骤:
1. 创建一个Vue项目
首先,在命令行中输入以下命令创建一个新的Vue项目:
```
vue create student-management-system
```
2. 安装所需的依赖
在项目目录下运行以下命令安装所需的依赖:
```
npm install vue-router axios --save
```
3. 创建路由
在src目录下创建一个名为router.js的文件,并添加以下代码:
```javascript
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import Students from './views/Students.vue';
import AddStudent from './views/AddStudent.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/students',
name: 'students',
component: Students
},
{
path: '/add-student',
name: 'addStudent',
component: AddStudent
}
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});
export default router;
```
这里我们创建了三个路由,分别对应首页、学生列表页和添加学生页。
4. 创建组件
在src目录下创建一个名为views的文件夹,并在其中创建三个组件文件:Home.vue、Students.vue和AddStudent.vue。
Home.vue:
```vue
<template>
<div>
<h1>Welcome to Student Management System</h1>
</div>
</template>
<script>
export default {
name: 'home'
}
</script>
```
Students.vue:
```vue
<template>
<div>
<h1>Students</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="student in students" :key="student.id">
<td>{{ student.id }}</td>
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
<td>{{ student.gender }}</td>
<td>
<router-link :to="{ name: 'editStudent', params: { id: student.id }}">Edit</router-link>
<button @click="deleteStudent(student.id)">Delete</button>
</td>
</tr>
</tbody>
</table>
<router-link :to="{ name: 'addStudent' }">Add Student</router-link>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'students',
data() {
return {
students: []
}
},
methods: {
getStudents() {
axios.get('/api/students')
.then(response => {
this.students = response.data;
})
.catch(error => {
console.log(error);
});
},
deleteStudent(id) {
if (confirm('Are you sure you want to delete this student?')) {
axios.delete(`/api/students/${id}`)
.then(response => {
this.getStudents();
})
.catch(error => {
console.log(error);
});
}
}
},
mounted() {
this.getStudents();
}
}
</script>
```
AddStudent.vue:
```vue
<template>
<div>
<h1>Add Student</h1>
<form>
<div>
<label>Name:</label>
<input type="text" v-model="student.name">
</div>
<div>
<label>Age:</label>
<input type="number" v-model="student.age">
</div>
<div>
<label>Gender:</label>
<select v-model="student.gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div>
<button type="button" @click="addStudent">Add</button>
<router-link :to="{ name: 'students' }">Cancel</router-link>
</div>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'addStudent',
data() {
return {
student: {
name: '',
age: '',
gender: ''
}
}
},
methods: {
addStudent() {
axios.post('/api/students', this.student)
.then(response => {
this.$router.push({ name: 'students' });
})
.catch(error => {
console.log(error);
});
}
}
}
</script>
```
5. 创建API
我们需要在后端实现以下三个API:
- 获取学生列表
- 添加学生
- 删除学生
这里我们使用Node.js和Express来创建API。
首先,在项目根目录下创建一个名为server.js的文件,并添加以下代码:
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
const students = [
{
id: 1,
name: 'John',
age: 18,
gender: 'male'
},
{
id: 2,
name: 'Mary',
age: 20,
gender: 'female'
}
];
app.get('/api/students', (req, res) => {
res.json(students);
});
app.post('/api/students', (req, res) => {
const student = req.body;
student.id = students.length + 1;
students.push(student);
res.json(student);
});
app.delete('/api/students/:id', (req, res) => {
const id = parseInt(req.params.id);
const index = students.findIndex(student => student.id === id);
if (index !== -1) {
students.splice(index, 1);
}
res.json({ message: 'Student deleted' });
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});
```
这里我们在服务器端创建了一个名为students的数组,用于存储学生信息,并创建了三个API来处理获取学生列表、添加学生和删除学生的请求。
6. 运行项目
在命令行中进入项目目录,并运行以下命令来启动项目:
```
npm run serve
```
然后,在浏览器中访问http://localhost:8080/即可查看学生信息管理系统。
以上就是使用Vue实现一个学生信息管理系统的步骤。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)