前端与后端的区别（保姆级整理-很详细-2021-05-26）

　　本文将站在一个小白的角度，带大家大概了解一下前端和后端，以及前后端在开发的过程中会用到的一些工具，文末会有一些小tips总结。

　　文章将从八个方面，讲一讲前端和后端都有些什么区别，它们之间的联系又是什么。这八个方面分别是：什么是前端，什么是后端，软件开发的完整流程，前后端的开发工具有何不同，前后端使用的编程语言，开发过程中的程序调试方式，使用到的构建工具以及代码管理工具。

　　如果你是纯小白，在看文章的过程中可能会有点云里雾里，会纠结于一些技术名称或者工具名称，看着英文字母就头大。曾经的我就是这样，如果你也是这样的话，我想说：“宝贝，不要去纠结于这些‘稀奇古怪’的英文字母，它们都只是代名词（就好比每个人的名字只是这个人的代名词，名字不重要，这个人才最重要，他们在我们的生命中充当什么角色才重要），同样的，这些技术或工具名称不重要，重要的是它是做什么的，我们应该怎么使用它们。”

前端开发、后端开发分别是干什么的？

前端开发是做什么的？

我们一起来看看百度词条给出的解释：

看看这个百度词条，提到了：WEB、APP、HTML、CSS、JavaScript、Node.js、HTML5、CSS3、UI框架、JS类库，这些英文字母，他们究竟是什么？

先不着急，这些后面一点说。我们先来理解前端是做什么的。

用户能看到的前端页面，网页（也就是WEB，通过电脑端或者手机端浏览器打开看到的页面）或APP页面（各类应用程序使用时所包含的页面）具体长什么样子，由前端实现。

用户想要在前端页面通过一系列操作（如输入账号和密码，获取用户数据。点击登录按钮），从而实现登录的交互操作，与前端有关。

登录页点击登录按钮实现登录操作

用户在操作过程中，出现的提示（比如：用户账号不存在，该商品已无库存等）也是前端完成。

不同前端页面，登录后的提示方式

想要真正实现交互操作，只有前端是远远不够的，需要依托强大的后端才能得以真正实现（比如刚才的登录操作：用户点击登录按钮后，前端会触发相关事件，与后端连接，由后端去实现相关的逻辑处理）。

后端开发是做什么的。

后端是用户感知不到、看不到，但却非常重要的存在。在用户的世界里，很多人可能只知道：自己点击了某些按钮，想要做某些操作，但他们并不知道具体计算机是如何帮助他完成的这一系列操作。这也是为什么后端叫后端的原因，后端你可以理解为躲在身后的存在（怎么感觉怪瘆人，哈哈哈）。他就像一双无形的手，在操控着一切。（逻辑处理，数据交互，数据验证，数据安全，数据存放等的实现……）

后端开发也叫服务器开发。服务器，顾名思义，就是向用户提供服务的地方。前端的按钮，就好比你去饭店点餐看到的前台服务员，点餐（按钮）只是你的操作：你告诉服务员（前端页面）你要吃什么，具体的菜（具体的服务）端出来什么味道好不好吃，全是后台的厨房说了算，厨师掌握着菜品的生杀大权以及色香味（服务是否能实现以及具体的实现逻辑）。

后端将前端接收到的用户操作的信息，进行处理。比如：后端服务器获取到前端发来的关于登录的账号和密码，根据账号去查找是否存在该用户。如果用户存在，利用传输过来的账号去验证用户的密码是否正确，如果正确，则用户登录成功，如果不正确，则登录不成功。这一系列的逻辑判断就是后端开发人员需要去做的事情。

等待后端处理完成后，后端会将它处理后的信息发送给前端。此时前端根据收到的信息，进行相对应的处理，成功则提示用户登陆成功，同时跳转到要去的目标页面，如果不成功，则提示用户不成功的原因。所以说，前端和后端其实都挺重要的，只是侧重点不一样。

前端开发还是后端开发？如何抉择？

