淘淘商城--前台首页商品类目js跨域调用展示

上一篇我们讲到了首页左侧栏的商品分类类目的展示，效果如下：



以上这种是基于同一个项目中，ajax直接请求获得json数据的，不涉及不同项目（url、ip、域名、或者端口有一个不同就是跨域）之间的服务请求调用，属于本项目中的静态调用，如果想动态发布rest服务，并在其他项目中进行js调用，则必须使用jquery的GetJSONP方法跨域进行数据的请求



一、我们在rest项目中，根据category.json数据的格式，创建两个pojo（类）如下：





ItemCatResult.java

package com.taotao.rest.pojo;

import java.util.List;

public class ItemCatResult {
private List data ;

public List getData() {
return data;
}

public void setData(List data) {
this.data = data;
}

}

CatNode.java

package com.taotao.rest.pojo;

import java.util.List;

import com.fasterxml.jackson.annotation.JsonProperty;

public class CatNode {

//JsonProperty注解作用于属性 -- 把属性名称序列化另外一个名称
@JsonProperty("u")
private String url  ;

@JsonProperty("n")
private String name ;

@JsonProperty("i")
private List   items;

public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List getItems() {
return items;
}
public void setItems(List items) {
this.items = items;
}

}

二、创建Service，基于tb_item_cat的单表查询，返回一个ItemCatResult对象（mybatis逆向工程+方法递归调用）



ItemCatService.java(接口)

package com.taotao.rest.service;

import com.taotao.rest.pojo.ItemCatResult;

public interface ItemCatService {
ItemCatResult getItemCatList();
}

ItemCatServiceImpl.java（接口实现）

package com.taotao.rest.service.impl;

import java.util.ArrayList;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.taotao.mapper.TbItemCatMapper;
import com.taotao.pojo.TbItemCat;
import com.taotao.pojo.TbItemCatExample;
import com.taotao.pojo.TbItemCatExample.Criteria;
import com.taotao.rest.pojo.CatNode;
import com.taotao.rest.pojo.ItemCatResult;
import com.taotao.rest.service.ItemCatService;

/**
* <p>Title: ItemCatServiceImpl.java</p>
* <p>Description:商品类目JSON数据封装，递归调用实现 </p>
* <p>Blog: http://blog.csdn.net/appleyk</p> * @author Appleyk
* @date 2017年11月6日 下午5:18:16
* @version 1.0
*/

@Service
public class ItemCatServiceImpl implements ItemCatService {

@Autowired
TbItemCatMapper itemcatMapper;
@Override
public ItemCatResult getItemCatList() {
ItemCatResult result = new ItemCatResult();
result.setData(getItemCatList(0l));//参数是bigint类型，对应Long
return result;
}

//方法的递归调用，根据是否是一级根节点（parent_id = 0）封装数据，最终返回一个list
//是否是叶子节点，也要判断一下，is_parent == true ?
public List getItemCatList(long parentID){
TbItemCatExample example = new TbItemCatExample();
Criteria criteria = example.createCriteria();
//根据父节点ID进行递归查询，从0开始
criteria.andParentIdEqualTo(parentID);
List<TbItemCat> list = itemcatMapper.selectByExample(example);

List resultList = new ArrayList<>();//这个是要返回的结果
int count = 0;//这里我们控制只显示14个商品分类，多的pass
//遍历list
for (TbItemCat item : list) {
if(count>=14){
break;
}
//1.如果当前的商品是根(父)节点的话
if(item.getIsParent()){
CatNode node = new CatNode();
//拼接商品URL
node.setUrl("/products/"+item.getId()+".html");
//如果当前节点的parent_id=0的话，说明它是一级根节点，一级节点封装如下
if(item.getParentId() ==0){
count++;//这里一级根节点++
node.setName("<a href='/products/"+item.getId()+".html'>"+item.getName()+"</a>");
}
else{//如果不等于0的说，证明此节点是二级节点，二级节点封装如下
//二级节点的话，直接拿到name字段
node.setName(item.getName());
}
//递归调用，把当前的id（主键）作为查询条件，去匹配其子节点
node.setItems(getItemCatList(item.getId()));//这里递归调用
//把node添加到列表
resultList.add(node);
}
else{//如果当前是叶子节点的话（is_parent == 0 false）
//拼接字符串，i == items,
/**
"i": [
"/products/66.html|艺术/设计/收藏" ,
"/products/67.html|经济管理"      ,
"/products/68.html|文化/学术"     ,
"/products/69.html|少儿文学/国学"
]

i
0	"/products/90.html|电风扇"
1	"/products/91.html|冷风扇"
2	"/products/92.html|净化器"
3	"/products/93.html|饮水机"
*/
String i = "/products/"+item.getId()+".html|"+item.getName();
resultList.add(i);//这个单独（另外加）
}
}
//遍历over后，返回最终的数据集
return resultList;
}
}

三、创建Controller，发布服务并测试



（1）：直接返回一个result，不考虑callback回调参数方法名

ItemCatController.java

package com.taotao.rest.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.taotao.rest.pojo.ItemCatResult;
import com.taotao.rest.service.ItemCatService;

