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）