（1）搭建前臺系統(tǒng)。
（2）完成首頁導航菜單。（學習jsonp）
（3）完成CMS內容管理系統(tǒng)鲸阔。
（4）完成首頁大廣告位投放。（學習Httpclient）
[if !supportLists]1????????????[endif]搭建前臺系統(tǒng)
[if !supportLists]1.1?????????[endif]前臺系統(tǒng)架構
[if !vml]
[endif]
在互聯(lián)網系統(tǒng)開發(fā)當中迄委，我們一般都是采用了分層的方式來架構系統(tǒng)褐筛，即：
（1）門戶層（門戶系統(tǒng)）：網站的入口
i、渲染視圖叙身，提供用戶訪問的頁面渔扎。
ii、不查詢數(shù)據(jù)庫信轿，數(shù)據(jù)來自對遠程服務(接口)的調用晃痴。
（2）服務層：基于restful，以接口的形式對外提供公共的服務虏两。
i愧旦、連接數(shù)據(jù)庫，返回json格式的數(shù)據(jù)定罢。
[if !supportLists]1.1.1????????[endif]分層架構的好處
（1）、有利于系統(tǒng)的維護和拓展旁瘫。
（2）祖凫、有利于SOA服務治理的基礎。
[if !supportLists]1.2?????????[endif]搭建服務層系統(tǒng)
[if !supportLists]1.2.1????????[endif]系統(tǒng)簡介
基于RESTful實現(xiàn)酬凳。以接口的形式惠况，對外提供公共的服務。（比如購物車宁仔、導航菜單稠屠、搜索、訂單等等）
RESTful是一種接口設計理念翎苫，即：
（1）不同的請求方式权埠，對應不同的業(yè)務類型：
??????GET?? ：查詢
??????POST? ：添加
??????PUT?? ：更新
??????DELETE：刪除
（2）返回json格式數(shù)據(jù)。
[if !supportLists]1.2.2????????[endif]技術選擇
核心框架：Spring+SpringMVC+Mybatis-plus
數(shù)據(jù)庫：MySQL
前端框架：無
[if !supportLists]1.2.3????????[endif]配置步驟
思路：（1）創(chuàng)建項目煎谍，導入jar依賴攘蔽。
????????（2）整合SSM框架。
[if !supportLists]1.2.3.1????[endif]第一步：創(chuàng)建maven項目(war)模型
注意：(1)項目繼承ego-project呐粘。
????? (2)使用maven module創(chuàng)建項目
[if !vml]
[endif]
[if !supportLists]1.2.3.2????[endif]第二步：導入jar依賴
導包說明：
??? （1）ego-base子工程
???????（2）Spring核心包
???????（3）SpringMVC相關包
???????（4）AOP相關包
???????（5）JDBC满俗、事物相關包
（6）Mybatis-plus及整合包
（7）JSON依賴包
導入插件：Tomcat插件（開發(fā)階段转捕，啟動項目，對外發(fā)布接口）
<projectxmlns="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.0</modelVersion>
? <parent>
??? <groupId>cn.gzsxt.ego</groupId>
??? <artifactId>ego-project</artifactId>
??? <version>1.0</version>
? </parent>
? <groupId>cn.gzsxt.ego</groupId>
? <artifactId>ego-rest</artifactId>
? <version>1.0</version>
? <packaging>war</packaging>
? <dependencies>
??? <dependency>
?????? <groupId>cn.gzsxt.ego</groupId>
??? ??? <artifactId>ego-base</artifactId>
??? ??? <version>1.0</version>
??? </dependency>
??? <!-- 整合SSM唆垃，導入spring五芝、springmvc、mybatis相關依賴 -->
??? <!-- 導入spring核心依賴?? 4+1 -->
??? <dependency>
?????? <groupId>org.springframework</groupId>
?????? <artifactId>spring-context</artifactId>
??? </dependency>
??? <!-- 導入spirng-jdbc+事物 -->
??? <dependency>
?????? <groupId>org.springframework</groupId>
?????? <artifactId>spring-jdbc</artifactId>
??? </dependency>?
??? <!-- 導入事物的依賴 ：切面 -->
??? <dependency>
?????? <groupId>org.springframework</groupId>
?????? <artifactId>spring-aspects</artifactId>
??? </dependency>
??? <!-- 導入springmvc相關依賴 -->
??? <dependency>
?????? <groupId>org.springframework</groupId>
?????? <artifactId>spring-webmvc</artifactId>
??? </dependency>
??? <!-- 導入mybatis相關依賴 -->
??? <dependency>
?????? <groupId>org.mybatis</groupId>
?????? <artifactId>mybatis-spring</artifactId>
??? </dependency>
??? <!-- 導入jdbc辕万、連接池依賴 -->
??? <!-- MySql -->
??? <dependency>
?????? <groupId>mysql</groupId>
?????? <artifactId>mysql-connector-java</artifactId>
??? </dependency>
??? <!-- 連接池 -->
??? <dependency>
?????? <groupId>com.alibaba</groupId>
?????? <artifactId>druid</artifactId>
??? </dependency>
??? <dependency>
?????? <groupId>com.fasterxml.jackson.core</groupId>
?????? <artifactId>jackson-databind</artifactId>
??? </dependency>
? </dependencies>
? <build>
? ???? <plugins>
?????? ???? <!-- 配置Tomcat插件 -->
?????? ???? <plugin>
?????????? ????? <groupId>org.apache.tomcat.maven</groupId>
?????????? ????? <artifactId>tomcat7-maven-plugin</artifactId>
?????????? ????? <configuration>
????????????? ?????? 8081
????????????? ?????? <path>/</path>
????????????? ?????? <uriEncoding>UTF-8</uriEncoding>
?????????? ????? </configuration>
?????? ???? </plugin>
??? ???? </plugins>
? ? </build>
</project>
[if !supportLists]1.2.3.3????[endif]第三步：創(chuàng)建web.xml文件
說明：可以從ego-manager工程中拷貝枢步，修改<url-pattern>即可。
<?xmlversion="1.0"encoding="UTF-8"?>
<web-appversion="2.5"xmlns="http://java.sun.com/xml/ns/javaee"xmlns:xml="http://www.w3.org/XML/1998/namespace"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
? http://xmlns.jcp.org/xml/ns/javaee/web-app_2_5.xsd ">
??? <!-- 配置編碼過濾器蓄坏，防止post請求亂碼 -->
??? ? <filter>
??? ? ???? <filter-name>characterEncodingFilter</filter-name>
??? ? ???? <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
??? ? ???? <init-param>
??? ? ???????? <param-name>encoding</param-name>
??? ? ???????? <param-value>utf-8</param-value>
??? ? ???? </init-param>
??? ? </filter>
? <filter-mapping>
? ???? <filter-name>characterEncodingFilter</filter-name>
? ???? <url-pattern>/*</url-pattern>
? </filter-mapping>
??? <servlet>
?????? <servlet-name>dispatcherServlet</servlet-name>
?????? <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
?????? <init-param>
?????????? <param-name>contextConfigLocation</param-name>
?????????? <param-value>classpath:spring-*.xml</param-value>
?????? </init-param>
?????? <!-- 項目啟動的時候价捧，就加載spring容器 -->
?????? <load-on-startup>1</load-on-startup>
??? </servlet>
??? <servlet-mapping>
?????? <servlet-name>dispatcherServlet</servlet-name>
?????? <!-- 所有請求rest服務層系統(tǒng)的請求，都必須在url加上/rest前綴涡戳，好處：方便做維護结蟋。 -->
??? ??? /rest/*
??? </servlet-mapping>
</web-app>
[if !supportLists]1.2.3.4????[endif]第四步：整合SSM框架
整合中所需要的配置文件，均可從ego-manager工程中拷貝渔彰，修改局部的配置即可嵌屎。
[if !supportLists]1.2.3.4.1????[endif]Step1：Spring整合SpringMVC
創(chuàng)建spring-mvc.xml文件，做如下配置：
<?xmlversion="1.0"encoding="UTF-8"?>
<beansxmlns="http://www.springframework.org/schema/beans"
??? xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
??? xmlns:context="http://www.springframework.org/schema/context"
??? xmlns:mvc="http://www.springframework.org/schema/mvc"
??? xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd
?????? http://www.springframework.org/schema/beans? http://www.springframework.org/schema/beans/spring-beans.xsd
?????? http://www.springframework.org/schema/context? http://www.springframework.org/schema/context/spring-context-4.1.xsd">
??? <!-- 開啟注解掃描 -->
??? <context:component-scanbase-package="cn.gzsxt.rest"/>
??? <!-- 開啟注解驅動 -->
??? <mvc:annotation-driven/>
</beans>
[if !supportLists]1.2.3.4.2????[endif]Step2：mybatis-plus整合spring
在這里恍涂，我們一定要有一個概念：任何持久層框架和Spring的整合宝惰，都是為了使用Spring的事物代理。
（1）創(chuàng)建resource.properties文件再沧，配置數(shù)據(jù)庫連接信息如下：
#配置數(shù)據(jù)源
db.driver=com.mysql.jdbc.Driver
db.url=jdbc:mysql://localhost:3306/ego
db.username=root
db.password=gzsxt
（2）創(chuàng)建spring-data.xml文件尼夺，配置框架整合。
<?xmlversion="1.0"encoding="UTF-8"?>
<beansxmlns="http://www.springframework.org/schema/beans"
??? xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
??? xmlns:context="http://www.springframework.org/schema/context"
??? xmlns:tx="http://www.springframework.org/schema/tx"
??? xsi:schemaLocation="http://www.springframework.org/schema/beans
? http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
?????? http://www.springframework.org/schema/context? http://www.springframework.org/schema/context/spring-context-4.3.xsd
?????? http://www.springframework.org/schema/tx? http://www.springframework.org/schema/tx/spring-tx-4.3.xsd">
??? <context:property-placeholderfile-encoding="utf-8"location="classpath:resource.properties"/>
??? <!-- 1炒瘸、創(chuàng)建數(shù)據(jù)源 -->
??? <beanname="dataSource"class="com.alibaba.druid.pool.DruidDataSource">
?????? <propertyname="driverClassName"value="${db.driver}"/>
?????? <propertyname="url"value="${db.url}"/>
?????? <propertyname="username"value="${db.username}"/>
?????? <propertyname="password"value="${db.password}"/>
?????? <propertyname="maxActive"value="20"/>
?????? <propertyname="minIdle"value="5"/>
??? </bean>
??? <!-- 2淤堵、mybatis-plus整合Spring
?????? 任何的數(shù)據(jù)庫的框架，要使用spring的事物代理顷扩，必須使用spring提供的數(shù)據(jù)源拐邪，必須整合spring才可以使用
??? -->
??? <beanname="sqlSessionFactoryBean"class="com.baomidou.mybatisplus.spring.MybatisSqlSessionFactoryBean">
?????? <!-- 加載數(shù)據(jù)源 -->
?????? <propertyname="dataSource"ref="dataSource"/>
?????? <!-- 指定pojo目錄-->
?????? <propertyname="typeAliasesPackage"value="cn.gzsxt.base.pojo"/>
?????? <!-- 配置mybatis-plus插件 -->
?????? <propertyname="plugins">
?????????? <list>
?????????? ??? <!-- 配置分頁插件 -->
????????????? <beanclass="com.baomidou.mybatisplus.plugins.PaginationInterceptor"/>
????????????? <!-- 配置攔截器屬性 -->
????????????? <beanclass="com.baomidou.mybatisplus.plugins.PerformanceInterceptor">
????????????????? <!-- 配置sql響應時間，開發(fā)階段方便做調優(yōu) -->
????????????????? <propertyname="maxTime"value="1000"/>
????????????????? <propertyname="format"value="true"/>
????????????? </bean>
?????????? </list>
?????? </property>
?????? <!-- 配置mybatis-plus全局策略 -->
?????? <propertyname="globalConfig"ref="globalConfiguration"></property>
??? </bean>
??? <!-- 3隘截、配置mybatis的動態(tài)代理 -->
??? <beanclass="org.mybatis.spring.mapper.MapperScannerConfigurer">
?????? <propertyname="sqlSessionFactoryBeanName"value="sqlSessionFactoryBean"/>
?????? <propertyname="basePackage"value="cn.gzsxt.base.mapper"></property>
??? </bean>
??? <!-- 配置mybatis-plus全局屬性 -->
??? <!-- 定義 MybatisPlus 的全局策略配置-->
??? <beanid="globalConfiguration"class="com.baomidou.mybatisplus.entity.GlobalConfiguration">
? <!-- 在 2.3 版本以后扎阶，dbColumnUnderline 默認值是 true，即pojo屬性開啟駝峰標識 -->
? <propertyname="dbColumnUnderline"value="true"></property>
? <!-- 全局的主鍵策略 -->
? <!--
??????????? AUTO->`0`("數(shù)據(jù)庫ID自增")
???????????? INPUT->`1`(用戶輸入ID")
??????????? ID_WORKER->`2`("全局唯一ID")
??????????? UUID->`3`("全局唯一ID")
? -->
? <propertyname="idType"value="0"></property>
? <!-- 全局的表前綴策略配置 -->
? <propertyname="tablePrefix"value="tb_"></property>
??? </bean>
??? <!-- 4婶芭、配置事物管理器 -->
??? ?<beanname="transactionManager"class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
??? ?????? <propertyname="dataSource"ref="dataSource"></property>
??? ?</bean>
??? <!-- 5东臀、開啟注解聲明式事物 -->
??? <tx:annotation-driven/>
</beans>
[if !supportLists]1.2.3.5????[endif]第五步：整合測試
在這里我們使用靜態(tài)數(shù)據(jù)(category.json)，來模擬導航菜單接口的實現(xiàn)雕擂。
（1）拷貝category.json文件到webapp目錄下啡邑。
[if !vml]
[endif]
（2）更新項目、安裝到本地倉庫（updata井赌、maven clean谤逼、maven install）
（3）啟動項目
[if !vml]
[endif]
查看控制臺贵扰，啟動成功!!!
[if !vml]
[endif]
（4）瀏覽器訪問，地址：http://localhost:8081/category.json流部，整合成功Ｆ萑啤！枝冀！
[if !vml]
[endif]
[if !supportLists]1.3?????????[endif]搭建門戶系統(tǒng)
[if !supportLists]1.3.1????????[endif]系統(tǒng)簡介
簡單來說就是網站的入口舞丛，提供用戶瀏覽、下單的操作頁面果漾。
門戶系統(tǒng)不直接調用數(shù)據(jù)庫球切，而是通過服務系統(tǒng)提供的接口獲取數(shù)據(jù)。電商绒障、互聯(lián)網行業(yè)開發(fā)都是面向服務開發(fā)吨凑。
[if !supportLists]1.3.2????????[endif]技術選擇
核心框架：Spring+SpringMVC
數(shù)據(jù)庫：無
前端技術：jquery、ajax户辱、css+div鸵钝、easyui等
[if !supportLists]1.3.3????????[endif]配置步驟
思路：（1）創(chuàng)建項目
????????（2）框架整合
[if !supportLists]1.3.3.1????[endif]第一步：創(chuàng)建maven項目(war模型)
注意：(1)繼承ego-project工程
????? (2)使用maven module創(chuàng)建子系統(tǒng)
[if !vml]
[endif]
[if !supportLists]1.3.3.2????[endif]第二步：導入jar依賴
在門戶系統(tǒng)中，不直接查詢數(shù)據(jù)庫庐镐，所以不需要導入數(shù)據(jù)庫相關的jar包恩商。
在門戶系統(tǒng)中，用戶能夠搜索必逆、瀏覽商品怠堪，提交訂單等，所以需要添加jsp視圖相關依賴名眉。
<projectxmlns="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.0</modelVersion>
? <parent>
??? <groupId>cn.gzsxt.ego</groupId>
??? <artifactId>ego-parent</artifactId>
??? <version>1.0</version>
? </parent>
? <groupId>cn.gzsxt.ego</groupId>
? <artifactId>ego-portal</artifactId>
? <version>1.0</version>
? <packaging>war</packaging>
? <dependencies>
? ???? <dependency>
? ??????????? <groupId>cn.gzsxt.ego</groupId>
? ??????????? <artifactId>ego-base</artifactId>
? ??????????? <version>1.0</version>
? ???? </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>
?????????? <!-- 導入spring核心依賴?? 4+1 -->
?????????? <dependency>
?????????? <groupId>org.springframework</groupId>
?????????? <artifactId>spring-context</artifactId>
?????? </dependency>
?????? <!-- 導入springmvc相關依賴 -->
?????? <dependency>
?????????? <groupId>org.springframework</groupId>
?????????? <artifactId>spring-webmvc</artifactId>
?????? </dependency>
?????? <dependency>
?????????? <groupId>com.fasterxml.jackson.core</groupId>
?????????? <artifactId>jackson-databind</artifactId>
?????? </dependency>
? </dependencies>
? <build>
? ???? <plugins>
?????? <!-- 配置Tomcat插件 -->
?????? <plugin>
?????????? <groupId>org.apache.tomcat.maven</groupId>
?????????? <artifactId>tomcat7-maven-plugin</artifactId>
?????????? <configuration>
????????????? 8082
????????????? <path>/</path>
????????????? <uriEncoding>UTF-8</uriEncoding>
?????????? </configuration>
?????? </plugin>
??? </plugins>
? ? </build>
</project>
[if !supportLists]1.3.3.3????[endif]第三步：創(chuàng)建web.xml文件
可以從ego-rest工程拷貝研叫，修改<url-parten>配置
<?xmlversion="1.0"encoding="UTF-8"?>
<web-appversion="2.5"xmlns="http://java.sun.com/xml/ns/javaee"xmlns:xml="http://www.w3.org/XML/1998/namespace"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_2_5.xsd
? ">
??? <welcome-file-list>
?????? <welcome-file>index.html</welcome-file>
??? </welcome-file-list>
??? <!-- 配置編碼過濾器，防止post請求亂碼 -->
??? ? <filter>
??? ? ???? <filter-name>characterEncodingFilter</filter-name>
??? ? ???? <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
??? ? ???? <init-param>
??? ? ???????? <param-name>encoding</param-name>
??? ? ???????? <param-value>utf-8</param-value>
??? ? ???? </init-param>
??? ? </filter>
? <filter-mapping>
? ???? <filter-name>characterEncodingFilter</filter-name>
? ???? <url-pattern>/*</url-pattern>
? </filter-mapping>
??? <servlet>
?????? <servlet-name>dispatcherServlet</servlet-name>
?????? <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
?????? <init-param>
?????????? <param-name>contextConfigLocation</param-name>
?????????? <param-value>classpath:spring-*.xml</param-value>
?????? </init-param>
?????? <!-- 項目啟動的時候璧针，就加載spring容器 -->
?????? <load-on-startup>1</load-on-startup>
??? </servlet>
??? <servlet-mapping>
?????? <servlet-name>dispatcherServlet</servlet-name>
?????? <!-- 把請求路徑偽靜態(tài)話，方便做seo搜索引擎優(yōu)化渊啰，有利于做網站推廣 -->
?????? <url-pattern>*.html</url-pattern>
??? </servlet-mapping>
</web-app>
[if !supportLists]1.3.3.4????[endif]第四步：導入jsp頁面探橱、靜態(tài)資源
說明：（1）靜態(tài)資源放在/webapp目錄
????????（2）jsp放到/WEB-INF/JSP目錄下
[if !vml]
[endif]
[if !supportLists]1.3.3.5????[endif]第五步：Spring整合SpringMVC
從ego-rest工程拷貝，修改部分配置即可绘证。
<?xmlversion="1.0"encoding="UTF-8"?>
<beansxmlns="http://www.springframework.org/schema/beans"
??? xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
??? xmlns:context="http://www.springframework.org/schema/context"
??? xmlns:mvc="http://www.springframework.org/schema/mvc"
??? xsi:schemaLocation="http://www.springframework.org/schema/mvc
? http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd
?????? http://www.springframework.org/schema/beans? http://www.springframework.org/schema/beans/spring-beans.xsd
?????? http://www.springframework.org/schema/context? http://www.springframework.org/schema/context/spring-context-4.1.xsd">
??? <!-- 開啟注解掃描 -->
??? <context:component-scanbase-package="cn.gzsxt.portal"/>
??? <!-- 開啟注解驅動 -->
??? <mvc:annotation-driven/>
??? <!-- 由于jsp存放路徑在WEB-INF下面隧膏，默認視圖解析器解析不到，需要自己配一個視圖解析器 -->
??? <beanclass="org.springframework.web.servlet.view.InternalResourceViewResolver">
?????? <propertyname="prefix"value="/WEB-INF/jsp/"></property>
?????? <propertyname="suffix"value=".jsp"></property>
??? </bean>
</beans>
[if !supportLists]1.3.3.6????[endif]第六步：整合測試
需求：訪問門戶系統(tǒng)首頁嚷那。
（1）創(chuàng)建PageController類
package cn.gzsxt.portal.controller;
import org.springframework.stereotype.Controller;
import? org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class PageController {
??? @RequestMapping("/index")
??? public String showIndex(){
?????? return "index";
??? }
}
（2）更新項目胞枕、安裝到本地倉庫。（update魏宽、clean腐泻、install）
（3）啟動項目
[if !vml]
[endif]
（4）訪問首頁决乎，地址：http://localhost:8082
[if !vml]
[endif]
前臺系統(tǒng)搭建成功！Ｅ勺构诚！
[if !supportLists]2????????????[endif]首頁導航菜單實現(xiàn)
說明：首頁導航菜單，是通過異步加載實現(xiàn)的铆惑。
好處：只有當展開導航菜單時范嘱，才會發(fā)送請求，從而節(jié)約cpu資源员魏。
[if !supportLists]2.1?????????[endif]實現(xiàn)流程
[if !vml]
[endif]
需要解決的問題：
（1）在rest系統(tǒng)中發(fā)布接口丑蛤，封裝導航菜單成json格式數(shù)據(jù)。
（2）在portal系統(tǒng)中撕阎，遠程請求接口（跨域請求）受裹。
[if !supportLists]2.2?????????[endif]跨越請求
[if !supportLists]2.2.1????????[endif]什么是跨域（兩個不同系統(tǒng)之間的訪問、調用）
（1）域名不同闻书，即兩個不同的應用名斟。
[if !vml]
[endif]
（2）域名相同，但是端口不同魄眉，即同一個應用中的不同子系統(tǒng)砰盐。
[if !vml]
[endif]
[if !supportLists]2.2.2????????[endif]Ajax跨域請求的缺陷
在ego-rest系統(tǒng)使用靜態(tài)數(shù)據(jù)，模擬Ajax的跨域問題坑律。
[if !supportLists]2.2.2.1????[endif]第一步：在ego-rest中添加category.json文件岩梳。（已實現(xiàn)）
[if !supportLists]2.2.2.2????[endif]第二步：在ego-portal中發(fā)送ajax請求
（1）創(chuàng)建testJsonp.jsp頁面
<%@pagelanguage="java"contentType="text/html;
? charset=UTF-8"
??? pageEncoding="UTF-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD
? HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<scripttype="text/javascript"src="/js/jquery-1.6.4.js"></script>
<title>Insert title here</title>
</head>
<body>
<textareaid="text"style="width: 1200px; height: 200px;"></textarea>
<inputtype="button"value="測試異步跨越"onclick="testajax()"? />
<scripttype="text/javascript">
??? function testajax(){
?????? $.ajax({
?????????? url:"http://localhost:8081/category.json",
?????????? type:"GET",
?????? ??? success:function (data) {
????????????? $("#text").val(JSON.stringify(data));
?????????? }
?????? });
??? }
</script>
</body>
</html>
（2）修改PageController，新增訪問非首頁的方法晃择。
@RequestMapping("/{page}")
public String showPage(@PathVariable("page")String page){
??? return page;
}
[if !supportLists]2.2.2.3????[endif]第三步：測試Ajax跨越
（1）重啟啟動ego-portal系統(tǒng)冀值，訪問testJsonp.jsp
[if !vml]
[endif]
（2）點擊按鈕，發(fā)送異步請求
[if !vml]
[endif]
測試發(fā)現(xiàn)宫屠，Ajax跨越請求失敗了列疗。
[if !supportLists]2.2.3????????[endif]解決方案：jsonp跨域
在前面的測試中，我們發(fā)現(xiàn)Ajax跨越請求時浪蹂，json數(shù)據(jù)被瀏覽器禁用了抵栈。
原因：瀏覽器禁止遠程加載Json數(shù)據(jù)。（瀏覽器安全機制）
如何解決呢坤次？
答：使用Jsonp方式古劲。
[if !supportLists]2.2.3.1????[endif]Jsonp原理
Jsonp實現(xiàn)的前提：
瀏覽器允許跨越加載同源數(shù)據(jù)。
即在JavaScript腳本中發(fā)送請求缰猴，就可以遠程加載js格式數(shù)據(jù)产艾。
請求原理：
（1）異步請求的時候，加上一個名為callback的回調函數(shù)
（2）在接口中，將返回的json格式數(shù)據(jù)闷堡，偽裝成js腳本格式隘膘。
（3）得到js格式數(shù)據(jù)后，提取里面的json數(shù)據(jù)缚窿。
[if !vml]
[endif]
[if !supportLists]2.2.3.2????[endif]測試Jsonp
（1）修改testJsonp.jsp棘幸，指定異步請求為jsonp方式。
<scripttype="text/javascript">
??? function testajax(){
?????? $.ajax({
?????????? url:"http://localhost:8081/category.json",
?????????? type:"GET",
?????????? dataType:"jsonp",??
? //jsonp請求
?????????? jsonp:"callbackFunction",?
? //請求參數(shù)名
?????????? jsonpCallback:"showData",?
? //回調函數(shù)名稱
?????? ??? success:function (data) {
????????????? $("#text").val(JSON.stringify(data));
?????????? }
?????? });
??? }
</script>
（2）在ego-rest工程中倦零，修改category.json文件误续，將返回數(shù)據(jù)包裝成js腳本。
[if !vml]
[endif]
（3）再次發(fā)送ajax異步請求扫茅，使用jsonp方式
[if !vml]
[endif]
結論：（1）jsonp是ajax技術中的一種異步請求方式蹋嵌。
???? （2）jsonp能實現(xiàn)跨越請求。
???? （3）jsonp跨越時葫隙，需要指定一個回調函數(shù)栽烂，并使用該函數(shù)將返回的數(shù)據(jù)偽裝成js腳本。
???? （4）獲取返回的js腳本后恋脚，jsonp自動提取其中的json數(shù)據(jù)腺办。
[if !supportLists]2.3?????????[endif]首頁導航菜單實現(xiàn)
思路：
（1）在rest工程中，開發(fā)接口糟描，返回js格式數(shù)據(jù)怀喉。（參考category.json）
（2）在portal工程中，修改jsonp請求路徑船响。請求rest接口躬拢。
[if !supportLists]2.3.1????????[endif]第一部分：在rest工程中開發(fā)導航菜單接口
[if !supportLists]2.3.1.1????[endif]第一步：定義導航菜單POJO
導航菜單結構分析。（使用JsonViewer工具查看category.json）
[if !vml]
[endif]
結論：（1）需要定義兩個POJO：菜單POJO见间、父目錄節(jié)點POJO
???? （2）導航菜單的數(shù)據(jù)聊闯，是一次加載出來的。
創(chuàng)建菜單Menu類米诉。（ego-base中創(chuàng)建）
package cn.gzsxt.base.pojo;
import java.util.List;
/**
?*自定義導航菜單
?*@authorccnulyq
?*
?*/
public class Menu {
??? private List<?> data;? //目錄節(jié)點
??? public List<?> getData() {
?????? return data;
??? }
??? public void setData(List<?> data) {
?????? this.data = data;
??? }
??? public Menu() {
?????? super();
??? }
}
創(chuàng)建父目錄節(jié)點MenuNode類
package cn.gzsxt.base.pojo;
import java.util.List;
/**
?*自定義目錄節(jié)點結構
?*@authorccnulyq
?*
?*/
public class MenuNode {
??? private String u;??? //目錄的鏈接
??? private String n;??? //目錄的名稱
??? private List<?> i;?? //當請目錄的子目錄
??? public MenuNode() {
?????? super();
??? }
//
? 補全get菱蔬、set方法
}
?
（3）重新編譯ego-base工程，安裝到本地倉庫史侣。（maven clean汗销、maven install）
[if !supportLists]2.3.1.2????[endif]第二步：創(chuàng)建ItemCatService接口及其實現(xiàn)類
package cn.gzsxt.rest.service.impl;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import cn.gzsxt.base.mapper.ItemCatMapper;
import cn.gzsxt.base.pojo.ItemCat;
import cn.gzsxt.base.vo.Menu;
import cn.gzsxt.base.vo.MenuNode;
import cn.gzsxt.rest.service.ItemCatService;
@Service
public class ItemCatServiceImpl implements ItemCatService{
??? @Autowired
??? private ItemCatMapper itemCatMapper;
??? @Override
??? public Menu initMenu() {
?????? Menumenu = new Menu();
?????? //從返回值Menu的形式上來看，就是把一級目錄查詢出來即可抵窒。因此定義一個查詢方法，通過parent_id=0查詢一級目錄
?????? Listnodes = getNodesByParantId(0L);
?????? menu.setData(nodes);
?????? return menu;
??? }
??? //根據(jù)父目錄的id叠骑，查詢子目錄
??? private List getNodesByParantId(long parentId) {
?????? Mapparams = new HashMap<>();
?????? params.put("parent_id", parentId);
?????? ListselectByMap = itemCatMapper.selectByMap(params);
?????? Listnodes = new ArrayList<>();
?????? MenuNodenode = null;
?????? for (ItemCat itemCat : selectByMap) {
?????????? if(1==itemCat.getIsParent()){
????????????? node = new MenuNode();
????????????? node.setU("/products/"+itemCat.getId()+".html");????
? //u :
? "/products/1.html"
????????????? node.setN("<a href='/products/"+itemCat.getId()+".html'>"+itemCat.getName()+"</a>");???? //n : "<a href='/products/1.html'>圖書李皇、音像、電子書刊</a>"
????????????? node.setI(getNodesByParantId(itemCat.getId()));?
????????????? nodes.add(node);
?????????? }else{
?????????? ??? nodes.add("/products/"+itemCat.getId()+".html|"+itemCat.getName());???? //[3] : "/products/6.html|多媒體圖書"
?????????? }
?????? }
?????? return nodes;
??? }
}
[if !supportLists]2.3.1.3????[endif]第三步：創(chuàng)建ItemCatController類
說明：需要將返回值，包裝成js腳本數(shù)據(jù)掉房。
（1）方式一：手動封裝
package cn.gzsxt.rest.controller;
import? org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import? org.springframework.web.bind.annotation.RequestMapping;
import? org.springframework.web.bind.annotation.ResponseBody;
import cn.gzsxt.base.utils.JsonUtils;
import cn.gzsxt.base.vo.Menu;
import cn.gzsxt.rest.service.ItemCatService;
@Controller
public class ItemCatController {
??? @Autowired
??? private ItemCatService catService;
??? /*
??? ?*jsonp方法下茧跋，返回值，要使用回調函數(shù)來偽裝js腳本
??? ?* @return
??? ?*/
??? @RequestMapping(value="/item/all",produces=MediaType.APPLICATION_JSON_VALUE + ";charset=utf-8")
??? @ResponseBody
??? public String getMenu(String callback){
?????? Menumenu = catService.initMenu();
?????? StringjsonMenu= JsonUtils.objectToJson(menu);
?????? StringjsMenu = callback+"("+jsonMenu+")";
?????? return jsMenu;
??? }
}
（2）方式二：使用MappingJacksonValue對象封裝
//使用MappingJacksonValue對象包裝返回結果卓囚，并設置jsonp的回調方法
??? @RequestMapping("/item/all")
??? @ResponseBody
??? public MappingJacksonValue
? queryAll(String callback) {
?????? //查詢分類列表
?????? Menumenu = catService.getMenu();
?????? //包裝jsonp
?????? MappingJacksonValuejacksonValue = new MappingJacksonValue(menu);
?????? //設置包裝的回調方法名
?????? jacksonValue.setJsonpFunction(callback);
?????? return jacksonValue;
??? }
[if !supportLists]2.3.1.4????[endif]第四步：測試接口
在瀏覽器訪問瘾杭。
地址：http://localhost:8081/rest/item/all?callback=category.getDataService
[if !vml]
[endif]
[if !supportLists]2.3.2????????[endif]第二部分：在portal工程中調用導航菜單接口
[if !supportLists]2.3.2.1????[endif]第一步：指定請求方式為jsonp
（1）修改lib-v1.js文件，指定導航菜單接口地址哪亿。
[if !vml]
[endif]
（2）修改lib-v1.js文件粥烁，指定請求方式為jsonp。
[if !vml]
[endif]
[if !supportLists]2.3.2.2????[endif]第二步：測試導航菜單
（1）重啟portal工程
（2）訪問首頁蝇棉，請求導航菜單
[if !vml]
[endif]
導航菜單開發(fā)成功Ｌ肿琛！篡殷！
