当点击浏览器上的功能组件时，前端和后端是如何实现工作的过程，以及nginx，host的工作过程

来说一说页面请求过程是怎么完成的，当我们点击浏览器一个功能组件的时候，这个过程是怎么完成的呢？我们可以看看上面这张图，当我们点击了功能组件后，他首先是生成了一个地址，然后访问这个地址，访问这个地址的时候就是发送过去给host进行配对，如果host里面有相对应的ip地址，那地址就修改为ip地址，再加上对应的端口，这个时候就有nginx服务器进行监听，当他监听到这个地址之后，因为我们之前在这个nginx已经配置好了，对应的端口和域名，就会访问对应的路径。

因此这个请求发送给nginx后，就会由nginx进行转发，找去访问相对应的端口的页面，比如说有一个webpack的端口就是nginx里面配置的端口，那么nginx就会转发请求到webpack，然后webpack会根据地址最后的/item/brand，来判断他需要什么路由，根据路由找到它的功能组件，返回相对应的页面信息给他。

这里介绍一下webpack是什么？

webpack是一个有打包功能的组件，也就是打包前端类比如js，css，html，把它们都打包成一个请求包，然后方便请求访问。

但是最后你加载了前端页面之后，如果前端页面需要有数据显示怎么办？这就需要后台的连接，那具体他们是怎么连接后台的呢？可以看到前端页面这里写的这个方法，就是在页面渲染之后它就会执行这个方法，去查询数据。


然后你可以看到他的方法，他又发起了一次路径，去连接后端的信息。其实这个页面的信息就是他向浏览器发起这个地址，还有他的基础路径，他是有一个专门的方法写基础路径的，基础路径加上他上图这个地址，就是浏览器访问的地址。也就是说他访问后端的时候，其实也是给浏览器发送了一次地址来进行访问，也是首先在host里面查找对应的ip地址，然后再由host进行解析，发出ip地址，然后由nginx进行监听，并且转发地址，一般都是转发到网关，网关再根据这个地址分发路由，路由的名字就是一个微服务的名字。

可以看上图，在最右边这里，在网关这里已经配置好解析的前缀为api，然后路由的微服务的路径为/item开头的，如果达成这两个前缀，就可以访问相对应的微服务，那微服务是怎么实现工作的呢？首先看看地址，除了api和item被解析了外，还有两个没被解析，这两个就会被微服务里面的controller进行一个全局配置，也就是说RequestMapping去获取，然后在内部用GetMapping去获取page，然后开始赋予方法值并且编写业务逻辑。

最终由微服务返回给网关，网关再把数据返回给nginx，nginx再把数据返回给浏览器。