关于前端:大前端简介

1. 软件的架构

1.1 C/S

即 Client/Server(客户端 / 服务器)构造, 它能够分为客户端和服务器两层：第一层是在客户机零碎上联合了界面显示与业务逻辑，第二层是通过网络联合了数据库服务器。

C/ S 架构的长处：

​ 1.C/ S 架构的界面和操作能够很丰盛。（客户端操作界面能够随便排列，满足客户的须要）

​ 2. 平安性能能够很容易保障。（它能够对权限进行多层次校验，提供了更平安的存取模式，对信息安全的控制能力很强。个别高度机密的信息系统采纳 C / S 构造合适）

​ 3. 因为只有一层交互，因而响应速度较快。（间接相连，两头没有什么阻隔或岔路，比方 QQ，每天那么多人在线，也不感觉慢）

C/ S 架构的毛病：

​ 能够将 QQ 作为类比：

​ 1. 个别建设在专用的网络上, 小范畴里的网络环境, 局域网之间再通过专门服务器提供连贯和数据交换服

​ 务。

​ 2. 用户群固定。因为程序须要装置才可应用，因而不适宜面向一些不可知的用户。

​ 3. 保护老本高，产生一次降级，则所有客户端的程序都须要扭转。

​ 例如 qq，微信，王者光荣。。。

1.2 B/ S 架构

即 Browser/Server(浏览器 / 服务器)构造，通过拜访一个网页的模式来应用，将一些运算等操作放到远端的服务器上。

B/ S 架构的长处：

​ 1. 客户端无需装置，有 Web 浏览器即可。

​ 2.BS 架构能够间接放在广域网上，通过肯定的权限管制实现多客户拜访的目标，交互性较强。

​ 3.BS 架构无需降级多个客户端，降级服务器即可。能够随时更新版本，而无需用户从新下载。

B/ S 架构的毛病：

​ 1. 在跨浏览器上，BS 架构不尽如人意。

​ 2. 体现要达到 CS 程序的水平须要破费不少精力。

​ 3. 在速度和安全性上须要破费微小的设计老本，这是 BS 架构的最大问题。

​ 4. 客户端服务器端的交互是申请 - 响应模式，通常须要刷新页面，这并不是客户乐意看到的。（在 Ajax 风靡后此问题失去了肯定水平的缓解）

​ 例如，京东，淘宝。。。

HTTP 协定（HyperText Transport Protocol）

​ HTTP 是超文本传输协定的缩写，它用于传送 WWW 形式的数据。HTTP 协定采纳了申请 / 响应模型。客户端向服务器发送一个申请，申请头蕴含申请的办法、URL、协定版本、以及蕴含申请修饰符、客户信息和内容的相似于 MIME 的音讯构造。服务器以一个状态行作为响应，响应的内容包含音讯协定的版本，胜利或者谬误编码加上蕴含服务器信息、实体元信息以及可能的实体内容。

URL（Uniform Resource Locator）对立资源定位符

URL 就像每家每户都有一个门牌地址一样，每个网页也都有一个 Internet 地址。当你在浏览器的地址栏中输出一个 URL 或者单击一个超链接时，URL 就确定了要浏览的地址。浏览器通过超文本传输协定 (HTTP)，将 Web 服务器上站点的网页代码提取进去，并翻译成丑陋的网页。URL 的格局如下：
协定://ip:port/path 例如：http://192.168.1.101:80/test/index.html

2. 前后端拆散开发

​ 以 Java Web 我的项目为例，在传统的开发模式中，前端代码（Html、css、js）写在 JSP 中，甚至 JSP 中嵌入 Java 代码。当用户拜访网站时，页面数据也就是 Html 文档，由 Servlet 容器将 jsp 编译成 Servlet，而后将 jsp 中的 html，css，js 代码输入到浏览器，这个过程须要通过很多步骤，能力响应用户的申请。这个过程十分繁琐，效率低下，间接造成了页面响应速度慢的成果。从我的项目保护的角度上，传统的开发模式，前端代码和后端代码耦合在一起，导致代码凌乱不堪，极大的升高了我的项目的可维护性，减少了保护老本。从开发角度来看，研发人员在开发过程中，不仅要设计后端架构还要兼顾前端展现，导致开发效率低下，缩短开发周期。取长补短，为什么不让业余的人去做业余的事？
​ 传统的开发模式下的零碎数据交互图：

传统开发模式的劣势和有余

​ 1. 开发出的软件响应速度慢，品质差，用户体验差。
​ 2. 前后端重大耦合，代码凌乱，可维护性差。
​ 3. 研发人员前后端兼顾，开发效率低下，研发周期变长。
​ 为了解决传统开发模式中的这些病痛，前后端拆散框架利用而生。

什么是前后端拆散？

​ 在前后端拆散的开发模式中，后端仅返回前端所需的数据，前端负责渲染 HTML 页面，后端不再管制前端的成果，用户看到什么样的成果，从后端申请的数据如何加载到前端中，都由前端本人决定，后端仅仅须要提供一套逻辑对外提供数据即可，并且前端与后端的耦合度绝对较低，在这种模式中，咱们通常将后端开发的每个视图都成为一个接口，或者 API，前端通过拜访接口来对数据进行增删改查。总结一句话，后盾负责提供数据，前端负责数据展现，职责拆散，分工明确。对应的数据交互如下图

总结

