项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

1.项目环境

项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

注:添加jar包直接在common_parent里面添加.

搭建数据库

create tablespace bos317space

datafile 'c:\ bos317.dbf'     //确定数据库文件位置

size 500m   数据库大小

autoextend on   满了20m自增

next 20m;

 

--创建用户&给用户授权

create user bos317 identified by bos317 default tablespace bos317space;

--注意不要给用户DBA角色

grant connect,resource to bos317;

SVN环境

1、 使用eclipse的svn插件将项目上传到服务器

 

项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

褐色*:本地资源跟服务器上不一致。

 

黄色:本地资源跟服务器上一致

选择父工程提交代码:

项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

Ajax的$.post 和$.ajax的区别

Ajax: $.post  $.ajax  $.get  $.load  $.getScript  $.getJson

 

$.post(url,{key1:value1,key2:value2},function(data){

  //处理返回data数据

},json)

 

 

$.ajax({

   type:post,  //get

   url:’url,

   data:{},

   dataType:text,  //json

   success:function(data){},

   error:function(data){}

});

1.1.1 调用easyui组件方法

 完成的功能是点击According分类  添加选项卡功能 如果选项卡存在则被选中;

 tabs里面的("exists","选项卡名") 返回值为boolean 用于判断 如果存在select方法,不存在add方法

 项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

 项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

1.1 Ztree标准json数据(了解)

关键点:通过children指定下级节点数据

 项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

1、 导入ztree相关js文件

<link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>

2、 在页面中提供ul元素

弊端:数据嵌套方式

 项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

1.2 Ztree 简单json数据(掌握)

关键点:通过pid:指定上级节点的id

 

 项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

回顾以前的商城实战 EasyUI的增删改查

EasyUI的datagrid组件 columns 里面的field 对应实体类中的字段

用到一个格式化 属性formatter:function(value,row,index)

value:代表此field 映射的值
row:此次遍历到对象整体
index:遍历的索引

例如:

{field:'操作',title:'操作',width:100,align:"center",formatter:function(value,row,index){
return "<a href='javascript:;' onclick='huixian(\""+row.cid+"\")'>修改</a>|<a href='javascript:;' onclick='shanchu(\""+row.cid+"\")'>删除</a>";
}}

toolbar的用法

toolbar: [{
iconCls: 'icon-add',
text:"添加分类",
handler: function(){
//把添加对画框显示
$("#dd").dialog("open");
}
}]

正常查询数据后转json

/*List<Category> list=categoryDao.findAll();
String result = JSONArray.fromObject(list).toString();

//如果某些数据不需要转json  转json后发生no session问题 需要做下面步骤

config=new JsonConfig()

config.setExculude(new String{"data"})

JSONArray.fromObject(list,config)
return result;*/

查询后放入redis缓存中的写法
//////////////////////////////////使用redis作为缓存////////////////////////
//先获取连接
Jedis connection = RedisUtil.getConnection();
//先去查询redis
String categories = connection.get("categories");
//如果redis没有数据
if(categories==null){
//查询数据库
List<Category> list=categoryDao.findAll();
System.out.println("查询数据库了");
String result = JSONArray.fromObject(list).toString();
//查出数据 不要直接返回 而是将此数据 放入redis 再返回
connection.set("categories", result);
connection.close();
return result;
}else{
//等再一次访问来的 那么redis是有数据
//从redis取出数据返回
connection.close();
return categories;
}

保存方法

function saveCategory(){
//提交表单数据
$('#saveForm').form('submit', {
url:"${ctx}/category?md=add",
success:function(data){
//关闭对话框  保存完关闭窗口
$("#dd").dialog("close");
//服务器返回的数据
if("1"==data){
//成功了
parent.$.messager.show({
title:'我的消息',
msg:'添加分类成功',
timeout:5000,
showType:'slide'
});

增删改之后都需要重载  相当于再查一下
$("#dg").datagrid("reload");
}else{
//失败
$.messager.alert('我的消息','添加失败!');
}
}
});

修改前做数据回显

function huixian(cid){
//打开一个对话框
$("#dd1").dialog("open");
//对话框中的表单内容 有原来的数据
$('#updateForm').form('load','${ctx}/category?md=huixianById&cid='+cid);

返回一个json格式的对象
//{cid:1,cname:"手机数码"}
}

删除

function shanchu(cid){
//弹出确认框  主要是弹出对话框判断
$.messager.confirm('确认对话框', '您确认要删除吗?', function(r){
if (r){
var url="${ctx}/category";
var params="md=del&cid="+cid;
//发起请求 删除分类
$.post(url,params,function(data){
//成功返回1
if("1"==data){
parent.$.messager.show({
title:'我的消息',
msg:'删除分类成功',
timeout:5000,
showType:'slide'
});
//重新加载数据
$("#dg").datagrid("reload");
}else if("2"==data){
//失败0
$.messager.alert('我的消息','该分类下存在商品不能删除!!!');
}else{
//失败0
$.messager.alert('我的消息','删除失败!');
}
});
}
});

上一篇:学zookeeper 这篇文章够了


下一篇:开发微信小程序的价值有哪些