EasyUIは、バックグラウンド・データベースのデータを動的に表示します.

8902 ワード
◆Webフロントエンド
最近1つのプロジェクトを完成して、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;
    }

}

データベース構築テーブル:
データベース内のテーブルのデータ名はクラスの名前と一致します.データベース内のテーブルのデータ値のタイプは、エンティティークラスの変数のタイプと一致します.
Springプロファイル(appli-context.xmlのトランザクションメソッド名に関連付ける必要がある)クエリーメソッドを定義するServiceインタフェースを定義します.
public interface StuListService {

    List getStu();
}

実装クラスサービスインプリメンテーションサービスインタフェースを定義します.
このセクションでは、クラスに@Serviceコメントを追加する必要があります.そうしないと、正常に動作しません.
2番目の注記はDaoレイヤ注記です.@Autowired自動注入を追加する必要があります.
@Service
public class StuListServiceImpl implements StuListService{

    @Autowired
    private StuListDao dao;

    @Override
    public List getStu() {
        // TODO Auto-generated method stub
        return dao.getStudent();
    }

}

Daoレイヤインタフェースを定義します.java;このインタフェースはクエリーメソッドです.
注意:戻り値タイプと伝達値タイプは、検索するオブジェクトです.
public interface UserDao {

    // 
    User selectByCondition(User user);

}

Mybatisのマッピングファイルを設定します.
メソッドの追加、削除、変更の戻り値であるresultTypeはint値タイプです.
クエリーはオブジェクトタイプを返します.
注意selectのidはUserDaoと一致する必要があります.JAvaでのクエリーメソッドの名前は一致しています.
namespace="com.sys.dao.UserDao">
    <select id="selectByCondition" parameterType="User" resultType="User">
        select * from users where name=#{name} and pwd=#{pwd} 
    select>

コントローラの設定
@ResponseBodyを追加してデータをオブジェクトタイプに変換する必要があります.
定義されたメソッドは、取得するオブジェクトのタイプを返します.
リストセットでデータを保存します.
@Controller
@RequestMapping("/clscolumn")
public class StuListController {

    @Autowired
    private StuListService service;

    @RequestMapping("/stu.do")
    @ResponseBody
    public List selectAll(){
        List students =service.getStu();
                return students;
    }

}

これで、EasyUIはバックグラウンド・データベースのデータを動的に表示します.
(サムスン)-ギア(14891)
210701開発ログ