/**
* 商品分类查询 Controller
* <p>Title: ItemCatController.java</p>
* <p>Description: </p>
* <p>Blog: http://blog.csdn.net/appleyk</p> * @author Appleyk
* @date 2017年11月6日 下午6:40:59
* @version 1.0
*/
@Controller
@RequestMapping("/item/cat")
public class ItemCatController {

@Autowired
private ItemCatService itemCatService;

//1.不考虑callback参数
@RequestMapping("/list")
@ResponseBody //没有callback参数，不用考虑JSONP调用
private ItemCatResult getItemCatList(){
ItemCatResult result = itemCatService.getItemCatList();
return result;
}
}

服务测试：http:localhost:8081/rest/item/cat/list?callback=func_name



（2）：考虑请求的url中是否带有callback参数

A.利用JsonUtils工具类转化对象为JSON字符串,并返回

ItemCatController.java

package com.taotao.rest.controller;

import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.taotao.common.utils.JsonUtils;
import com.taotao.rest.pojo.ItemCatResult;
import com.taotao.rest.service.ItemCatService;

/**
* 商品分类查询 Controller
* <p>Title: ItemCatController.java</p>
* <p>Description: </p>
* <p>Blog: http://blog.csdn.net/appleyk</p> * @author Appleyk
* @date 2017年11月6日 下午6:40:59
* @version 1.0
*/
@Controller
@RequestMapping("/item/cat")
public class ItemCatController {

@Autowired
private ItemCatService itemCatService;

//1.不考虑callback参数
//	@RequestMapping("/list")
//	@ResponseBody //没有callback参数，不用考虑JSONP调用
//	private ItemCatResult getItemCatList(){
//	   ItemCatResult result = itemCatService.getItemCatList();
//	   return result;
//	}
//2.直接返回String类型的json串,利用JsonUtils工具类转化对象为JSON字符串
@RequestMapping("/list")
@ResponseBody //有callback参数，考虑是否JSONP调用
private String getItemCatList(String callback){
ItemCatResult result = itemCatService.getItemCatList();
//如果这个callback等于空的话，直接返回json串
if(StringUtils.isBlank(callback)){
String json = JsonUtils.objectToJson(result);
return json;
}
//否则的话，拼接一下这个callback，返回一个回调js片段，里面包含json数据
//供js跨域调用----jsonp

String json = JsonUtils.objectToJson(result);
return callback+"("+json+");";
}
}

出现这种情况，需要指定一下响应数据的类型以及字符集的编码



无callback参数的服务请求：http://localhost:8081/rest/item/cat/list



有callback参数的服务请求：http://localhost:8081/rest/item/cat/list?callback=func_calltest

首：



尾：



B.使用MappingJacksonValue类

ItemCatController.java

package com.taotao.rest.controller;

import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.converter.json.MappingJacksonValue;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.taotao.rest.pojo.ItemCatResult;
import com.taotao.rest.service.ItemCatService;

/**
* 商品分类查询 Controller
* <p>Title: ItemCatController.java</p>
* <p>Description: </p>
* <p>Blog: http://blog.csdn.net/appleyk</p> * @author Appleyk
* @date 2017年11月6日 下午6:40:59
* @version 1.0
*/
@Controller
@RequestMapping("/item/cat")
public class ItemCatController {

@Autowired
private ItemCatService itemCatService;

//1.不考虑callback参数
//	@RequestMapping("/list")
//	@ResponseBody //没有callback参数，不用考虑JSONP调用
//	private ItemCatResult getItemCatList(){
//	   ItemCatResult result = itemCatService.getItemCatList();
//	   return result;
//	}
//2.直接返回String类型的json串,利用JsonUtils工具类转化对象为JSON字符串
//	@RequestMapping(value="/list",produces=MediaType.APPLICATION_JSON_VALUE+";charset=utf-8")
//	@ResponseBody //有callback参数，考虑是否JSONP调用
//	private String getItemCatList(String callback){
//	   ItemCatResult result = itemCatService.getItemCatList();
//	   //如果这个callback等于空的话，直接返回json串
//	   if(StringUtils.isBlank(callback)){
//		   String json = JsonUtils.objectToJson(result);
//		   return json;
//	   }
//	   //否则的话，拼接一下这个callback，返回一个回调js片段，里面包含json数据
//	   //供js跨域调用----jsonp
//
//	   String json = JsonUtils.objectToJson(result);
//	   return callback+"("+json+");";
//	}
//3. 使用MappingJacksonValue类封装一个pojo,供js跨域调用----jsonp形式
@RequestMapping("/list")
@ResponseBody //有callback参数，考虑是否JSONP调用
private Object getItemCatList(String callback){
ItemCatResult result = itemCatService.getItemCatList();
//如果这个callback等于空的话，直接返回result,交给@ResponseBody注解处理成JSON对象
if(StringUtils.isBlank(callback)){
return result;
}
//支持jsonp调用，需要Spring版本4.1+
MappingJacksonValue mjkVal = new MappingJacksonValue(result);
mjkVal.setJsonpFunction(callback);
return mjkVal;
}
}

效果和第二种方式一样，这里放出一个无callback参数的服务调用，看一下，是否是只展示了14个商品分类节点





在Mysql数据库中查询一下，测试一下，数据节点是不是对号入座

查询语句：

use taotao;
SELECT @row_no:=@row_no+1 as row_id,name FROM tb_item_cat ,(select @row_no:=0)  t
where parent_id = 0

四、门户模块potal，商城首页-->商品分类展示--->js跨域数据请求的实现



保存后，运行taotao-portal（端口:8082）



测试：http://localhost:8082/