关于springboot:京淘day14京淘前台项目创建

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 配置类

@Configuration
public 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
    }
}

3.5.3 页面成果拜访