在library数据库中建一个student表,表字段有学号、姓名、所在学院,年龄、性别等字段。在表中输入若干数据,(如已有student表,则可不用建) (1) 新建一个vue页面,使用axios调用后端接口,查询student表并把所有学生信息显示在页面上 (2) 能按照学号删除学生信息 (3) 新建一个vue页面,输入学生信息,使用axios调用后端接口,能在student表中新增一条记录
时间: 2024-03-24 18:36:04 浏览: 103
好的,以下是具体步骤:
1. 在 MySQL 数据库中创建 `library` 数据库,并在该数据库中创建 `student` 表:
```sql
CREATE DATABASE library;
USE library;
CREATE TABLE student (
id INT(11) NOT NULL AUTO_INCREMENT,
student_no VARCHAR(20) NOT NULL,
name VARCHAR(50) NOT NULL,
college VARCHAR(50) NOT NULL,
age INT(11) NOT NULL,
gender VARCHAR(10) NOT NULL,
PRIMARY KEY (id)
);
INSERT INTO student (student_no, name, college, age, gender) VALUES
('20210001', '张三', '计算机科学与技术', 20, '男'),
('20210002', '李四', '通信工程', 21, '女'),
('20210003', '王五', '软件工程', 19, '男'),
('20210004', '赵六', '电子信息工程', 22, '女');
```
2. 创建一个后端 API,接收前端请求并操作数据库,以下是使用 Node.js 和 Express 框架的示例代码:
```javascript
const express = require('express');
const mysql = require('mysql');
const app = express();
// 创建 MySQL 连接池
const pool = mysql.createPool({
connectionLimit: 10,
host: 'localhost',
user: 'yourusername',
password: 'yourpassword',
database: 'library'
});
// 查询所有学生信息
app.get('/api/students', (req, res) => {
pool.query('SELECT * FROM student', (err, results) => {
if (err) {
console.error(err);
res.status(500).json({ error: '服务器内部错误' });
} else {
res.json(results);
}
});
});
// 根据学号删除学生信息
app.delete('/api/student/:studentNo', (req, res) => {
const studentNo = req.params.studentNo;
pool.query('DELETE FROM student WHERE student_no = ?', studentNo, (err, results) => {
if (err) {
console.error(err);
res.status(500).json({ error: '服务器内部错误' });
} else if (results.affectedRows === 0) {
res.status(404).json({ error: '找不到该学生信息' });
} else {
res.json({ message: '删除成功' });
}
});
});
// 新增学生信息
app.post('/api/student', (req, res) => {
const data = req.body;
pool.query('INSERT INTO student SET ?', data, (err, results) => {
if (err) {
console.error(err);
res.status(500).json({ error: '服务器内部错误' });
} else {
res.json({ message: '添加成功', id: results.insertId });
}
});
});
// 监听端口
app.listen(3000, () => {
console.log('服务已启动');
});
```
3. 创建一个 Vue 页面,使用 Axios 调用后端 API,以下是示例代码:
```html
<template>
<div>
<h2>学生信息列表</h2>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>所在学院</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="student in students" :key="student.id">
<td>{{ student.student_no }}</td>
<td>{{ student.name }}</td>
<td>{{ student.college }}</td>
<td>{{ student.age }}</td>
<td>{{ student.gender }}</td>
<td>
<button @click="deleteStudent(student.student_no)">删除</button>
</td>
</tr>
</tbody>
</table>
<h2>添加学生信息</h2>
<form @submit.prevent="addStudent">
<div>
<label>学号:</label>
<input type="text" v-model="newStudent.student_no">
</div>
<div>
<label>姓名:</label>
<input type="text" v-model="newStudent.name">
</div>
<div>
<label>所在学院:</label>
<input type="text" v-model="newStudent.college">
</div>
<div>
<label>年龄:</label>
<input type="number" v-model.number="newStudent.age">
</div>
<div>
<label>性别:</label>
<select v-model="newStudent.gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<button type="submit">添加</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
students: [],
newStudent: { student_no: '', name: '', college: '', age: 0, gender: '男' }
};
},
mounted() {
this.getStudents();
},
methods: {
getStudents() {
axios.get('/api/students').then(response => {
this.students = response.data;
}).catch(error => {
console.error(error);
});
},
deleteStudent(studentNo) {
axios.delete(`/api/student/${studentNo}`).then(response => {
this.getStudents();
}).catch(error => {
console.error(error);
});
},
addStudent() {
axios.post('/api/student', this.newStudent).then(response => {
this.newStudent = { student_no: '', name: '', college: '', age: 0, gender: '男' };
this.getStudents();
}).catch(error => {
console.error(error);
});
}
}
};
</script>
```
在以上示例中,需要将 `yourusername` 和 `yourpassword` 分别替换为你自己的 MySQL 用户名和密码,然后可以通过 `npm install express mysql axios vue` 安装所需的依赖,最后通过 `npm run dev` 启动 Vue 应用程序。
这样,当访问 Vue 应用程序时,会显示所有学生信息的列表,并提供删除和添加学生信息的功能。
阅读全文