淘淘商城第五天


 

1   课程计划

1、前台系统的搭建

a)        分布式环境下系统架构

2、展示商城首页

3、商品分类展示的功能

 

2   前台系统搭建

前台系统就是淘淘商城。

前台系统和后台系统是分开的,只在数据库层面有关系。都是同一个数据库。

 

淘淘商城首页:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


优化后的架构:

优点:

1、前台系统和服务层可以分开,降低系统的耦合度。

2、开发团队可以分开,提高开发效率

3、系统分开可以灵活的进行分布式部署。

缺点:服务之间通信使用接口通信,开发工作量提高。

前台系统分为两部分,一部分是服务层web工程,功能就是发布服务

另外一部分:表现层,展示页面,没有业务逻辑。所有业务逻辑就是调用服务层的服务。

 

3   服务层工程搭建

使用maven创建一个war工程。

3.1  创建工程

3.2  使用到的技术

1、Mybatis

2、Spring

3、Springmvc

 

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.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-mapper</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>

          <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>

</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-manager</display-name>

     <welcome-file-list>

          <welcome-file>index.html</welcome-file>

          <welcome-file>index.htm</welcome-file>

          <welcome-file>index.jsp</welcome-file>

          <welcome-file>default.html</welcome-file>

          <welcome-file>default.htm</welcome-file>

          <welcome-file>default.jsp</welcome-file>

     </welcome-file-list>

     <!-- 加载spring容器 -->

     <context-param>

          <param-name>contextConfigLocation</param-name>

          <param-value>classpath:spring/applicationContext-*.xml</param-value>

     </context-param>

     <listener>

          <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

     </listener>

     <!-- 解决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>

     <!-- springmvc的前端控制器 -->

     <servlet>

          <servlet-name>taotao-manager</servlet-name>

          <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

          <!-- contextConfigLocation不是必须的, 如果不配置contextConfigLocationspringmvc的配置文件默认在:WEB-INF/servlet的name+"-servlet.xml" -->

          <init-param>

               <param-name>contextConfigLocation</param-name>

               <param-value>classpath:spring/springmvc.xml</param-value>

          </init-param>

          <load-on-startup>1</load-on-startup>

     </servlet>

     <servlet-mapping>

          <servlet-name>taotao-manager</servlet-name>

          <url-pattern>/rest/*</url-pattern>

     </servlet-mapping>

</web-app>

 

3.3.3   框架整合

参考taotao-manager整合

 

3.3.4   Tomcat插件配置

需要修改pom.xml添加如下内容:

<build>

          <!-- 配置插件 -->

          <plugins>

               <plugin>

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

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

                    <configuration>

                         <port>8081</port>

                         <path>/</path>

                    </configuration>

               </plugin>

          </plugins>

     </build>

 

3.3.5   安装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.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-common</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>

          <!-- JSP相关 -->

          <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>

</project>

 

4.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-portal</display-name>

     <welcome-file-list>

          <welcome-file>index.html</welcome-file>

          <welcome-file>index.htm</welcome-file>

          <welcome-file>index.jsp</welcome-file>

          <welcome-file>default.html</welcome-file>

          <welcome-file>default.htm</welcome-file>

          <welcome-file>default.jsp</welcome-file>

     </welcome-file-list>

     <!-- 加载spring容器 -->

     <context-param>

          <param-name>contextConfigLocation</param-name>

          <param-value>classpath:spring/applicationContext-*.xml</param-value>

     </context-param>

     <listener>

          <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

     </listener>

     <!-- 解决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>

     <!-- springmvc的前端控制器 -->

     <servlet>

          <servlet-name>taotao-portal</servlet-name>

          <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

          <!-- contextConfigLocation不是必须的, 如果不配置contextConfigLocationspringmvc的配置文件默认在:WEB-INF/servlet的name+"-servlet.xml" -->

          <init-param>

               <param-name>contextConfigLocation</param-name>

               <param-value>classpath:spring/springmvc.xml</param-value>

          </init-param>

          <load-on-startup>1</load-on-startup>

     </servlet>

     <servlet-mapping>

          <servlet-name>taotao-portal</servlet-name>

          <!-- 伪静态化 -->

          <url-pattern>*.html</url-pattern>

     </servlet-mapping>

</web-app>

4.3.3   框架整合

参考taotao-manager配置。

 

4.3.4   Tomcat插件配置

4.3.5   添加jsp文件

 

4.3.6   首页

 

5   商品分类展示

首页左侧有一个商品分类。当鼠标分类上,需要展示出此分类下的子分类。

 

当鼠标滑动到连接上触发mousemove事件。页面做一个ajax请求,请求json数据包含分类信息,得到json数据后初始化分类菜单,展示。

 

5.1  Json数据的格式

第一层:u、n(包含a标签)、i

第二层:u、n、i

第三层:字符串

 

5.2  使用ajax访问本工程的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.4  从数据库中取商品分类列表

5.4.1   Dao层

查询的表:

可以使用逆向工程生成的代码。

 

5.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;

     }

    

     /**

      * 查询分类列表

      * <p>Title: getCatList</p>

      * <p>Description: </p>

      * @param parentId

      * @return

      */

     private List<?> getCatList(long parentId) {

          //创建查询条件

          TbItemCatExample example = new TbItemCatExample();

          Criteria criteria = example.createCriteria();

          criteria.andParentIdEqualTo(parentId);

          //执行查询

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

          //返回值list

          List resultList = new ArrayList<>();

          //向list中添加节点

          for (TbItemCat tbItemCat : list) {

               //判断是否为父节点

               if (tbItemCat.getIsParent()) {

                    CatNode catNode = new CatNode();

                    if (parentId == 0) {

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

                    } 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;

     }

 

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/mathlpz126/article/details/72775684
文章标签: javaEE
个人分类: 项目记录
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