如果你希望自己做的东西是被用户所能看见的，而且自我的审美也还不错，那你可能更适合前端。如果你是逻辑思维能力强，且比较喜欢居于幕后的人，那你可能更适合后端。如果，你觉得，我不，我想前端、后端都接触，那全栈工程师在向你招手（听说美国不分前端后端，只有全栈）。注意！！我这里说的是可能而不是一定喔，毕竟每个人的潜力是不一样的，毕竟大部分时候，对于开发这种相对枯燥的工种，兴趣是最好的老师、最好的助推剂。所以在接下来的了解过程中，看看你自己的兴趣点在什么地方也挺重要的。

那前端、后端，在开发的过程中具体应该怎么做，会用到哪些技术和工具呢？

take it easy，往下看👇。

软件开发的完整流程

什么是软件开发？

软件开发是指一个软件从用户或者开发者萌生想法时到软件被研发出来投入使用的过程。

为什么要了解软件开发

只要是做开发，不管你是什么开发，那肯定都是要了解整个开发过程我们需要做些什么，因为这个部分其实内容比较枯燥，所以笔者只写了大致的流程，现阶段只要知道，有些什么环节，每个环节大概做些什么。如果你觉得暂时不需要了解，可直接跳过这个小节，进入下一part。

软件开发的完整过程：

需求分析：用户提出需求，产品经理更具用户的需求整理出需求分析书，画出产品原型图。

概要设计：需求确定无更改后，开发经理或架构师进行数据库选型、技术选型等，顶顶详细开发的基础。

详细设计：将程序、系统的每一个流程，每一个模块都做详细的分析和设计，越详细越利于后期开发。

开发阶段：根据详细设计进行实际的编码，在开发前期，开发人员需要将项目相关的开发环境搭建好。不同项目的环境搭建有所不同，后面会出相关的文章。每个开发人员根据自己的任务进行相对应的模块开发，开发过程中要确保自己开发的模块能实现需要的功能，开发过程中，开发人员需要自测。

测试：前后端开发结束，并且同一个模块相关的前后端自测功能不存在问题后，交给专门的测试人员进行测试。

验收上线：整个系统测试结束，确保没有问题的情况下，会将项目给客户进行验收，然后实现上线，正式投入使用。

维护：在项目使用的过程中，可能会出现突发情况，或者用户使用的过程中，出现开发人员和测试人员都没想到的意外操作，使系统出现问题的情况，都离不开我们的运维人员。

前后端使用的开发工具（编辑器，IDE）有何不同

开发工具：也叫编辑器，英文名：Integrated Development Environment（缩写IDE）指开发人员用于编写代码，实现软件从无到有，并且在开发过程中，开发者可以进行可视化操作，能帮助开发者实现项目的运行，调试，提示错误所在，快速便捷的代码提示等等功能的工具。各种开发工具五花八门，笔者结合身边开发者的使用习惯，推荐一两个常用的。

温馨tips：

如果你是纯小白，没写过HTML（可以在各大浏览器进行运行的文件，将我们能看见的各种东西，抽象出来，通过标签的形式进行封装）文件或者没有做过任何开发，刚开始开发接触开发，还是建议使用直接文本编辑器编辑，不要使用可以直接代码补全的多功能开发工具。（文本编辑器推荐：Edit Plus。具体如何直接编辑HTML文件，很快就更，嘻嘻嘻。）

等对代码的敲击比较熟悉后，再使用开发工具进行开发，IDE有自动代码补全等提高开发效率的功能，用起来就真香。由于每个人对不同编辑器的使用感受不同，且各大编辑器各有所长，笔者在这里就不向大家特别推荐哪一种编辑器了。大家可以自己体验，然后选择自己喜欢的、习惯的就好。

前端常用的开发工具：

Visual Studio Code (简称vs code) 以及 Web Storm

Visual Studio Code工具界面及下载地址

VS Code开发工具界面（可以通过设置，将界面切换成中文界面，笔者因为已经比较熟悉VS，同时英语不太好，想练练英语，使用的英文界面）

VS Code工具下载地址：https://code.visualstudio.com/，点击网页右上角或者左下角的Download，找到符合你电脑的版本点击下载，然后按照步骤进行安装即可。

Web Storm工具界面及下载地址

Web Storm开发工具界面

Web Storm工具下载地址：https://www.jetbrains.com/webstorm/，你可以与VS Code一样点击网页右上角的Download，想要与众不同的你，也可以点击中间的Download，找到符合你的版本点击下载，然后安装即可（笔者还没有用过这个开发工具，欢迎使用过或者想使用还没使用但是要使用的读者使用后，哈哈哈，将你们的使用感受留在下方评论区，哈哈哈。）

