Ⅰ、项目准备与解题思路:
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 值出现);
其二、哪里有不对或不合适的地方,还请大佬们多多指点和交流!