关于前端:大前端简介

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等去刷一些算法题