给web开发零基础小白的简明入门教程

1.网页三大件：HTML、CSS、JS

HTML（HyperText Markup Language超文本标记语言）：构成网页的结构，结构由元素（标签）组成。
CSS（Cascading Style Sheets层叠样式表）：控制网页中的元素的样式，标签名控制、id控制、class控制。
JS（JavaScript网页脚本）：动态控制网页元素、数据等，发送与接收请求、计算等。

2.什么是前后端分离？

在很久很久以前，互联网攻城狮们通过这么一种方式来产生页面：

用户发送请求，服务器返回一个html文件，里面包含了html、css、js，如果要访问一个新的网页，就需要将整个页面刷新，重新请求服务器返回一个html文件。

但是随着互联网的发展，这种方式表现出了一些劣势：

资源浪费：重复的资源请求。
性能瓶颈：每次返回的东西太大了，占用网络带宽。
不方便维护：需要兼顾业务逻辑与视图。
交互性差：不能动态的加载一部分的数据，只能刷新整个网页。

…

于是呢，工程师们想出了前后端分离的方法（本质上是一种纵向分布式），让前端与后端各司其职：

前端管视图，需要数据就去问后端；
后端管业务逻辑，只返回数据（一般是JSON格式），不用管界面好不好看。

现在前后端分离架构已经成为web开发的主流。

你可以不去了解分布式、微服务架构，但至少，要做前后端分离。

前端框架：Vue，React

后端框架：Springboot，Express

3.用户和服务器交互的方式是通过API接口传输JSON数据

API（Application Programming Interface）：应用编程接口，从名字我们能够看出，这个东西应该是在编程时使用的，用户不应该感知出来。

第二个问题中，我们提出了前后端分离，那么前端如何与后端通信呢？

一般通过前端中的JS向后端的一个API接口（可以理解为一个网页地址），发送请求（这个请求实际上还是客户机发出的，一般为http或https），后端返回数据后再通过JS动态加载进页面中。

http流程：

1.用户向后端发送一个请求（request）

2.后端处理数据（计算、数据库交互、其他逻辑）

3.后端返回一个响应（response）

4.API接口分为两大类：GET和POST

GET请求

相当于直接在浏览器地址栏访问，可以携带若干个字符串形式的URL（Uniform Resource Locator）参数，总长度限制于浏览器有关，一般在5~10万，不同参数用&连接。

https://cn.bing.com/search?q=get%E6%8E%A5%E5%8F%A3%E9%95%BF%E5%BA%A6&cvid=26da819607ad4891a24f3e4c1defe6fe&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQABhA0gEIMzAyMWowajmoAgCwAgA&FORM=ANAB01&PC=CNNDDB

接口地址：https://cn.bing.com/search
参数（JSON格式）：{
“q”:“get%E6%8E%A5%E5%8F%A3%E9%95%BF%E5%BA%A6”,
“cvid”:“26da819607ad4891a24f3e4c1defe6fe”,
“gs_lcrp”:“EgZjaHJvbWUyBggAEEUYOTIGCAEQABhA0gEIMzAyMWowajmoAgCwAgA”,
“FORM”:“ANAB01”,
“PC”:“CNNDDB”,
}

POST请求

与GET的区别在于，它可以携带一个JSON作为请求体，而不是仅仅只能携带字符串参数，浏览器不能直接发送POST请求，需要借助工具或JS。

一个请求一般由请求头（Header）、请求体（GET没有，JSON）、Cookies（一小串信息，一般携带一些用户信息）组成。

关于POST的具体的知识，如果点赞过500，咱们就接着唠。

5.编写一个简单的前端网页，用于每次随机获取一张壁纸

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机壁纸</title>
</head><body><button onclick="ChangeBG()">切换背景</button><script>// ES6，ECMAconst ChangeBG = () => {const urlList = ['https://b0.bdstatic.com/daaa0535d569ce15f5301068353cc9e1.jpg@h_1280','https://b0.bdstatic.com/19fa4ab39078d78891031f43b5d13036.jpg@h_1280','https://b0.bdstatic.com/e1b147b8e75495df728a3f4f69c0f2ff.jpg@h_1280','https://b0.bdstatic.com/6d0437c07d8a5e1ccd60f22ba452c281.jpg@h_1280','https://pic2.zhimg.com/v2-bef6f460b30747888fc62b6d28907305_r.jpg'];const num = Math.floor(Math.random() * urlList.length);document.body.style.backgroundImage = `url(${urlList[num]})`;}ChangeBG();</script>
</body></html>