写出根据学号,姓名使用vue实现按钮查询功能的前端代码,并且使用java语言写出后端代码
时间: 2024-02-09 10:12:08 浏览: 34
前端代码:
```html
<template>
<div>
<input v-model="queryName" placeholder="姓名">
<input v-model="queryId" placeholder="学号">
<button @click="query">查询</button>
<div>{{result}}</div>
</div>
</template>
<script>
export default {
data() {
return {
queryName: '',
queryId: '',
result: ''
}
},
methods: {
async query() {
const response = await fetch(`/api/query?name=${this.queryName}&id=${this.queryId}`)
const data = await response.json()
this.result = data.result
}
}
}
</script>
```
后端代码:
```java
import java.util.HashMap;
import java.util.Map;
import static spark.Spark.get;
import static spark.Spark.port;
public class Main {
public static void main(String[] args) {
port(8080);
Map<String, String> studentMap = new HashMap<>();
studentMap.put("20210001", "张三");
studentMap.put("20210002", "李四");
get("/api/query", (req, res) -> {
String name = req.queryParams("name");
String id = req.queryParams("id");
String result = "未找到该学生";
if (studentMap.containsKey(id) && studentMap.get(id).equals(name)) {
result = "姓名:" + name + ",学号:" + id;
}
Map<String, String> resultMap = new HashMap<>();
resultMap.put("result", result);
return resultMap;
}, JsonUtil.json());
}
}
```
请注意,这只是一份简单的样例代码,实际项目中需要根据具体需求进行修改和完善。