使用Vue脚手架实现简单的学生管理系统的增删改查
时间: 2023-12-30 20:04:16 浏览: 31
好的,我可以为您解答这个问题。
首先,您需要安装Vue CLI,可以使用以下命令:
```
npm install -g @vue/cli
```
接着,使用以下命令创建一个新的Vue项目:
```
vue create student-management-system
```
完成后,进入项目目录并启动开发服务器:
```
cd student-management-system
npm run serve
```
现在,您可以开始编写代码了。以下是一个简单的学生管理系统的增删改查的实现,可供参考:
首先,在src目录下创建一个名为"components"的文件夹,用于存放Vue组件。
在components文件夹下创建一个名为"StudentList.vue"的文件,用于展示学生列表:
```html
<template>
<div>
<h2>学生列表</h2>
<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.name }}</td>
<td>{{ student.age }}</td>
<td>{{ student.gender }}</td>
<td>
<button @click="editStudent(student)">编辑</button>
<button @click="deleteStudent(student)">删除</button>
</td>
</tr>
</tbody>
</table>
<button @click="addStudent">添加学生</button>
<div v-if="showEditModal">
<h3>编辑学生信息</h3>
<form>
<div>
<label for="name">姓名:</label>
<input type="text" id="name" v-model="editStudentData.name">
</div>
<div>
<label for="age">年龄:</label>
<input type="number" id="age" v-model="editStudentData.age">
</div>
<div>
<label for="gender">性别:</label>
<select id="gender" v-model="editStudentData.gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<button type="button" @click="saveStudent">保存</button>
<button type="button" @click="closeEditModal">取消</button>
</form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
students: [
{ name: "张三", age: 18, gender: "男" },
{ name: "李四", age: 19, gender: "女" },
{ name: "王五", age: 20, gender: "男" },
],
showEditModal: false,
editStudentData: {},
};
},
methods: {
addStudent() {
this.showEditModal = true;
this.editStudentData = {};
},
editStudent(student) {
this.showEditModal = true;
this.editStudentData = { ...student };
},
deleteStudent(student) {
this.students = this.students.filter((s) => s !== student);
},
saveStudent() {
if (this.editStudentData.name && this.editStudentData.age && this.editStudentData.gender) {
if (this.students.includes(this.editStudentData)) {
this.students = this.students.map((s) => (s === this.editStudentData ? { ...this.editStudentData } : s));
} else {
this.students.push({ ...this.editStudentData });
}
this.showEditModal = false;
this.editStudentData = {};
}
},
closeEditModal() {
this.showEditModal = false;
this.editStudentData = {};
},
},
};
</script>
```
在App.vue文件中引入StudentList组件:
```html
<template>
<div id="app">
<StudentList />
</div>
</template>
<script>
import StudentList from "./components/StudentList.vue";
export default {
name: "App",
components: {
StudentList,
},
};
</script>
```
现在,您可以在浏览器中查看学生管理系统,并进行增删改查操作了。