淘淘商城第五天笔记

传智播客Java学院传智.入云龙

淘淘商城第五天

1第四天内容回顾

商品添加功能的实现

1、富文本编辑器的使用KindEditor。

a)引入js

b)使用js代码初始化KindEditor，需要一个textarea控件。

c)提交表单之前，需要调用sync方法，同步数据。是富文本编辑器和textArea控件

同步数据。

2、商品添加功能实现。

a)向商品表插入数据

b)向商品描述表插入数据

3、商品的规格参数。

a)使用模板的思路。

b)为类商品创建一个规格参数模板。

c)添加商品时，读取模板，基于模板生成一个表单，供用户输入规格参数。

d)使用js把规格参数转换成json数据，保存到数据库

e)读取规格参数，转换成html展示到页面。

2第五天课程计划

1、前台系统搭建

a)服务层

b)表现层

2、商城首页展示

3、实现商品分类展示功能。

4、首页内容管理思路及cms系统。

传智播客Java学院传智.入云龙3前台系统搭建

3.1 系统架构分析

Taotao-manager

controller

service

mapper

Mysql Taotao-rest（服务层）

Service

Mapper

Taotao-portal（门户）

Controller

Service调用

Android IOS微信商城

HTTP调用

查询商品信息，pc端可以查询，移动端也可以查看商品。

下单：pc端可以下单，移动端也可以下单。

可以把业务逻辑提取出来，发布服务，供pc、移动端公用。

好处：

1、提高代码复用度

2、可以灵活的进行分布式部署。

3、系统之间耦合度低

4、团队之间开发不冲突。

缺点：

1、需要发布Webservice，系统之间需要远程调用。

2、工作量增加。

3、需要系统之间协作才能完成整个业务流程，系统之间调用变的复杂。

需要创建两个工程

服务层：taotao-rest：没有表现层，只有业务逻辑。需要发布服务。

表现层：taotao-portal：只有表现层，没有业务逻辑，不需要连接数据库。

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

传智播客Java学院传智.入云龙3.2 创建工程

3.2.1服务层taotao-rest

使用maven管理工程。War包。

3.2.1.1 使用的技术：

1、Mybatis

2、Spring

3、发布服务：cxf、springmvc

3.2.1.2 创建工程

3.2.1.3 框架整合

整合ssm框架。可以参考taotao-manager工程。

传智播客Java学院传智.入云龙

3.2.1.4 P om文件

添加对taotao-manager-dao的依赖。

添加spring的依赖

配置tomcat插件

<project xmlns="/POM/4.0.0"xmlns:xsi="/2001/XMLSchema-instanc e"

xsi:schemaLocation="/POM/4.0.0

/xsd/maven-4.0.0.xsd">

<modelVersion>4.0.0</modelVersion>

<parent>

<groupId>com.taotao</groupId>

<artifactId>taotao-parent</artifactId>

<version>0.0.1-SNAPSHOT</version>

</parent>

<groupId>com.taotao</groupId>

<artifactId>taotao-rest</artifactId>

<version>0.0.1-SNAPSHOT</version>

<packaging>war</packaging>

<dependencies>

<dependency>

<groupId>com.taotao</groupId>

<artifactId>taotao-manager-dao</artifactId>

<version>0.0.1-SNAPSHOT</version>

传智播客Java学院传智.入云龙

</dependency>

<!-- Spring -->

<dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-context</artifactId>

</dependency>

<dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-beans</artifactId>

</dependency>

<dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-webmvc</artifactId>

</dependency>

<dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-jdbc</artifactId>

</dependency>

<dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-aspects</artifactId>

</dependency>

<dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-context-support</artifactId> </dependency>

<dependency>

<groupId>javax.servlet</groupId>

<artifactId>servlet-api</artifactId>

<scope>provided</scope>

</dependency>

<dependency>

<groupId>javax.servlet</groupId>

<artifactId>jsp-api</artifactId>

<scope>provided</scope>

</dependency>

</dependencies>

<!-- 添加tomcat插件 -->

<build>

<plugins>

<plugin>

