写给小安的WEB入坑指南

写给小安的WEB入坑指南

什么是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),在里面输入:

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

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

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

或者试试这个?

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

红彤彤的,是不是一下子就过年了???

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


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

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

1
$.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.pyphp x.php 的运行起来
  • 当 python 使用 flask/Django 开始 web 开发的时候了。和 PHP 的 web 框架 (ThinkPHP) 作用在一个层级了。不准确的讲每次访问,都会启动一个进程,对这个脚本内的内容进行运行, 这里的运行是在服务器端的。对我的的请求进行解析,比如 url 的路由路径, 请求方式等进行响应。
  • 这时候仍然是在服务器端, 进行数据库的增删查改。 把操作 (得到的数据,传递到前端) index.php?category=x
  • 前端进行数据获取,由 js 脚本,实现静态 html 的显示刷新

XD 这里我从之前的地方 Copy了,饿了!

后面的话

1
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,{}))
一杯可乐~