用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框架）进行数据交互。

用MySQL+node+vue做一个学生信息管理系统：创建MySQL数据表、创建HTML用户列表页面

评论已关闭

推荐阅读