用 Vue 实现学生信息管理系统的增删改查操作，模拟数据库操作(但并没有连接数据库)
Posted 狮子座的男孩
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用 Vue 实现学生信息管理系统的增删改查操作，模拟数据库操作(但并没有连接数据库)相关的知识，希望对你有一定的参考价值。
Ⅰ、项目准备与解题思路：
1、项目准备：
其一、要有写 html + CSS + JS 的软件； (如：VSCode 工具)；
其二、要提前下载好 Vue 环境，因为在项目中会引用 'vue.js' ;
2、解题思路：
其一、展示一个界面来把学生的信息展示出来(比如说：学生的基本信息等)；
其二、做学生数据信息的增删改查的操作；
Ⅱ、项目总代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.stuTab,
.addStu
margin: auto;
width: 735px;
border-collapse: collapse;
.addStu
background-color: orange;
.stuTab th,
.stuTab td
border: 1px solid orange;
padding: 10px;
height: 35px;
line-height: 35px;
text-align: center;
.stuTab th
background-color: orange;
</style>
</head>
<body>
<div id="app">
<div class="addStu">
<label>编号：<input type="text" v-model="id" :disabled="flag"></label>
<label>姓名：<input type="text" v-model="name"></label>
<label>性别：<input type="text" v-model="sex"></label>
<button @click="handleAddStudent">提交</button>
</div>
<table class="stuTab">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr :key='stu.id' v-for="stu in students">
<td>stu.id</td>
<td>stu.name</td>
<td>stu.sex</td>
<td>
<a href="" @click.prevent='toEdit(stu.id)'>修改</a>
<span>|</span>
<a href="" @click.prevent='removeStudent(stu.id)'>删除</a>
</td>
</tr>
</table>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue(
el: '#app',
data()
return
flag: false,
students: [
id: 1,
name: 'zhangsan',
sex: '男'
,
id: 2,
name: 'lily',
sex: '女'
,
id: 3,
name: 'Tom',
sex: '男'
,
id: 4,
name: 'lucy',
sex: '女'
],
id: '',
name: '',
sex: ''
,
methods:
handleAddStudent()
if (this.flag)
this.students.some(item =>
if(item.id === this.id)
item.name = this.name;
item.sex = this.sex;
return true;
);
this.flag = false;
else
let stu =
id: this.id,
name: this.name,
sex: this.sex
;
this.students.push(stu);
this.id = '';
this.name = '';
this.sex = '';
,
toEdit(id)
this.flag = true;
let student = this.students.filter(stu =>
return stu.id == id;
);
this.id = student[0].id;
this.name = student[0].name;
this.sex = student[0].sex;
,
removeStudent(id)
this.students = this.students.filter(stu => stu.id != id);
);
</script>
</body>
</html>
Ⅲ、实现代码过程与页面显示：
1、实现学生基本信息的展示页面：
A、代码为： (此时主要是：HTML + CSS)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.stuTab,
.addStu
margin: auto;
width: 735px;
border-collapse: collapse;
.addStu
background-color: orange;
.stuTab th,
.stuTab td
border: 1px solid orange;
padding: 10px;
height: 35px;
line-height: 35px;
text-align: center;
.stuTab th
background-color: orange;
</style>
</head>
<body>
<div id="app">
<div class="addStu">
<label>编号：<input type="text" v-model="id" :disabled="flag"></label>
//<!-- 在 flag 为 true 的时候，id 的值是不可编辑的； (即：此时的修改是不能改动 id 的值的) -->
<label>姓名：<input type="text" v-model="name"></label>
<label>性别：<input type="text" v-model="sex"></label>
<button @click="handleAddStudent">提交</button>
// 此操作是：待后面增加响应的 handleAddStudent() 触发函数；
</div>
<table class="stuTab">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr :key='stu.id' v-for="stu in students">
// 该操作是：循环并显示在 data 中的 students 数据信息；
<td>stu.id</td>
<td>stu.name</td>
<td>stu.sex</td>
<td>
<a href="" @click.prevent='toEdit(stu.id)'>修改</a>
// 此操作是：待后面增加响应的 toEdit() 触发函数；
// 而此时的 'prevent' 是为了阻止超链接的默认自动跳转行为；
<span>|</span>
<a href="" @click.prevent='removeStudent(stu.id)'>删除</a>
// 此操作是：待后面增加响应的 removeStudent() 触发函数；
</td>
</tr>
</table>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue(
el: '#app',
data()
return
flag: false, // 该 flag 值可以用于此后是修改数据信息还是添加数据信息的判断；
students: [
id: 1,
name: 'zhangsan',
sex: '男'
,
id: 2,
name: 'lily',
sex: '女'
,
id: 3,
name: 'Tom',
sex: '男'
,
id: 4,
name: 'lucy',
sex: '女'
],
id: '',
name: '',
sex: ''
);
</script>
</body>
</html>
B、页面显示为：
// 但此时的 提交、修改和删除按钮是没有响应功能的，而只是页面展示；
2、实现学生基本信息的添加新学生信息的功能：
A、代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.stuTab,
.addStu
margin: auto;
width: 735px;
border-collapse: collapse;
.addStu
background-color: orange;
.stuTab th,
.stuTab td
border: 1px solid orange;
padding: 10px;
height: 35px;
line-height: 35px;
text-align: center;
.stuTab th
background-color: orange;
</style>
</head>
<body>
<div id="app">
<div class="addStu">
<label>编号：<input type="text" v-model="id" :disabled="flag"></label>
<label>姓名：<input type="text" v-model="name"></label>
<label>性别：<input type="text" v-model="sex"></label>
<button @click="handleAddStudent">提交</button>
</div>
<table class="stuTab">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr :key='stu.id' v-for="stu in students">
<td>stu.id</td>
<td>stu.name</td>
<td>stu.sex</td>
<td>
<a href="" @click.prevent='toEdit(stu.id)'>修改</a>
<span>|</span>
<a href="" @click.prevent='removeStudent(stu.id)'>删除</a>
</td>
</tr>
</table>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue(
el: '#app',
data()
return
flag: false,
students: [
id: 1,
name: 'zhangsan',
sex: '男'
,
id: 2,
name: 'lily',
sex: '女'
,
id: 3,
name: 'Tom',
sex: '男'
,
id: 4,
name: 'lucy',
sex: '女'
],
id: '',
name: '',
sex: ''
,
methods:
handleAddStudent()
//处理增加学生的函数(方法)；
if (this.flag)
// 考虑到：在添加学生信息时，可能会存在的 '编号 id' 发生冲突，因此用 flag 作为标记来进行区分添加新学生信息的操作和修改学生信息的操作；
// 此时的 flag 的值为：true，那么就是在进行修改操作：此时不能修改 id 值，只能修改其他信息，并将原有的信息等覆盖(更新)；
// 若此时的 flag 的值为：false，那么就是在进行添加操作：此时可以添加新的 id 值和其他的信息；
this.students.some(item => // 此时是修改学生信息的操作；
// some 操作是：找到一个符合 'item.id' 的值就结束并返回相关的值；
if(item.id === this.id)
item.name = this.name;
item.sex = this.sex;
return true;
);
this.flag = false; // 修改学生信息操作结束后，再将 flag 值修改为：false，那么此后再操作时仍旧认为其是添加学生信息的操作；
else // 此时是添加学生信息的操作；
let stu =
id: this.id,
name: this.name,
sex: this.sex
;
this.students.push(stu); // 将新添加的学生信息再放在 students 数组中，表示：已成功添加新学生信息并在重新循环在页面展示；
// 下面的操作为：清空表单元素(即：便于下次再添加新的学生信息，或再修改学生的相关信息；)
this.id = '';
this.name = '';
this.sex vue实现数据的增删改查