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


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

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


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

    代码实现:

    <body>
    <div id="p" class="easyui-panel" title="学生列表"
         style="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:'编号',100},
                {field:'name',title:'姓名',100},
                {field:'point',title:'积分ˆ†',100,align:'right'}
    
            ]],
                  pagination : true, 
                   //选择当前页
                   pageNumber : 1,
                   //页面显示几个
                   pageSize : 3,
                   //可选页面显示几个
                   pageList : [3,5,9]
        });
        $('#dg').datagrid('load', {
            url:'clscolumn/stu.do',
            columns:[[
                {field:'id',title:'编号',100},
                {field:'name',title:'姓名',100},
                {field:'point',title:'积分ˆ†',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动态显示后台数据库中的数据完成。

  • 相关阅读:
    CF 142B Tprimes
    CF 231A Team
    poj 2001 Shortest Prefixes ——字典树入门
    hdu 1039 Easier Done Than Said?
    poj 2528 Mayor's posters
    hdu 1061 Rightmost Digit
    poj 2503 Babelfish
    CF271 A. Beautiful Year
    poj 2752
    CF271 B. Prime Matrix
  • 原文地址:https://www.cnblogs.com/aixing/p/13327645.html
Copyright © 2020-2023  润新知