WEB 前后端开发技术栈总结

声明:本文仅为作者个人将所学知识和工具资源进行集中的整合梳理,仅供交流学习、不涉及利益关系,整理不完整或有误的地方请谅解。

『路漫漫其修远兮,吾将上下而求索。』

软件开发周期

软件开发周期

Git – 版本控制工具

Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。

Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

Git 与常用的版本控制工具 CVS, Subversion 等不同,它采用了分布式版本库的方式,不必服务器端软件支持。

相关链接:

前端 UI(Frontend)

1、前端学习路线

强烈推荐参考文章:前端学习路线 - objtube

img

- HTTP/HTTPS

HTTP(HyperText Transfer Protocol:超文本传输协议)是一种用于分布式、协作式和超媒体信息系统的应用层协议。 简单来说就是一种发布和接收 HTML 页面的方法,被用于在 Web 浏览器和网站服务器之间传递信息。

HTTP 默认工作在 TCP 协议 80 端口,用户访问网站 http:// 打头的都是标准 HTTP 服务。

HTTP 协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂其中的信息,因此,HTTP协议不适合传输一些敏感信息,比如:信用卡号、密码等支付信息。

HTTPS(Hypertext Transfer Protocol Secure:超文本传输安全协议)是一种透过计算机网络进行安全通信的传输协议。HTTPS 经由 HTTP 进行通信,但利用 SSL/TLS 来加密数据包。HTTPS 开发的主要目的,是提供对网站服务器的身份认证,保护交换数据的隐私与完整性。

推荐书籍:《图解HTTP - 上野宣》


- TCP/IP

TCP/IP(Transmission Control Protocol/Internet Protocol,传输控制协议/网际协议)是指能够在多个不同网络间实现信息传输的协议簇。TCP/IP 协议不仅仅指的是 TCP 和 IP 两个协议,而是指一个由 FTP、SMTP、TCP、UDP、IP 等协议构成的协议簇, 只是因为在 TCP/IP 协议中 TCP 协议和 IP 协议最具代表性,所以被称为 TCP/IP 协议。

TCP/IP 是用于因特网 (Internet) 的通信协议。 TCP/IP 通信协议是对计算机必须遵守的规则的描述,只有遵守这些规则,计算机之间才能进行通信。

TCP/IP模型与OSI模型各层的对照关系:

TCP/IP模型与OSI模型各层的对照关系

推荐书籍:《图解TCP_IP_第5版》

- CDN/DNS 原理

相关链接:CDN DNS 原理概述 | LPxz’s Blog


2、基本语言

在线编译工具:HTML/CSS/JS 在线工具 | 菜鸟工具 (runoob.com)

1)HTML – 网页元素语言(网页布局、控件等)

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

推荐书籍:《Head First HTML and CSS》

2)CSS – 网页样式语言(可以了解一下 CSS 扩展语言 Sass)

推荐书籍:

  • 《CSS 揭秘_Lea Verou》
  • 《精通 CSS: 高级 Web 标准解决方案 (第 2 版)》

3)JavaScript – 网页脚本语言(网页 DOM 元素操作,业务逻辑,与后台交互等)

相关链接:

(我的)常用 JS 插件:

推荐书籍:

  • 《JavaScript 高级程序设计 (第3版)_Nicholas.C.Zakas》
  • 《JavaScript 设计模式》

4)ECMAScript 6 (ES6) – JavaScript 语言的下一代标准(很多新语法可以加快开发效率)

相关链接:


3、开发环境(TODO)

1)Node.js – JavaScript 本地运行环境,很多工具都依赖该环境

相关链接:Node.js 中文网

2)NPM – 同 Node.js 一起安装的包管理工具

相关链接:菜鸟教程-NPM 使用介绍

3)Webpack – 前端资源加载/打包工具(前端应用工程化开发解决方案,模块化开发工具)

相关链接:webpack 中文文档

4)VS Code – 代码开发、调试工具(其他 IDE 还有 WebStorm、HBuilder、Sublime 等)

相关链接:vscode 教程(基础篇)


4、开发框架/UI 样式库

1)React.js – 用于构建用户界面的 JavaScript 库

