使用express创建服务器 定义两个接口 "/updata” :添加学生成绩 请求方式: post 参数: username,course"/course”:查询成功 请求方式: get 参数: username, password 3.前端(通过ajax请求后端数据) 页面1:添加信息页面 输入账号和成绩,点击添加按钮,添加—个学生成绩 页面2: 输入账号和密码,点击查询,显示成绩
时间: 2023-12-10 07:42:53 浏览: 50
使用express搭建一个简单的查询服务器的方法
以下是基于Express创建服务器的代码示例:
```
// 引入Express框架
const express = require('express');
const app = express();
// 定义添加学生成绩接口
app.post('/update', (req, res) => {
const { username, course } = req.body;
// 将学生成绩添加到数据库中
// 返回添加结果
res.send('成绩添加成功');
});
// 定义查询学生成绩接口
app.get('/course', (req, res) => {
const { username, password } = req.query;
// 查询学生成绩
// 返回查询结果
res.send('查询结果');
});
// 启动服务器
app.listen(3000, () => console.log('服务器已启动,端口号:3000'));
```
前端页面1代码示例:
```
<form id="add-form">
<label for="username">账号:</label>
<input type="text" id="username" name="username"><br><br>
<label for="course">成绩:</label>
<input type="text" id="course" name="course"><br><br>
<button type="submit">添加</button>
</form>
<script>
const form = document.getElementById('add-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const formData = new FormData(form);
const response = await fetch('/update', {
method: 'POST',
body: formData
});
const result = await response.text();
alert(result);
});
</script>
```
前端页面2代码示例:
```
<form id="query-form">
<label for="username">账号:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<button type="submit">查询</button>
</form>
<script>
const form = document.getElementById('query-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const formData = new FormData(form);
const response = await fetch(`/course?${new URLSearchParams(formData).toString()}`);
const result = await response.text();
alert(result);
});
</script>
```
阅读全文