​ 从经典的 JSP+Servlet+JavaBean 的 MVC 时代，到 SSM（Spring + SpringMVC + Mybatis）和 SSH（Spring + Struts + Hibernate）的 Java 框架时代，再到前端框架（VueJS、AngularJS、ReactJS）为主的 MV* 时代，而后是 NodeJS 引领的全栈时代，技术和架构始终都在提高。尽管“基于 NodeJS 的全栈式开发”模式很让人兴奋，然而把基于 Node 的全栈开发变成一个稳固，让大家都能承受的货色还有很多路要走。翻新之路不会止步，无论是前后端拆散模式还是其余模式，都是为了更不便得解决需要，但它们都只是一个“中转站”。前端我的项目与后端我的项目是两个我的项目，放在两个不同的服务器，须要独立部署，两个不同的工程，两个不同的代码库，不同的开发人员。前端只须要关注页面的款式与动态数据的解析及渲染，而后端专一于具体业务逻辑。

3. 什么是大前端?

​ 简略来说，大前端就是所有前端的统称，比方 Web、Android、iOS、Watch 等，最靠近用户的那一层也就是 UI 层，而后将其对立起来，就是大前端。

​ 因为 node 的呈现，前端工程师不须要依赖于后端程序而间接运行，从而前后端拆散起来。所以当开发一个新产品的时候服务只须要写一次，然而面向用户的产品可能有很多，例如网站、Android 客户端、iOS 客户端和微信小程序等。因为各个平台应用的技术栈都不一样，代码无奈复用，十分节约人力、物力。那么有没有什么技术可能解决这一痛点呢？大前端应运而生，其实大前端的次要外围就是跨平台技术，有了跨平台技术，各个平台的差异性就抹平了，开发者只须要一套技术栈就能够开发出实用于多个平台的客户端。

3.1 前端开发须要把握的技术

前端开发环境的搭建

​ 装置 nodejs，Vue 等
​ 装置编译工具 VSCode，webstrom 等

web 前端根底

​ HTML
​ CSS
​ JavaScript(ES5,ES6)

web 前端框架

​ jQuery
​ Vue
​ React
​ Angular
​ 第三方组件库(elementUI，iView)

原生挪动端(可选)

​ iOS
​ Android

混合挪动端开发

​ 小程序，微信小程序，支付宝小程序等
​ ReactNative
​ Flutter

Node 后端开发

​ CommonJS
​ RequireJS
​ Node.js

大前端的学习流程

    原型设计阶段 ->HTML5/CSS3-> 云服务器(Linux/git/github...)->JavaScript(外围，ES5/BOM/DOM)              ->jQuery/BS->HTML5 API->ES6(外围)->Vue-> 混合式开发 App/ 小程序 ->NodeJs->React

3.2 软件开发流程

第一阶段：初始需要阶段

​ 将本人的 Idea 或客户的需要进行正当的需要剖析与市场调研，剖析我的项目可行性。

第二阶段：原型设计阶段

​ 将需要剖析转化成将来零碎合乎用户冀望的原型设计，原型设计实现后，审核并确认具体设计，筹备进

​ 入开发编码阶段。

第三阶段：个性化开发阶段

​ 软件开发设计：对整个软件系统进行设计，如 UI 界面设计、零碎框架设计、数据库设计等，为零碎开发

​ 一个强壮的构造并调整设计使其与实现环境相匹配。

​ 程序开发编码：在开发构建阶段，由程序员依据具体设计及打算，将所有应用程序性能开发并集成为产

​ 品。

​ 软件测试阶段：测试要验证对象间的交互作用，验证软件中所有组件的正确集成，测验所有的需要已被

​ 正确的实现, 辨认并确认缺点在软件部署之前被提出并解决。

第四阶段：交付维护阶段

​ 产品软件部署：部署的目标是胜利的生成版本并将软件分发给最终用户。

​ 正式验收交付：要确定软件、环境、用户是否能够开始零碎的运作，交付阶段的重点是确保软件对最终

​ 用户是可用的。

​ 前期我的项目保护：软件产品公布后，依据需要变动或硬件环境的变动对应用程序进行批改。

3.3 环境搭建、所需软件装置

Typora

​ markdown 文档软件，装置其余的也可

Axure

​ 依据软件安装包对应装置即可，举荐应用 RP9

VSCode

   依据安装包提醒下一步装置即可
   装置所需插件：Chinese - 汉化插件
          HTML CSS Support - html，css 快捷操作
         HTML Preview - 提供预览 HTML 文档的能力
          HTML Snippets - 残缺的 HTML 标签，包含 HTML5 片段
          open in browser - 容许您在默认浏览器或应用程序中关上以后文件
          Vetur - VS Code 的 Vue 工具
          View In Browser - 在零碎的默认浏览器中查看 html 文件
          Vue 3 Snippets - 一个 Vue.js 3 和 Vue.js 2 的代码段扩大
          Vue VSCode Snippets - 代码片段，它将加强您的 Vue 工作流

残余 node 环境等后续学习阶段再去配置

3.4. 扩大

• 集体博客

  • segmentfault，CSDN，简书等博客网站进行集体博客的编写

• github

  • 能够将本人的一些小案例或阶段性我的项目放到 github 上转换为本人的我的项目

以上这两点都是能够写在简历中的

• 刷题

  • 牛客网，leetcode 等去刷一些算法题