Web前后端开发快速上手指南

传奇木讷的鱼

前置说明：

• 下面内容只是按照个人的理解进行整理说明，适用于快速上手，仅供学习参考
  
• 一些编程通用的技术或工具比如Git、Linux等下面就不再赘述
  
• 学习参考不限于下面我所列出的，可以去看别人的博客教程，也可以去慕课网、B站、极客时间、腾讯课堂等网站进行相关内容的学习
  
• 如果实在没啥时间学习的话，可以去 how2j学习网站（当年我入门的学习网站，可能也有其他类似的学习网站可以去找一下），前后台内容都有而且都很基础，把他的教程都撸一遍过去，可以让你快速入门前后台开发...
  

前后端分离整体架构概图



一、Web前端（Vue）

1. 前端架构设计图



2. 基本语言

（1）HTML

网页元素语言（网页布局、控件等）
学习参考：菜鸟教程-HTML教程
（2）CSS

网页样式语言（以后可以了解一下CSS扩展语言Sass）
学习参考：菜鸟教程-CSS教程
（3）JavaScript

网页脚本语言（网页DOM元素操作，业务逻辑，与后台交互等）
学习参考：菜鸟教程-JavaScript教程，《JavaScript高级程序设计》
（4）ECMAScript 6（ES6）

JavaScript 语言的下一代标准（很多新语法可以加快开发效率）
学习参考：ES6入门教程，菜鸟教程-ES6教程
3. 开发工具/环境

（1）NodeJS

JavaScript本地运行环境，很多工具都依赖该环境（暂时先把环境装好，node.js编程可以先不看）
学习参考：Node.js中文网
（2）npm

同NodeJS一起安装的包管理工具
学习参考：菜鸟教程-NPM使用介绍
（3）webpack

前端资源加载/打包工具（前端应用工程化开发解决方案，模块化开发工具）
学习参考：webpack中文文档
（4）VsCode

代码开发、调试工具（个人推荐使用VsCode进行Vue应用开发，当然配合Vue的开发需要下载一些插件。其他IDE还有WebStorm、HBuilder、Sublime啥的）
学习参考：vscode教程（基础篇）
4. 框架

（1）Vue

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

基于 Vue.js的UI组件库（其他的UI库还有iview等）,布局、表单、表格等常用控件基本都能满足
学习参考：Element-UI官网
（3）ECharts

使用 JavaScript 实现的开源可视化库，各种折线图、柱状图、路径图等酷炫的制图应有尽有（数据分析展示必备）
学习参考：ECharts官网
（4）其他

Bootstrap、Jquery等框架可以了解下，都是以前Web开发常用框架，现在使用Vue等框架的话很少使用了
5. 优秀案例/教程

（1）手摸手，带你用vue撸后台 系列教程
GitHub源码地址（项目技术栈基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 element-ui，所有的请求数据都使用Mock.js进行模拟）

• 手摸手，带你用 vue 撸后台 系列一（基础篇）
  
• 手摸手，带你用 vue 撸后台 系列二(登录权限篇)
  
• 手摸手，带你用 vue 撸后台 系列三 (实战篇)
  
• 手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)
  
• 手摸手，带你用 vue 撸后台 系列五(v4.0 新版本)
  
• 手摸手，带你封装一个 vue component
  
• 手摸手，带你优雅的使用 icon
  
• 手摸手，带你用合理的姿势使用 webpack4（上）
  
• 手摸手，带你用合理的姿势使用 webpack4（下）
  

该系列教程学完，基本上Vue开发管理系统没啥问题了，源码可以直接使用进行二次开发即可
（2）renren-fast-vue开源项目
基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案
可以看一下直接拿来添加业务模块进行二次开发
6. 快速入门建议

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

二、Java后端

1. 后端架构设计图（单应用）



2. 基本语言

（1）Java

Java后端开发语言，重要性不言而喻
学习参考：《Java编程思想》，《Effective Java》，廖雪峰-Java教程
（2）SQL

一种数据库查询和程序设计语言，用于存取数据以及查询、更新和管理关系数据库系统。
这边我们除了SQL的基础使用，还需要掌握业务系统的数据库表设计
学习参考：慕课网-数据库设计那些事、《mysql必知必会》、廖雪峰-SQL教程、《高性能mysql》
2. 开发工具/环境

（1）JDK&JRE

JDK：java开发工具包
JRE：java运行时环境
直接下载后解压并进行环境变量配置即可
学习参考：JDK安装与环境变量配置
（2）Maven

用于构建和管理Java相关项目的工具
学习参考：菜鸟教程-Maven教程
（3）Idea

代码开发、调试工具，业界被公认为最好的java开发工具之一。可以安装一些插件提高开发效率，比如Alibaba Java Coding Guidelines、Lombok等等
学习参考：IntelliJ IDEA 使用教程(2019图文版) ，Jetbrains系列产品2020.1.2最新激活方法
（4）Postman

接口测试工具，后端服务暴露HTTP接口使用该工具进行相关测试
学习参考：Postman教程大全
（5）Navicat

数据库管理工具，简化数据库的管理
学习参考：mysq数据库管理工具navicat基本使用方法
（6）Jenkins

