Struts2+DAO+ExtJS 框架征程才开始_step1
?? 最近开始着手struts2的学习，版本是struts-2.0.6，倒腾了一个多月了，零零散散的，想法一直在改变，起先就是想做个普通的信息管理系统，用struts2+JSP，接着发现web页面太丑，我不会界面操作，对于html语言也只是停留在简单的能看，想起来以前接触过ExtJs，哎呀 ，现成的界面做好调用就可以岂不快哉，说干就干下了个ext-2.0.2.， 一晚上加一上午加一下午终于调通了，暂时可以把数据利用DAO的方式简单的从mysql5.1里提取然后显示在Ext的表格（grid）上了==! 似不似很丢人
效果图如下：
?好吧，我想你看出来了我是个小菜鸟，原谅我吧 ，我有大牛的梦想的啦，有兴趣的话看看我接下来的具体实施吧，其实还是很纠结的
开发工具 MyEclipse5.5.1,部署如下：
?
DAO模式 连接数据库
package DAO;import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException;// 连接数据库,配置数据库public class DAOBase implements DAO { public Connection getConnection() { String connectURL = "jdbc:mysql://localhost/test";String user = "root";String password = "123";try{Class.forName("com.mysql.jdbc.Driver");// 加载驱动程序Connection connection = DriverManager.getConnection(connectURL, user, password); return connection;}catch (SQLException e) {e.printStackTrace();}catch (Exception e) {e.printStackTrace();}return null; } }?struts2作为图文表现层，使模型和动作分开，Employee.java模型类
package entity;public class Employee { private int id; private String firstName; private String lastName; public Employee() { } public Employee(int id, String firstName, String lastName) { this.id = id; this.firstName = firstName; this.lastName = lastName; } public String getFirstName() { return firstName; } public void setFirstName(String firstName) { this.firstName = firstName; } public String getLastName() { return lastName; } public void setLastName(String lastName) { this.lastName = lastName; } public int getId() { return id; } public void setId(int id) { this.id = id; } //转化为JSON格式 public String toString() { return "{id:" + id + ",firstName:'" + firstName + "',lastName:'" + lastName + "'}"; }}?EmployeeActioin.java动作类
package entity;import entity.Employee;import entity.EmployeeManager;import com.opensymphony.xwork2.ActionSupport;import com.opensymphony.xwork2.Preparable;import java.util.List;import com.opensymphony.xwork2.ModelDriven;// 使用ModelDriven拦截器public class EmployeeAction extends ActionSupport implements Preparable,ModelDriven{private static final long serialVersionUID = 1L;private Employee employee;private int employeeId;private List<Employee> employees;//ModelDriven拦截器自动调用的方法public Object getModel(){return employee;}//Prepable拦截器自动调用的方法 public void prepare() throws Exception { if (employeeId == 0) { employee = new Employee(); } else { employee = EmployeeManager.find(employeeId); } }//set、get方法public int getEmployeeId() {return employeeId;}public void setEmployeeId(int employeeId) {this.employeeId = employeeId;}public List<Employee> getEmployees() {return employees;}public Employee getEmployee() {return employee;}public void setEmployee(Employee employee) {this.employee = employee;}public void setEmployees(List<Employee> employees) {this.employees = employees;}//方法public String list() {employees = EmployeeManager.getEmployees();return SUCCESS;}public String create() {EmployeeManager.create(employee);return SUCCESS;}public String edit() {return SUCCESS;}public String update() {EmployeeManager.update(employee);employees = EmployeeManager.getEmployees();return SUCCESS;}public String delete() {EmployeeManager.delete(employeeId);employees = EmployeeManager.getEmployees();return SUCCESS;}}?页面显示的关键类EmployeeDAOMySQLImpl.java，截取关键的search方法用于执行sql语句提取数据库数据填充对象Employee对象，放入List<Employee>中储存，并返回。。
public List<Employee> searchEmployees(EmployeeSearchCriteria searchCriteria)throws DAOException {List<Employee> employees = new ArrayList<Employee>();Connection connection = null;Statement statement = null;ResultSet resultSet = null;// Build the search criteriasStringBuilder criteriaSql = new StringBuilder(512);criteriaSql.append(SEARCH_EMPLOYEES_SQL);if (searchCriteria.getFirstName() != null) {criteriaSql.append("firstName LIKE '%"+ DBUtil.fixSqlFieldValue(searchCriteria.getFirstName())+ "%' AND ");}if (searchCriteria.getLastName() != null) {criteriaSql.append("lastName LIKE '%"+ DBUtil.fixSqlFieldValue(searchCriteria.getLastName())+ "%' AND ");}// Remove unused 'And' & 'WHERE'if (criteriaSql.substring(criteriaSql.length() - 5).equals(" AND "))criteriaSql.delete(criteriaSql.length() - 5,criteriaSql.length() - 1);if (criteriaSql.substring(criteriaSql.length() - 7).equals(" WHERE "))criteriaSql.delete(criteriaSql.length() - 7,criteriaSql.length() - 1);try {/* * 注意和上述几种方法中的 PreparedStatement比较，此处用的是statement */connection = getConnection();statement = connection.createStatement();// System.out.println(criteriaSql.toString());resultSet = statement.executeQuery(criteriaSql.toString());while (resultSet.next()) {Employee employee = new Employee();employee.setId(resultSet.getInt("id"));employee.setFirstName(resultSet.getString("firstName"));employee.setLastName(resultSet.getString("lastName"));employees.add(employee);System.out.println("运行到employee.toString():"+ employee.toString());}resultSet.close();statement.close();} catch (SQLException e) {throw new DAOException();} finally {try {connection.close();} catch (SQLException ex) {}}System.out.println("运行到searchEmployees(……)" + employees);return employees;}此时employees里存储了从底层数据库提取的数据，格式是：
[{id:1,firstName:'hu',lastName:'ying'}, {id:2,firstName:'gan',lastName:'likun'}]
可是Ext能够读取的格式是json的，如下：
{employee:[{id:1,firstName:'hu',lastName:'ying'}, {id:2,firstName:'gan',lastName:'likun'}]}
困扰了很久的难点就在这儿，于是在参考了《深入浅出Ext JS》的基础下，我决定红圈圈里动刀子了
?list.jsp
<%@ page contentType="application/json;charset=utf-8" import="entity.*" %><% request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); out.print("{employee:"+EmployeeManager.getEmployees()+"}"); System.out.println("运行到list.jsp "+"{employee:"+EmployeeManager.getEmployees()+"}");%>?student.js
Ext.onReady(function() { Ext.QuickTips.init(); var StudentRecord = Ext.data.Record.create([ {name: 'id', type: 'int'}, {name: 'firstName', type: 'string'}, {name: 'lastName', type: 'string'} ]); var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url: './list.jsp'}), reader: new Ext.data.JsonReader({ root: 'employee' },StudentRecord), remoteSort: true }); store.load({params:{start:0,limit:15}}); var columns = new Ext.grid.ColumnModel([ {header: '编号', dataIndex: 'id'}, {header: '姓氏', dataIndex: 'firstName'}, {header: '名称', dataIndex: 'lastName'} ]); columns.defaultSortable = true; // grid start var grid = new Ext.grid.GridPanel({ title: '学生信息列表', region: 'center', loadMask: true, store: store, cm: columns, sm: new Ext.grid.RowSelectionModel({singleSelect:true}), viewConfig: { forceFit: true }, bbar: new Ext.PagingToolbar({ pageSize: 15, store: store, displayInfo: true }) }); // grid end // 单击修改信息 start grid.on('rowclick', function(grid, rowIndex, event) { var record = grid.getStore().getAt(rowIndex); form.getForm().loadRecord(record); form.buttons[0].setText('修改'); }); // 单击修改信息 end // layout start var viewport = new Ext.Viewport({ layout: 'border', items: [{ region: 'north', contentEl: 'head' }, grid] }); // layout end});??于是小攻告成，有了开始的那个久违的画面
，时间仓促，讲解不详细，等我大功告成的时候再补全咯
我未来的设想结果是这个样子滴，就是多加个表单（Form）
