什么是web

web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。

这里引用自百科，这这里就粗浅的理解为我们的网站吧。

前端和后端

WEB的结构是 B/S模式（Browser/Server，浏览器/服务器模式），这种模式区别于 C/S （Client/Server）模式。

（想想CS模式，常见的是我们的桌面软件（QQ，etc）），所以 BS 的特点就是功能在服务器的高度集中，使用浏览器就可以和所需的不同服务进行交互。

前端后端，是我们在web方面听到的较多的词汇，其实际上的功能是什么呢？

前端

提词：

  • HTML （How to meet lady）（页面的主体，可以理解为ppt的内容）
  • CSS （决定ppt内容的样子，方的圆的）
  • JavaScript （赋予了页面动态的效果）
  • BootStrap （用于设计界面的一个框架）
  • JQuery （用于更好的动态功能的组件）
  • …

好，上面的名词看晕了，那么现在就来看看什么是前端。

简单切不严谨的说，用户通过浏览器直接接触到的东西就是前端。那么怎么讲呢？简单！按一下 F12就看见了熙熙攘攘的代码堆起来了。

鼠标在元素选项卡(Element)，选中 Html 中的不同标签，发现其是在页面中是一一对应的。所以说，页面的内容和我们 HTML 中的标签是一一对应的（不严谨），这样就可以得出结论，HTML 是页面的骨架对吧，构建出了整个页面的基本内容。

HTML 就是PPT的内容，实现了基本的页面内容

接下来，就是介绍 JavaScript 的时候了，JS 这个名号听着厉害，实际上一直在浏览器上跑着呢。这里继续 F12 在里面找到 控制台(Console)，在里面输入：

alert('love ann!');
confirm('Would U like be With me?');

(如果看到这里，可以去跑一下晚上的神秘代码！)

所以 JS 的功能呢，就是可以赋予网页动态的灵魂（类比给 ppt 加上了动画），这样就可以实现很多炫酷的效果。这些代码在浏览器里偷偷运行着。

或者试试这个？

$.map($('div'), function(e,t,n){$(e).css({"background": "red"});})

红彤彤的，是不是一下子就过年了？？？

JS 就是 PPT 里面的动画，实现了动态效果，比如点击消失

CSS （Cascading Style Sheets） 层叠样式表，是不是有些时候页面加载出来很奇怪？ 比如一堆内容堆在了屏幕的坐标，刷新几次就好了？ 这里就是这个CSS没有加载出来。

简单的说呢？ 这个东西是来配置一个页面元素 长什么样子的，怎么说呢？我们还是看上面的代码：

$.map($('div'), function(e,t,n){$(e).css({"background": "red"});})

虽然有点晕晕的，不过我们看里面的部分 css({"background": "red"}) 是不是瞬间熟悉了，这里其实完成的就是对元素的样式进行了调整，把背景设置成了红彤彤。

好的，前端我说完了 XD

后端

提词：

  • Web服务器 Nginx Apache
  • 数据库 Mysql， MongoDB，Redis …
  • PHP，Python，Java …
  • ThinkPHP，Django，Spring …
  • 这里的词就有些模式了吧？ 慢慢来

现在我们到了，后端了。这个又怎么说？一句话，用户摸不到的地方就是后端。怎么理解呢？

看我们平时登陆一些服务的时候，这个过程一定熟悉。我们的账户就保存在 后端的 数据库之中，每每我们登陆的时候，把账号密码发送给目标服务器，服务器帮我验证，你的密码和注册的时候是不是一样的，从而判断是不是你。（不可能放在前端对吧？否则 你 F12 就看见密码了，吼吼吼）

先从 WEB服务器来讲吧，这到底是个啥呢？

我们的Html文件，在本地磁盘上，我们直接双击打开，看已经打开了一个网页了对吧？

那么 WEB服务器 的功能，就是帮你找东西。比如我要访问这个链接

https://blog.diglp.xyz/2019/01/20/Nginx%20log/index.html

分段来看：

  • https://blog.diglp.xyz 这里就是访问了服务器对吧
  • /2019/01/20/Nginx%20log/index.html 这里呢？就是在服务器里面找东西了

想想昨天的 pwd 是不是就好理解了？

数据库，这里其实听名字就知道啦，存数据的地方。我们可以使用 SQL （Structured Query Language）语言，对数据进行查询。

MongoDB 是一种新式数据库，基于文件的 NoSQL， 突破了结构化的限制 是 NoSQL （Not Only）

Redis 实现在内存中实现数据存储，数据更快，一般用于请求量极大的数据，保持高命中率。

编程语言，和编程框架，这里放在一起啦。上面的每一种语言 都可以轻松实现一个 hello world。

  • PHP 本身是一种编程语言，是和 python 一个层级，.py 需要 python runtime 。.php 需要 php 的 runtime。两个东西都可以很简单的使用 python x.py 和 php x.php 的运行起来
  • 当 python 使用 flask/Django 开始 web 开发的时候了。和 PHP 的 web 框架 (ThinkPHP) 作用在一个层级了。不准确的讲每次访问，都会启动一个进程，对这个脚本内的内容进行运行， 这里的运行是在服务器端的。对我的的请求进行解析，比如 url 的路由路径， 请求方式等进行响应。
  • 这时候仍然是在服务器端， 进行数据库的增删查改。 把操作 (得到的数据，传递到前端) index.php?category=x
  • 前端进行数据获取，由 js 脚本，实现静态 html 的显示刷新

XD 这里我从之前的地方 Copy了，饿了！

后面的话

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('7["\\6\\8\\a\\9\\2"](\'\\1\\1\\5\\4\\3\\h\\g\\i\\k\\j\\c\\b\\0\\0\\d\\f\\e\');',21,21,'u661f|u563b|x74|u505a|uff01|u6bdb|x61|window|x6c|x72|x65|uff08|x7e|u773c|uff09|u2728|u5973|u6211|u670b|u5427|u53cb'.split('|'),0,{}))