React 是一个用于构建用户界面的 JAVASCRIPT 库。主要用于构建 UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

  • 声明式
    React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据变动时 React 能高效更新并渲染合适的组件。
    以声明式编写 UI,可以让你的代码更加可靠,且方便调试。

  • 组件化
    构建管理自身状态的封装组件,然后对其组合以构成复杂的 UI。
    由于组件逻辑使用 JavaScript 编写而非模板,因此你可以轻松地在应用中传递数据,并保持状态与 DOM 分离。

  • 一次学习,随处编写
    无论你现在使用什么技术栈,在无需重写现有代码的前提下,通过引入 React 来开发新功能。
    React 还可以使用 Node 进行服务器渲染,或使用 React Native 开发原生移动应用。

相关链接:

2)Vue.js – 渐进式 JavaScript 框架

轻巧、高性能、可组件化的 MVVM 框架,前端三大框架之一(React、Vue、Angular),中文文档完善上手简单(Vue 国内公司用的比较多,React 国际上用的较多),当然除了 Vue 框架本身,还可以配合使用其他组件,比如 vuex,vue-router、axios、Vue-Cli 脚手架等组件(Vue 全家桶)。

  • 易学易用
    基于标准 HTML、CSS 和 JavaScript 构建,提供容易上手的 API 和一流的文档。

  • 性能出色
    经过编译器优化、完全响应式的渲染系统,几乎不需要手动优化。

  • 灵活多变
    丰富的、可渐进式集成的生态系统,可以根据应用规模在库和框架间切换自如。

相关链接:Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

3)Angular.js – 现代 Web 开发平台

Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身,为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力。

  • 横跨多种平台
    学会用 Angular 构建应用,然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web、移动 Web、移动应用、原生应用和桌面原生应用。
  • 速度与性能
    通过 Web Worker 和服务端渲染,达到在如今(以及未来)的 Web 平台上所能达到的最高速度。
    Angular 让你有效掌控可伸缩性。基于 RxJS、Immutable.js 和其它推送模型,能适应海量数据需求。
  • 美妙的工具
    使用简单的声明式模板,快速实现各种特性。使用自定义组件和大量现有组件,扩展模板语言。在几乎所有的 IDE 中获得针对 Angular 的即时帮助和反馈。所有这一切,都是为了帮助你编写漂亮的应用,而不是绞尽脑汁的让代码“能用”。

相关链接:Angular

4)UI 组件库 (布局、表单、表格等常用控件基本都能满足)

5)单页面应用(SPA)和多页面应用(MPA)

单页面应用(Single-Page Application)是个相对古老的传统的多页面应用(Multi-Page Application)的名词。

以前我们访问网页,每个页面是一个 html 文件。点击某个超链接,就跳转到新的 html 页面。每次浏览器访问 html 时,需要重新下载整个 html 文档、JS 和 CSS 依赖,才能展现出整个页面。这个效率很低。

随着异步请求 AJAX 等技术的兴起、HTML5 规范的出现,开发者有了更优秀的页面加载方案:一个网站的所有页面,都是同一份 html 文档,用 JS 判断路由,并动态展示内容。通过预加载等方式,把整个网站的页面都下载到内存中。每当用户点击超链接,准备切换页面时,通过 history API 使浏览器更新 URL 而不必重新下载 html 文档,然后 JS 只要把现有的页面卸载(隐藏),再把内存中的东西展示出来即可。这个过程完全避免了网络请求,极大提高了网站用户体验。

采用上述方案实现的 Web 应用就是单页面应用。React 和 Vue 开发的基本都是单页面应用。

相关链接:不用 React Vue,只用原生 JS,如何开发单页面应用 (SPA)? - 掘金 (juejin.cn)

6)其他

Bootstrap、jQuery 等框架可以了解,都是以前 Web 开发常用框架,现在使用 Vue、React 等框架,很少使用了。


5、前端工程化(TODO)

1)Babel – 一个 JavaScript 编译器

Babel 可以把使用 ES6/ES7 等 “高级” 语法编写的 Javascript 代码转换为 ES5/ES3 的 “通俗” 语法(也可以把 JSX 语法转为 Javascript)。

相关链接:前端工程化之 Babel 入门:了解 Babel - 掘金 (juejin.cn)

2)Webpack / ESBuild

3)ESLint

4)CommonJS


6、项目推荐

  • PanJiaChen/vue-element-admin
    一个 CMS(内容管理系统)前端解决方案,基于 Vue 和 Element-UI 实现。它使用了最新的前端技术栈,内置了 i18n 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,可以帮助快速搭建企业级中后台产品原型。
  • devias-io/material-kit-react
    React.js 仪表板与材料 UI 的组件,包含诸如 TypeScript 版本、带有 Firebase 和 Auth0 的认证系统以及其他许多特性

