EasyUI动态显示后台数据库中的数据

时间:2022-08-24 16:27:09

最近在完成一个项目,采用SSM框架搭建完成,前端使用EasyUI搭建页面;

其中涉及到一个查询显示功能;查询数据库中的数据,动态显示在页面之中,刚开始这部分十分有疑问,所以虚心向同学学习,现总结至博客当中,以待继续深入学习。


首先,需要根据EasyUI搭建一个前端页面;

代码实现:

<body>
<div id="p" class="easyui-panel" title="学生列表"
style="width:1320px;height:300px;padding:40px;background:#fafafa;"
data-options="iconCls:'icon-save'">
<table id="dg"></table>
</div>
<script>
$('#dg').datagrid({
url:'clscolumn/stu.do',
columns:[[
{field:'id',title:'编号',width:100},
{field:'name',title:'姓名',width:100},
{field:'point',title:'积分ˆ†',width:100,align:'right'} ]],
pagination : true,
//选择当前页
pageNumber : 1,
//页面显示几个
pageSize : 3,
//可选页面显示几个
pageList : [3,5,9]
});
$('#dg').datagrid('load', {
url:'clscolumn/stu.do',
columns:[[
{field:'id',title:'编号',width:100},
{field:'name',title:'姓名',width:100},
{field:'point',title:'积分ˆ†',width:100,align:'right'}
]]});
$('#dg').datagrid('reload'); // 重新载入当前页面数据
</script>
</body>

首先需要在数据库中建一个表,并在项目中创建一个实体类;该实体类和数据库中的表字段名称,数值类型必须保持一致。

实体类:

public class Student {

    private int id;
private String name;
private String pwd;
private int point;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
public int getPoint() {
return point;
}
public void setPoint(int point) {
this.point = point;
} }

数据库建表:

数据库中表的数据名称与类的名称一致;

且数据库中表中数据值的类型与实体类中的变量类型一致。

定义一个Service接口,其中定义一个查询方法,该方法的方法名字必须与Spring配置文件(appli-context.xml中的事务方法名字相关联)。

public interface StuListService {

    List<Student> getStu();
}

定义实现类ServiceImpl实现Service接口;

这部分一定要注意该类必须添加@Service注解,否则无法正常运行。

第二个注解为Dao层注解,必须添加@Autowired自动注入。

@Service
public class StuListServiceImpl implements StuListService{ @Autowired
private StuListDao dao; @Override
public List<Student> getStu() {
// TODO Auto-generated method stub
return dao.getStudent();
} }

定义一个Dao层接口,UserDao.java;该接口中为查询方法。

注意返回值类型与传值类型都为所要查找的对象。

public interface UserDao {

    //登录页面
User selectByCondition(User user); }

配置Mybatis的映射文件。

增、删、改 方法的返回值即resultType均为int值类型。

查询可以返回对象类型;

注意select中的id必须与UserDao.java中 查询方法的名字保持一致。

<mapper namespace="com.sys.dao.UserDao">
<select id="selectByCondition" parameterType="User" resultType="User">
select * from users where name=#{name} and pwd=#{pwd}
</select>
</mapper>

配置控制器

必须添加@ResponseBody将数据转换成对象类型。

定义的方法 返回类型为所要获取的对象。

采用List集合 保存数据。

@Controller
@RequestMapping("/clscolumn")
public class StuListController { @Autowired
private StuListService service; @RequestMapping("/stu.do")
@ResponseBody
public List<Student> selectAll(){
List<Student> students =service.getStu();
return students;
} }

至此,EasyUI动态显示后台数据库中的数据完成。