您的位置：首页 > 产品设计 > UI/UE

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

2017-10-26 20:40 295 查看

最近在完成一个项目，采用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动态显示后台数据库中的数据完成。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： easyui 数据库框架

相关文章推荐

新的分享

章节导航