Lesson15 京淘前台系统的搭建

1 京淘项目前台的搭建

1.1 京淘项目架构图设计

在分布式的条件下，由web服务器从后端的业务服务器获取服务器，通过HTTP请求协议，利用远程调用的方式获取业务数据。
将来采用更加通用的json字符串的方式返回数据。实现跨系统之间的数据访问。
并且每个节点根据用户访问量的不同，搭建不同规模的集群，从而实现用户的高并发的访问。
tomcat服务器在未经调优时，只能支持150次/s到240次/s 的访问量。
但在调优以后，可以达到大约1000次/s 的访问量

1.2 创建jt-web子项目

注意：要在jt父项目下，新建这个jt-web子项目

1.3 修改jt-web的pom文件 （添加/继承/依赖/插件）

jt-web项目的打包方式也是打war包。
ji-web项目也得继承jt-common的工具类。

<?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>

    <!--指定打包类型-->
    <packaging>war</packaging>

    <!--添加jt-common依赖-->
    <dependencies>
        <dependency>
            <groupId>com.jt</groupId>
            <artifactId>jt-common</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>

        <!--引入数据库驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!--springboot连接数据库-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <!--跳过测试类打包 -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <configuration>
                    <skip>true</skip>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

1.4 从课前资料中，导入老师已经写好的jt-web的src文件

1.5 配置web项目的启动项

由于这个是web项目，需要手动配置一下启动项，要不然IDEA找不到工作目录。要配置一下。
在主启动类的类名上右键，找到倒数第几行 Create…

1.6 关于web项目配置数据源的说明

通常情况下，我新建完一个web项目，它的启动类是这个样子的，（@SpringBootApplication注解后面什么都没有）
但当我启动jt-web服务器时，它竟然报错了：
这是咋了，这是啥意思？
字面意思就是：jt-web项目中的yml文件中缺少与数据库连接的配置。
但我这就是个前端web服务器，不用去连接数据啊，数据的话，那些后端的服务器会给我的啊。
咋整？
产生这个的原因就是：
jt-web项目的父级jt项目的pom文件中，配置了要与数据库进行连接。
不仅我父级项目要这样，我的子级项目也继承了这个配置，也就是说也要与数据库进行连接。
可jt-web这个子级项目就是不想去连接数据库，怎么办？

解决办法：
那就在jt-web项目的启动类上的@SpringBootApplication注解后面加点儿内容：
加这个的意思就是，jt-web项目在启动时，不去检查我有没有连接数据库的配置了。（exclude：忽略）

1.7 jt-web启动效果

1.8 配置nginx

新需求：
不可能让用户输入localhost：8092去访问我的项目
应该让用户输入：www.jt.com 就能访问我的项目
于是就需要用到nginx的反向代理机制。

1.9 修改hosts文件

1.10 关于一个意外：谷歌浏览器自动将http协议变成了https协议

通常情况下，项目启动后，一般人在浏览器中输入www.jt.com，就能访问我的项目。
他访问的地址的全路径是：http://www.jt.com

但个别人用谷歌浏览器登录www.jt.com时，会发现不能访问。
他访问的路径变成了https://www.jt.com

这是在个别情况下，谷歌浏览器检测到我是用http访问的地址，它觉得这样不安全，自作主张，给我用https去访问了，结果就访问不到了。

怎么修改呢？
浏览器键入 chrome://net-internals/#hsts

引用一位大神的总结：https://jingyan.baidu.com/article/4b07be3c01421e09b280f319.html

1.11 实现伪静态

1.11.1 啥是伪静态

引用知乎上大佬的一个通俗的解释：

链接：https://www.zhihu.com/question/20153311/answer/14147350

