B2Ctt商城05 前台首页商品展示

1、 前台系统搭建

前台系统就是淘淘商城。

前台系统和后台系统是分开的，只在数据库层面有关系。都是同一个数据库。

【后台系统】【客户端(pc)】



3 服务层工程搭建

使用maven创建一个war工程。

3.1 创建工程 taotao-rest

使用技术

1、Mybatis

2、Spring

3、Springmvc

使用8081端口

需要修改pom.xml添加如下内容：

<build>
<!-- 配置插件 -->
<plugins>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<configuration>
<port>8081</port>
<path>/</path>
</configuration>
</plugin>
</plugins>
</build>

3.3.5 安装taotao-manager到本地仓库

安装时提示ftptest 需要打开ftp，关掉

Maven命令：install -DskipTests

跳过测试

4 门户系统搭建 taotao-portal

4.1 使用到的技术

1、Spring

2、Springmvc

3、Jstl、jQuery

4、httpClient（使用java代码模拟浏览器）

使用8082端口

快捷键 Go to Line Ctrl+L



配置好pom文件后， clean tomcat7:run 运行

5 商品分类展示

首页左侧有一个商品分类。当鼠标分类上，需要展示出此分类下的子分类。

当鼠标滑动到连接上触发mousemove事件。页面做一个ajax请求，请求json数据包含分类信息，得到json数据后初始化分类菜单，展示。





json数据由rest 服务提供，但是就跨域了

5.3 Ajax跨域请求

5.3.1 跨域问题

什么是跨域：

1、域名不同时。

2、域名相同，端口不同。

只有域名相同、端口相同时，才可以访问。

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

5.3.2 什么是jsonp？

Jsonp其实就是一个跨域解决方案。Js跨域请求数据是不可以的，但是js跨域请求js脚本是可以的。可以把数据封装成一个js语句，做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。

//使用jsonp来实现跨域请求
$.getJSONP(this.URL_Serv, category.getDataService);

从数据库中取数据

dao 商品分类表，使用逆向工程

servioce

* 新建bean 根据json串

{“data”:[{“u”:”/products/1.html”,”n”:”

1、分类列表的节点。包含u、n、i属性。
public class CatNode {
这个注解可以把该属性转换成json字符串中指定的属性
@JsonProperty("n")
private String name;
@JsonProperty("u")
private String url;
@JsonProperty("i")
private List<?> item;
}

2、返回值pojo。包含data属性是一个list类型。

public class CatResult {
private List<?> data;
}

service代码

@Service
public class ItemCatServiceImpl implements ItemCatService {

@Autowired
private TbItemCatMapper itemCatMapper;

@Override
public CatResult getItemCatList() {

CatResult catResult = new CatResult();
//查询分类列表
catResult.setData(getCatList(0));
return catResult;
}

使用了递归的思想
思路：1、根据parentId 查询下面所有的子节点 (开启一个方法)
2、根据parentId查询出所有子节点以后 便利 创建node对象
3、根据不同情况设置不同的属性  参考json图片
/**
* 查询分类列表
*/
private List<?> getCatList(long parentId) {
//创建查询条件
TbItemCatExample example = new TbItemCatExample();
Criteria criteria = example.createCriteria();
criteria.andParentIdEqualTo(parentId);
//执行查询
List<TbItemCat> list = itemCatMapper.selectByExample(example);
//返回值list
List resultList = new ArrayList<>();
//向list中添加节点
for (TbItemCat tbItemCat : list) {
//判断是否为父节点
if (tbItemCat.getIsParent()) {
CatNode catNode = new CatNode();
if (parentId == 0) {
catNode.setName("<a href='/products/"+tbItemCat.getId()+".html'></a>");
} else {
catNode.setName(tbItemCat.getName());
}
catNode.setUrl("/products/"+tbItemCat.getId()+".html");
// 递归   catNode.setItem(getCatList(tbItemCat.getId()));

resultList.add(catNode);
//如果是叶子节点
} else {
resultList.add("/products/"+tbItemCat.getId()+".html|" + tbItemCat.getName());
}
}
return resultList;
}

}

controller

@RequestMapping(value=”/itemcat/list”,

produces={MediaType.APPLICATION_JSON_VALUE + “;charset=utf-8”})

// 声明是json格式数据, 2处理编码

@ResponseBody

public String getItemCatList(String callback) {

CatResult catResult = itemCatService.getItemCatList();

//把pojo转换成字符串

String json = JsonUtils.objectToJson(catResult);

//拼装返回值

return callback + “(” + json + “);”;

}

方法2

@RequestMapping(“/itemcat/list”)

@ResponseBody

public Object getItemCatList(String callback) {

CatResult catResult = itemCatService.getItemCatList();

// springmvc4.1 以后 帮你转换，给一个前缀,进行封装

MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);

mappingJacksonValue.setJsonpFunction(callback);

return mappingJacksonValue;

}

【插播】me 复制一行的快捷键

Ctrl+Alt+↓

Intel电脑的，默认的这个快捷键是旋转屏幕！关闭方法 桌面右键—》图形选项—》快捷键–》禁用