聊聊前后端分离，web服务器和一些概念小结

自己最近写了一个前后端分离的小项目，结合网上的一些视频和文章，自己也慢慢对一些常见的概念有了自己的认识，这篇文章算是对最近的一个小总结吧。

前后端分离

前后端分离算是当下比较热门、流行的一种系统架构，在面试中问到前后端分离有什么好处也是常见问题了。在说前后端分离之前，我觉得可以先说一下前后端不分离是什么样子的。

在更早的时候，开发一个遵循MVC原则的Web项目，用户请求服务器，我们在Controller层接收请求和数据处理，封装到Model中后，最终通过jsp页面（View）渲染数据。更多时候，前端开发人员只是提供HTML等静态资源的设计，而对于页面上的数据交互是由后端开发人员去写和维护的。
那么这样会出现什么问题呢？后端人员和前端人员工作量不对等，另一个问题就是View层的冗余，jsp代码中可能做了过多的逻辑判断，对于前端人员来说，也很难控制jsp最终解析后生成的html和一开始预想的视图完全一致。
后来，ajax出现了。通过允许在页面上向后台发送异步请求，后台返回json数据给前端，这是一个很大的进步，前端可以更好地专注于数据的渲染，后端只要返回数据即可。但是前端还没有真正实现独立，无法进行独立的开发和测试。

再到现在，前端代码和后端代码完全分离，可以分别开发。前端来负责页面展示和数据渲染和交互，后端负责业务逻辑和数据持久化，前后端之间通过restful接口进行通信，双方分工更加清晰，开发效率也更高。本质上来说，前后端分离是web项目架构不断朝着职责清晰，效率更高的方向不断发展的产物。有了前面技术的沉淀和积累，才有了现在这样合理的架构。个人认为前后端分离在后面较长一段时间中也会是系统架构的主流。

web服务器

再来说说web服务器，Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以处理浏览器等Web客户端的请求并返回相应响应，也可以放置网站文件，让全世界浏览。也就是说，我们可以将我们的资源和应用部署到web服务器上，从而让互联网上其他人可以来访问我们的资源。
那么常见的web服务器有哪些呢？Apache、Tomcat、Nginx、Weblogic等
当我们将我们写好的web项目放到tomcat的webapp目录下，部署到Nginx下，其实本质上就是利用这些web服务器来对外提供服务。

npm和node.js

一开始学习前后端分离的项目，网上的教程大多都是说下载Vue-Cli脚手架，下载node.js，npm install一把梭之后，你就可以在8080端口（一般默认是这个端口）访问你的vue页面了。但其实这时候的你可能还有些疑惑，这到底是怎么实现的，敲进去的命令到底起到了什么作用？
先说npm，node.js使用的包管理工具。什么是包管理工具呢，其实很好理解，就是相当于maven、gihub一样，对一些开源常用的代码进行统一的下载管理。
举个例子，在更早之前，前端开发人员想要使用jQuery的话，那么他就需要去到官网下载后再本地使用，那么他想要使用bootstrap就又不得不去到对应的官网下载后才能使用。一旦引用的文件多了，那这种行为就会变得繁琐而没有意义。这个使用，使用npm作为包管理工具，简单地使用npm install jquery，就可以将jQuery下载到自己的项目中使用啦。
那么为什么使用npm run dev之后，我们就可以通过localhost:8080进行访问呢？
网上太多教程讲了如何用vue-cli脚手架来初始化前端工程，但是对于内在的原理却很少有提及到。先说结论，本质上是因为在这个过程中使用了node.js的http模块，启动了一个web服务器，从而让我们实现了资源的访问功能。
简单解释的话，当我们执行npm run dev的时候，会去package.json文件下找到scripts标签下的dev。这里可以看到我本地的话是webpack-dev-server，而webpack-dev-server这个包，它又是基于express实现的express又是一个node框架，它起的web服务器底层调用的实际是node的http这个核心模块

小结写到这里就差不多了，在整理自己知识体系的同时，希望能对这些概念不清晰的朋友们提供一些帮助。
参考文章：
1、vue在npm run dev 后为什么就在localhost运行了
https://www.imooc.com/wenda/detail/594797
2、NPM的由来
https://www.cnblogs.com/liu-di/p/10408975.html
3、前后端分离的好处
https://www.cnblogs.com/zhangzhiyong/p/9991896.html