本文详细阐述了京淘前台项目的构建过程，包括框架设计、Maven配置、Nginx代理设置、跨域问题解决方案（JSONP和CORS），以及后端对HTML请求的处理。重点讲解了如何解决同源策略限制下的数据获取和SEO优化策略。
1.京淘项目前台实现
1.1京淘前台框架设计
1.2JT-WEB项目创建
2.2.1构建JT-web
1.2.2添加继承/依赖/插件
<?xml version="1.0" encoding="UTF-8"?>
<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">
<parent>
<artifactId>jt</artifactId>
<groupId>com.jt</groupId>
<version>1.0-SNAPSHOT</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<artifactId>jt-web</artifactId>
<!--由于添加的是动态web资源所以打包暂时用war-->
<packaging>war</packaging>
<!--添加依赖-->
<dependencies>
<dependency>
<groupId>com.jt</groupId>
<artifactId>jt-common</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
</dependencies>
<!--添加插件-->
<!--添加插件 有main方法时 需要添加插件-->
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
1.2.3导入配置文件
1.2.4编辑启动配置项
1.2.5页面效果展示
1.2.6关于主启动类的注解说明
说明：该启动项中的配置 表示springboot启动时，不会加载数据源相关的配置
原因：springboot容器中有开箱即用的规则，但是前端项目不需要使用数据源，所以通过如下的配置，可以正常的启动项目
1.3添加ngnix配置
1.3.1配置要求
通过http://www.jt.com的方式访问http://localhost:8092服务器
1.3.2编辑Host文件
1.3.3编辑Nginx配置文件
# 配置京淘前台服务器
server {
listen 80;
server_name www.jt.com;
location / {
proxy_pass http://localhost:8092;
}
}
1.3.4效果展示
1.3.5关于谷歌浏览器http协议报错的说明
1关于http/https之间的关系
2.解决策略
1.浏览器输入：Chrome://net-internals/#hsts
2.关于.html文件拦截说明
1.1问题描述
说明1：图中的后缀代表着什么？
.html:静态页面/动态页面 静态页面
说明2.关于静态页面的说明
当用户访问:https://i-item.jd.com/100017623382.html请求时,应该跳转的是指定的某一个html页面，之后通过ajax请求根据itemId查询商品的信息，之后通过JS在指定位置中展现商品数据。
说明3.关于URL中取值说明
由于商品的ID号位于URL中，而后端程序需要通过url中的id查询数据信息，所以这里的取值方式必然是restFul风格
说明4.springMVC应该如何拦截请求路径
url1:localhost:8091/items/addUser
url1:localhost:8091/items/updateItem
url1:localhost:8091/items/100100.html
@RequestMapping("/items/{itemId}.html")
说明：如果需要实现该功能，则应该拦截.html结尾的请求
2.2关于.html拦截的说明
默认的条件下springMVC只会拦截前缀请求，如果遇到静态资源的请求，则一般默认条件下，去查询webapp中文件
问题：如何让程序被springMVC拦截呢？
2.3开启后缀类型的匹配
说明：通过配置文件，要求SpringMVC拦截后缀型请求，以.html为例
2.4为啥么要以.html结尾
说明：由于现在的电商网站，都需要所搜引擎进行引流，为了让所有引擎更加容易的记录网站的内容，一般网页信息都是以.html结尾的
结论：一般搜索引擎只记录,html的静态页面信息。这样做的目的可以有效的增加搜索引擎的曝光率，
2.5搜索引擎工作原理
倒排索引：根据关键字，检索文章的位置
3.跨域相关说明
3.1同域测试
3.1.1JSON数据修改
2.1.2页面js分析
2.1.3测试结果
2.1.4结果说明
URL请求地址：http://manage.jt.com:80/test.html
ajax请求地址:http://manage.jt.com:80/test.json
结果分析：
1.请求协议相同
2.请求域名相同
3.请求端口号相同
3.2跨域测试
3.2.1jt-web服务器页面说明
3.2.2问题说明
通过上述的请求，是无法获取数据的
原因：
URL地址：http://www.jt.com:80/test.html
Ajax请求地址：htttp://manage.jt.com:80/test.json
问题：协议相同
域名不相同
端口号相同
3.3同源策略
同源策略：
当用户访问页面时并且页面发起ajax请求时，要求协议://域名:端口号必须相同
同域访问：
如果相同则则满足同源策略，网络可以正常的通讯
跨域访问：
当协议://域名:端口有一条不满足，则该请求为跨域请求，如果为跨域请求，则浏览器不给予解析返回值
3.4同源策略的扩展
考题：
http://manage.jt.com:80/a.js
http://127.0.0.1:8091/b.js 跨域
3.5关于同源策略总结
执行者：只有浏览器参与执行，才会有同源策略的问题
策略约定：协议://域名:端口 三者缺一不可
跨域问题发起者：ajax请求，如果没有ajax参与不能称作跨域
后果：如果跨域了。则程序依然可以正常执行，但是客户端拿不到结果，处于安全性考虑，浏览器不给予解析返回值
3.6JSONP
3.6.1jsonp介绍
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的
注意事项：JSONP如果需要使用一般用来获取资源GET类型，而不是提交数据（POST类型）
原因：javaScrip中的src属性 只能支持GET请求类型
3.6.2JSONP原理说明
1).基于JavaScript中的src属性实现远程数据访问
<script type="text/javascript" src="http://manage.jt.com/test.json"></script>
1).自定义回调函数
3).将返回值进行特殊的格式封装
3.6.3关于JSONP优化
问题：
1).常规的远程请求，还是采用ajax形式居多，能否将jsonp方法与ajax结合呢？
2),每次发起JSONP请求时，都需要自定义回调函数 比较繁琐
3).如果前后端需要完成调用，则需要统一回调函数名称，最好的方式可以将回调函数当做参数进行传递。callback（JSON）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONP测试</title>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
alert("测试访问开始!!!!!")
$.ajax({
url:"http://manage.jt.com/web/testJSONP",
type:"get", //jsonp只能支持get请求
dataType:"jsonp", //dataType表示返回值类型
//jsonp: "callback", //指定参数名称
jsonpCallback: "hello", //指定回调函数名称
success:function (data){ //data经过jQuery封装返回就是json串
console.log("回调函数执行成功!!!!!")
}
});
})
</script>
</head>
<body>
<h1>JSON跨域请求测试</h1>
</body>
</html>
3.6.4关于JSONP后端业务调用（一）
package com.jt.web.controller;
import com.jt.pojo.ItemDesc;
import com.jt.util.ObjectMapperUtil;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Date;
@RestController
public class JSONPController {
//返回值要求: callback(json串)
@RequestMapping("/web/testJSONP")
public String jsonp(String callback){
ItemDesc itemDesc = new ItemDesc();
itemDesc.setItemId(1000L).setItemDesc("JSONP调用成功!!!")
.setCreated(new Date()).setUpdated(new Date());
String json = ObjectMapperUtil.toJSON(itemDesc);
return callback + "( " + json + ")";
}
}
3.6.4关于JSONP后端业务调用（二）
3.7CORS
3.7.1CORS介绍（跨域资源共享）
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的响应头信息.如果后端服务器允许资源共享则会在响应头中标识是否允许访问.
因此，实现CORS通信的关键是服务器
3.7.2CORS工作原理
3.7.3CORS入门案例
3.7.4关于响应头的说明
说明：如果服务器端允许跨域，则会在响应头中添加服务器的信息
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
