web

最新推荐文章于 2024-07-05 20:19:23 发布

原创最新推荐文章于 2024-07-05 20:19:23 发布 · 219 阅读

CC 4.0 BY-SA版权

本文介绍了一个基于EasyUI的学生信息查询系统的设计与实现过程。系统利用下拉列表选择学院和专业来查询对应学生信息，并能将查询结果展示在DataGrid中及导出至Excel。文章详细阐述了前端页面设计、Ajax交互流程、后端Servlet处理逻辑等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

题目

实现根据学院名称、专业名称两个条件查询学生信息,数据库及表结构自己定义和设计，学院名称和专业名称由数据库表维护（可直接通过数据库管理软件维护）。要求

（1）学院名称和专业名称由EasyUI的下拉列表组件实现；并且如果学院名称不为空，则专业名称的选项值为所选学院所包含的专业名称。

（2）可根据学院名称查询，也可以根据学院和专业名称查询，查询使用模糊查询；

 （3）将查询结果显示在EasyUI的DataGrid组件中，并提供将学生的信息导出到Excel文件中，Excel文件的模板样式自己定义；

（4）提交文档：包括相关的表结构说明、代码说明、实现效果的截图及Excel模板样式。

思路

html 下拉列表发生下拉列表值改变（onchange）事件时触发某传参函数，通过ajax传递参数给后台servlet，后台servlet以json数组形式请求数据库中的数据回传html。

数据库

表1 college
主要有 major(专业名称)，colle(学院名称)，clooegeid(id)等等属性

表二 stu
有sno,sname,major,sgrade(年级)等等属性

index.html

需要下载easyUi相关的js，以及导出excel的js插件

for_elements函数获取选中学院包含的专业
for_student()函数获取选中专业的学生列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--引入jquery的js，EasyUI的执行需要依赖于jQuery  -->

    <!--引入jquery的js，EasyUI的执行需要依赖于jQuery  -->
    <script type="text/javascript"
            src="js/jquery.min.js"></script>
    <!--easyUI的js主文件  -->
    <script type="text/javascript"
            src="js/jquery.easyui.min.js"></script>
    <!--国际化的js文件  -->
    <script type="text/javascript"
            src="js/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript"
            src="js2/export.js"></script>

    <!--引入easyUI的样式  -->
    <link rel="stylesheet" type="text/css"
          href="js/themes/icon.css" />
    <link rel="stylesheet" type="text/css"
          href="js/themes/default/easyui.css" />
    <script>

        function for_elements(y){
            $.ajax({
                //url : 'selectElements',
                url : '/webhomework_war_exploded/Servlet2',
                data : {
                    coll:y
                },
                dataType : 'text',
                success : function(s) {

                 //   datas=JSON.parse(datas);
             var   data1 = JSON.parse(s);


                    var optionstring = "";
                    for (var j = 0; j <data1.length; j++) {
                   // for (var j = 0; j < 2; j++) {
                       // optionstring += "<option value=\"" + datas[j].name + "\" >" + datas[j].name + "</option>";
                        optionstring += "<option value=\"" + data1[j].major + "\" >" + data1[j].major+ "</option>";
                    }

                    $("#ele").html("<option value=''>请选择专业</option> "+optionstring);

                }
            });

        }
        function test1(){
            var a1=$("#ele").val();

        }
        function for_student(){
            $.ajax({
                //url : 'selectElements',
                url : '/webhomework_war_exploded/Servlet3',
                data : {
                    major:$("#ele").val()
                },
                dataType : 'text',
                success : function(s) {

                    //   datas=JSON.parse(datas);
                    var   data1 = JSON.parse(s);
                   // alert(data1);

                    var optionstring = "";
                    for (var j = 0; j <data1.length; j++) {
                        // for (var j = 0; j < 2; j++) {
                        // optionstring += "<option value=\"" + datas[j].name + "\" >" + datas[j].name + "</option>";
                       // optionstring += "<option value=\"" + data1[j].major + "\" >" + data1[j].major+ "</option>";
                     //  alert("查询结果:学生姓名--"+data1[0].sname+"学号"+data1[0].sno);
                    }
                    //data_grid
                    $(function() {
                        $('#dg').datagrid({
                            url:'/webhomework_war_exploded/Servlet3?major='+$("#ele").val(),
                            columns: [[
                                {field: 'sno', title: '学号', width: 100},
                                {field: 'sname', title: '姓名', width: 100},
                                {field: 'major', title: '专业', width: 100, align: 'right'}
                            ]]
                        });

                    })

                   // $("#ele").html("<option value=''>请选择专业</option> "+optionstring);

                }
            });
            //data_grid



        }