后端常用的开发工具

Intellij IDEA（简称IDEA），My Eclipse，Eclipse

公司中开发多用My Eclipse 和IDEA，用得最多的还是IDEA。

Intellij IDEA工具界面及下载地址

Intellij IDEA开发工具界面

Intellij IDEA工具下载地址：https://www.jetbrains.com/idea/，点击网页右上角的右上角的Download，也可以点击中间的Download，找到符合你的版本点击下载，然后安装即可。（因为IDEA与Web Storm是同一家公司开发的，所以长得差不多。）

My Eclipse工具界面及下载地址

My Eclipse开发工具界面

My Eclipse工具下载地址：https://www.genuitec.com/products/myeclipse/，点击网页右下角的Download，点击下载，然后安装即可。

细心的宝贝会发现，我没有告诉大家Eclipse下载地址？

俗话说的好，授人以鱼不如授人以渔。

下载工具的小tips请收好：

直接浏览器搜索框里输入目标开发工具的英文名称，最好不多输入无用的字（比如：输入MyEclipse开发工具，出来的东西就天差地别，挺浪费时间），一般出来的第一个链接（基本连接标题也都是全英文），点进去就是该开发工具的官网，直接在官网下载，就会避免下载到病毒和垃圾安装包、垃圾文件的情况。

包括后面开发的过程中，可能要查看某些UI框架，某些类库的使用方法等，都可以通过这样的方式，直接输入想要的类库或UI框架的完整名字，进入官网就可以看到啦。切记：尽量不多打其他的文字

前端、后端的编程语言

编程语言：指人和程序都能识别的语言。就好比，一个中国人要和日本人交流，要么你会说日语，要么对方会说普通话，或者你们都会使用英语，那你们便可以用英语交流，总之你们需要有一个双方都能懂的语言，去实现双方交流。编程语言也是如此，是你和程序之间都能懂的一种语言，实现你和程序的“交流”，从而让程序帮助你实现你想实现的功能，编程语言也有很多不同，就像日语、英语、法语、普通话等。这些语言的终极目的都是为了能实现：交流！！

前端的编程语言：

HTML(HTML5)、CSS(CSS3)、JavaScript（简称JS）、CSS预处理器技术、Node.js、ECMAScript 6(ES6)、TypeScript（TS）、UI框架、JS框架、JS类库

基础（HTML，CSS，JS）：

HTML，CSS，JS是基础。非常重要，想要开发走得长远，宝贝们，听我的，基础很重要。

我们首先需要使用HTML(HTML有不同的版本，现在用HTML5进行开发)将页面骨架长什么样子先写出来。再用CSS(现在用CSS3)将页面进行美化，最后使用JavaScript实现用户的交互操作（登录、注册账号、商品加入购物车等），ES6是JavaScript的升级，初学者先学JS，再去了解ES。TS也要JS的基础，TS是JS的超集。

CSS本身算不上一种编程语言，它是给页面加样式，帮助页面美化的。因此代码的组织和维护较为困难。于是，人们想到了在CSS中，加入编程元素，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。所以出现了

CSS预处理器技术（CSS Preprocessor）：SASS LESS

随着前端界面越来越重要，逻辑越来越复杂，所以出现了很多的JS类库和UI开发框架：

JS框架：

React.js Angular.js Vue.js JQuery　Node.js 微信小程序

这些框架都是基于JS开发的，现在大厂用的比较多的是React。具体这些框架间有什么区别以及优缺点，后面慢慢写文章告知大家。

UI开发框架：

ElementUI（PC端，按钮组件，Vue） iView UI（PC端，Vue） Mint UI（移动端，Vue）

Ant Design（简称Antd，PC端，React） Material-UI（PC端，React） Ant Design Mobile（移动端，react）

WeUI（微信小程序）

这些UI框架，大都是基于JS框架进行开发而来，如：Mint UI就是基于Vue，属于Vue的周边生态。文中列举的肯定不是最全的，具体学什么框架，还是要等大家把基础知识掌握了，再看看招聘信息进行选择性的学习。再强调一遍，基础才是王道。