<groupId>org.apache.tomcat.maven</groupId>

<artifactId>tomcat7-maven-plugin</artifactId>

<configuration>

传智播客Java学院传智.入云龙

<port>8080</port>

<path>/</path>

</configuration>

</plugin>

</plugins>

</build>

</project>

3.2.2表现层taotao-portal

3.2.2.1 使用的技术

1、Spring

2、Springmvc

3.2.2.2 创建工程

3.2.2.3 依赖的jar包

1、taotao-manager-pojo

传智播客Java学院传智.入云龙

2、Spring

3、Tomcat插件

Pom文件：

<project xmlns="/POM/4.0.0"xmlns:xsi="/2001/XMLSchema-instanc e"

xsi:schemaLocation="/POM/4.0.0

/xsd/maven-4.0.0.xsd">

<modelVersion>4.0.0</modelVersion>

<parent>

<groupId>com.taotao</groupId>

<artifactId>taotao-parent</artifactId>

<version>0.0.1-SNAPSHOT</version>

</parent>

<groupId>com.taotao</groupId>

<artifactId>taotao-portal</artifactId>

<version>0.0.1-SNAPSHOT</version>

<packaging>war</packaging>

<dependencies>

<dependency>

<groupId>com.taotao</groupId>

<artifactId>taotao-manager-pojo</artifactId>

<version>0.0.1-SNAPSHOT</version>

</dependency>

<!-- Spring -->

<dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-context</artifactId>

</dependency>

<dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-beans</artifactId>

</dependency>

<dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-webmvc</artifactId>

</dependency>

<dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-jdbc</artifactId>

</dependency>

<dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-aspects</artifactId>

</dependency>

传智播客Java学院传智.入云龙

<dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-context-support</artifactId> </dependency>

<dependency>

<groupId>jstl</groupId>

<artifactId>jstl</artifactId>

</dependency>

<dependency>

<groupId>javax.servlet</groupId>

<artifactId>servlet-api</artifactId>

<scope>provided</scope>

</dependency>

<dependency>

<groupId>javax.servlet</groupId>

<artifactId>jsp-api</artifactId>

<scope>provided</scope>

</dependency>

</dependencies>

<!-- 添加tomcat插件 -->

<build>

<plugins>

<plugin>

<groupId>org.apache.tomcat.maven</groupId>

<artifactId>tomcat7-maven-plugin</artifactId>

<configuration>

<port>8082</port>

<path>/</path>

</configuration>

</plugin>

</plugins>

</build>

</project>

Web.xml

传智播客Java学院传智.入云龙

3.2.2.4 框架整合

Spring和springmvc。

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

3.3 访问首页

创建一个Controller，当访问http://localhost:8082/跳转到首页。请求的url：/index

@Controller

传智播客Java学院传智.入云龙publicclass IndexController {

@RequestMapping("/index")

public String showIndex() {

return"index";

}

}

4首页商品类目展示

4.1 分析

1、类目展示需要异步加载

2、商品类目从数据库中获得，调用taotao-rest发布的服务获得数据。

3、可以在首页中使用js直接调用taotao-rest发布的服务获得数据。需要使用到的json数据格式：

传智播客Java学院传智.入云龙

请求数据的js位置：

传智播客 Java 学院 传智.入云龙

4.2 Js 跨域

4.2.1 什么是跨域

Js 为了安全有一个限制，不允许跨域访问。

1、如果两个url 的域名不同

2、Url 相同，端口不同也是跨域

3、Ip 不同也是跨域

在taotao-portal 中不能使用ajax 直接调用taotao-rest 的服务。

4.2.2 解决跨域的问题

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

1、在js 中不能跨域请求数据，js 可以跨域请求js 片段。

2、可以把数据包装成js 片段。可以把数据使用js 方法来包装，形成一条方法的调用语句。

3、可以使用ajax 请求js 片段，当js 判断到达浏览器会被立即执行。

4、在浏览器端，先创建好回调方法，在回调方法中通过参数可以获得请求的数据。

前期准备：

1、需要把js 的回调方法先写好。

