商品添加功能的实现
- 富文本编辑器的使用KindEditor。
- 引入js
- 使用js代码初始化KindEditor，需要一个textarea控件。
- 提交表单之前，需要调用sync方法，同步数据。是富文本编辑器和textArea控件同步数据。
- 商品添加功能实现。
- 向商品表插入数据
- 向商品描述表插入数据
- 商品的规格参数。
- 使用模板的思路。
- 为类商品创建一个规格参数模板。
- 添加商品时，读取模板，基于模板生成一个表单，供用户输入规格参数。
- 使用js把规格参数转换成json数据，保存到数据库
- 读取规格参数，转换成html展示到页面。
- 前台系统搭建
- 服务层
- 表现层
- 商城首页展示
- 实现商品分类展示功能。
- 首页内容管理思路及cms系统。
查询商品信息，pc端可以查询，移动端也可以查看商品。
下单：pc端可以下单，移动端也可以下单。
可以把业务逻辑提取出来，发布服务，供pc、移动端公用。
好处：
- 提高代码复用度
- 可以灵活的进行分布式部署。
- 系统之间耦合度低
- 团队之间开发不冲突。
缺点：
- 需要发布Webservice，系统之间需要远程调用。
- 工作量增加。
- 需要系统之间协作才能完成整个业务流程，系统之间调用变的复杂。
需要创建两个工程
服务层：taotao-rest：没有表现层，只有业务逻辑。需要发布服务。
表现层：taotao-portal：只有表现层，没有业务逻辑，不需要连接数据库。
表现层和服务层通信，使用Webservice进行通信。Restful形式的Webservice。http+json数据。
创建工程 服务层taotao-rest使用maven管理工程：War包。
使用的技术- Mybatis
- Spring
- 发布服务：cxf、springmvc
整合ssm框架（可以参考taotao-manager工程）
修改说明：
Spring默认配置了视图解析器，如果springmvc.xml中没有配置，默认也可以使用jsp
在对应springmvc的依赖jar中查看相关的信息
orgspringframeworkspring-webmvc4.1.3.RELEASEspring-webmvc-4.1.3.RELEASE.jar
org.springframework.web.servlet包下有DispatcherServlet.properties，默认配置了视图解析器
Web.xml文件复制：修改两个内容--项目名称、拦截路径、控制器
Pom文件taotao-rest index.html index.htm index.jsp default.html default.htm default.jsp contextConfigLocation classpath:spring/applicationContext-*.xml org.springframework.web.context.ContextLoaderListener CharacterEncodingFilter org.springframework.web.filter.CharacterEncodingFilter encoding utf-8 CharacterEncodingFilter /* taotao-rest org.springframework.web.servlet.DispatcherServlet contextConfigLocation classpath:spring/springmvc.xml 1 taotao-rest /rest/*
添加对taotao-manager-dao的依赖
添加spring的依赖
配置tomcat插件
表现层taotao-portal 使用的技术4.0.0 com.taotao taotao-parent0.0.1-SNAPSHOT com.taotao taotao-rest0.0.1-SNAPSHOT war com.taotao taotao-manager-mapper0.0.1-SNAPSHOT org.springframework spring-contextorg.springframework spring-beansorg.springframework spring-webmvcorg.springframework spring-jdbcorg.springframework spring-aspectsjavax.servlet servlet-apiprovided javax.servlet jsp-apiprovided redis.clients jedisorg.apache.solr solr-solrjorg.apache.tomcat.maven tomcat7-maven-plugin8081 /
- Spring
- Springmvc
- taotao-manager-pojo
- Spring
- Tomcat插件
Pom文件：
4.0.0 com.taotao taotao-parent0.0.1-SNAPSHOT com.taotao taotao-portal0.0.1-SNAPSHOT war com.taotao taotao-common0.0.1-SNAPSHOT com.taotao taotao-manager-pojo0.0.1-SNAPSHOT junit junittest org.springframework spring-contextorg.springframework spring-beansorg.springframework spring-webmvcorg.springframework spring-jdbcorg.springframework spring-aspectsjstl jstljavax.servlet servlet-apiprovided javax.servlet jsp-apiprovided org.apache.tomcat.maven tomcat7-maven-plugin8082 /
添加Web.xml文件：
框架整合taotao-portal index.html index.htm index.jsp default.html default.htm default.jsp contextConfigLocation classpath:spring/applicationContext-*.xml org.springframework.web.context.ContextLoaderListener CharacterEncodingFilter org.springframework.web.filter.CharacterEncodingFilter encoding utf-8 CharacterEncodingFilter /* taotao-portal org.springframework.web.servlet.DispatcherServlet contextConfigLocation classpath:spring/springmvc.xml 1 taotao-portal *.html
Spring和springmvc
运行过程中可能会报错，要先将相应的工程导入仓库（taotao-manager-pojo、taotao-manager），Maven安装工程到本地仓库，跳过测试：mvn clean install -DskipTests
访问首页将静态文件导入到相应的webapp文件夹下
创建一个Controller，当访问http://localhost:8082/跳转到首页。
请求的url：/index
@Controller
public class IndexController {
@RequestMapping("/index")
public String showIndex() {
return "index";
}
}
启动tomcat测试：clean tomcat7:run,请求路径：http://localhost:8082/index.html、http://localhost:8082/
http://localhost:8082/index无法访问（拦截器）
首页商品类目展示 分析- 类目展示需要异步加载
- 商品类目从数据库中获得，调用taotao-rest发布的服务获得数据
- 可以在首页中使用js直接调用taotao-rest发布的服务获得数据
复制对应的内容，在webapp下创建category.json
需要使用到的json数据格式如下：（借助JSON Viewer：format格式化，viewer查看视图）
可以通过浏览器直接访问到category.json：http://localhost:8082/category.json
请求数据的js位置：index.jsp-->header.jsp-->lib-vl.js
将category.json放到taotao-rest的webapp文件夹下，重启taotao-rest服务器访问
localhost：8081/category.json
此时再次修改lib-v1.js文件，实现由taotao-portal访问taotao-rest的category.json进行测试，出现如下问题：涉及到js跨域问题
Js跨域 什么是跨域Js为了安全有一个限制，不允许跨域访问。
- 如果两个url的域名不同
- Url相同，端口不同也是跨域
- Ip不同也是跨域
在taotao-portal中不能使用ajax直接调用taotao-rest的服务。
解决跨域的问题可以使用jsonp解决跨域的问题。
1、在js中不能跨域请求数据，js可以跨域请求js片段。
2、可以把数据包装成js片段。可以把数据使用js方法来包装，形成一条方法的调用语句。
3、可以使用ajax请求js片段，当js判断到达浏览器会被立即执行。
4、在浏览器端，先创建好回调方法，在回调方法中通过参数可以获得请求的数据。
前期准备：
- 需要把js的回调方法先写好。（将json数据作为参数封装到某个方法）
- 做ajax请求时，需要把回调方法的方法名传递给服务端
- 服务端接收回调方法名，把数据包装好，响应给客户端
在测试的时候需要先将taotao-rest服务启动，随后再将taotao-portal启动进行测试
分析（获取动态数据）获得一个分类列表的数据，从tb_item_cat表中取数据。
可以创建一个pojo描述树形列表的节点，其中包含三个属性uni。
U：url String
N：name String
I：items List
在taotao-rest创建com.taotao.rest.pojo包，添加CatNode类
package com.taotao.rest.pojo;
import java.util.List;
import com.fasterxml.jackson.annotation.JsonProperty;
public class CatNode {
@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;
}
}
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;
}
}
Dao层
从tb_item_cat表中取数据，单表查询，可以使用逆向工程生成的代码。
Service层返回结果：ItemCatResult
参数：没有
业务逻辑：根据parentid查询子节点列表，并递归调用。
public interface ItemCatService {
// 获取分类列表
public ItemCatResult getItemCatList();
}
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;
@Service
public class 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 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(""+tbItemCat.getName()+"");
} else {
node.setName(tbItemCat.getName());
}
node.setItems(getItemCatList(tbItemCat.getId()));
//把node添加到列表
resultList.add(node);
} else {
//如果是叶子节点
String item = "/products/"+tbItemCat.getId()+".html|" + tbItemCat.getName();
resultList.add(item);
}
}
return resultList;
}
}
Controller
响应一个json数据。判断callback参数是否为空，如果为空正常返回json数据，如果不为空，支持jsonp调用。
需要使用@ResponseBody注解。
测试：
@Controller
@RequestMapping("/item/cat")
public class ItemCatController {
@Autowired
private ItemCatService itemCatService;
@RequestMapping(value="/list")
@ResponseBody
public ItemCatResult testGetItemCatList() {
return itemCatService.getItemCatList();
}
}
访问测试：
http://localhost:8081/rest/item/cat/list
支持jsonp两种方式：
第一种：直接响应字符串（乱码问题解决）
@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 + ");";
}
http://localhost:8081/rest/item/cat/list数据正常访问
第二种方法：
要求springmvc必须是4.1以上版本。
MappingJacksonValue
@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;
}
访问测试：
http://localhost:8081/rest/item/cat/list?callback=function1
http://localhost:8081/rest/item/cat/list?callback=functionn
......
Portal中js处理限制节点个数，不然会默认将所有的分类节点查找出来：在taotao-rest服务端进行处理
