用MySQL+node+vue做一个学生信息管理系统：创建MySQL数据表、创建HTML用户列表页面
-- 创建学生信息表
CREATE TABLE `student_info` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`phone` varchar(255) NOT NULL,
`gender` enum('male', 'female', 'other') NOT NULL,
`age` int(11) NOT NULL,
`city` varchar(255) NOT NULL,
`created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
<!-- 学生列表页面 (student-list.html) -->
<!DOCTYPE html>
<html>
<head>
<title>学生信息管理系统</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2 class="my-4">学生信息列表</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>性别</th>
<th>年龄</th>
<th>城市</th>
<th>创建时间</th>
</tr>
</thead>
<tbody>
<!-- 这里是学生信息列表的动态数据 -->
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>在这个示例中，我们创建了一个名为student_info的MySQL数据表，并定义了学生信息的字段。然后，我们创建了一个简单的HTML页面，用于显示学生信息列表，该列表是用Bootstrap框架制作的。这个HTML页面会被Vue.js或其他前端框架用来渲染学生信息，并与后端服务（使用Node.js和Express框架）进行数据交互。
评论已关闭