• 日期: 2026-05-09
  • 标签: 常规

学生信息查询系统 - 使用 HTML、CSS、JS、Vue、Gin 和 Gorm 构建

这是一个使用 HTML、CSS、JavaScript、Vue.js、Gin 和 Gorm 构建的学生信息查询系统，提供搜索学生信息、查看详情、修改信息等功能，并实现数据同步到 MySQL 数据库。

项目结构：

  • index.html: 首页，包含一个搜索栏，输入学号后自动查询数据库并跳转至信息页
  • infor.html: 信息页，显示学生详细信息，并提供修改功能
  • main.go: Gin 框架的服务器程序，负责处理 HTTP 请求，与 MySQL 数据库进行交互

功能描述：

  1. 首页 (index.html):

    • 包含一个搜索栏，用户输入学号进行查询
    • 查询完成后，根据数据库结果进行以下操作：
      • 若存在对应学号的学生信息，则跳转至信息页 (infor.html) 并展示相关信息
      • 若不存在，则在数据库中添加此人，其余信息为空，并跳转至信息页 (infor.html) 展示相关信息

  2. 信息页 (infor.html):

    • 展示学生姓名、学号、专业、笔试得分、个人简介和印象
    • 姓名、专业、个人简介占左半边屏幕，学号、笔试得分、印象占右半屏幕
    • 包含一个“OK”按钮，用于提交修改后的信息
    • 点击“OK”按钮后，将修改后的信息同步更新至 MySQL 数据库

技术栈：

  • 前端： HTML、CSS、JavaScript、Vue.js
  • 后端： Go、Gin
  • 数据库： MySQL、Gorm

代码示例：

index.html

<!DOCTYPE html>
<html>
<head>
  <title>学生信息查询</title>
  <style>
    .container {
      width: 50%;
      margin: 0 auto;
      padding: 20px;
    }
    .form-group {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>信息查询</h1>
    <form id="searchForm">
      <div class="form-group">
        <label for="studentId">学号:</label>
        <input type="text" id="studentId" name="studentId">
      </div>
      <button type="submit">查询</button>
    </form>
  </div>

  <script>
    document.getElementById('searchForm').addEventListener('submit', function(event) {
      event.preventDefault();
      var studentId = document.getElementById('studentId').value;
      fetch('/search', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ studentId: studentId })
      })
      .then(function(response) {
        if (response.ok) {
          window.location.href = '/infor';
        } else {
          alert('学号不存在，将为您创建新的记录');
          fetch('/create', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({ studentId: studentId })
          })
          .then(function(response) {
            if (response.ok) {
              window.location.href = '/infor';
            } else {
              alert('创建记录失败');
            }
          });
        }
      });
    });
  </script>
</body>
</html>

infor.html

<!DOCTYPE html>
<html>
<head>
  <title>学生信息</title>
  <style>
    .container {
      width: 50%;
      margin: 0 auto;
      padding: 20px;
    }
    .form-group {
      margin-bottom: 10px;
    }
    .half {
      width: 50%;
      float: left;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>学生信息</h1>
    <form id="infoForm">
      <div class="form-group">
        <div class="half">
          <label for="name">姓名:</label>
          <input type="text" id="name" name="name">
        </div>
        <div class="half">
          <label for="major">专业:</label>
          <input type="text" id="major" name="major">
        </div>
      </div>
      <div class="form-group">
        <div class="half">
          <label for="introduction">个人简介:</label>
          <textarea id="introduction" name="introduction"></textarea>
        </div>
        <div class="half">
          <label for="score">笔试得分:</label>
          <input type="text" id="score" name="score">
        </div>
      </div>
      <div class="form-group">
        <label for="impression">印象:</label>
        <textarea id="impression" name="impression"></textarea>
      </div>
      <button type="submit">OK</button>
    </form>
  </div>

  <script>
    document.getElementById('infoForm').addEventListener('submit', function(event) {
      event.preventDefault();
      var name = document.getElementById('name').value;
      var major = document.getElementById('major').value;
      var introduction = document.getElementById('introduction').value;
      var score = document.getElementById('score').value;
      var impression = document.getElementById('impression').value;
      fetch('/update', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ name: name, major: major, introduction: introduction, score: score, impression: impression })
      })
      .then(function(response) {
        if (response.ok) {
          alert('信息更新成功');
        } else {
          alert('信息更新失败');
        }
      });
    });
  </script>
</body>
</html>

main.go

package main

import (
	"database/sql"
	"net/http"

	"github.com/gin-gonic/gin"
	_ "github.com/go-sql-driver/mysql"
)

type Student struct {
	Name         string `json:"name"`
	StudentID    string `json:"studentId"`
	Major        string `json:"major"`
	Score        string `json:"score"`
	Introduction string `json:"introduction"`
	Impression   string `json:"impression"`
}

func main() {
	r := gin.Default()

	// 设置静态文件目录
	r.Static("/static", "./static")

	// 连接MySQL数据库
	db, err := sql.Open("mysql", "username:password@tcp(127.0.0.1:3306)/database")
	if err != nil {
		panic("无法连接到数据库")
	}
	defer db.Close()

	// 首页路由
	r.GET("/index", func(c *gin.Context) {
		c.HTML(http.StatusOK, "index.html", gin.H{})
	})

	// 搜索学生信息路由
	r.POST("/search", func(c *gin.Context) {
		var student Student
		if err := c.ShouldBindJSON(&student); err != nil {
			c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
			return
		}

		// 在数据库中搜索学生信息
		// 如果学生信息存在，返回相关信息
		// 如果学生信息不存在，返回404
		// 这里省略数据库查询的具体实现
		// ...

		c.JSON(http.StatusOK, gin.H{})
	})

	// 创建学生信息路由
	r.POST("/create", func(c *gin.Context) {
		var student Student
		if err := c.ShouldBindJSON(&student); err != nil {
			c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
			return
		}

		// 在数据库中创建学生信息
		// 这里省略数据库插入的具体实现
		// ...

		c.JSON(http.StatusOK, gin.H{})
	})

	// 更新学生信息路由
	r.POST("/update", func(c *gin.Context) {
		var student Student
		if err := c.ShouldBindJSON(&student); err != nil {
			c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
			return
		}

		// 更新数据库中学生的信息
		// 这里省略数据库更新的具体实现
		// ...

		c.JSON(http.StatusOK, gin.H{})
	})

	// 信息页路由
	r.GET("/infor", func(c *gin.Context) {
		c.HTML(http.StatusOK, "infor.html", gin.H{})
	})

	r.Run(":8080")
}

注意：

  • 代码示例中省略了具体的数据库操作实现，需要根据您的实际需求进行编写
  • 请根据您的环境修改 main.go 中的数据库连接信息
  • 确保您已经安装了所需的依赖库，例如 Gin 和 Gorm
  • 此代码仅供参考，您可能需要根据您的具体需求进行修改和调整
学生信息查询系统 - 使用 HTML、CSS、JS、Vue、Gin 和 Gorm 构建

原文地址: https://www.cveoy.top/t/topic/chED 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录