<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<!-- import CSS -->
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<style>
form {
width: 600px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ccc;
display: none;
border-radius: 8px;
}
form div {
width: 600px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #ccc;
}
form div lable {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
display: inline-block;
}
form div input {
width: 200px;
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 搜索框-->
<el-input v-model="input" placeholder="通过id搜索"></el-input>
<el-button type="primary" @click="handleSearch">搜索</el-button>
<el-button type="primary" @click="addFn">添加</el-button>
<el-button type="primary" @click="showAll">显示全部</el-button>
<!--遍历-->
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="编号" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="age" label="年龄" width="180"></el-table-column>
<el-table-column prop="sex" label="性别"></el-table-column>
<el-table-column prop="class1" label="班级"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
>编辑
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: "#app",
data: function () {
return {
tableData: [],
input: "",
id: "",
name: "",
age: '',
sex: '',
class1: ''
};
},
methods: {
showAll() {
axios
.get(`http://localhost:9999/student/findAll`)
.then((res) => {
// console.log(res.data);
this.tableData = res.data;
})
.catch((error) => {
console.log(error);
});
},
async addFn() {
try {
const {value: id} = await this.$prompt('请输入 ID', '提示')
const {value: name} = await this.$prompt('请输入名称', '提示')
const {value: age} = await this.$prompt('请输入年龄', '提示')
const {value: sex} = await this.$prompt('请输入性别', '提示')
const {value: class1} = await this.$prompt('请输入班级', '提示')
// 将数据发送到后端
await axios.get(`http://localhost:9999/student/add?id=${id}&name=${name}&age=${age}&sex=${sex}&class1=${class1}`)
this.$message.success('保存成功')
this.showAll()
} catch (error) {
console.error(error)
this.$message.error('保存失败')
}
},
// 搜索方法，将搜索到的数据替换为原来的数据
handleSearch() {
axios
.get(`http://localhost:9999/student/findById/${this.input}`)
.then((res) => {
console.log(res.data);
this.$message({
message: "搜索成功",
type: "success",
});
// 将对象转化为数组
res.data = [res.data];
this.tableData = res.data;
})
.catch((error) => {
console.log(error);
});
},
handleEdit(index, rows) {
console.log(index, rows);
id = rows.id;
console.log(id);
this.$prompt("请输入姓名", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
inputErrorMessage: "请输入2-4个汉字",
})
.then(({value}) => {
const name = value;
this.$prompt("请输入年龄", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
inputErrorMessage: "请输入正整数",
})
.then(({value}) => {
const age = value;
this.$prompt("请输入性别", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
inputErrorMessage: "请输入2-4个汉字",
})
.then(({value}) => {
const sex = value;
this.$prompt("请输入班级", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
inputErrorMessage: "请输入2-4个汉字",
})
.then(({value}) => {
const class1 = value;
console.log(name, age, sex, class1);
this.$message({
type: "success",
message: "修改成功!",
});
axios.get(
`http://localhost:9999/student/update/${id}?&name=${name}&age=${age}&sex=${sex}&class1=${class1}`)
.then((res) => {
console.log(res.data);
// 页面刷新
window.location.reload();
})
.catch((error) => {
console.log(error);
});
})
.catch(() => {
this.$message({
type: "info",
message: "取消输入",
});
});
})
.catch(() => {
this.$message({
type: "info",
message: "取消输入",
});
});
})
.catch(() => {
this.$message({
type: "info",
message: "取消输入",
});
});
})
.catch(() => {
this.$message({
type: "info",
message: "取消输入",
});
});
},
// 删除
handleDelete(index, row) {
axios
.get(`http://localhost:9999/student/deleteById/${row.id}`)
.then((res) => {
this.$message({
message: "删除成功",
type: "success",
});
// 页面刷新
window.location.reload();
})
.catch((error) => {
console.log(error);
});
},
},
// 页面加载时调用
mounted() {
axios
.get("http://localhost:9999/student/findAll")
.then((res) => {
this.tableData = res.data;
})
.catch((error) => {
console.log(error);
});
}
,
})
;
</script>
</html>
基于上篇的后端接口，开发前端接口调用
于 2023-04-13 14:09:25 首次发布
5194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
