用 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 = '';
}
}
});
</script>
</body>
</html>
B、页面显示与操作为：
其一、在文本框中添加新的学生信息：
// 因为此时的 flag 默认值为：false，因此肯定是添加新学生信息的操作；
其二、添加操作后的页面显示结果为：
3、实现学生基本信息的修改学生信息的功能：
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) {
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; // 此时将 flag 调成 true,就表示是修改学生信息的操作；
let student = this.students.filter(stu => {// filter 操作：找到第一个满足条件的元素就终止过滤操作；
// 注意：此时的返回值 student 是一个对象；
return stu.id == id;
});
this.id = student[0].id; // 此时在文本框中显示的是：已经选中的学生信息；
this.name = student[0].name;
this.sex = student[0].sex;
}
}
});
</script>
</body>
</html>
B、页面显示与操作为：
其一、在点击编号为 3 后的修改操作后，页面显示结果如下：
其二、修改姓名为：tender，性别为：女，并提交后的页面显示为：
4、实现学生基本信息的删除学生信息的功能：
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) {
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);
// 该操作为：将不是学生 id 信息的值保留下来，并赋值给 students;
// 此时就达到了删除 id 学生信息的目的；
}
}
});
</script>
</body>
</html>
B、页面显示与操作为：
// 点击编号为 4 后的删除操作后，页面显示结果如下：
Ⅳ、小结：
其一、存在的问题：
A、在添加新学生信息时，没有考虑 id 与 students 中 id 相同的问题； (即：可能会导致有重复的 id 值出现)；
其二、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
二维码