用 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 值出现)；

其二、哪里有不对或不合适的地方，还请大佬们多多指点和交流！