目录
1. 前台系统搭建
前台系统就是淘淘商城。
前台系统和后台系统是分开的,只在数据库层面有关系。都是同一个数据库。
前台系统分为两部分,一部分是服务层web工程,功能就是发布服务
另外一部分:表现层,展示页面,没有业务逻辑。所有业务逻辑就是调用服务层的服务。
在互联网系统开发当中,我们一般都是采用了分层的方式来架构系统,但是为什么我们需要分层进行架构呢?
采用分层架构有利于系统的维护,系统的扩展。这其实就是系统的可维护性和可扩展性。分层就是按照功能把系统切分细分,细分之后就能分布式部署,就能引入伸缩性,就能提高性能。
好处:
1、基于soa理念将服务层抽出对外提供服务
2、可以实现灵活的分布式部署
2. 搭建服务系统
服务形式:对外提供rest形式的服务,供其他系统调用。使用http协议传递json数据。
2.1. 使用的技术
1、Mybatis
2、spring
3、springmvc
2.2 创建maven工程taotao-rest
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"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<display-name>taotao-rest</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不是必须的, 如果不配置contextConfigLocation, springmvc的配置文件默认在: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>
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.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>
<!-- 依赖taotao-manager-mapper工程 -->
<dependency>
<groupId>com.taotao</groupId>
<artifactId>taotao-manager-mapper</artifactId>
<version>0.0.1-SNAPSHOT</version>
</dependency>
<!-- MySql -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<!-- 连接池 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
</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>
</dependencies>
<build>
<plugins>
<!-- 配置Tomcat插件 -->
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<configuration>
<port>8081</port>
<path>/</path>
</configuration>
</plugin>
</plugins>
</build>
</project>
整合ssm
SqlMapConfig.xml
不动
db.properties
连接一个数据库,不需要修改
resource.properties
删除内容,保留空文件
applicationContext-dao.xml
不动
applicationContext-service.xml
修改包,并创建包
在【taotao-rest】项目中【src/main/java】下创建【com.taotao.rest.service】包
applicationContext-trans.xml
修改包
springmvc.xml
修改后:
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
<context:component-scan
base-package="com.taotao.rest.controller" />
<mvc:annotation-driven />
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>
3. 搭建门户系统
3.1. 什么是门户?
广义上的门户就是将各种应用系统、数据资源和互联网资源集成到一个信息管理平台之上,并以统一的用户界面提供给用户,并建立企业对客户、企业对内部员工和企业对企业的信息通道。
简单来说就是网站的入口。
3.2. 所使用技术
1、Spring
2、Springmvc
3、Jstl、jQuery
4、httpClient(使用java代码模拟浏览器)
5、JS + CSS
门户系统不直接调用数据库,而是通过服务系统提供的接口获取数据。
电商、互联网行业开发都是面向服务开发。
3.3. 创建maven工程taotao-portal
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不是必须的, 如果不配置contextConfigLocation, springmvc的配置文件默认在: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>
<servlet-mapping>
<servlet-name>taotao-portal</servlet-name>
<!-- 伪静态化 -->
<url-pattern>*.action</url-pattern>
</servlet-mapping>
</web-app>
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.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>
<dependency>
<groupId>com.taotao</groupId>
<artifactId>taotao-manager-pojo</artifactId>
<version>0.0.1-SNAPSHOT</version>
</dependency>
<!-- 单元测试 -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<scope>test</scope>
</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>
<!-- 文件上传组件 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
</dependency>
</dependencies>
<build>
<!-- 配置插件 -->
<plugins>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<configuration>
<port>8082</port>
<path>/</path>
</configuration>
</plugin>
</plugins>
</build>
</project>
ssm框架整合
mybaits
不用,复制时可以不要,也可以复制过来后删除。
db.properties
因为不连接数据库,所以db.properties没用,删除。
resource.properties
删除内容,保留空文件
applicationContext-dao.xml
将加配置文件语句复制到applicationContext-service.xml中
并将applicationContext-dao.xml文件删除
applicationContext-service.xml
更改扫描包,并建立对应的包
applicationContext-trans.xml
没有事务,只调用服务,不需要该文件,删除
Springmvc.xml
并创建对应包
静态页面
其中jsp复制到WEB-INF下
其它复制到webapp下
显示index.jsp首页
新建一个controller
IndexController.java
【taotao-portal】项目中【/src/main/java】目录里的【/com/taotao/portal/controller】包下创建【IndexController.java】
package com.taotao.portal.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class IndexController {
@RequestMapping("/index")
public String showIndex(Model model) {
return "index";
}
}
启动
4.首页商品类目展示流程
首页左侧有一个商品分类。当鼠标分类上,需要展示出此分类下的子分类。
当鼠标滑动到连接上触发mousemove事件。页面做一个ajax请求,请求json数据包含分类信息,得到json数据后初始化分类菜单,展示。
4.1. json数据的格式
测试json数据
lib-v1.js
【/taotao-portal】项目中【/src/main/webapp】目录下【/js】文件夹中【lib-v1.js】
找到1174行
category.json
将【/taotao-portal】—【/src/main/webapp/WEB-INF】—【/jsp】下的【商品分类数据格式.txt】文件复制到【/taotao-portal】—【/src/main/webapp/】下,并重命名为【category.json】
修改文件
查看网址:http://localhost:8082/category.json
JsonView.exe
双击运行
把json数据粘贴进去,点击Format
第一层:u、n(包含a标签)、i
第二层:u、n、i
第三层:字符串
4.2. 使用ajax访问本工程的json数据
方法一:数据需要从taotao-portal中调用服务获得。
lib-v1.js
【/taotao-portal】项目中【/src/main/webapp】目录下【/js】文件夹中【lib-v1.js】
运行
方法二:数据需要从taotao-rest中调用服务获得。
使用第二种方案。简洁,直接。省去一步http调用。
将【/taotao-portal】—【/src/main/webapp/】下的【category.json】文件复制到将【/taotao-rest】—【/src/main/webapp/】下的【category.json】中
http://localhost:8081/category.json可以访问
将【lib-v1.js】文件改为8081后,访问http://localhost:8082/
不能显示分类提示。json不能跨域请求
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跨域请求,可以在请求的结果中添加回调方法名,在请求页面中定义方法,既可获取到跨域请求的数据。
lib-v1.js
【/taotao-portal】项目中【/src/main/webapp】目录下【/js】文件夹中【lib-v1.js】
category.json
将【/taotao-portal】项目中【/src/main/webapp】目录下【/js】文件夹中【lib-v1.js】的【category.getDataService】函数添加到【category.json】文件中
执行http://localhost:8082/
OK
4.4. 从数据库中取商品分类列表
4.4.1. Dao层
查询的表:
tb_item_cat
4.4.2. Service层
查询所有商品分类生成前台页面要求的json数据格式。返回一个pojo。
需要创建两个pojo
1、分类列表的节点。包含u、n、i属性。
CatNode.java
【/taotao-rest】–【/src/main/java】—【/com/taotao/rest/pojo/】-【CatNode.java】
package com.taotao.rest.pojo;
import java.util.List;
import com.fasterxml.jackson.annotation.JsonProperty;
public class CatNode {
@JsonProperty("n")
private String name;
@JsonProperty("u")
private String url;
@JsonProperty("i")
private List<?> item;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public List<?> getItem() {
return item;
}
public void setItem(List<?> item) {
this.item = item;
}
}
2、返回值pojo。包含data属性是一个list类型。
放到taotao-rest工程中。其他的项目不用到。
CatResult.java
参数:无
返回值:CatResult
【/taotao-rest】—【/src/main/java】—【/com/taotao/rest/pojo/】—【CatResult.java】
package com.taotao.rest.pojo;
import java.util.List;
public class CatResult {
private List<?> data;
public List<?> getData() {
return data;
}
public void setData(List<?> data) {
this.data = data;
}
}
ItemCatService.java
【/taotao-rest】—【/src/main/java】—【/com/taotao/rest/service/】—【ItemCatService.java】
package com.taotao.rest.service;
import com.taotao.rest.pojo.CatResult;
public interface ItemCatService {
CatResult getItemCatList();
}
ItemCatServiceImpl.java
【/taotao-rest】—【/src/main/java】—【/com/taotao/rest/service/impl/】—【ItemCatServiceImpl.java】
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;
/**
* 商品分类服务
*/
@Service
public class ItemCatServiceImpl implements ItemCatService {
@Autowired
private TbItemCatMapper itemCatMapper;
@Override
public CatResult getItemCatList() {
CatResult catResult = new CatResult();
//查询分类列表
catResult.setData(getCatList(0));
return catResult;
}
/**
* 查询分类列表
*/
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中添加节点
int count = 0;
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);
count ++;
//第一层只取14条记录,否则超出页面左侧范围
if (parentId == 0 && count >=14) {
break;
}
//如果是叶子节点
} else {
resultList.add("/products/"+tbItemCat.getId()+".html|" + tbItemCat.getName());
}
}
return resultList;
}
}
4.4.3 Controller
接收页面传递过来的参数。参数就是方法的名称。返回一个json数据,需要把json数据包装成一句js代码。返回一个字符串。
ItemCatController.java
【 /taotao-rest】—【/src/main/java】—【/com/taotao/rest/controller/】—【ItemCatController.java】
参数:回调方法名称
返回值:字符串
package com.taotao.rest.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.http.converter.json.MappingJacksonValue;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.taotao.common.utill.JsonUtils;
import com.taotao.rest.pojo.CatResult;
import com.taotao.rest.service.ItemCatService;
/**
* 商品分类列表
*/
@Controller
public class ItemCatController {
@Autowired
private ItemCatService itemCatService;
@RequestMapping(value="/itemcat/list")
@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;
}
*/
}
4.4.4 运行
http://localhost:8081/rest/itemcat/list
解决乱码
ItemCatController.java
【 /taotao-rest】—【/src/main/java】—【/com/taotao/rest/controller/】—【ItemCatController.java】
package com.taotao.rest.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.http.converter.json.MappingJacksonValue;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.taotao.common.utill.JsonUtils;
import com.taotao.rest.pojo.CatResult;
import com.taotao.rest.service.ItemCatService;
/**
* 商品分类列表
*/
@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;
}
*/
}
http://localhost:8081/rest/itemcat/list
http://localhost:8081/rest/itemcat/list?callback=myfunction
4.4.5 页面实现
lib-v1.js
【/taotao-portal】项目中【/src/main/webapp】目录下【/js】文件夹中【lib-v1.js】
访问:http://localhost:8082/