做电商自建网站怎样,扬中最新招聘信息,壹起航网络推广的目标,网站制作周期1、概述
Vue (读音 /vjuː/#xff0c;类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架#xff0c;发布于2014年2月。与其它大型框架不同的是#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层#xff0c;方便与第三方库#xff08;如…1、概述
Vue (读音 /vjuː/类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架发布于2014年2月。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层方便与第三方库如vue-router:跳转vue-resource:通信vuex:管理)或既有项目整合。官网https://cn.vuejs.org/v2/guide/
2、前端知识体系
想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端为实现成为“互联网Java全栈工程师”再向前迈进一步。
2.1、前端三要素
HTML结构超文本标记语言Hyper Text Markup Language决定网页的结构和内容CSS表现层叠样式表Cascading Style Sheets设定网页的表现样式。JavaScript行为是一种弱类型脚本语言其源码不需经过编译而是由浏览器解释运行用于控制网页的行为
2.2、结构层HTML
略
2.3、表现层CSS
CSS层叠样式表是一门标记语言并不是编程语言因此不可以自定义变量不可以引用等换句话说就是不具备任何语法支持它主要缺陷如下
语法不够强大比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器zz没有变量和合理的样式复用机制使得逻辑上相关的属性值必须以字面量的形式重复输出导致难以维护这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题前端开发人员会使用一种称之为**【CSS预处理器】**的工具,提供CSS缺失的样式层复用机制、减少冗余代码提高样式代码的可维护性。大大的提高了前端在样式上的开发效率。
什么是CSS预处理器
CSS预处理器定义了一种新的语言其基本思想是用一种专门的编程语言为CSS增加了一些编程的特性将CSS作为目标生成文件然后开发者就只需要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言进行Web页面样式设计再通过编译器转化为正常的CSS文件以供项目使用”。
常用的CSS预处理器有哪些
SASS基于Ruby 通过服务端处理功能强大。解析效率高。需要学习Ruby语言上手难度高于LESS。LESS基于NodeJS通过客户端处理使用简单。功能比SASS简单解析效率也低于SASS但在实际开发中足够了所以如果我们后台人员如果需要的话建议使用LESS。
2.4、行为层JavaScript JavaScript一门弱类型脚本语言其源代码在发往客户端运行之前不需要经过编译而是将文本格式的字符代码发送给浏览器由浏览器解释运行。 Native 原生JS开发 原生JS开发也就是让我们按照【ECMAScript】标准的开发方式简称ES特点是所有浏览器都支持。截至到当前ES标准以发布如下版本 ES3ES4内部未正式发布ES5全浏览器支持ES6常用当前主流版本webpack打包成为ES5支持ES7ES8ES9草案阶段 区别就是逐步增加新特性。 TypeScript 微软的标准 TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集 而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。由安德斯·海尔斯伯格(C#、Delphi、TypeScript之父 .NET创立者) 主导。 该语言的特点就是除了具备ES的特性之外还纳入了许多不在标准范围内的新特性所以会导致很多浏览器不能直接支持TypeScript语法 需要编译后(编译成JS) 才能被浏览器正确执行。
JavaScript框架
JQuery大家熟知的JavaScript库优点就是简化了DOM操作缺点就是DOM操作太频繁影响前端性能在前端眼里使用它仅仅是为了兼容IE678AngularGoogle收购的前端框架由一群Java程序员开发其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念与微软合作采用了TypeScript语法开发对后台程序员友好对前端程序员不太友好最大的缺点是版本迭代不合理如1代–2 代除了名字基本就是两个东西截止发表博客时已推出了Angular6ReactFacebook 出品一款高性能的JS前端框架特点是提出了新概念 【虚拟DOM】用于减少真实 DOM 操作在内存中模拟 DOM操作有效的提升了前端渲染效率缺点是使用复杂因为需要额外学习一门【JSX】语言Vue一款渐进式 JavaScript 框架所谓渐进式就是逐步实现新特性的意思如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular模块化和React(虚拟 DOM) 的优点Axios前端通信框架因为 Vue 的边界很明确就是为了处理 DOM所以并不具备通信能力此时就需要额外使用一个通信框架与服务器交互当然也可以直接选择使用jQuery 提供的AJAX 通信功能
UI框架
Ant-Design阿里巴巴出品基于React的UI框架ElementUI、iview、ice饿了么出品基于Vue的UI框架BootStrapTeitter推出的一个用于前端开发的开源工具包AmazeUI又叫“妹子UI”一款HTML5跨屏前端框架
JavaScript构建工具
BabelJS编译工具主要用于浏览器不支持的ES新特性比如用于编译TypeScript**WebPack**模块打包器主要作用就是打包、压缩、合并及按序加载
2.5、三端同一
混合开发Hybrid App
主要目的是实现一套代码三端统一PC、Android.apk、iOS.ipa并能够调用到设备底层硬件如传感器、GPS、摄像头等打包方式主要有以下两种
云打包HBuild - HBuildXDCloud 出品API Cloud完成一套然后打包为三端本地打包 Cordova前身是 PhoneGap
微信小程序
详见微信官网这里就是介绍一个方便微信小程序UI开发的框架WeUI
2.6、后端技术
前端人员为了方便开发也需要掌握一定的后端技术但我们Java后台人员知道后台知识体系极其庞大复杂所以为了方便前端人员开发后台应用就出现了Node JS这样的技术。
Node JS的作者已经声称放弃Node JS(说是架构做的不好再加上笨重的node modules可能让作者不爽了吧)开始开发全新架构的Deno
既然是后台技术那肯定也需要框架和项目管理工具 Node JS框架及项目管理工具如下
ExpressNode JS框架KoaExpress简化版NPM项目综合管理工具类似于MavenYARNNPM的替代方案类似于Maven和Gradle的关系
2.7、主流前端框架
Vue.js
iView
iview是一个强大的基于Vue的UI库 有很多实用的基础组件比element ui的组件更丰富 主要服务于PC界面的中后台产品。使用单文件的Vue组件化开发模式基于npmwebpackbabel开发 支持ES 2015高质量、功能丰富友好的API 自由灵活地使用空间。
官网地址Githubiview-admin
备注属于前端主流框架选型时可考虑使用主要特点是移动端支持较多
Element UI
Element是饿了么前端开源维护的Vue UI组件库 组件齐全 基本涵盖后台所需的所有组件文档讲解详细 例子也很丰富。主要用于开发PC端的页面 是一个质量比较高的Vue UI组件库。
官网地址Githubvue-element-admin
备注属于前端主流框架选型时可考虑使用主要特点是桌面端支持较多
ICE
飞冰是阿里巴巴团队基于React/Angular/Vue的中后台应用解决方案 在阿里巴巴内部 已经有270多个来自几乎所有BU的项目在使用。飞冰包含了一条从设计端到开发端的完整链路帮助用户快速搭建属于自己的中后台应用。 官网地址 Github
备注主要组件还是以React为主 截止2019年02月17日更新博客前对Vue的支持还不太完善目前尚处于观望阶段
VantUI
Vant UI是有赞前端团队基于有赞统一的规范实现的Vue组件库 提供了-整套UI基础组件和业务组件。通过Vant 可以快速搭建出风格统一的页面提升开发效率。
官网地址Github
AtUI
at-ui是一款基于Vue 2.x的前端UI组件库 主要用于快速开发PC网站产品。它提供了一套n pmweb packbabel前端开发工作流程 CSS样式独立 即使采用不同的框架实现都能保持统一的UI风格。
官网地址Github
Cube Ul
cube-ui是滴滴团队开发的基于Vue js实现的精致移动端组件库。支持按需引入和后编译 轻量灵活扩展性强可以方便地基于现有组件实现二次开发。
官网地址Github
混合开发
Flutter
Flutter是谷歌的移动端UI框架 可在极短的时间内构建Android和iOS上高质量的原生级应用。Flutter可与现有代码一起工作 它被世界各地的开发者和组织使用 并且Flutter是免费和开源的。
官网地址Github
备注Google出品 主要特点是快速构建原生APP应用程序 如做混合应用该框架为必选框架
lonic
lonic既是一个CSS框架也是一个Javascript UI库 lonic是目前最有潜力的一款HTML 5手机应用开发框架。通过SASS构建应用程序 它提供了很多UI组件来帮助开发者开发强大的应用。它使用JavaScript MV VM框架和Angular JS/Vue来增强应用。提供数据的双向绑定 使用它成为Web和移动开发者的共同选择。
官网地址官网文档Github
微信小程序
mpvue
mpvue是美团开发的一个使用Vue.js开发小程序的前端框架 目前支持微信小程序、百度智能小程序头条小程序和支付宝小程序。框架基于Vue.js 修改了的运行时框架runtime和代码编译器compiler实现 使其可运行在小程序环境中 从而为小程序开发引入了Vue.js开发体验。
官网地址Git hub
备注完备的Vue开发体验 井且支持多平台的小程序开发 推荐使用
WeUI
WeUI是一套同微信原生视觉体验一致的基础样式库 由微信官方设计团队为微信内网页和微信小程序量身设计 令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。
官网地址Github
3、了解前后分离的演变史
为什么需要前后分离
3.1、后端为主的MVC时代
为了降低开发的复杂度 以后端为出发点 比如Struts、Spring MVC等框架的使用 就是后端的MVC时代 以SpringMVC流程为例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ji6xFeB-1621221330085)(Vue课堂笔记.assets/1595237159379.png)]
发起请求到前端控制器(Dispatcher Servlet)前端控制器请求HandlerMapping查找Handler可以根据xml配置、注解进行查找处理器映射器HandlerMapping向前端控制器返回Handler前端控制器调用处理器适配器去执行Handler处理器适配器去执行HandlerHandler执行完成给适配器返回ModelAndView处理器适配器向前端控制器返回ModelAndViewModelAndView是SpringMvc框架的一个底层对象包括Model和View前端控制器请求视图解析器去进行视图解析根据逻辑视图名解析成真正的视图(JSP)视图解析器向前端控制器返回View前端控制器进行视图渲染视图渲染将模型数据(在ModelAndView对象中)填充到request域前端控制器向用户响应结果
优点
MVC是一个非常好的协作模式 能够有效降低代码的耦合度从架构上能够让开发者明白代码应该写在哪里。为了让View更纯粹 还可以使用Thymeleaf、Frreemarker等模板引擎 使模板里无法写入Java代码 让前后端分工更加清晰。
缺点
前端开发重度依赖开发环境开发效率低这种架构下前后端协作有两种模式 第一种是前端写DEMO 写好后 让后端去套模板。好处是DEMO可以本地开发 很高效。不足是还需要后端套模板有可能套错套完后还需要前端确定来回沟通调整的成本比较大另一种协作模式是前端负责浏览器端的所有开发和服务器端的View层模板开发。好处是UI相关的代码都是前端去写就好后端不用太关注不足就是前端开发重度绑定后端环境环境成为影响前端开发效率的重要因素。 前后端职责纠缠不清模板引擎功能强大依旧可以通过拿到的上下文变量来实现各种业务逻辑。这样只要前端弱势一点往往就会被后端要求在模板层写出不少业务代码还有一个很大的灰色地带是Controller 页面路由等功能本应该是前端最关注的 但却是由后端来实现。Controller本身与Model往往也会纠缠不清看了让人咬牙的业务代码经常会出现在Controller层。这些问题不能全归结于程序员的素养 否则JSP就够了。对前端发挥的局限性性能优化如果只在前端做空间非常有限于是我们经常需要后端合作但由于后端框架限制我们很难使用**【Comet】、【Big Pipe】**等技术方案来优化性能。
注在这期间(2005年以前) 包括早期的JSP、PHP可以称之为Web 1.0时代。在这里想说一句 如果你是一名Java初学者 请你不要再把一些陈旧的技术当回事了 比如JSP 因为时代在变、技术在变、什么都在变(引用扎克伯格的一句话唯一不变的是变化本身)
3.2、基于AJAX带来的SPA时代
时间回到2005年AJAX(Asynchronous JavaScript And XML 异步JavaScript和XML老技术新用法)被正式提出并开始使用CDN作为静态资源存储 于是出现了JavaScript王者归来(在这之前JS都是用来在网页上贴狗皮膏药广告的) 的SPA(Single Page Application) 单页面应用时代。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HEXyqUfN-1621221330088)(Vue课堂笔记.assets/1595237421062.png)]
优点 这种模式下 **前后端的分工非常清晰 前后端的关键协作点是AJAX接口。**看起来是如此美妙 但回过头来看看的话 这与JSP时代区别不大。复杂度从服务端的JSP里移到了浏览器的JavaScript浏览器端变得很复杂。类似Spring MVC 这个时代开始出现浏览器端的分层架构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2gUIJNSA-1621221330092)(Vue课堂笔记.assets/1595237457081.png)]
缺点
前后端接口的约定如果后端的接口一塌糊涂如果后端的业务模型不够稳定那么前端开发会很痛苦不少团队也有类似尝试通过接口规则、接口平台等方式来做。有了和后端一起沉淀的接口规则还可以用来模拟数据使得前后端可以在约定接口后实现高效并行开发。前端开发的复杂度控制SPA应用大多以功能交互型为主JavaScript代码过十万行很正常。大量JS代码的组织与View层的绑定等都不是容易的事情。
3.3、前端为主的MVC时代
此处的MVC模式如下
MVC(同步通信为主) Model、View、ControllerMVP(异步通信为主) Model、View、PresenterMVVM(异步通信为主)Model、View、View Model为了降低前端开发复杂度涌现了大量的前端框架比如Angular JS、React、Vue.js、Ember JS等 这些框架总的原则是先按类型分层 比如Templates、Controllers、Models 然后再在层内做切分如下图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pfKShiSd-1621221330095)(Vue课堂笔记.assets/1595237632332.png)]
优点
前后端职责很清晰前端工作在浏览器端后端工作在服务端。清晰的分工可以让开发并行测试数据的模拟不难 前端可以本地开发。后端则可以专注于业务逻辑的处理 输出RESTful等接口。前端开发的复杂度可控前端代码很重但合理的分层让前端代码能各司其职。这一块蛮有意思的简单如模板特性的选择就有很多很多讲究。并非越强大越好限制什么留下哪些自由代码应该如何组织所有这一切设计得花一本书的厚度去说明。部署相对独立可以快速改进产品体验
缺点 代码不能复用。比如后端依旧需要对数据做各种校验校验逻辑无法复用浏览器端的代码。如果可以复用那么后端的数据校验可以相对简单化。 全异步 对SEO不利。往往还需要服务端做同步渲染的降级方案。 了解seo seo是一种网站优化技术也被叫做搜索引擎优化可以利用搜索规则提高网站上有关搜索的自然排名主要表现为微博热搜控榜等。通过seo技术可以实现一系列的商业行为对产品品牌进行宣传收益。 性能并非最佳特别是移动互联网环境下。 SPA不能满足所有需求 依旧存在大量多页面应用。URL Design需要后端配合 前端无法完全掌控。
3.4、Node JS带来的全栈时代
前端为主的MVC模式解决了很多很多问题 但如上所述 依旧存在不少不足之处。随着Node JS的兴起 JavaScript开始有能力运行在服务端。这意味着可以有一种新的研发模式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ujigi526-1621221330098)(Vue课堂笔记.assets/1595237863311.png)]
在这种研发模式下前后端的职责很清晰。对前端来说两个UI层各司其职
Front-end Ul layer处理浏览器层的展现逻辑。通过CSS渲染样式 通过JavaScript添加交互功能 HTML的生成也可以放在这层 具体看应用场景。Back-end Ul layer处理路由、模板、数据获取、Cookie等。通过路由 前端终于可以自主把控URL Design 这样无论是单页面应用还是多页面应用 前端都可以自由调控。后端也终于可以摆脱对展现的强关注转而可以专心于业务逻辑层的开发。
通过Node WebServer层也是JavaScript代码 这意味着部分代码可前后复用 需要SEO的场景可以在服务端同步渲染由于异步请求太多导致的性能问题也可以通过服务端来缓解。前一种模式的不足通过这种模式几乎都能完美解决掉。
与JSP模式相比 全栈模式看起来是一种回归 也的确是一种向原始开发模式的回归 不过是一种螺旋上升式的回归。
基于Node JS的全栈模式 依旧面临很多挑战
需要前端对服务端编程有更进一步的认识。比如TCP/IP等网络知识的掌握。Node JS层与Java层的高效通信。Node JS模式下 都在服务器端 RESTful HTTP通信未必高效 通过SOAP等方式通信更高效。一切需要在验证中前行。对部著、运维层面的熟练了解需要更多知识点和实操经验。大量历史遗留问题如何过渡。这可能是最大最大的阻力。 注看到这里相信很多同学就可以理解为什么我总在课堂上说“前端想学后台很难而我们后端程序员学任何东西都很简单”就是因为我们后端程序员具备相对完善的知识体系。全栈So Easy
3.5、总结
综上所述模式也好技术也罢没有好坏优劣之分只有适合不适合前后分离的开发思想主要是基于Soc(关注度分离原则)上面种种模式都是让前后端的职责更清晰分工更合理高效。
