1.1 分析
商品类目使用的表:tb_item_cat
初始化类目选择:
![1500543219454002046.jpg](http://iclyj.cn/Blog/Blog/static/userImages/20170720/1500543219454002046.jpg)
Easyui的异步tree控件:
![1500543231001031403.jpg](http://iclyj.cn/Blog/Blog/static/userImages/20170720/1500543231001031403.jpg)
请求的url:/item/cat/list
请求的参数:id(当前节点的id)
响应的结果:json数据。
[{
"id": 1,
"text": "Node 1",
"state": "closed"
}
{
"id": 2,
"text": "Node 2",
"state": "closed"
}
]
如果当前节点为父节点,state应为“closed”、如果是叶子节点“open”
1.2 Dao层
查询tb_item_cat表,根据id查询商品分类列表。可以使用逆向工程。
1.3 Service层
1.3.1 分析
接收参数parentId,根据parentId查询分类列表。返回pojo列表。
Pojo应该包含三个属性:
id、text、state
应该放到taotao-common工程中。
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
|
public
class
EasyUITreeNode {
private
long
id;
private
String text;
private
String state;
public
long
getId() {
return
id;
}
public
void
setId(
long
id) {
this
.id = id;
}
public
String getText() {
return
text;
}
public
void
setText(String text) {
this
.text = text;
}
public
String getState() {
return
state;
}
public
void
setState(String state) {
this
.state = state;
}
}
| |
1.3.2 代码实现
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
|
@Service
public
class
ItemCatServiceImpl
implements
ItemCatService {
@Autowired
private
TbItemCatMapper itemCatMapper;
@Override
public
List<EasyUITreeNode> getItemCatList(
long
parentId) {
TbItemCatExample example =
new
TbItemCatExample();
Criteria criteria = example.createCriteria();
criteria.andParentIdEqualTo(parentId);
List<TbItemCat> list = itemCatMapper.selectByExample(example);
List<EasyUITreeNode> resultList =
new
ArrayList<>();
for
(TbItemCat tbItemCat : list) {
EasyUITreeNode node =
new
EasyUITreeNode();
node.setId(tbItemCat.getId());
node.setText(tbItemCat.getName());
node.setState(tbItemCat.getIsParent()?
"closed"
:
"open"
);
resultList.add(node);
}
return
resultList;
}
}
| |
1.4 Controller
接收参数,parentId。调用Service查询分类类别,返回列表(json数据),需要使用@ResponseBody。
请求的url:/item/cat/list
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
@Controller
@RequestMapping
(
"/item/cat"
)
public
class
ItemCatController {
@Autowired
private
ItemCatService itemCatService;
@RequestMapping
(
"/list"
)
@ResponseBody
public
List<EasyUITreeNode> getItemCatList(
@RequestParam
(value=
"id"
, defaultValue=
"0"
)Long parentId) {
List<EasyUITreeNode> list = itemCatService.getItemCatList(parentId);
return
list;
}
}
| |
1 富文本编辑器的使用
1.1 使用方法
第一步:从KindEditor的官方网站下载源码。http://kindeditor.net/demo.php
第二步:解压缩,把js源码添加到工程中。
![1500543347204070079.jpg](http://iclyj.cn/Blog/Blog/static/userImages/20170720/1500543347204070079.jpg)
第三步:把kindeditor-all-min.js引入到jsp中
![1500543360298022450.jpg](http://iclyj.cn/Blog/Blog/static/userImages/20170720/1500543360298022450.jpg)
第四步:把kindEditor的语言包引入到jsp
![1500543369392022130.jpg](http://iclyj.cn/Blog/Blog/static/userImages/20170720/1500543369392022130.jpg)
第五步:创建一个textArea控件,作为富文本编辑器的数据源。
![1500543378486060907.jpg](http://iclyj.cn/Blog/Blog/static/userImages/20170720/1500543378486060907.jpg)
第六步:编写js代码初始化KindEditor控件。需要指定textArea控件。
![1500543390033020305.jpg](http://iclyj.cn/Blog/Blog/static/userImages/20170720/1500543390033020305.jpg)
![1500543395658096839.jpg](http://iclyj.cn/Blog/Blog/static/userImages/20170720/1500543395658096839.jpg)
第七步:在提交表单之前,先把富文本编辑器中的内容同步到textArea控件中。
Sync()方法实现。
![1500543421251065927.jpg](http://iclyj.cn/Blog/Blog/static/userImages/20170720/1500543421251065927.jpg)
1.2 流行的编辑器
1、 KindEditor
2、 http://ueditor.baidu.com/website/
3、 Ckeditor http://ckeditor.com/