在library数据库中建一个student表,表字段有学号、姓名、所在学院,年龄、性别等字段。在表中输入若干数据,(如已有student表,则可不用建) (1) 新建一个vue页面,使用axios调用后端接口,查询student表并把所有学生信息显示在页面上 (2) 新建一个vue页面,输入学生信息,使用axios调用后端接口,能在student表中新增一条记录
时间: 2024-03-24 14:36:18 浏览: 90
好的,我知道了,接下来我将回答你的问题:
对于你的第一个问题,我可以给出以下 SQL 语句来创建一个名为 student 的表,并插入一些数据:
```
CREATE TABLE student (
id INT PRIMARY KEY AUTO_INCREMENT,
student_number VARCHAR(20),
name VARCHAR(50),
college VARCHAR(50),
age INT,
gender VARCHAR(10)
);
INSERT INTO student (student_number, name, college, age, gender)
VALUES
('20210001', '张三', '计算机科学与技术学院', 20, '男'),
('20210002', '李四', '软件工程学院', 21, '女'),
('20210003', '王五', '信息管理学院', 19, '男'),
('20210004', '赵六', '电子工程学院', 22, '女');
```
对于你的第二个问题,我可以给出以下示例代码来实现在前端使用 axios 发送 POST 请求,将学生信息插入到 student 表中:
```vue
<template>
<div>
<h2>新增学生</h2>
<form @submit.prevent="addStudent">
<div>
<label for="student_number">学号:</label>
<input type="text" id="student_number" v-model="form.student_number" required>
</div>
<div>
<label for="name">姓名:</label>
<input type="text" id="name" v-model="form.name" required>
</div>
<div>
<label for="college">所在学院:</label>
<input type="text" id="college" v-model="form.college" required>
</div>
<div>
<label for="age">年龄:</label>
<input type="number" id="age" v-model.number="form.age" required>
</div>
<div>
<label for="gender">性别:</label>
<select id="gender" v-model="form.gender" required>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<button type="submit">提交</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
form: {
student_number: '',
name: '',
college: '',
age: 0,
gender: '男'
}
};
},
methods: {
async addStudent() {
try {
const response = await axios.post('/api/add-student', this.form);
console.log(response.data);
alert('新增成功!');
this.form = {
student_number: '',
name: '',
college: '',
age: 0,
gender: '男'
};
} catch (error) {
console.error(error);
alert('新增失败!');
}
}
}
};
</script>
```
在后端,你可以使用 Express 框架来接收请求,然后使用 MySQL 模块来操作数据库实现新增学生的功能。例如:
```javascript
const express = require('express');
const mysql = require('mysql');
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'yourpassword',
database: 'library'
});
app.post('/api/add-student', (req, res) => {
const { student_number, name, college, age, gender } = req.body;
const sql = 'INSERT INTO student (student_number, name, college, age, gender) VALUES (?, ?, ?, ?, ?)';
const values = [student_number, name, college, age, gender];
connection.query(sql, values, (error, results) => {
if (error) {
console.error(error);
res.status(500).json({ message: '新增失败' });
} else {
console.log(results);
res.json({ message: '新增成功' });
}
});
});
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});
```
希望这些代码能对你有所帮助。
阅读全文