概述#

​ 在观看和参考之后的笔记，必须对前后端有明确的概念和认知。如果你有较好的基础，或者你知道你来这里要干什么，就没必要浪费时间在下面的废话了。

这是一段来自维基百科对于两者的简单定义。

前端（英语：front-end）和后端（英语：back-end）是描述进程开始和结束的通用词汇。 前端作用于采集输入信息。后端进行处理。 计算机程序的界面样式，视觉呈现属于前端。

下面是我的理解。

常识

​ 我们学习的课程最终目的只不过是为了开发一个可供他人使用的webapp，互联网冲浪强度高的玩家都知道，像Twitter,Youtube这种包含了巨大信息量的网站（或App）的应用本身占据存储空间并不多（相比我们在使用过程中产生的数据量）。从中我们可知，在这上面推送给我们的数据并不是在我们安装软件时即保存在我们手机上的，它们是通过手机应用或我们主动打开站点网站向服务器发送请求，获取的。

前端#

​ 前端，即与用户最近的一面。可以具象为你手机里的每个可互动的app,也可以是电脑上的QQ客户端，当然，你现在正在阅读的，我，也是这个站点的前端。前端开发更像是在一张白纸上画画，以网页前端举个栗子，你可以在一片空白的页面上添加任意你灵感中的元素，将他们组合，布局，排版。当然，我们需要书写一些函数来渲染一些动态的、从服务器上运行的后端返回给前端的数据（可以是单个元素，也可以是包含多个元素的元素数组）。

后端#

​ 后端，即与用户最远的一面。绝大多数的人在接受互联网服务时并不会感知到后端的存在，他们只知道，‘哦，连上网就能用了’。后端开发的过程相比前端可谓枯燥乏味，因为后端开发过程中并不会有直观的成果展示，它的职责即是处理前端发送来的请求，验证请求身份及合理性，对服务器上运行的数据库里的数据进行操作，再将结果打包成前端易于分辨的json格式返回。

前后端交互过程#

​ 从用户视野来看，以‘登录’这个操作举例，前端开发在网页上布局了一张精美的背景图，在背景图中心有一个圆角，背景色被处理为毛玻璃半透明效果的矩形。里面包含了两个输入框和一个按钮，上面写着登录两个大字。尔后，用户被提示在框内输入正确的用户名和密码。

​ 用户在输入用户名和密码后，按下了登录按钮，彼时网页中事先写好的js登录函数被激活，向写好的后端服务器地址发送了用户登录请求，并将用户输入的账号密码打成json传输给后端服务器。

​ 后端服务器接受到有来自互联网的请求时，首先判断请求源(ORIGIN)，也就老生常谈的跨域(CORS)问题，这个在后面的笔记有讲，涉及网络安全性。尔后拿到前端发送来的json包，里面包含了请求头之类的blabla，最重要的，最主要的，也就是用户输入的个人信息，后端程序一般定义一些变量，或者定义一个包含符合需求变量的实体类变量对提交的信息进行缓存，通过一顿操作进入到数据库找到那个用户校验它的密码，最后返回给前端告诉它登录是否成功。

学习路线#

Flyinsky’s Codes上所有都有’Starter’后缀的笔记不会系统的详解和解释各个框架及代码的缘由。

越新的框架技术，上手学起来越简单。例如前端的javascript，以及后端的servlet，因他们原生开发效率低，学习成本高，周期长，故而有人以它们为底层，为后人编写了一套简化后具有自身语法特色的‘新语言’。因此，越高级的框架，流程简化的越多，学习成本越低，开发周期越短。

前端#

Html -> Css -> JavaScript -> (JQuery) -> (Bootsrap) -> Vue

即使有非常多类似Next.js,React,Angular的流行框架，但我还是推荐Vue，国内热度最高，学习难度相比他者低。

后端#

Java SE -> MySql -> MyRedis -> Springboot 3 -> Spring Security -> OAuth 2.0

学完上述框架即可返璞归真，学习Servlet+JDBC+JSP的开发模式，阅读框架源码，感悟底层逻辑。