框架 day77 涛涛商城项目-前台系统及门户搭建,JSONP解决跨域ajax请求
淘淘商城第五天
讲师:入云龙
1 前台系统搭建
前台系统就是淘淘商城。
前台系统和后台系统是分开的，只在数据库层面有关系。都是同一个数据库。
淘淘商城首页：
原架构
优化后的架构：
优点：
1、前台系统和服务层可以分开，降低系统的耦合度。
2、开发团队可以分开，提高开发效率
3、系统分开可以灵活的进行分布式部署。
缺点：服务之间通信使用接口通信，开发工作量提高。
前台系统分为两部分，一部分是服务层web工程，功能就是发布服务
另外一部分：表现层，展示页面，没有业务逻辑。所有业务逻辑就是调用服务层的服务。
2 服务层工程搭建
使用maven创建一个war工程。
2.1 创建工程
2.2 使用到的技术
1、Mybatis
2、Spring
3、Springmvc
2.3 配置工程
2.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-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> dependencies> project> |
2.3.2 Web.xml
| xml version="1.0" encoding="UTF-8"?> <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-managerdisplay-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> |
2.3.3 框架整合
参考taotao-manager整合
2.3.4 Tomcat插件配置
需要修改pom.xml添加如下内容：
| <build>
<plugins> <plugin> <groupId>org.apache.tomcat.mavengroupId> <artifactId>tomcat7-maven-pluginartifactId> <configuration> <port>8081port> <path>/path> configuration> plugin> plugins> build> |
2.3.5 安装taotao-manager到本地仓库
Maven命令：install -DskipTests
跳过测试
需要把taotao-manager、taotao-manager-pojo、taotao-manager-mapper都安装到本地仓库。
3 门户系统搭建
3.1 使用到的技术
1、Spring
2、Springmvc
3、Jstl、jQuery
4、httpClient（使用java代码模拟浏览器）
3.2 创建工程
3.3 配置工程
3.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>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> project> |
3.3.2 Web.xml
| xml version="1.0" encoding="UTF-8"?> <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-portalservlet-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-portalservlet-name>
<url-pattern>*.htmlurl-pattern> servlet-mapping> web-app> |
3.3.3 框架整合
参考taotao-manager配置。
3.3.4 Tomcat插件配置
3.3.5 添加jsp文件
3.3.6 首页
4 商品分类展示
首页左侧有一个商品分类。当鼠标分类上，需要展示出此分类下的子分类。
当鼠标滑动到连接上触发mousemove事件。页面做一个ajax请求，请求json数据包含分类信息，得到json数据后初始化分类菜单，展示。
4.1 Json数据的格式
第一层：u、n（包含a标签）、i
第二层：u、n、i
第三层：字符串
4.2 使用ajax访问本工程的json数据
数据需要从taotao-rest中调用服务获得。
使用第二种方案。简洁，直接。省去一步http调用。
4.3 Ajax跨域请求
4.3.1 跨域问题
Js是不能跨域请求。出于安全考虑，js设计时不可以跨域。
什么是跨域：
1、域名不同时。
2、域名相同，端口不同。
只有域名相同、端口相同时，才可以访问。
可以使用jsonp解决跨域问题。
4.3.2 什么是jsonp？
Jsonp其实就是一个跨域解决方案。Js跨域请求数据是不可以的，但是js跨域请求js脚本是可以的。可以把数据封装成一个js语句，做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。
4.3.3 jsonp的原理：
浏览器在js请求中，是允许通过script标签的src跨域请求，可以在请求的结果中添加回调方法名，在请求页面中定义方法，既可获取到跨域请求的数据。
4.4 从数据库中取商品分类列表
4.4.1 Dao层
查询的表：
可以使用逆向工程生成的代码。
4.4.2 Service层
查询所有商品分类生成前台页面要求的json数据格式。返回一个pojo。
需要创建两个pojo
1、分类列表的节点。包含u、n、i属性。
| public class CatNode {
@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
| @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 List resultList = new ArrayList<>(); //向list中添加节点 for (TbItemCat tbItemCat : list) { //判断是否为父节点 if (tbItemCat.getIsParent()) { CatNode catNode = new CatNode(); 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; }
} |
4.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; } |