Extjs學習筆記——web開發之查詢（連庫操作）

原創

2020-02-21 03:57

由於剛接觸extjs，所以我還是將所有的增刪改查操作全部做完纔來寫這些博客，來鞏固自己的知識，也分享給大家我的一些見解以及項目中的源碼。
先從查詢開始主要步驟：
前端js：包括
1.定義moodel;
2創建store;
3.創建grid表格;
查詢的話前端只需要這三個步驟就可以完成了
後端主要包括：
1.pojo 實體類
2.dao 方法類
3.servlet 類
數據庫我採用的是mysql

首先是前端代碼，由於我拿eclipse寫的所以前端的界面也是jsp 的格式

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="extjs6/build/classic/theme-crisp/resources/theme-crisp-all.css" />
<link rel="stylesheet" type="text/css"
	href="extjs6/build/classic/theme-crisp/resources/theme-crisp-all-debug.css" />
<script src="extjs6/build/ext-all.js"></script>
<script src="extjs6/build/ext-debug.js"></script>
<script src="extjs6/build/classic/locale/locale-zh_CN.js"></script>
<script src="extjs6/ext-bootstrap.js"></script>
<script type="text/javascript " src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
	var data;
    //1.定義Model
    Ext.define("MyApp.model.User", {
        extend: "Ext.data.Model",
        fields: [                                 //這裏主要是定義一些格式與後端的實體類中一致便好
            { name: 'id', type: 'int' },
            { name: 'name', type: 'string' },
            { name: 'email', type: 'string' },
            { name: 'sex', type: 'string' },
            { name: 'bornDate', type: 'string' },
        ]
    });

    //對後端發送請求以及來接收查詢請求所返回的數據
    
     $.ajax({
		url : "${pageContext.request.contextPath}/StudentServlet?method=select",
		async : false,                       //將ajax的異步改爲同步就可以將 局部變量保存下來 
		success : function(res) {
			for ( var p in res) {            
				data=res;
			}
		}
	});
    //2.創建store
    var store = Ext.create("Ext.data.Store", {
        model: "MyApp.model.User",
        data:data
    });
    
    //3.創建grid
    var viewport = Ext.create("Ext.container.Viewport", {
        layout: "fit",            //採用fit佈局
        items: {
            xtype: "grid",                  //表格格式
            model: "MyApp.model.User",
            store: store,
            columns: [                            
                { text: '姓名', dataIndex: 'name' },
                { text: '性別', dataIndex: 'sex' },
                { text: 'email', dataIndex: 'email',width:150 },  //這裏我對郵箱的寬度進行了設置  日期格式也是columns中的屬性
                { text: '出生日期', dataIndex: 'bornDate', xtype: 'datecolumn', format:'Y年m月d日',width:200},
                ],
                }
    });
    
});  
</script>
</head>
<body>

</body>
</html>

接着是後端的代碼我貼出關鍵的部分，其他實體類與數據的表數據有需要的評論就好！
servlet類

/**
	 * @param request
	 * @param response
	 * @return 查詢全部的學生
	 * @throws Exception
	 */
	public String select(HttpServletRequest request,HttpServletResponse response) throws Exception {
		System.out.println("查詢全部學生");
		List<Student> list=new StudentDao().selectA();
		ObjectMapper mapper=new ObjectMapper();
		String json=mapper.writeValueAsString(list);
		response.setContentType("application/json;charset=UTF-8");
		response.getWriter().println(json);
		return null;
	}

dao方法
由於博主將連接方法進行封裝了所以這裏就直接調用了

private static QueryRunner  qr=new QueryRunner();
private static Connection connection=null;

  /**
     * @return
     *   查詢所有信息
     */
    public List<Student> selectA(){
    	String sql="select *from student ";
    	List<Student> list=new ArrayList<Student>();
    	connection=  JdbcUtil.getConnection();
    	try {
    		list=qr.query(connection, sql, new BeanListHandler<Student>(Student.class));
    	} catch (SQLException e) {
    		// TODO Auto-generated catch block
    		e.printStackTrace();
    	}finally {
    		JdbcUtil.closeConnection(connection);
    	}
    	return list;
    }

總結：主要就是這些，由於博主採用了反射，所以url的地址直接通過方法名來訪問了，有需要反射類的可以評論就好，查詢相對於其他操作來說還是相對簡單的，只要將data 的值修改爲後端傳過來的數據庫的值便好，注意使用ajax 時記得修改ajax的異步爲同步，要不然ajax的局部變量無法賦值給全局變量來使用。