静态网页就是，比如京淘项目中放了一个abc.html文件，用来描述某件商品，你想访问它就直接输入www.jt.com/abc.html。Web服务器看到这样的地址就直接找到这个文件输出给客户端。
动态网页就是，假如你想做一个显示当前时间的页面，那么就可以写个JSP文件，然后访问www.jt.com/abc.jsp。Web服务器看到这样的地址，找到abc.jsp这个文件，会交给jsp执行后返回给客户端。
而动态网页往往要输入参数，所以地址就变成www.jt.com/abc.jsp?a=1&b=2。
搜索引擎比较烦这种带问号的动态网页，因为参数可以随便加，而返回内容却不变，所以会对这种网页降权。
于是有了mod_rewrite（伪静态），它可以重新映射地址。
比如当前这个页面的地址http://www.jt.com/item/20153311.
Web服务器收到请求后会重新映射为www.jt.com/item.jsp?n=20153311，然后再执行那个jsp程序，即从数据库中查询出20153311对应的商品信息，返回给客户端。（以上网址均为假设）。
这样，在不改变后台内部代码的情况下，对外呈现出来的网址变成了没有问号的象静态网页的网址一样。
于是有人给起了个名字叫“伪静态”。其实也没什么伪的，就是没有问号的动态网址，让搜索引擎舒服点而已。

一句话总结: 以.html为结尾，展现的动态页面的脚本技术.

1.11.2 京淘项目中哪用到了伪静态？？？

当我点击一个商品，准备看它的商品详情时，
点击完，地址栏中的地址变成了：

换一个商品点击，发现地址栏中562379这个数字又变成了别的数字。

在实际的京东网站上测试也有类似的效果：
似乎每个商品都有自己对应的一个号码。
再通过 号码.html的方式就能查看这个商品的item信息。
其实 对于像京东这样的网站来说，要以什么样的布局显示商品信息，这个布局都是定好的模板。
要想展示不同的商品，只要服务器端将数据返回来，再填到模板的相应的位置上就好了。
否则，客户端每访问一个不同的商品，都会发一个ajax请求，服务器端controller中就要用一个方法去接收。
而京东的商品少说也得有几亿个，服务器端controller中写几亿个方法接收客户端的ajax请求？显然不现实。

所以 ，服务器端要通过分析客户端传来的请求：
如果服务器端发现客户端传来的请求的url是以.html结尾的，比如：https://item.jd.com/100007136117.html
那么服务器端就知道了，它要去查询前面那一大串数字100007136117所对应的商品的信息，
查到之后，把数据填写到一个.html格式的模板文件中，就形成了客户想看的样子。

搜索引擎以为京淘的后端服务器返回的是一个静态的html页面，其实这个.html文件也是根据商品的编号，查询出对应的数据，动态组装成的。
就是伪静态。

1.11.3 京淘项目中是怎么实现这个伪静态的？？

课前资料中，老师给写好了一个配置类（MvcConfigurer.java）
我把 它CV到如下位置：
内容如下：

@Configuration						//配置web.xml配置文件
public class MvcConfigurer implements WebMvcConfigurer{
	
	//让后端服务器具有了“后缀匹配”功能，即看到客户端发的请求的url以固定的形式结尾（比如.html）就进行拦截与解析
	//为将来程序实现静态页面的跳转做准备。
	@Override
	public void configurePathMatch(PathMatchConfigurer configurer) {

		configurer.setUseSuffixPatternMatch(true);
	}
}

有这个文件，就实现了伪静态。

1.12 搜索引擎的工作原理

1.12.1 关于.html的说明

一般搜索引擎只能检索静态页面信息，不能检索.jsp等动态的页面信息，
所以一般各家店铺为了提高各家商品的曝光率,使得商品更加容易的被用户检索,所以一般的商品页面都是.html形式的.

1.12.2 搜索引擎的工作原理

看知乎上的这几个解释把，非常好
https://www.zhihu.com/question/19937854

扩展知识

前提:在高并发的条件下由于引入缓存，可能会引发如下的问题,导致数据库服务器宕机,影响用户的体验.

缓存-穿透

特点: 用户高并发的环境下,访问一个数据库中不存在的数据就叫缓存穿透!!!
解决方案: 限制用户单位时间内的访问次数 , 封禁IP地址. 网关过滤.

缓存-击穿

特点: 某些高频的访问数据由于操作不当导致缓存数据库失效（gg了）.从而使得大量的用户直接访问数据库. (一个)
解决方案: 配置多级缓存

缓存-雪崩

特点: 由于redis中的高频key在同一时间内大量的失效.导致用户的请求直接访问数据库,导致宕机的风险. (flushAll)

解决方案: 配置多级缓存,设定不同的超时时间.