商城项目解析（前端页面知识，用户如何访问服务器，hosts的修改，nginx）

接上一篇商城分析继续写（在我的博客里面），大家如果想要看之前的分析就去我的博客里面去找，我下面会提到一些之前博客里面写的模块。

我们还需要搭建一个模块，就是一个工具类，叫做common模块，这个模块具体是什么作用呢？以后会提及到，但是现在我们要知道的是，一般项目都会去搭建这个模块作为一个工具类，随时被其他微服务调用。

目前我们搭建的项目总体结构是这样的：

这里说一下前端页面是怎么工作的呢？

首先你所看到的页面，也就是这个index.html，静态页面

它就是显示在你眼前的页面，然后谁去接手了这个“app”

答案就是这个vue实例，它的选择器选中了这个app，并且接手过来自己做了。

然后我们可以看到，其实APP和下面的router都有相对应的文件导入

./的意思就是在当前目录下的对应文件，一个是App.vue，编写了App里面的内容，还有一个是router，编写了各种路由，比如你点击哪一个组件，它就会跳转到哪个页面的路由

还有App.vue里面的内容

这个东西就是一个锚点，这个是什么意思呢？也就是说，你在点击一个组件的时候，组件会根据router里面的地址找到你这个APP对应的地址。

你可以去看看index里面，都是route的路径，先说明一下，index在文件rouer里面，所以index就是在执行储存路径地点的一个类。

其实有两个路由，一个是上面的那个login那个路由，这个是登录的路由

注意这里，path写个/就是表示根路径，然后下面就是写的是地址

这是layout里面的内容，代表着着是个功能组件页，写好了导航条那里的功能语句，路由到这里来就可以实现相对应的功能。
在我们点击导航条的各个功能的时候，我们能看到，没点击一个功能，就会发生相对应的变化，因此说明，我们点击这些功能的时候，都有相对应的路由提供路径让你去实现前端页面的功能，但是当我们去点击商品管理这个功能的时候，可以看到一个这样的界面：

点击后变化的是页面中间部分，但是中间部分并没有显示，说明我们需要的是中间部分的功能组件和连接到中间组件的路由。

如果我们想知道点击品牌管理后对应的路由是什么，我们首先要知道，点击品牌管理后，它跳转到的地址是什么

可以看到，它跳转到的是这个地址，之后我们可以根据这个地址查找一下组件

这里小小普及一下知识，children的意思就是子组件的意思，然后我们可以看到，这里是品牌管理的路由，它的格式是route("/item/brand",’.item/brand’,“Brand”)，这个是什么意思呢？首先第第一个逗号前面的代表的是浏览器地址，第二个是文件的路径。

这里要说一下这个路由，就是一个自己写的一个方法，vue不自带的，这个要自己去写，然而把四个参数传进来，路径，文件，名字，子组件。

我们该怎么知道children的route里面的文件路径对应的是哪里呢？所以就在这个route方法里面有写，children里面的文件路径统一都是对应…/pages里面的路径

所以说，无论你后面写什么，你的路径地址都是在当前目录下/pages里面的文件。

总结一下，如果你想要知道哪个组件对应在前端程序中的哪个方法，你先去访问那个页面，然后在弹出来的地址里面记住后面的地址是什么，然后回到前端程序中的路由文件夹里面找到路由器，然后查看方法并且查看对应的是哪一个路由，顺着文件地址找到那个文件即可

而且你只输入这一个地址的话，你将会跳转到另一个页面

这是怎么做到的呢？

可以看下这个方法

我们设定了重定向，也就是说你输入了端口号访问了这个页面，你将会被重定向去访问这个主页，因为路由是路由到主页的配件那里的。

在真正开发的时候，我们会面对不同的开发环境，有在自己电脑上的，有测试环境的，有预发布环境的，有生产环境的，面对不同的开发环境，我们不可能说一种环境就对应一种ip去访问，这样出现的问题会很多，比如我在自己的电脑上的开发环境是一个ip，当我切换到预发布环境的时候，又要进行切换ip才能够访问到我的服务器，这个时候就造成了一些麻烦甚至还会出现一些问题。因此为了解决这个问题，我们需要统一只用一个ip，然后只修改域名即可，这样无论在哪个开发环境里面都可以做到自由访问

这里说一下什么是ip

ip就是你需要花钱去电信公司去购买的一个地址，有了ip之后你才能在网站上被别人访问。

什么是域名？

域名就是网址前面开头那个部分，一般我们的是www开头的，但是切换到不同页面的时候，域名可以发生变化，这里可以用京东的页面作为一个例子：

这是京东首页的域名

切换到搜索页面后，域名又不一样了

到商品详情页，域名又不一样了

这就是域名，前面改变域名后并且访问，然后ip会根据不同的域名发送请求给服务器进行响应，然后找到对应的服务。

总的来说，你需要做一个项目，首先你先购买一个服务器（也就是像家用电脑一样的设备），然后服务器用来工作并且随时被调用服务，然后我们还需要去电信公司购买一个ip，有了这个ip之后，我们就可以绑定这个服务器，然后别人想要访问这个服务器的时候，只需要输入地址就可以进行访问，但是输入的是什么地址呢？我们不可能是直接输入ip地址进行访问，但是我们可以用这一个ip地址进行搭建几个网站，通过不同的域名来搭建，用户就可以实现通过访问域名来访问对应的服务。

如果你需要更换服务器，你只需要把原来服务器上面的数据进行备份，然后转移到新的服务器上面，然后把多个域名绑定到新的服务器ip上就可以了。