7、建议

  • 花时间快速把 HTML、CSS、JS 的内容过一遍
  • 了解一下 npm 和 webpack,HTTP 协议、如何通过 ajax 和后台数据交互等
  • 学习 React/Vue 官网教程,对着例子敲一遍
  • 看看 GitHub 上面 star 较多的开源项目,基本上都可以直接拿来用进行二次开发

Java 后端 (Backend)

image-20220928110409737

学习路线推荐:


1、后端架构设计图(单应用)

img

2、基本语言

1)Java – 后端开发语言

java-roadmap-v2

推荐书籍:

  • 《Java 编程思想》
  • 《Effective Java》

2)SQL

一种数据库查询和程序设计语言,用于存取数据以及查询、更新和管理关系数据库系统。

除了SQL的基础使用,还需要掌握业务系统的数据库表设计

推荐书籍:

  • 《SQL 必知必会(第4版)》
  • 《高性能mysql》

3、开发工具/环境

1)JDK & JRE

JDK (Java Development Kit):java 开发工具包

JRE (Java Runtime Environment):java 运行时环境

直接下载后解压并进行环境变量配置即可

相关链接:JDK安装与环境变量配置

2)MySQL

最流行的关系型数据库管理系统(开源免费、性能卓越),基本上项目都是使用 MySQL 数据库,除非有些项目指定 Oracle 数据库

相关链接:SQL 教程 (w3school.com.cn)

3)Maven

用于构建和管理 Java 相关项目的工具

相关链接:maven学习笔记(总) - 简书 (jianshu.com)

4)IntelliJ IDEA

代码开发、调试工具,业界被公认为最好的 java 开发工具之一。可以安装一些插件提高开发效率,比如 Alibaba Java Coding Guidelines、Lombok 等等

推荐插件:

  • CRUD:mars05/crud-intellij-plugin
    一个用于代码生成的IDEA插件,可以根据数据库表结构,帮助您从不同的模板快速生成相关代码。

相关链接:IntelliJ IDEA 使用教程(2019图文版) Jetbrains系列产品2020.1.2最新激活方法

5)Postman / Apipost

接口测试工具,后端服务暴露 HTTP 接口使用该工具进行相关测试

相关链接:Postman教程大全

6)Navicat

数据库管理工具,简化数据库的管理

相关链接:mysql数据库管理工具navicat基本使用方法

7)Jenkins

一个持续集成工具(自动化构建、测试和部署)

相关链接:Jenkins详细教程

8)其他

Docker、Kubernetes、虚拟机等其他一些工具可以简单了解

相关链接:


4、开发框架/工具库

1)Spring/Spring MVC/Spring Boot

  • Spring 是一个一站式的轻量级的 Java 开发框架,核心是控制反转(IOC)和面向切面(AOP),针对开发的 Web 层(SpringMVC)、业务层(IOC)、持久层(jdbcTemplate)等都提供了结局方案;
  • Spring MVC 是 Spring 基础之上的一个 MVC 框架,主要处理 Web 开发的路径映射和视图渲染,属于 Spring 框架中 Web 层开发的一部分
  • Spring Boot 框架相对于 MVC 框架来说更专注于开发微服务后台接口,不开发前端视图,同时遵循默认优于配置,简化了插件配置流程,不需要配置 XML,相对 Spring MVC 大大简化了配置流程;

现在项目基本上都直接使用 Spring Boot 2.x 进行开发,几分钟就能搭建一个后台服务。后面很多工作都是 Spring Boot 和其他框架或库的整合,比如 Spring Boot 整合 MyBatis、整合 Redis、整合 gRPC 框架等等,基本上官网都有教程或者搜索相关文章即可。

相关链接:

2)MyBatis

支持定制化 SQL、存储过程以及高级映射的优秀的持久层框架,MyBatis 可以对配置和原生Map使用简单的 XML 或注解,将接口和 Java 的 POJOs(Plain Old Java Objects,普通的 Java 对象)映射成数据库中的记录。

还有其他的持久层框架比如 Hibernate 个人并不推荐,可以自己去了解下

MyBatis-Plus 框架也可以去了解下,是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发、提高效率而生。

相关链接:

3)JUnit – 单元测试框架

相关链接:W3Cschool-jUnit 教程

4)Druid – 数据库连接池

相关链接:官方 WIKI

5)其他

  • 常用的库还有 Shiro 安全框架、Quartz 定时任务框架、FastJson、commons-io、poi、guava 等库,可以简单了解下,看看其他项目案例用到了哪些框架

  • Spring Cloud 微服务框架、Dubbo RPC、gRPC 框架等,可以简单了解一下,单应用系统目前用不到


