企业WEB项目前台工程搭建,ajax跨域的解决

概述

本文将介绍分布式环境下前台系统架构和一步一步搭建的过程，接着通过首页商品类目展示来详解ajax跨域的解决。

一、前台系统系统架构

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

首页：

传统架构

分层的方式来架构系统

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

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

采用分层架构有利于系统的维护，系统的扩展。这其实就是系统的可维护性和可扩展性。分层就是按照功能把系统切分细分，细分之后就能分布式部署，就能引入伸缩性，就能提高性能。

优点：

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

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

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

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

二、搭建服务系统

服务形式：对外提供rest形式的服务，供其他系统调用。使用http协议传递json数据。

1.创建工程

2.配置文件 2.1pom.xml

	4.0.0
	
		com.taotao
		taotao-parent
		0.0.1-SNAPSHOT
	
	com.taotao
	taotao-rest
	0.0.1-SNAPSHOT
	war
	
		
			com.taotao
			taotao-manager-mapper
			0.0.1-SNAPSHOT
		
		
		
			org.springframework
			spring-context
		
		
			org.springframework
			spring-beans
		
		
			org.springframework
			spring-webmvc
		
		
			org.springframework
			spring-jdbc
		
		
			org.springframework
			spring-aspects
		
		
			javax.servlet
			servlet-api
			provided
		
		
			javax.servlet
			jsp-api
			provided
		
	

2.2web.xml

	taotao-manager
	
		index.html
		index.htm
		index.jsp
		default.html
		default.htm
		default.jsp
	
	
	
		contextConfigLocation
		classpath:spring/applicationContext-*.xml
	
	
		org.springframework.web.context.ContextLoaderListener
	
	
	
		CharacterEncodingFilter
		org.springframework.web.filter.CharacterEncodingFilter
		
			encoding
			utf-8
		
	
	
		CharacterEncodingFilter
		/*
	
	
	
		taotao-manager
		org.springframework.web.servlet.DispatcherServlet
		
		
			contextConfigLocation
			classpath:spring/springmvc.xml
		
		1
	
	
		taotao-manager
		/rest/*
	

2.3框架整合

由于用到的技术有Mybatis、Spring、Springmvc，所以之前taotao-manager-web下整合的直接拿过来就行了

2.4Tomcat插件配置

修改pom.xml

    
    
        
            org.apache.tomcat.maven
            tomcat7-maven-plugin
            
                8081
                /
            
        
    

2.5安装taotao-manager到本地仓库

因为我们需要和数据库交互，所以我们需要依赖pojo和mapper包，需要将taotao-manager安装到本地仓库

Maven命令：install -DskipTests（这里有ftp连接图片服务器会自动测试，我们跳过测试）

三、门户系统搭建

广义上的门户就是将各种应用系统、数据资源和互联网资源集成到一个信息管理平台之上，并以统一的用户界面提供给用户，并建立企业对客户、企业对内部员工和企业对企业的信息通道。

简单来说就是网站的入口。

1.使用到的技术

1、Spring

2、Springmvc

3、Jstl、jQuery

4、httpClient（使用java代码模拟浏览器）

2.创建工程

3.配置文件 3.1pom.xml

依赖common包，其他的根据用到的技术配置即可

	
        com.taotao
        taotao-common
        0.0.1-SNAPSHOT
    
    
    
        jstl
        jstl
    
    
        javax.servlet
        servlet-api
        provided
    
    
        javax.servlet
        jsp-api
        provided
    

3.2web.xml

修改前端控制器截取的路径

*.html

这里伪静态化是指我们虽然是个动态页面，但是我们可以通过restful风格伪装成静态界面，有助于搜索引擎排名靠前，因为静态界面符合搜索引擎喜好

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

3.3框架整合

3.4Tomcat配置

端口设置为8083

4. 显示欢迎页Controller

@Controller
public class PageController {

	@RequestMapping("/index")
	public String showIndex() throws Exception {
		return "index";
	}
	
}

为什么/index就能访问主页？

我们在前端控制器上设置了*.html，然后web.xml中配置了地址后面没有值优先访问index.html，被Springmvc拦截，去RequestMapping中找/index

四、首页商品类目展示

首页左侧有一个商品分类。当鼠标分类上，需要展示出此分类下的子分类。当鼠标滑动到连接上触发mousemove事件。页面做一个ajax请求，请求json数据包含分类信息，得到json数据后初始化分类菜单，展示。

1. Json数据的格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5uUaCXP5-1590158761349)(https://pluto-1300780100.cos.ap-nanjing.myqcloud.com/img/image-20200522223242817.png)]

2.Ajax跨域请求 2.1跨域问题

js是不能跨域请求。出于安全考虑，js设计时不可以跨域。

什么是跨域：

1、域名不同时。

2、域名相同，端口不同。

只有域名相同、端口相同时，才可以访问。 可以使用jsonp解决跨域问题。

2.2什么是jsonp

Jsonp其实就是一个跨域解决方案。Js跨域请求数据是不可以的，但是js跨域请求js脚本是可以的。可以把数据封装成一个js语句，做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。

3.服务实现 3.1创建pojo

public class ItemCat {
	//转换成json数据时使用u作为key
	@JsonProperty("u")
	private String url;
	
	@JsonProperty("n")
	private String name;
	
	@JsonProperty("i")
	private List item;
}

public class CatResult {
	private List data;
}

3.2Service层

@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 list = itemCatMapper.selectByExample(example);
		List resultList = new ArrayList<>();
		int count=0;
		for (TbItemCat tbItemCat : list) {
			//判断是否为父节点
			if(tbItemCat.getIsParent()) {
				CatNode node = new CatNode();
				if(parentId==0) {
					node.setName("+tbItemCat.getId()+".html'>"+tbItemCat.getName()+"");
					count++;
					if(count>=14)break;
				}else {
					node.setName(tbItemCat.getName());
				}
				node.setUrl("/products/"+tbItemCat.getId()+".html");
				node.setItem(getCatList(tbItemCat.getId()));
				resultList.add(node);
			}else {
//				是叶子节点
				resultList.add("/products/"+tbItemCat.getId()+".html|" + tbItemCat.getName());
			}
		}
		return resultList;
	}
}

3.3Controller层

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

还有一种springmvc4.1后新增的解决乱码的方案

//使用MappingJacksonValue对象包装返回结果，并设置jsonp的回调方法。
public MappingJacksonValue queryAll(String callback) throws Exception {
    //查询分类列表
    ItemCatResult result = itemCatService.queryAllCategory();
    //包装jsonp
    MappingJacksonValue jacksonValue = new MappingJacksonValue(result);
    //设置包装的回调方法名
    jacksonValue.setJsonpFunction(callback);
    return jacksonValue;
}

成品：

结语

(=^･ｪ･=)
(つ と)
∪ひ∪

(=^･ｪ･=)
(つ∩と)
∪ ω ∪

(>﹏<)
⊃∩⊂
(￣▽￣)
╰ひ╯