extjs显示数据库

标题与描述概述的知识点主要涉及使用ExtJS框架结合Java后端技术来展示数据库中的数据。在本案例中，我们关注的是如何使用ExtJS框架显示来自MySQL数据库的信息，并通过Java进行后端处理，将数据转化为JSON格式，以供前端展示。 ### 详细知识点解析 #### 1. 构建数据库表结构 创建一个名为`information`的表，其中包含三个字段：`id`（自增整型），`name`（长度为20的字符串类型），`age`（整型）。并插入两条记录，分别为`("ahwxr1",21)`和`("ahwxr2",21)`。这是数据库层面的基础准备工作，确保有数据可以被查询和展示。 #### 2. ExtJS前端配置 在HTML文件`Test3.html`中，使用ExtJS框架设置了一个Grid Panel，用于展示数据库中的数据。加载ExtJS的CSS和JS资源文件，确保页面样式和功能能够正常运行。然后，定义了Column Model，即表格列模型，包括行号、ID、姓名和年龄四个字段。接下来，创建了数据存储`store`，其代理`proxy`指向后端的`Test3.jsp`文件，读取器`reader`采用JSON格式读取数据，其中`totalProperty`和`root`属性分别用于获取数据总数和数据列表。`store`还设置了远程排序功能，允许用户在前端进行排序操作。 #### 3. Java后端处理 在`Test3.jsp`文件中，通过Servlet接收前端发送的请求参数`start`和`limit`，用于分页查询。然后，将请求编码设为UTF-8，确保中文字符正确处理。创建`HashMap`对象`informationList`，用于存储查询结果。在处理逻辑中，使用`db.Information`类（假设这是一个封装了数据库操作的类）对`information`表进行查询，并将查询结果转化为JSON格式，以便返回给前端。JSON字符串构建时，使用了`totalProperty`表示总记录数，`root`作为数据列表的根节点，这与前端的`reader`设置相匹配。 #### 4. JSON数据格式 JSON数据格式是前后端数据交换的一种常见方式，具有轻量级、易读性好等优点。在本例中，后端返回的JSON数据格式如下： ```json { "totalProperty": 100, "root": [ {"id": 1, "name": "ahwxr1", "age": 21}, {"id": 2, "name": "ahwxr2", "age": 21} ] } ``` 其中`totalProperty`表示总记录数，`root`数组包含了具体的记录数据。 ### 结论 通过以上分析，我们可以看到，使用ExtJS结合Java后端技术，可以有效地展示数据库中的数据。前端负责UI渲染和交互逻辑，而后端则负责数据处理和格式化，二者通过JSON数据格式进行通信，实现数据的有效传递和展示。这种架构不仅提高了开发效率，还保证了系统的灵活性和可维护性。