其他：

Electron

后端的编程语言：

JAVA　C/C++　Go　Python　Shell　Node.JS　

Java主要针对企业级应用开发：如银行项目。C/C++语言主要开发与底层联系较大的程序：如游戏、嵌入式开发、网络程序的底层和网络服务器端底层等。GO主要用于开发框架、工具等。Python主要处理与数据相关的东西（爬虫），在人工智能方向。Shell：脚本语言，处理偏操作系统底层的业务。Node.JS一般用于具有大量细小的http请求环境的项目:典型的就是一个web即时聊天程序，或者一个支撑上万人同时在线的游戏服务器。

后端开发框架和第三方库：

SpringMVC（Java） Spring（Java） Mybatis（Java） Tinyhttpd（C） Folly（C++） Django（Python Web应用开发框架） Cubes（轻量级Python OLAP框架）

在整理素材的过程中，发现了一个比较全的推荐C/C++相关的框架和第三方库的博文，感兴趣的可以去看看。

数据库：

MySQL　Oracle　MangoDB NoSql Redis

开发应用，最多的就是和数据打交道，数据其实是很抽象的东西，它可以是我们的账号、密码，可以是一段声音、图像、视频等（处理成数字信号），可以是任何计算机通过程序与人交互需要使用到的信息。而这些信息需要统一的存放在一个仓库，进行数据的查看增加删除修改等操作，且这些信息间的关系也需要由这个仓库进行管理。那管理这些信息的地方就称为数据库。龙生九子，虽都为龙子，却大有不同。数据库也一样，随都是数据库，但每个数据库都有其不同的特色。但唯一不变就是，他们都是对数据进行增、删、改、查的基本依托。

而且，数据库的创建与管理也是后端开发所必备的技能，具体学习和使用什么数据库，也得根据公司和项目的要求来进行选择。

温馨提示：

所有语言都有共同性，不要看到这么多语言或者框架，就被吓到了。语言，一通百通。重要的是计算机思维和逻辑，以及实际开发中解决问题的能力。所以，先选择一门自己相对容易接收或上手的语言进行学习。

前后端的程序调试（debug）方式

程序调试方式：

在开发程序的过程中，我们需要验证我们程序运行是否如我们所愿，所以会用到调试。我们可以查看程序运行过程中，是成功的还是失败的，如果是失败的，还可以通过调试工具或者一些调试方法，去复现问题的所在地，找到出现问题的原因，不过调试的过程并不总是一帆风顺的，需要我们有足够的耐心，就像一个妈妈对待孩子那般。

前端的调试方式：

前端主要通过Chrome（谷歌），键盘按F12或Shift+Ctrl+I的方式，打开Chrome开发者调试工具，进行调试。在开发的过程中会，使用Element进行元素的样式和布局调试，Console控制台，使用console.log()或者alert()的方式进行一定的数据和逻辑验证，使用source进行程序debug，network可以查看发送的请求相关的信息，以及网页加载资源等的具体情况。（前后端具体详细的调试方法，后面会出一个详细的文章）

后端的调试方式：后端调试可以通过postman模拟发送请求，获取或者打印相关数据，可以直接在编辑器（IDE）中，添加断点，然后一行一行的进行调试。

图片来自于： https://www.pianshen.com/article/84881107991/

前后端的构建工具

构建：是指把开发好的源代码通过构建工具生成可执行的应用程序的过程（比如Anderson App生成.apk文件，电脑端的.exe文件）。

构建工具：将源代码生成可执行程序的应用程序的过程变为自动化过程的程序。（有点绕，意思就是利用构建工具生成.apk文件，.exe文件等可执行程序的相关文件）

构建的过程一般会涉及到：

下载依赖　　将图片视频等外部资源进行压缩打包，提高性能　　将Less，Sass编译为CSS　　压缩代码块　　将源代码打包成二进制代码　　打包生成的二进制代码　　进行单元测试　　部署到生产环境等

前端构建工具：　webpack(目前用得最多)　FIS3　Grunt　Gulp

前端构建的过程可以查看知乎一个帖子，此处给给大家贴出路径，讲得挺细致的。（https://zhuanlan.zhihu.com/p/33692774）

