• 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动态显示后台数据库中的数据完成。

  • 相关阅读:
    Linux C编程之二十一 Linux高并发web服务器开发
    Linux C编程之二十 xml-json
    Linux C编程之十九(2) libevent
    Linux C编程之十九(1) libevent基本概念
    Linux C编程之八 文件操作相关函数
    Linux C编程之七(2) 系统IO函数
    Linux C编程之六 makefile项目管理
    Linux C编程之四 动态库(共享库)的制作
    Linux C编程之五 gdb调试
    .net core 3.1 mvc string接收为null解决方案
  • 原文地址:https://www.cnblogs.com/aixing/p/13327645.html
Copyright © 2020-2023  润新知