使用SSH和Ext来展示数据库数据 (ssh extjs展示数据库)

在当今这个数字化的时代，大量的数据产生于各种各样的系统之中。如何更好地将这些数据利用起来变得至关重要。传统的数据库系统，以其高效、稳定的数据存储和访问方式成为了数据处理的重要途径。而SSH和Ext作为常用的开发工具，更是在将数据库数据展现给用户方面发挥了重要作用。

SSH（Spring、Struts、Hibernate）是一种基于JavaEE的开源框架，可用于开发Web应用程序。SSH的主要特点是让开发人员专注于业务逻辑而不是框架配置，减少了开发难度，并能快速开发相对复杂的Web应用程序。同样，SSH还提供了对数据库的操作功能，方便数据存储和管理。

而Ext作为一款基于JavaScript的前端框架，它提供了丰富的UI控件和交互功能，使数据的可视化展示变得更加简便。在这里，我们将通过构建一个简单的Web应用程序来展示如何。

开发环境

在开始构建我们的应用程序之前，我们需要做好以下工作：

1. 安装Java JDK，并设置JAVA_HOME环境变量。

2. 安装Eclipse IDE，它提供了丰富的Java开发工具和插件。同时，我们也需要安装Maven插件，它可用于构建和管理我们的项目。

3. 安装Tomcat服务器，作为我们的应用程序的容器。

4. 准备好MySQL数据库，并创建几个表和数据，以便我们展示数据。在这里，我们可以使用名为“extjs_ssh”的数据库和“user”和“role”两个表。

搭建SSH环境

现在，我们来搭建SSH环境，以便访问数据库。我们将使用Hibernate来处理数据库的访问。

1. 在Eclipse中创建一个新的Maven项目，并添加如下依赖：

“`

org.hibernate

hibernate-core

5.4.19.Final

org.hibernate

hibernate-entitymanager

5.4.19.Final

mysql

mysql-connector-java

8.0.22

“`

2. 在src/mn/resources下创建hibernate.cfg.xml配置文件，添加以下内容：

“`

<!DOCTYPE hibernate-configuration PUBLIC

“-//Hibernate/Hibernate Configuration DTD 3.0//EN”

“http://www.hibernate.org/dtd/hibernate-configuration-3.0.dtd”>

org.hibernate.dialect.MySQL5Dialect

com.mysql.cj.jdbc.Driver

jdbc:mysql://localhost:3306/extjs_ssh?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shangh

root

123456

“`

这里我们根据自己的实际情况修改数据库连接的信息。

3. 创建实体类，如下：

“`

@Entity

@Table(name = “user”)

public class User {

@Id

@GeneratedValue(strategy = GenerationType.IDENTITY)

private Integer id;

private String name;

private String password;

@ManyToMany(cascade = CascadeType.ALL)

@JoinTable(name = “user_role”, joinColumns = @JoinColumn(name = “user_id”,referencedColumnName = “id”),inverseJoinColumns = @JoinColumn(name = “role_id”,referencedColumnName = “id”))

private Set roles;

//省略getter和setter方法

}

“`

“`

@Entity

@Table(name = “role”)

public class Role {

@Id

@GeneratedValue(strategy = GenerationType.IDENTITY)

private Integer id;

private String name;

private String desc;

//省略getter和setter方法

}

“`

这里我们定义了User和Role两个实体类，并使用Hibernate的注解来设置数据库表的映射关系。

使用Ext展示数据

下面，我们将通过Ext来展示数据库数据，这里我们使用Ext 6版本来完成。

1. 创建空的Web项目，并将下载的Ext文件放入webapp下的extjs文件夹中。

2. 在页面中引入所需的和CSS文件，如下：

“`

“`

这里我们引入了Ext的CSS和文件以及自己编写的用户管理脚本user.js。

3. 在页面中添加展示数据的容器，如下：

“`