hooyantsing's Blog

第74次课程_EASYUI_1

字数统计: 1.8k阅读时长: 10 min
2019/11/01

源辰76班

第74次课程

2019.11.01

内容

EASYUI_1[廖彦]

1.esayUI配置环境

esayUI官方网站:

http://www.jeasyui.net/

需将以下文件放入工程文件的WebContent目录中du

80d970ecf48293a259b552119a223938.png

不同的网页控件模板可以在此网站上找到源码,将其粘贴到自己的项目文件中。

2.easyUI应用

大麦(damai)电商项目后台管理

product.jsp

2af98310ba29c76174daef55148b5dde.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<%@ page language="java"  contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01  Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=utf-8">
<title>商品管理</title>

     <!-- 相对路径 -->
    <link rel="stylesheet" type="text/css"  href="../js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css"  href="../js/easyui/themes/icon.css">

    <!-- 绝对路径 -->
    <script type="text/javascript"  src="/191026_Servlet/js/easyui/jquery.min.js"></script>
    <script type="text/javascript"  src="/191026_Servlet/js/easyui/jquery.easyui.min.js"></script>

    <!-- 国际化js文件 -->
    <!-- 改进绝对路径:工程名可以任意变化 -->
    <script type="text/javascript"  src="<%=application.getContextPath()  %>/js/easyui/locale/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript">
       function edit(){
           //web版 选中某一行
           //获取表格当前选中的行 row 就是  Product 实体对象 --> json对象
           var row =  $("#dg").datagrid("getSelected");
           if(row==null){
               $.messager.alert('系统提示','请选择要编辑的服装','error');
               return;
           }
           //打开对话框
        $('#dlg').dialog('open');
           //将行数据填写到表单控件中
        $("#editForm").form('load',row);
       }
       
       function add(){
           $('#dlg').dialog('open');
           //清除表单控件里的数据
        $("#editForm").form('clear');
       }
    </script>
</head>
<body>
    <!-- fit:true 表格全屏显示 -->
    <table class="easyui-datagrid"  title="DataGrid Complex Toolbar" id="dg"
           data-options="
           fit:true,
           rownumbers:true,
           singleSelect:true,
           url:'<%=application.getContextPath()  %>/product.s?op=query',
           method:'get',
           toolbar:'#tb'">
           <!-- Ajax局部刷新技术 -->
       <thead>
           <tr>
               <!-- 对应json字符串中的各个变量名 -->
               <th  data-options="field:'pid',width:80">pid</th>
               <th  data-options="field:'pname',width:100">pname</th>
               <th  data-options="field:'market_price',width:80,align:'right'">market_price</th>
               <th  data-options="field:'shop_price',width:80,align:'right'">shop_price</th>
               <th  data-options="field:'image',width:240">image</th>
               <th  data-options="field:'pdesc',width:360,align:'center'">pdesc</th>
               <th  data-options="field:'is_hot',width:100">is_hot</th>
               <th  data-options="field:'pdate',width:100">pdate</th>
               <th  data-options="field:'csid',width:100">csid</th>
           </tr>
       </thead>
    </table>
    <div id="tb"  style="padding:5px;height:auto">
       <div style="margin-bottom:5px">
           <a href="#"  class="easyui-linkbutton" iconCls="icon-add"  plain="true"></a>
           <a href="#"  class="easyui-linkbutton"  iconCls="icon-edit" plain="true"></a>
           <a href="#"  class="easyui-linkbutton"  iconCls="icon-save" plain="true"></a>
           <a href="#"  class="easyui-linkbutton" iconCls="icon-cut"  plain="true"></a>
           <a href="#"  class="easyui-linkbutton"  iconCls="icon-remove" plain="true"></a>
       </div>
       <div>
           Date From: <input  class="easyui-datebox" style="width:80px">
           To: <input class="easyui-datebox" style="width:80px">
           Language:
           <select class="easyui-combobox"  panelHeight="auto" style="width:100px">
               <option  value="java">Java</option>
               <option value="c">C</option>
               <option  value="basic">Basic</option>
               <option  value="perl">Perl</option>
               <option  value="python">Python</option>
           </select>
           <a href="#"  class="easyui-linkbutton"  iconCls="icon-search">Search</a>
           <a href="javascript:void(0)"  class="easyui-linkbutton"  onclick="edit()">编辑</a>
           <a href="javascript:void(0)"  class="easyui-linkbutton" onclick="add()">新增</a>
       </div>
    </div>
       <!-- closed:true 刷新后对话框不会自动弹出来 -->
       <div id="dlg" class="easyui-dialog"  title="Basic Dialog"  data-options="iconCls:'icon-save', closed:true"  style="width:400px;height:400px;padding:10px">
           <form action="" id="editForm">
               <input class="easyui-textbox"  name="pid" style="width:300px"  data-options="label:'商品ID:'">
               <input class="easyui-textbox"  name="pname" style="width:300px"  data-options="label:'名称:'">
               <input class="easyui-textbox"  name="shop_price" style="width:300px"  data-options="label:'商场价:'">
           </form>
       </div>