webpack可以将开发文件中的Sass、Less编译为大部分浏览器可以运行的CSS、将ES6、TS等编译为大部分浏览器可以解析的JS，还可以将大文件压缩打包，加速浏览器的运行速度，提高用户的使用体验等。相关的文档点击链接进行查看：https://webpack.docschina.org/

后端构建工具：Apache　Maven　Gradle

Maven既是项目的构建工具又是项目的管理工具，提供了帮助管理构建、文档、报告、依赖、scms、发布、分发的方法，同时也进行编译源代码、进行依赖管理、管理二进制库、管理JAR包等的一个工具。

Maven的官方文档链接：http://maven.apache.org/

前端、后端共同的版本控制系统（现在大多称其为：代码管理工具）

版本控制系统是指：对程序代码、配置文件及说明文档等文件变更进行管理的系统。最主要的功能就是追踪文件的变更，文件里面修改了什么内容，被项目中的谁进行了修改，什么时候被修改，都被记录下来，支持多个人员并行开发等等。

常用的版本控制系统：Git（Gitee-中国版　GitHub-国际版）　SVN

Git（用得比较多）：

进入公司后，有的公司里直接使用git官网下载的客户端工具，有的则是用基于git开发的第三方工具，笔者现在用的是Git Extensions。如果是个人平时开发记录，不想这么麻烦，可以使用在线的方式，去GitHub注册账号，进行版本控制。

GitHub官网：https://github.com/

右上角按钮：（Sign in：登录　　Sign up：注册）

Git客户端的官网地址可下载Git Client：https://git-scm.com/

SVN：

SVN的使用需要搭建SVN服务器后，结合TortoiseSVN客户端进行使用。

服务器和客户端下载地址：

TortoiseSVN客户端：https://tortoisesvn.net/

老规矩，将发现的比较详细的笔记，给大家贴出来，感兴趣的可以去看一看，跟着里面的SVN服务器搭建和TortoiseSVN客户端安装步骤，试一试SVN版本控制器（欢迎大家留下你们的使用感受和使用建议等）。相关连接：https://blog.csdn.net/weixin_30892763/article/details/101324842

笔者叨逼叨时间：

现在大部分都会称呼git SVN等为代码管理工具，但他们其实不止可以管理程序代码，还可以管理配置文件及文档等与程序开发相关的文件，所以个人认为称呼他们为代码管理工具其实不太妥当。

结语：

此文章，是笔者第一次写博文，几乎所有非笔者脑子里的东西都以标注出出处，如果还是不慎涉及到侵权问题，请留言或私信读者，一定及时改正。

文章如果还有不够详细之处，希望你们可以向笔者提出，一定改之。

文章为个人的理解，如果存在不当或出错之处，也非常欢迎你们可以直接告诉我。

总之就是，有则改之啦，最后的最后，希望能够帮助到大家吧。

笔者还要叨逼叨：

不管文章里提到了多少技术，多少框架，多少陌生的东西，如果你是小白，都不要陷入太深，重要的是了解这些东西就好。可以以文章中的东西作为一个学习路上的参考依据，切记，不要陷进去，因为我曾经就是这样的人，看到一个陌生名词，陌生技术就会去看很久，最后发现，不会，然后就自己吓自己，打起了退堂鼓。

就反正，先从基础开始，一步一步来，地基打牢，高楼大厦还是传统楼台都可随意建之

（2021.05.26 22：04 历时整整三天记第一篇文章）

蠢且丑

关注

20
点赞
踩
99

收藏

觉得还不错? 一键收藏
打赏
10
评论
前端与后端的区别（保姆级整理-很详细-2021-05-26）

前言　　本文将站在一个小白的角度，带大家大概了解一下前端和后端，以及前后端在开发的过程中会用到的一些工具，文末会有一些小tips总结。　　文章将从八个方面，讲一讲前端和后端都有些什么区别，它们之间的联系又是什么。这八个方面分别是：什么是前端，什么是后端，软件开发的完整流程，前后端的开发工具有何不同，前后端使用的编程语言，开发过程中的程序调试方式，使用到的构建工具以及代码管理工具。　　如果你是纯小白，在看文章的过程中可能会有点云里雾里，会纠结于一些技术名称或者工具名称，看着英文字母就头大。曾经.
复制链接

扫一扫