一个持续集成工具 （自动化构建、测试和部署）
学习参考：Jenkins详细教程
（7）其他

Docker、Kubernetes、虚拟机等其他一些工具可以自己简单了解下
3. 开发框架/库

（1）Spring/Spring MVC/Spring Boot

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

现在项目基本上都直接使用Spring Boot2.x进行开发，几分钟就能搭建一个后台服务哦
后面很多工作都是Spring Boot和其他框架或库的整合，比如Spring Boot整合MyBatis、整合Redis、整合gRPC框架等等，基本上官网都有教程或者百度相关博客即可
学习参考：Spring官网教程、W3Cschool-Spring 教程、W3Cschool-Spring Web MVC 框架、程序猿DD-Spring Boot基础教程
（2）MyBatis

支持定制化 SQL、存储过程以及高级映射的优秀的持久层框架，MyBatis 可以对配置和原生Map使用简单的 XML 或注解，将接口和 Java 的 POJOs(Plain Old Java Objects,普通的 Java对象)映射成数据库中的记录。
还有其他的持久层框架比如 Hibernate个人并不推荐，可以自己去了解下
MyBatis-Plus框架也可以去了解下，是一个MyBatis的增强工具，在 MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生。
学习参考： W3Cschool-MyBatis 教程、Mybatis教程-实战看这一篇就够了、MyBatis-Plus
（3）Junit

Java语言的单元测试框架
学习参考：W3Cschool-jUnit 教程
（4）Druid

阿里的 Druid 数据库连接池
学习参考：官方WIKI
（5）其他

• 常用的库还有Shiro安全框架、Quartz定时任务框架、FastJson、commons-io、poi、guava等库，可以简单了解下，看看其他项目案例用到了哪些框架
  
• SpringCloud微服务框架、Dubbo RPC、gRPC框架等，可以简单了解一下，单应用系统目前用不到
  

4. 中间件

（1）MySQL

最流行的关系型数据库管理系统（开源免费、性能卓越），基本上项目都是使用MySQL数据库，除非有些项目指定oracle数据库
学习参考：菜鸟教程-MySQL教程、《高性能mysql》
（2）Redis

分布式key-value存储系统（缓存数据库），可以应用为热点数据的缓存、分布式锁、Session会话缓存、简单的消息通知等
学习参考：菜鸟教程-Redis 教程
（3）消息队列

常用的有RabbitMQ、RocketMQ、Kafka等，应用场景主要是：异步处理、应用解耦、流量削峰等。可自行了解下，一般用RabbitMQ就够了，对吞吐量高要求的话可以使用RocketMQ和Kafka，大数据领域用Kafka
学习参考：RabbitMQ教程、Apache RocketMQ开发者指南、Kafka 1.0 文档
（4）Tomcat

开源的轻量级Web应用服务器

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

学习参考：Tomcat 教程之快速入门、SpringBoot内置tomcat启动原理
（5）Nginx

一个高性能的HTTP和反向代理web服务器，常用来作静态资源web服务、反向代理、负载均衡等
学习参考：W3Cschool-Nginx 入门指南
（6）其他

MQTT平台、OSS分布式文件系统、短信服务平台等一些商业或开源的中间件等需要使用的时候自行了解即可
5. 优秀案例/教程

（1）spring-boot-demo
一个用来深度学习并实战 spring boot的项目，目前总共包含66个集成demo
常用框架的Springboot集成基本上都有了，想要用啥就找怎么使用的demo即可，so easy...
（2）renren-fast
一个轻量级的Spring  Boot2.1快速开发平台，其设计目标是开发迅速、学习简单、轻量级、易扩展；使用Spring  Boot、Shiro、MyBatis、Redis、Bootstrap、Vue2.x等框架，包含：管理员列表、角色管理、菜单管理、定时任务、参数管理、代码生成器、日志管理、云存储、API模块(APP接口开发利器)、前后端分离等。
基本上拿来直接二次开发即可，配套的Vue管理系统参考renren-fast-vue开源项目
（3）mall
mall项目是一套电商系统，包括前台商城系统及后台管理系统，基于SpringBoot+MyBatis实现，采用Docker容器化部署。 前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。  后台管理系统包含商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等模块。      
配套的Vue管理系统参考 mall-admin-web
（4）jeesite
一个Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Spring MVC、Apache Shiro、MyBatis、Beetl、Bootstrap、AdminLTE）
免费版本的限制较多，如果要求不高直接使用即可....
6. 快速入门建议

• 花时间快速把Java和Mysql的内容过一遍，具备Java编码和数据库设计能力
  
• 掌握并安装常用的开发工具与环境
  
• 挑一个开源项目好好看看（renren-fast），了解下项目基本结构、如何与其他框架集成、如何实现RBAC权限模块、如何实现分布式Session与鉴权等等
  
• 基于一个开源项目进行二次开发，扩充业务模块
  

<hr/>本文原创，欢迎转载，转载请注明出处，如有不正确或侵权的地方恳请各位看官指正。

梦雨铃

很多东西看不懂，希望科普

元气小丸子

谢谢！

雪花飘过

非常感谢！

伤心的稻草人

感谢