2、做ajax 请求时，需要把回调方法的方法名传递给服务端。

3、服务端接收回调方法名，把数据包装好，响应给客户端。 Taotao-portal

Taotao-rest Ajax 请求json 数据 json Ajax 请求js Js ，其中包含json json 1、请求js 数据 js 执行，调用js 方法，要求此方法已经定

义。

json 2、响应js 3、取出json

传智播客Java学院传智.入云龙

5发布商品列表查询服务

5.1 分析

获得一个分类列表的数据。

从tb_item_cat表中取数据。

可以创建一个pojo描述树形列表的节点，其中包含三个属性u\n\i。U：url String

N：name String

I：items List

publicclass CatNode {

@JsonProperty("u")

private String url;

@JsonProperty("n")

传智播客Java学院传智.入云龙private String name;

@JsonProperty("i")

private List items;

public String getUrl() {

return url;

}

publicvoid setUrl(String url) {

this.url = url;

}

public String getName() {

return name;

}

publicvoid setName(String name) {

= name;

}

public List getItems() {

return items;

}

publicvoid setItems(List items) {

this.items = items;

}

}

publicclass ItemCatResult {

private List data;

public List getData() {

return data;

}

publicvoid setData(List data) {

this.data = data;

}

}

5.2 Dao层

从tb_item_cat表中取数据，单表查询，可以使用逆向工程生成的代码。

传智播客Java学院传智.入云龙

5.3 Service层

返回结果：ItemCatResult

参数：没有

业务逻辑：根据parentid查询子节点列表，并递归调用。

@Service

publicclass ItemCatServiceImpl implements ItemCatService {

@Autowired

private TbItemCatMapper itemCatMapper;

@Override

public ItemCatResult getItemCatList() {

//调用递归方法查询商品分类列表

List catList = getItemCatList(0l);

//返回结果

ItemCatResult result = new ItemCatResult();

result.setData(catList);

return result;

}

private List getItemCatList(Long parentId) {

//根据parentId查询列表

TbItemCatExample example = new TbItemCatExample();

Criteria criteria = example.createCriteria();

criteria.andParentIdEqualTo(parentId);

//执行查询

List<TbItemCat>list = itemCatMapper.selectByExample(example);

List resultList = new ArrayList<>();

for (TbItemCat tbItemCat : list) {

//如果是父节点

if (tbItemCat.getIsParent()) {

CatNode node = new CatNode();

node.setUrl("/products/"+tbItemCat.getId()+".html");

//如果当前节点为第一级节点

if (tbItemCat.getParentId() == 0) {

node.setName("<a

href='/products/"+tbItemCat.getId()+".html'>"+tbItemCat.getName()+"</a>");

} else {

node.setName(tbItemCat.getName());

}

node.setItems(getItemCatList(tbItemCat.getId()));

//把node添加到列表

resultList.add(node);

传智播客Java学院传智.入云龙

} else {

//如果是叶子节点

String item = "/products/"+tbItemCat.getId()+".html|" + tbItemCat.getName();

resultList.add(item);

}

}

return resultList;

}

}

5.4 Controller

响应一个json数据。判断callback参数是否为空，如果为空正常返回json数据，如果不为空，支持jsonp调用。

需要使用@ResponseBody注解。

支持jsonp两种方式：

第一种：直接响应字符串

@Controller

@RequestMapping("/item/cat")

publicclass 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 + ");";

}

}

第二种方法：

传智播客Java学院传智.入云龙

要求springmvc必须是4.1以上版本。

MappingJacksonV alue

//第二种方法

@RequestMapping(value="/list")

@ResponseBody

public Object getItemCatList(String callback) {

ItemCatResult result = itemCatService.getItemCatList();

if (StringUtils.isBlank(callback)) {

//需要把result转换成字符串

return result;

}

//如果字符串不为空，需要支持jsonp调用

MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(result);

mappingJacksonValue.setJsonpFunction(callback);

return mappingJacksonValue;

}

5.5 Portal中js处理

传智播客Java学院传智.入云龙

本文来源：https://www.bwwdw.com/article/kne4.html