</body>
</html>

根据MVC模式编写后台服务

product.java

product的实体类(容器)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
package com.yc.damai.bean;
import java.sql.Timestamp;
public class Product {
    private Integer pid;
    private String pname;
    private Integer market_price;
    private Integer shop_price;
    private String image;
    private String pdesc;
    private String is_hot;
    private Timestamp pdate;
    private Integer csid;
    public Integer getPid() {
       return pid;
    }
    public void setPid(Integer pid) {
       this.pid = pid;
    }
    public String getPname() {
       return pname;
    }
    public void setPname(String pname) {
       this.pname = pname;
    }
    public Integer getMarket_price() {
       return market_price;
    }
    public void setMarket_price(Integer  market_price) {
       this.market_price = market_price;
    }
    public Integer getShop_price() {
       return shop_price;
    }
    public void setShop_price(Integer  shop_price) {
       this.shop_price = shop_price;
    }
    public String getImage() {
       return image;
    }
    public void setImage(String image) {
       this.image = image;
    }
    public String getPdesc() {
       return pdesc;
    }
    public void setPdesc(String pdesc) {
       this.pdesc = pdesc;
    }
    public String getIs_hot() {
       return is_hot;
    }
    public void setIs_hot(String is_hot) {
       this.is_hot = is_hot;
    }
    public Timestamp getPdate() {
       return pdate;
    }
    public void setPdate(Timestamp pdate) {
       this.pdate = pdate;
    }
    public Integer getCsid() {
       return csid;
    }
    public void setCsid(Integer csid) {
       this.csid = csid;
    }
}

ProductServlet.java

服务主体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
package com.yc.damai.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.yc.damai.bean.Product;
import com.yc.damai.biz.ProductBiz;

@WebServlet("/product.s")
public class ProductServlet extends BaseServlet {
    private static final long serialVersionUID = 1L;
       
    private ProductBiz biz = new ProductBiz();
    
    public void query(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("text/html; charset=utf-8");
        List<Product> list = biz.query();
        //引出out.print
      PrintWriter out = response.getWriter();
      Gson gson = new Gson();
      //动态数组转成json格式
      out.print(gson.toJson(list));
    }
}

ProductBiz.java

逻辑判断类

(无逻辑)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package com.yc.damai.biz;

import java.util.List;

import com.yc.damai.bean.Product;
import com.yc.damai.dao.ProductDao;

public class ProductBiz {

    private ProductDao dao = new ProductDao();
    
    public List<Product> query() {
        return dao.selectAll();
    }
}

ProductDao.java

操控数据库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package com.yc.damai.dao;

import java.util.List;
import java.util.Map;

import com.yc.damai.bean.Product;
import com.yc.damai.util.DBHelper;

public class ProductDao {

    public List<Product> selectAll() {
        String sql = "select * from product";
        List<Map<String,Object>> list = DBHelper.selectList(sql);
        return DBHelper.populate(list,Product.class);
    }
}

DBHelper.java

对现行的DBHelper进行了功能扩展

加入了新方法populate,用于”Map对象”转化为”实体对象”。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public static <T> List<T>  populate(List<Map<String, Object>> list,  Class<T> cls) {
       List<T> retList = new  ArrayList<T>();
       for(Map<String, Object> row : list)  {
           try {
               T p = cls.newInstance();
               BeanUtils.populate(p, row);
               retList.add(p);
           } catch (Exception e) {
               throw new  RuntimeException(e);
           }
           
       }
       return retList;
}
CATALOG