如何数据库数据到前端

首先你需要掌握的是数据库查询语句，这里使用最简单的数据库查询语句：SELECT * FROM sys_role，表示从角色表中查询出所有的信息，下面展示的是查询结果，这个结果需要展示到前端页面则需要代码调用这个sql语句

请点击输入图片描述

在applicationContext.xml（spring mvc的配置文件）中配置数据库连接池，保证数据的正常连接，这里需要注意连接ip和数据库名称

请点击输入图片描述

首先在控制层（逻辑处理层）中调用后台查询函数，然后返回到页面，因为数据库可能比较大，所以需要使用分页工具，保证内存容量

请点击输入图片描述

业务逻辑层，一般情况下是实现接口的，这里是实现类，实现业务的分发，这里需要调用数据库Dao层的方法

请点击输入图片描述

最后在mybatis的配置文件中写入mybatis的查询语句，然后封装成方法，这里与最初的SELECT * FROM sys_role不同，主要是加了分页(limit)和排序功能(order by)

请点击输入图片描述

最后回到jsp页面，根据之前的控制层页面输出，我们需要写一个role.jsp的文件，该文件主要遍历查询出来的数据，遍历采用<c>标签的形式

请点击输入图片描述

7

最后使用前端页面框架就可以展示出像下面这样的前端样式展示

请点击输入图片描述

您可以在数据库中设置分页功能，将前端请求的数据限制在前 100 条，而在下载功能中直接从数据库中获取全部数据。

在前端页面上，您可以使用分页插件或者手动实现分页功能，在页面加载的时候限制显示的数据条数。

在下载功能中，您可以直接调用后端接口获取所有数据，并以文件的形式返回给用户下载。

总之这个东西的实现是需要前后端配合的。

使用cnpminstallecharts-D。

1、安装插件cnpminstallecharts-D。

2、创建图表，将数据引入。

3、使用容器，使chart自适应高度和宽度，通过窗体高宽计算容器高宽。

4、把这个案例模块化，设计成一个可复用组件，只需传入id、options即可。

---