用户访问服务器的过程是怎么样的呢？

首先用户直接在网址中输入对应的域名，如果用户的本机的hosts文件里面有对应的ip和对应的域名，那就可以在输入域名后，系统自动根据hosts文件去匹配ip，然后通过ip访问对应的服务器，达成服务。

但是如果输入域名访问地址时，本机的hosts文件并没有对应的ip地址，那么将会转而在DNS中寻找ip。什么叫DNS呢？就是那你购买ip的时候，运营商会将你的ip和对应的域名添加进DNS，这个是网络上通用的解析域名的服务器，相当于网络上的hosts。

然而我们想要修改本机的hosts的话，可以使用Switchhosts这个软件去修改，但是要注意一定要以管理员身份去运行，为什么我们直接修改hosts文件不可以呢？这个要看windows版本，有些版本是不可以直接修改的，所以我们需要去借助工具去修改。

这就是我们配置的ip地址与域名对应的配置

然而我们直接去访问这个网页，却出现了以下问题：

直接访问，却出现了这样的文字，说明访问并不成功，这是为什么呢？原来在我们的前端页面里面，是已经配置好了你访问这个页面的网址是多少，也就是说你一定要按照它的网址来进行填写，不可以用其他域名：

地址为localhost:9001，它是默认你不可以开启域名进行访问。

为了解决问题，你必须要开启禁用hosts检查器的功能：

禁用hosts检查，你就能直接用hosts的ip和域名进行对应。配置完后我们需要重启一下前端

结果就是可以访问了。但是有没有发现一个问题，网址当中我们有9001这个端口的存在，那实际上访问的时候我们不希望9001这个端口存在，而是希望访问域名就可以到服务器但是不显示端口，我们先把9001去掉，然后进行访问试试：

结果出错了，该怎么解决呢？

目前有一个解决办法，就是在前端页面把它的访问路径改成80端口的，但是如果我们直接修改为80端口的，那这个端口是不是就被占用了，对吧？我们还有其他的组件呢，比如网关，比如item，它们都是需要80端口，如果因为你这个前端页面就占领了80端口，你让其他微服务怎么运行，对吧？所以这里我们需要用到nginx代理服务器。

什么是nginx

nginx可以成为多种类型的服务器，如果它成为了web服务器的话，将可以处理一些静态资源页面比如html，css，js等等。

web应用服务器和web服务器最大的区别就是web应用服务器能够去处理jsp页面，而web服务器不可以处理jsp页面，但是web服务器可以去处理静态资源页面比如html，js，css等等，因此，web服务器可以用来做前后端分离并且并发服务器，这个是什么意思呢？也就是说，我们不再用以前的前后端结合的做法来完成一个项目了，而是采用前后端分离的做法，并且把前端和后端部署到浏览器上并且可以部署多个，这就是web服务器的功能，相对比之下web应用服务器是只有很少的并发功能的，它做好了以后就是一个整体的服务器，难以修改配置。

相对比之下，web应用服务器比如tomcat最多部署200个服务器，但是nginx可以部署5万个。

另外说明一下IIS是什么

IIS就是如果你的电脑系统版本是Windows server的话，就需要使用这个web服务器

然而我们这个nginx是可以作为web服务器进行使用的，但是大多数时候我们还是选择把它作为一个网关来使用，因为nginx的位置比zuul网关还要前，所以nginx可以作为zuul网关的网关，在nginx当中，也有网关的功能比如负载均衡，指定路由，还有过滤器，在请求经过nginx的审查以后，nginx就会做一个负载均衡，去挑选相对应的网关微服务，然后再由网关微服务去做另一个路由的传递

这就是工作原理，nginx接收请求后进行负载均衡，分发到微服务上。

这里说明一下，路由和负载均衡是不一样的，路由是通过端口号，地址信息来进行访问某个特定的微服务，但是负载均衡就是随机调配

nginx工作原理，就是通过输入对应的域名，然后去访问不同的服务器。

当然，有一些大型的网站会用自己做的代理服务器，类似于nginx，但是又不是nginx，比如阿里云或者天猫，都有自己的代理服务器。

nginx的工作原理是怎么样的呢？

首先我们在网址上输入manage.leyou.com
然后进行访问，然后它就会自动访问到DNS服务器当中，DNS服务器就会为地址后面加上/#/index/dashboard

这个时候地址就变成了manage.leyou.com/#/index/dashboard，然后hosts就会根据里面的配置信息匹配出对应的ip地址，然后这个ip会自动给这个地址加上端口号80，为什么为自动加上端口号80呢？因为我们访问的ip地址自动会给我们加上80的端口，而且我们在nginx的配置文件里面配置了这样的信息

监听地址为80，域名为manage.leyou.com，下面的配置就是通过域名转接的地址就是127.0.0.1:9001，这个地址也就是前端页面的地址，然后下面就是设置响应时间秒数之类的。

有一点需要总结一下，也就是nginx专门监听80这个端口，你访问的ip就是127.0.0.1:80(80是自动给你加上去的)，然后被nginx监听到了，并且nginx通过头信息知道了域名为manage.leyou.com，因此就可以访问nginx配置好的地址：127.0.0.1:9001，也就是首页。

这里注意的是，最终是通过nginx响应回给浏览器

同理，我们要去配置一下网关

域名为api，然后我们的地址端口为10010，为什么是10010呢，因为我们之前配置后台网关微服务的时候端口就是用了10010，因此就是10010.