淘淘商城（前台系统，展示商城首页，商品分类展示）
-
- 1、前台系统和后台系统的关系
- 2、前台系统的搭建
- 3、服务端工程的搭建
- 3.1 创建工程
- 3.2 使用到的技术
- 3.3 配置工程
- 3.3.1 pom.xml
- 3.3.2 web.xml
- 3.3.3 框架整合
- 3.3.4 安装taotao-manager到本地仓库
- 4、门户系统搭建
- 4.1 使用到的技术
- 4.2 创建工程
- 4.3 配置工程
- 4.3.1 Pom文件
- 4.3.2 Web.xml
- 4.3.3 框架整合
- 4.3.4 Tomcat插件配置
- 4.3.5 添加jsp文件
- 4.3.6 首页
- 5 商品分类展示
- 5.1 Json数据的格式
- 5.2 使用ajax访问本工程的json数据
- 5.3 Ajax跨域请求
- 5.3.1 跨域问题
- 5.3.2 什么是jsonp？
- 5.3.3 jsonp的原理
- 5.3.4 本项目的jsonp
- 5.4 从数据库中取商品分类列表
- 5.4.1 Dao层
- 5.4.2 Service层
- 5.5 Controller
1、前台系统和后台系统的关系
前台系统就是淘淘商城。
前台系统和后台系统是分开的，只在数据库层面有关系。都是同一个数据库。
2、前台系统的搭建
优点：
1、前台系统和服务层可以分开，降低系统的耦合度。
2、开发团队可以分开，提高开发效率
3、系统分开可以灵活的进行分布式部署。
缺点：
服务之间通信使用接口通信，开发工作量提高。
前台系统分为两部分，一部分是服务层web工程，功能就是发布服务
另外一部分：表现层，展示页面，没有业务逻辑。所有业务逻辑就是调用服务层的服务。
3、服务端工程的搭建
使用maven创建一个war工程
3.1 创建工程
所有的工程都需要继承taotao-parent
3.2 使用到的技术
1、Mybatis
2、Spring
3、Springmvc：发布rest风格的服务
3.3 配置工程
3.3.1 pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0modelVersion>
<parent>
<groupId>com.taotaogroupId>
<artifactId>taotao-parentartifactId>
<version>0.0.1-SNAPSHOTversion>
parent>
<groupId>com.taotaogroupId>
<artifactId>taotao-restartifactId>
<version>0.0.1-SNAPSHOTversion>
<packaging>warpackaging>
<dependencies>
<dependency>
<groupId>com.taotaogroupId>
<artifactId>taotao-manager-mapperartifactId>
<version>0.0.1-SNAPSHOTversion>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-contextartifactId>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-beansartifactId>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-webmvcartifactId>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-jdbcartifactId>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-aspectsartifactId>
dependency>
<dependency>
<groupId>javax.servletgroupId>
<artifactId>servlet-apiartifactId>
<scope>providedscope>
dependency>
<dependency>
<groupId>javax.servletgroupId>
<artifactId>jsp-apiartifactId>
<scope>providedscope>
dependency>
<dependency>
<groupId>redis.clientsgroupId>
<artifactId>jedisartifactId>
dependency>
dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.tomcat.mavengroupId>
<artifactId>tomcat7-maven-pluginartifactId>
<configuration>
<port>8081port>
<path>/path>
configuration>
plugin>
plugins>
build>
project>
3.3.2 web.xml
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="taotao" version="2.5">
<display-name>taotao-restdisplay-name>
<welcome-file-list>
<welcome-file>index.htmlwelcome-file>
<welcome-file>index.htmwelcome-file>
<welcome-file>index.jspwelcome-file>
<welcome-file>default.htmlwelcome-file>
<welcome-file>default.htmwelcome-file>
<welcome-file>default.jspwelcome-file>
welcome-file-list>
<context-param>
<param-name>contextConfigLocationparam-name>
<param-value>classpath:spring/applicationContext-*.xmlparam-value>
context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListenerlistener-class>
listener>
<filter>
<filter-name>CharacterEncodingFilterfilter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class>
<init-param>
<param-name>encodingparam-name>
<param-value>utf-8param-value>
init-param>
filter>
<filter-mapping>
<filter-name>CharacterEncodingFilterfilter-name>
<url-pattern>/*url-pattern>
filter-mapping>
<servlet>
<servlet-name>taotao-managerservlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
<init-param>
<param-name>contextConfigLocationparam-name>
<param-value>classpath:spring/springmvc.xmlparam-value>
init-param>
<load-on-startup>1load-on-startup>
servlet>
<servlet-mapping>
<servlet-name>taotao-managerservlet-name>
<url-pattern>/rest/*url-pattern>
servlet-mapping>
web-app>
3.3.3 框架整合
参考taotao-manager
其中在SpringMVC.xml里面不需要配置静态资源映射，因为访问路径是/rest/,而不是 / ,所以不需要配置，具体的原因请看
https://blog.csdn.net/u012730299/article/details/51872704
3.3.4 安装taotao-manager到本地仓库
Maven命令：install -DskipTests
跳过测试
需要把taotao-manager、taotao-manager-pojo、taotao-manager-mapper都安装到本地仓库
4、门户系统搭建
4.1 使用到的技术
1、Spring
2、Springmvc
3、Jstl、jQuery
4、httpClient（使用java代码模拟浏览器），门户系统调用服务
4.2 创建工程
4.3 配置工程
4.3.1 Pom文件
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0modelVersion>
<parent>
<groupId>com.taotaogroupId>
<artifactId>taotao-parentartifactId>
<version>0.0.1-SNAPSHOTversion>
parent>
<groupId>com.taotaogroupId>
<artifactId>taotao-portalartifactId>
<version>0.0.1-SNAPSHOTversion>
<packaging>warpackaging>
<dependencies>
<dependency>
<groupId>com.taotaogroupId>
<artifactId>taotao-commonartifactId>
<version>0.0.1-SNAPSHOTversion>
dependency>
<dependency>
<groupId>com.taotaogroupId>
<artifactId>taotao-manager-pojoartifactId>
<version>0.0.1-SNAPSHOTversion>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-contextartifactId>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-beansartifactId>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-webmvcartifactId>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-jdbcartifactId>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-aspectsartifactId>
dependency>
<dependency>
<groupId>jstlgroupId>
<artifactId>jstlartifactId>
dependency>
<dependency>
<groupId>javax.servletgroupId>
<artifactId>servlet-apiartifactId>
<scope>providedscope>
dependency>
<dependency>
<groupId>javax.servletgroupId>
<artifactId>jsp-apiartifactId>
<scope>providedscope>
dependency>
dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.tomcat.mavengroupId>
<artifactId>tomcat7-maven-pluginartifactId>
<configuration>
<port>8082port>
<path>/path>
configuration>
plugin>
plugins>
build>
project>
4.3.2 Web.xml
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="taotao" version="2.5">
<display-name>taotao-portaldisplay-name>
<welcome-file-list>
<welcome-file>index.htmlwelcome-file>
<welcome-file>index.htmwelcome-file>
<welcome-file>index.jspwelcome-file>
<welcome-file>default.htmlwelcome-file>
<welcome-file>default.htmwelcome-file>
<welcome-file>default.jspwelcome-file>
welcome-file-list>
<context-param>
<param-name>contextConfigLocationparam-name>
<param-value>classpath:spring/applicationContext-*.xmlparam-value>
context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListenerlistener-class>
listener>
<filter>
<filter-name>CharacterEncodingFilterfilter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class>
<init-param>
<param-name>encodingparam-name>
<param-value>utf-8param-value>
init-param>
filter>
<filter-mapping>
<filter-name>CharacterEncodingFilterfilter-name>
<url-pattern>/*url-pattern>
filter-mapping>
<servlet>
<servlet-name>taotao-managerservlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
<init-param>
<param-name>contextConfigLocationparam-name>
<param-value>classpath:spring/springmvc.xmlparam-value>
init-param>
<load-on-startup>1load-on-startup>
servlet>
<servlet-mapping>
<servlet-name>taotao-managerservlet-name>
<url-pattern>*.htmlurl-pattern>
servlet-mapping>
web-app>
4.3.3 框架整合
这个时候的静态资源需要放在webapp下面，这样就可以直接的访问了
4.3.4 Tomcat插件配置
端口是8082
<build>
<plugins>
<plugin>
<groupId>org.apache.tomcat.mavengroupId>
<artifactId>tomcat7-maven-pluginartifactId>
<configuration>
<port>8082port>
<path>/path>
configuration>
plugin>
plugins>
build>4.3.5 添加jsp文件
4.3.6 首页
package com.taotao.portal.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.taotao.common.pojo.TaotaoResult;
import com.taotao.portal.service.ContentService;
/**
* @author 作者 E-mail: River [email protected]
* @version 创建时间：2018年5月7日 上午10:00:31
* 类说明:展示首页
*/
@Controller
public class indexController {
@Autowired
private ContentService contentService;
@RequestMapping("/index")
public String showIndex(Model model){
String adJson=contentService.getContentList();
model.addAttribute("ad1", adJson);
return "index";
}
}当在访问http://localhost:8082的时候会在web.xml中找欢迎页面，找到之后被上面的controller拦截热案后跳转到WEB-INF下面的index.jsp页面
5 商品分类展示
首页左侧有一个商品分类。当鼠标分类上，需要展示出此分类下的子分类。
当鼠标滑动到连接上触发mousemove事件。页面做一个ajax请求，请求json数据包含分类信息，得到json数据后初始化分类菜单，展示。
5.1 Json数据的格式
第一层：u、n（包含a标签）、i
第二层：u、n、i
第三层：字符串
5.2 使用ajax访问本工程的json数据
而且需要把lib_v1.js的1174行的代码改为URL_Serv: "http://localhost:8082/category.json",,响应的是本地数据
数据需要从taotao-rest中获取
使用第二种方案。简洁，直接。省去一步http调用。
5.3 Ajax跨域请求
5.3.1 跨域问题
Js是不能跨域请求。出于安全考虑，js设计时不可以跨域。
什么是跨域：
1、域名不同时。
2、域名相同，端口不同。
只有域名相同、端口相同时，才可以访问。
可以使用jsonp解决跨域问题。
5.3.2 什么是jsonp？
Jsonp其实就是一个跨域解决方案。Js跨域请求数据是不可以的，但是js跨域请求js脚本是可以的。可以把数据封装成一个js语句，做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。
5.3.3 jsonp的原理
浏览器在js请求中，是允许通过script标签的src跨域请求，可以在请求的结果中添加回调方法名，在请求页面中定义方法，既可获取到跨域请求的数据。
5.3.4 本项目的jsonp
5.4 从数据库中取商品分类列表
5.4.1 Dao层
查询的表
5.4.2 Service层
查询所有商品分类生成前台页面要求的json数据格式。返回一个pojo。
需要创建两个pojo
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类型。
放到taotao-rest工程中。其他的项目不用到。
public class CatResult {
private List data;
public List getData() {
return data;
}
public void setData(List data) {
this.data = data;
}
}
参数：无
返回值：CatResult
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.CatResult;
import com.taotao.rest.service.ItemCatService;
/**
* @author 作者 E-mail: River [email protected]
* @version 创建时间：2018年5月7日 上午11:33:00
* 类说明:
*/
@Service
public class ItemCatServiceImpl implements ItemCatService {
@Autowired
private TbItemCatMapper itemCatMapper;
@Override
public CatResult getItemCatList() {
CatResult catResult = new CatResult();
//查询分类列表
catResult.setData(getCatList(0));
return catResult;
}
/**
* 查询分类列表
* Title: getCatList
* Description:
* @param parentId
* @return
*/
private List getCatList(long parentId) {
//创建查询条件
TbItemCatExample example = new TbItemCatExample();
Criteria criteria = example.createCriteria();
criteria.andParentIdEqualTo(parentId);
//执行查询
List list = itemCatMapper.selectByExample(example);
//返回值list
List resultList = new ArrayList<>();
//向list中添加节点
for (TbItemCat tbItemCat : list) {
//判断是否为父节点
if (tbItemCat.getIsParent()) {
CatNode catNode = new CatNode();
//只有第一次节点才添加a标签
if (parentId == 0) {
catNode.setName(""+tbItemCat.getName()+"");
} 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;
}
}
5.5 Controller
接收页面传递过来的参数。参数就是方法的名称。返回一个json数据，需要把json数据包装成一句js代码。返回一个字符串。
参数：回调方法名称
返回值：字符串
@Controller
public class ItemCatController {
@Autowired
private ItemCatService itemCatService;
@RequestMapping(value="/itemcat/list",
produces=MediaType.APPLICATION_JSON_VALUE + ";charset=utf-8")
@ResponseBody
public String getItemCatList(String callback) {
CatResult catResult = itemCatService.getItemCatList();
//把pojo转换成字符串
String json = JsonUtils.objectToJson(catResult);
//拼装返回值
String result = callback + "(" + json + ");";
return result;
}
}
方法二：
@RequestMapping("/itemcat/list")
@ResponseBody
public Object getItemCatList(String callback) {
CatResult catResult = itemCatService.getItemCatList();
MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);
mappingJacksonValue.setJsonpFunction(callback);
return mappingJacksonValue;
}
收获的知识点：
1：response返回的json乱码解决方案produces=MediaType.APPLICATION_JSON_VALUE + ";charset=utf-8"
2: spring4中jsonp的调用