5、中间件

1)Redis

分布式 key-value 存储系统(缓存数据库),可以应用为热点数据的缓存、分布式锁、Session 会话缓存、简单的消息通知等

相关链接:菜鸟教程-Redis 教程

2)消息队列

常用的有 RabbitMQ、RocketMQ、Kafka 等,应用场景主要是:异步处理、应用解耦、流量削峰等。可自行了解下,一般用 RabbitMQ 就够了,对吞吐量高要求的话可以使用 RocketMQ 和 Kafka,大数据领域用 Kafka。

相关链接:RabbitMQ教程Apache RocketMQ开发者指南Kafka 1.0 文档

3)Tomcat – 开源的轻量级 Web 应用服务器

  • 使用 Spring Boot 开发的项目已经内嵌 Tomcat 容器,直接 jar 启动即可
  • 如果使用 Spring MVC 进行项目开发需要将项目 war 包放入外部 Tomcat 容器进行启动

相关链接:

4)其他

MQTT 消息通信平台、OSS 分布式文件系统、短信服务平台等一些商业或开源的中间件等需要使用的时候了解即可


6、项目推荐

  • spring-boot-demo
    一个用来深度学习并实战 Spring Boot 的项目,目前总共包含 66 个集成 demo
    常用框架的 Spring Boot 集成基本上都有了,想要用什么就找怎么使用的 demo 即可

  • renren-fast
    一个轻量级的 Spring Boot 2.1 快速开发平台,其设计目标是开发迅速、学习简单、轻量级、易扩展;使用 Spring Boot、Shiro、MyBatis、Redis、Bootstrap、Vue 2.x 等框架,包含:管理员列表、角色管理、菜单管理、定时任务、参数管理、代码生成器、日志管理、云存储、API 模块(APP 接口开发利器)、前后端分离等。
    基本上拿来直接二次开发即可,配套的 Vue 管理系统参考 renren-fast-vue开源项目

  • mall
    mall 项目是一套电商系统,包括前台商城系统及后台管理系统,基于 SpringBoot + MyBatis实现,采用 Docker 容器化部署。 前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。 后台管理系统包含商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等模块。
    配套的 Vue 管理系统参考 mall-admin-web

  • jeesite
    一个 Java EE 企业级快速开发平台,基于经典技术组合(Spring Boot、Spring MVC、Apache Shiro、MyBatis、Beetl、Bootstrap、AdminLTE)
    免费版本的限制较多,如果要求不高直接使用即可。

  • opengoofy/hippo4j

    强大的动态线程池框架,附带监控报警功能。支持 JDK、Tomcat、Jetty、Undertow 线程池;RocketMQ、Dubbo、Alibaba Dubbo、RabbitMQ、Hystrix 消费线程池(更多框架线程池还在适配中)。内置两种使用模式:轻量级依赖配置中心以及无中间件依赖版本。


7、快速入门建议

  • 花时间快速把 Java 和 MySQL 的内容过一遍,具备 Java 编码和数据库设计能力
  • 掌握并安装常用的开发工具与环境,了解 Spring 开发流程和 MVC 思想
  • 挑一个开源项目好好看看(opengoofy/hippo4j),了解下项目基本结构、如何与其他框架集成等等
  • 基于一个开源项目进行二次开发,扩充业务模块

前后端分离架构

img

前后端分离已成为互联网项目开发的业界标准使用方式,通过 Nginx + Tomcat 的方式(也可以中间加一个 nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS 等等)打下坚实的基础。这个步骤是系统架构进化的必经之路。

核心思想是前端 HTML 页面通过 AJAX 调用后端的 RESTFUL API 接口并使用 JSON 数据进行交互

  • Web 服务器:一般指像 Nginx,Apache 这类的服务器,他们一般只能解析静态资源;
  • 应用服务器:一般指像 Tomcat,Jetty,Resin 这类的服务器可以解析动态资源也可以解析静态资源,但解析静态资源的能力没有 WEB 服务器好;

1、未分离时代(各种耦合)

早期主要使用 MVC 框架,JSP + Servlet 的结构图如下:

image-20220928180036027

