淘淘商城开发第五天

第五天（前台系统搭建）

图片6.png

需要创建两个工程
服务层：taotao-rest：没有表现层，只有业务逻辑。需要发布服务。（打包方式war）
表现层：taotao-portal：只有表现层，没有业务逻辑，不需要连接数据库。(war)

表现层和服务层通信，使用Webservice进行通信。Restful形式的Webservice。http+json数据。

taotao-rest(依赖于taotao-parent和taotao-dao，要和数据库打交道)

1543806788(1).png

taotao-portal(依赖于taotao-parent和taotao-pojo)

1543807051(1).png

web.xml

图片7.png

Maven安装工程到本地仓库，跳过测试：clean install -DskipTests

商品列表展示

图片8.png

分析：

1. 类目展示需要异步加载
2. 商品类目从数据库中获得，调用taotao-rest发布的服务获得数据。
3. Js为了安全有一个限制，不允许跨域访问。
   1. 两个url的域名不同
   2. Url相同，端口不同也是跨域
   3. Ip不同也是跨域
      在taotao-portal中不能使用ajax直接调用taotao-rest的服务。

可以使用jsonp解决跨域的问题。

1、在js中不能跨域请求数据，js可以跨域请求js片段。
2、可以把数据包装成js片段。可以把数据使用js方法来包装，形成一条方法的调用语句。
3、可以使用ajax请求js片段，当js判断到达浏览器会被立即执行。
4、在浏览器端，先创建好回调方法，在回调方法中通过参数可以获得请求的数据。

public class CatNode {
    
    @JsonProperty("u")//别名的使用
    private String url;
    
    @JsonProperty("n")
    private String name;
    
    @JsonProperty("i")
    private List items;
}

@Controller
@RequestMapping("/item/cat")
public class ItemCatController {

    @Autowired
    private ItemCatService itemCatService;
    
    @RequestMapping(value="/list",produces=MediaType.APPLICATION_JSON_VALUE+";charset=utf-8")
    @ResponseBody
    public String getItemCatList(String callback) {
        ItemCatResult result = itemCatService.getItemCatList();
        if(StringUtils.isBlank(callback)) {
            //需要把result转换成字符串
            String json = JsonUtils.objectToJson(result);
            return json;
        } 
        //如果字符串不为空，需要支持jsonp调用
        //需要把result转换成字符串
        String json = JsonUtils.objectToJson(result);
        return callback + "(" + json + ");";
    }
}