前端与后端的区别与联系
一、前端开发
运行在用户浏览器的一切代码，负责看和动
1.1 核心三件套
一般情况下前端是由三个东西组成，HTML、CSS、Javascript
- HTML： 网页的骨架，定义标题、图片、段落等等结构；
- CSS：给结构添加一些好看的外观，例如颜色、布局、动画，让这一切都变得很美；
- JavaScript：这是网页的大脑，例如负责点击的响应，表单的验证、动态的获取数据等等；
1.2 更现代的工具
现在的话，前端开发人员都会选择使用框架，例如React、vue等，可以更加快速、方便的使用组件化的方式高效的构建复杂界面；对于也写交互数据的管理，大多数都会选择Redux或者pinia这种状态工具统一管理数据；
1.3 前端工程师职责
- 将设计师给你的UI完全使用前端代码还原；
- 完整响应式设计，使得各种设备都能有很好的体验；
- 优化加载速度，提高页面的性能；
- 调用后端工程师给你的API，并且将获取的数据渲染到页面上；
二、后端开发
运行在服务器上面的代码，负责处理业务逻辑、操作数据库、保障安全
2.1 后端运行环境
有很多很多的后端语言都能很好的担当后端的角色，例如PHP、Java、python、Ruby，但是只有Node.js让JavaScript也能在服务器上面运行了；
2.2 后端核心任务
- 接受和响应请求：监听前端的HTTP请求，经过逻辑判断之后返回前端需要的数据(通常是JSON数据)；
- 业务逻辑处理：比如判断用户数据的用户名和密码是否正确；比如只有每日3-4点进行注册等等；
- 数据库交互：对数据库的CRUD增删改查；常见的数据用有Mysql、MongoDB、PostgreSQL等；
2.3后端的其他任务
- 身份验证与权限：例如使用JWT，Session来确定这个用户能不能看到某个页面；
- 安全防护：需要放置SQL注入、XSS攻击、加密等等
- 服务器架构优化：例如使用负载均衡、Redis缓存、消息队列等等
三、前后端如何一起工作的
前后端通过HTTP协议进行通信，通常使用RESTAPI风格。
- 前端发送请求
- 后端处理并响应
- 一般情况下，会返回一个json格式的数据，这个数据就包含了公司新闻的一些数据
- 前端拿到JSON之后就可以更新界面了，把公司新闻渲染到页面上；
四、扩展：静态网站、静态网站以及API
4.1 静态网站
开发者将写好的HTML、CSS、JS、image等文件放到服务器中，用户请求那个页面，就直接发给他，所有人看到的页面都是一样的；这不需要任何的服务器程序，不需要数据库；
这里有个误区，新手可能觉得我使用了js做了一个动画，这个不就是一个动态的网页么？此动态非彼动态，我们再看看动态网站是什么样子的
4.2 动态网站
服务器上不仅仅有静态文件，还有后端代码的程序，例如Node.js。每当用户请求页面的时候，可能会查询数据库，然后将数据库中的数据结合HTML模板揉在一起，生成一个专属的页面，返回给浏览器；
4.3 API驱动
服务器不关系你HTML是什么样子的，服务器只提供数据接口；你请求这个接口的数据，我就返回给你json或者XML。前端完全由JavaScript接管，由js来调用这些数据，然后浏览器自己去拼装出界面；这通常我们叫做SPA单页应用
- 所谓的前后端分离，就是基于API来驱动的，这时候完全可以将前端和后端完全分开；两个只需要约定好API文档可以了；
- 页面不需要整体刷新，和原生的APP流畅度差不多；
- 一个后端做出来之后，可以同时给WEB、APP、小程序同时提供数据；