所有的请求都被发送给作为控制器的 Servlet,它接受请求,并根据请求信息将它们分发给适当的 JSP 来响应。同时,Servlet 还根据 JSP 的需求生成 Java Beans 的实例并输出给 JSP 环境。 JSP 可以通过直接调用方法或使用 UseBean 的自定义标签得到 Java Beans 中的数据。需要说明的是,这个 View 还可以采用 Velocity、Freemaker 等模板引擎。使用了这些模板引擎,可以使得开发过程中的人员分工更加明确,还能提高开发效率。

存在的问题:

  • 前端无法单独调试,开发效率低
  • 前端不可避免会遇到后台代码
  • JSP 本身所导致的一些其他问题

2、半分离时代

前后端半分离,前端负责开发页面,通过接口(Ajax)获取数据,采用 DOM 操作对页面进行数据绑定,最终是由前端把页面渲染出来。这也就是 Ajax 与 SPA 应用(单页应用)结合的方式,其结构图如下:

image-20220928180452397

步骤如下:

  • 浏览器请求,CDN 返回 HTML 页面;
  • HTML 中的 JS 代码以 Ajax 方式请求后台的 Restful 接口;
  • 接口返回 Json 数据,页面解析 Json 数据,通过 Dom 操作渲染页面;

后端提供的都是以 JSON 为数据格式的 API 接口供 Native 端使用,同样提供给 WEB 的也是 JSON 格式的 API 接口。

为什么说是半分离的?

因为不是所有页面都是单页面应用,在多页面应用的情况下,前端因为没有掌握 Controller 层,前端需要跟后端讨论,我们这个页面是要同步输出呢,还是异步 JSON 渲染呢?而且,即使在这一时期,通常也是一个工程师搞定前后端所有工作。因此,在这一阶段,只能算半分离。

首先,这种方式的优点是很明显的。前端不会嵌入任何后台代码,前端专注于 HTML、CSS、JS 的开发,不依赖于后端。自己还能够模拟 Json 数据来渲染页面。发现 Bug,也能迅速定位出是谁的问题。

然而,在这种架构下,还是存在明显的弊端的。最明显的有如下几点:

  • JS 存在大量冗余,在业务复杂的情况下,页面的渲染部分的代码,非常复杂;
  • 在 JSON 返回的数据量比较大的情况下,渲染的十分缓慢,会出现页面卡顿的情况;
  • SEO(Search Engine Optimization,搜索引擎优化)非常不方便(搜索引擎的爬虫无法爬下 JS 异步渲染的数据);
  • 资源消耗严重,在业务复杂的情况下,一个页面可能要发起多次 HTTP 请求才能将页面渲染完毕。

3、分离时代

SPA 式的前后端分离,从物理层做区分(认为只要是客户端的就是前端,服务器端就是后端)这种分法已经无法满足前后端分离的需求,我们认为从职责上划分才能满足目前的使用场景:

  • 前端负责 View 和 Controller 层
  • 后端只负责 Model 层,业务处理与数据持久化等

用 NodeJs 来作为桥梁架接服务器端 API 输出的 JSON。Node.js 适合运用在高并发、I/O 密集、少量业务逻辑的场景。最重要的一点是,前端不用再学一门其他的语言了,对前端来说,上手度大大提高。

Node.js 带来的全栈时代:

Node 带来的全栈时代

淘宝前端团队提出的中途岛的架构:

淘宝前端团队提出的中途岛的架构

相关链接:

服务器部署 (Server Deploy) – 待完善

相关链接:

修改配置

一个开源项目从网上下载之后,想直接完美运行起来不太现实,因为还有很多东西要根据自己的实际情况和运行环境进行配置,比如数据库、缓存、日志路径等。

除数据库配置外,还需要修改缓存、日志配置等路径

前端项目部署(npm run build)

相关链接:

后端项目部署(mvn clean package)

相关链接:

配置 Nginx 代理和转发

Nginx 是一个高性能的 HTTP 和反向代理 Web 服务器,常用来作静态资源 Web 服务、反向代理、负载均衡等。

相关链接:Nginx 学习笔记 | LPxz’s Blog

  • 环境准备
    • 工具和软件环境
      • JDK
      • Maven
      • Node
      • MySQL
      • Redis
      • Nginx
  • 修改配置
    • 数据库配置
    • Redis 缓存配置
    • 日志配置
  • 项目打包
    • 前端项目打包
    • 后端项目打包
      • jar
      • war
  • 项目部署

相关网站收藏

Iconfont-阿里巴巴矢量图标库

Chrome 开发者工具 | Chrome DevTools | Google Developers


WEB 前后端开发技术栈总结
http://lpxz.work/posts/8830/
作者
LPxz
发布于
2022年10月17日
许可协议