//excel
        function exportExcel(){
            $('#dg').datagrid('toExcel','dg.xls');	// export to excel
        }


    </script>

</head>
<body>

<select name="users" onchange="for_elements(this.value)">
    <option value="">请选择一个学院：</option>
    <option value=1>理学院</option>
    <option value=2>计算机科学与工程学院</option>
    <option value=3>艺术学院</option>

</select>

<select name="elements" id="ele" style="width: 145px;" onchange="test1()">


</select>
<button onclick="for_elements()">按钮</button>
<button onclick="for_student()">按钮</button>
<!--数据表格-->
<a class="easyui-linkbutton" plain="true" onclick="exportExcel()"
   id="serach" data-options="iconCls:'icon-large_chart'">导出excel</a>
<table id="dg">
    <!-- 如果这块不写的话，只会显示标题 ,并且由于在上方script中定义了thead，所以在table里在定义一个thead是没有意义的，
         当然在页面中也是没有效果的。
    -->
    <tbody>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    </tbody>
</table>


</body>
</html>

servlet

需要引入json的依赖包
使用的引入方法见（使用集成开发环境引入可能出现bug）
https://blog.youkuaiyun.com/qw160/article/details/116378653?spm=1001.2014.3001.5501
servlet2.java 获取所选学院的专业

package tt.webhomework;

import javax.servlet.*;


import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;

@WebServlet(name = "Servlet2", value = "/Servlet2")
public class Servlet2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

       // response.getWriter().write("aaa");
       // response.getWriter().write("hello");
        // 设置相应内容类型
        response.setContentType("text/json;charset=utf-8");
        // 实例化输出流对象
        PrintWriter out = response.getWriter();
        String coll=request.getParameter("coll");
        System.out.println(coll);

        //连接数据库，获取数据
        try {

            Class.forName("com.mysql.jdbc.Driver"); //(加载)获取jdbc驱动jar包里的类
            Connection connect = DriverManager.getConnection("jdbc:mysql://localhost:3306/web?serverTimezone=UTC","root","root");
            // 创建 Statement对象
            Statement stmt = connect.createStatement();
            String sql;
      //      sql  = "select * from college where  colle=' "+coll+"'"; // 设置sql语句
            sql  = "select * from college where  collegeid="+coll; // 设置sql语句
            // 执行sql语句,获取查询结果集,
            ResultSet rs = stmt.executeQuery(sql);
            // 这里需要导入 json jar 包
           JSONArray jsonArray = new JSONArray();
           JSONObject jsonObj = new JSONObject();
            // 展开结果集
            while (rs.next()){
                //通过字段检索
             //   设置key 和 value put到json对象
               // out.println(rs.getString("major"));
              jsonObj.put("major",rs.getString("major"));
                      jsonObj.put("colle",rs.getString("colle"));

               jsonArray.add(jsonObj); // 把对象放到数组里，容易遍历
            }
            out.println(jsonArray.toString());


            //关闭
            rs.close();//结果集大门关闭
            stmt.close(); // 对话关闭
            connect.close(); //连接关闭
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }
    }

servlet3.java 获取所选专业的学生列表
代码与servlet2基本相同，需要修改查询的变量名称即可