1.京淘我的项目前后端搭建策略
2.京淘前台我的项目创立
2.1 创立我的项目
2.1.1 编辑项目名称
2.1.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"> <modelVersion>4.0.0</modelVersion> <artifactId>jt-web</artifactId> <packaging>war</packaging> <parent> <artifactId>jt</artifactId> <groupId>com.jt</groupId> <version>1.0-SNAPSHOT</version> </parent> <!--增加jar包文件依赖--> <dependencies> <dependency> <groupId>com.jt</groupId> <artifactId>jt-common</artifactId> <version>1.0-SNAPSHOT</version> </dependency> </dependencies> <!--所有业务零碎,必须增加build标签--> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build></project>2.1.3 导入课前材料
阐明:将课前材料中的jt-web的src文件导入即可
2.1.4 配置工作目录
2.1.5 实现nginx域名代理
编辑Nginx配置文件
# 配置前台服务器域名代理 server { listen 80; server_name www.jt.com; location / { proxy_pass http://localhost:8092; } } 2.1.6 批改hosts文件
2.1.7 对于谷歌禁用https的阐明
阐明: 个别浏览器出于安全性思考,将http申请协定,主动的转化为https的协定标准.
解决方案: 须要让谷歌浏览器禁用HTTPS.
命令: chrome://net-internals/#hsts
2.2 开启后缀类型匹配阐明
2.2.1 业务阐明
阐明:当用户在拜访index.html时 会去找webapp目录下的index.html页面. 如果未来的商品信息较多,.则必然筹备多个商品的xxxx.html/.这样的工作量太大.
优化: 拦挡用户的申请,转向到指定的模板页面中,之后实现数据的填充.
2.2.2 编辑配置类
阐明: 默认条件下 springMVC只能拦挡/index等前缀型申请. 如果拜访/index.html则拜访的是具体的页面. 所以须要让springMVC拦挡后缀型申请.,实现商品列表的跳转.
2.2.3 搜索引擎工作原理
阐明: 个别搜索引擎只记录.html结尾的动态页面. 搜索引擎记录之后,如果用户通过检索的形式查找信息时,搜索引擎会将网站推送给用户,减少网站的曝光率!
外围机制: 倒排索引
2.2.4 伪动态阐明
伪动态是绝对实在动态来讲的，通常咱们为了加强搜索引擎的敌对面，都将文章内容生成动态页面，然而有的敌人为了实时的显示一些信息。或者还想使用动静脚本解决一些问题。不能用动态的形式来展现网站内容。然而这就损失了对搜索引擎的敌对面。怎么样在两者之间找个两头办法呢，这就产生了伪动态技术。伪动态技术是指展现进去的是以html一类的动态页面模式，但其实是用ASP一类的动静脚本来解决的。
总结: 以.html结尾的动静页面的技术
2.3 实现动静页面跳转
2.3.1 编辑UserController
2.3.2 页面成果展示
2.3.3 编辑POJO
package com.jt.pojo;import com.baomidou.mybatisplus.annotation.IdType;import com.baomidou.mybatisplus.annotation.TableId;import com.baomidou.mybatisplus.annotation.TableName;import lombok.Data;import lombok.experimental.Accessors;@TableName("tb_user")@Data@Accessors(chain = true)public class User extends BasePojo{ @TableId(type = IdType.AUTO) private Long id; //主键 private String username; //用户名 private String password; //明码 private String phone; //电话 private String email; //邮箱地址 临时用电话代替3. 跨域问题阐明
3.1 跨域景象阐明
3.1.1 本地测试
页面url地址: http://manage.jt.com:80/test.html
Ajax网址: http://manage.jt.com:80/test.json
该组合能够实现业务的调用.
协定://域名:80端口
3.1.2 近程测试
页面url地址: http://www.jt.com/test.html
Ajax网址: http://manage.jt.com/test.json
后果: 申请不能失常的获取返回值后果.
报错信息:
3.1.3 同源策略
阐明: 浏览器规定 用户拜访的域名与该域名中展示的页面中的ajax申请,必须满足如下的条件时,能力拜访胜利.
条件:
1).协定规定 http/https/tcp-ip
2).域名地址 www.jt.com/manage.jt.com
3).端口号: 80/8081/8091…
要求全副雷同.
名词:
1).满足同源策略的规定,称之为同域拜访.
2).不满足同源策略规定,称之为跨域拜访.
3.1.3 什么是跨域
阐明: 浏览器(解析页面地址)在解析(页面发动ajax)Ajax申请时,因为守法了同源策略,则把该拜访称之为跨域拜访.
3.2 跨域实现-JSONP形式
3.2.1 JSONP阐明
JSONP(JSON with Padding)是JSON的一种“应用模式”，可用于解决支流浏览器的跨域数据拜访的问题。因为同源策略，一般来说位于 server1.example.com 的网页无奈与不是 server1.example.com的服务器沟通，而 HTML 的
3.2.2 JSONP原理阐明
步骤:
1).利用javaScript中的src属性实现近程数据的获取 获取的数据是一个JS对象 由浏览器负责解析JS.
<script type="text/javascript" src="http://manage.jt.com/test.json"></script>2).自定义回调函数.
<script type="text/javascript"> /*JS是解释执行的语言 */ /*定义回调函数 */ function hello(data){ alert(data.name); } </script>3).将返回值后果,通过非凡的格局封装.
3.2.3 JSONP优化
1).函数名称应该动静传递过来的.
2).是否利用惯例的ajax实现JSONP调用.
3).是否动静生成一个回调函数.
3.3 JSONP实现入门案例
3.3.1 编辑页面JS
3.3.2 查看URL申请地址
3.3.3 编辑JSONPController
阐明:在JT-MANAGE中 定义JSONPController
3.3.4 JSONP数据返回模式
3.4 JSONP 高级API(二)
3.5 跨域实现-CORS形式
3.5.1 CORS介绍
跨域资源共享（英语：Cross-origin resource sharing，缩写：CORS），用于让网页的受限资源可能被其余域名的页面拜访的一种机制。(实现跨域),CORS通过在响应头中标识容许跨域的网址.之后同源策略基于安全性的标准予以放行的一种跨域拜访形式.
阐明:须要在服务器中增加容许拜访的标识即可.
(理解)
通过该机制，页面可能自在地应用不同源（英语：cross-origin）的图片、款式、脚本、iframes以及视频。[2]一些跨域的申请（特地是Ajax）经常会被同源策略（英语：Same-origin policy）所禁止的。跨源资源共享定义了一种形式，为的是浏览器和服务器之间能相互确认是否足够平安以至于能应用跨源申请（英语：cross-origin requests）。[3]比起纯正的同源申请，这将更为自在和功能性的（functionality ），但比纯正的跨源申请更为平安。
跨域资源共享是一份浏览器技术的标准，提供了 Web 服务从不同网域传来沙盒脚本的办法，以避开浏览器的同源策略
3.5.2 编辑CORS配置类
@Configurationpublic class CORSConfig implements WebMvcConfigurer { /** * 增加资源共享的策略 * 参数阐明: * 1.addMapping() 什么样的申请容许跨域 * 2.allowedOrigins() 设定容许拜访的网址 * 3.allowCredentials() 是否容许携带cookie * */ @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://www.jt.com") //如果设置true时,则必须设定容许拜访的网址,不能够用*号标识. .allowCredentials(true); //.maxAge() 30分钟 //.allowedMethods("*") GET POST HEAD }}