单页应用_单页应用vue.js - CSDN
精华内容
参与话题
  • 什么是单页应用

    千次阅读 2019-01-14 15:16:34
    网站就是网页的集合,但是如今react,angular,vue的诞生,产生了单页面应用(single page application),构建web应用可能只有一个页面,这个页面不再是简单地把内容进行布局排序...也叫单页应用单页应用是如何...

    在我们以前开发web程序的时候,都是通过不同的html,js,css进行控制。网站就是网页的集合,但是如今react,angular,vue的诞生,产生了单页面应用(single page application),构建web应用可能只有一个页面,这个页面不再是简单地把内容进行布局排序,它已经成为web应用的容器。这样还有一个页面的web应用程序成为单页面应用程序。也叫单页应用。

    单页应用是如何工作的呢?

    当web浏览器加载一个web页面的时候,就会创建这个web页面的文档对象模型。DOM将页面描述为一个树的结构,实际上,只需要通过HTML标签就可以描述页面的结构布局。

    不管你创建的是传统的web页面还是单页应用,两者的区别在于接下来所需要的工作。如果你创建的是传统的web页面,那么现在你已经完成了页面的布局。反之,如果你创建的单页应用,那么还需要使用web浏览器的js来操作DOM以创建而外的元素。

    展开全文
  • 今天分享下 —— 单页应用 & 多页应用的区别 的一些基本知识,欢迎关注! 单页应用实现的核心 —— 前端路由。 ????单页应用 VS 多页应用 ????单页应用(SinglePage Application,SPA) 指只有一个主页面...

    📖摘要


    今天分享下 —— 单页应用 & 多页应用的区别 的一些基本知识,欢迎关注!

    单页应用实现的核心 —— 前端路由。


    🌂单页应用 VS 多页应用

    在这里插入图片描述


    🌂单页应用(SinglePage Application,SPA)

    指只有一个主页面的应用,一开始只需加载一次 js,css 等相关资源。所有的内容都包含在主页面,对每一个功能模块组件化。单页应用跳转,就是切换相关组件,仅刷新局部资源。


    🌂多页应用(MultiPage Application,MPA)

    指有多个独立的页面的应用,每个页面必须重复加载 js,css 等相关资源。多页应用跳转,需要整页资源刷新。


    🚀两者对比表格:

    SPA MPA
    结构 一个主页面 + 许多模块的组件 许多完整的页面
    体验 页面切换快,体验佳;当初次加载文件过多时,需要做相关的调优。 页面切换慢,网速慢的时候,体验尤其不好
    资源文件 组件公用的资源只需要加载一次 每个页面都要自己加载公用的资源
    适用场景 对体验度和流畅度有较高要求的应用,不利于 SEO(可借助 SSR 优化 SEO) 适用于对 SEO 要求较高的应用
    过渡动画 Vue 提供了 transition 的封装组件,容易实现 很难实现
    内容更新 相关组件的切换,即局部更新 整体 HTML 的切换,费钱(重复 HTTP 请求)
    路由模式 可以使用 hash ,也可以使用 history 普通链接跳转
    数据传递 因为单页面,使用全局变量就好(Vuex) cookie 、localStorage 等缓存方案,URL 参数,调用接口保存等
    相关成本 前期开发成本较高,后期维护较为容易 前期开发成本低,后期维护就比较麻烦,因为可能一个功能需要改很多地方

    ⛳单页应用实现核心:前端路由

    前端路由的核心:改变视图的同时不会向后端发出请求。

    这里讲 vue-router 路由的两种模式:hash&history


    ⛳ hash 模式

    hash 模式背后的原理是 onhashchange 事件。

    window.addEventListener( hashchange ,function(e) {
        console.log(e.oldURL);
        console.log(e.newURL)
    },false);
    

    通过 window.location.hash 属性获取和设置 hash 值。

    由于 hash 发生变化的 url 都会被浏览器记录下来,所以浏览器的前进后退可以使用,尽管浏览器没有请求服务器,但是页面状态和 url 关联起来。后来人们称其为前端路由,成为单页应用标配。

    hash 模式的特点在于 hash 出现在 url 中,但是不会被包括在 HTTP 请求中,对后端没有影响,不会重新加载页面。


    ⛳history 模式

    利用了 HTML5 History Interface 中新增的 pushState()replaceState(),它们提供了对历史记录进行修改的功能。

    相关的 API:

    history.pushState()

    history.pushState(stateObj, title, url);
    
    • state:一个与指定网址相关的状态对象, popstate 事件触发时,该对象会传入回调函数。如果不需要可填 null。
    • title:新页面的标题,但是所有浏览器目前都忽略这个值,可填 null。
    • url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

    例如:history.pushState( new , new , new.html );

    添加上面这个新记录后,浏览器地址栏立刻显示 ~/new.html,但并不会跳转到 new.html,它只是成为 history 中的最新记录。pushState 方法不会触发页面刷新,只是 history 对象变化,地址栏会变。

    history.replaceState()

    history.replaceState(stateObj, title, url);
    

    参数同 pushState() 一样。

    调用该方法,会修改当前的 history 对象记录, history.length 的长度不会改变

    history.state

    当前 URL 下对应的状态信息。如果当前 URL 不是通过 pushState 或者 replaceState 产生的,那么 history.statenull。当需要 stateURL 同步时可以使用 replaceState() 使之同步。

    popstate 事件

    同一个文档的 history 对象出现变化时,就会触发 popstate 事件。

    不同的浏览器在加载页面时处理 popstate 事件的形式存在差异。页面加载时 ChromeSafari 通常会触发 popstate 事件,但 Firefox 则不会。

    注意:调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。 popstate 事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者调用 history.back()、history.forward()、history.go() 方法)。


    🎉最后

    • 更多参考精彩博文请看这里:《陈永佳的博客》

    • 喜欢博主的小伙伴可以加个关注、点个赞哦,持续更新嘿嘿!

    展开全文
  • 单页应用vs多页应用

    千次阅读 2018-09-05 18:59:50
    先来看多页应用 拿b站来看: 当我们第一次刷新页面,返回了b站的主页, 然后点进番剧模块: 发现又返回了一个番剧页面, 这个时候我们点回退 发现又返回了一个主页, 也就是说我们每一次跳转页面的...

    先来看多页应用

    拿b站来看:

    当我们第一次刷新页面,返回了b站的主页,

    然后点进番剧模块:

    发现又返回了一个番剧页面,

    这个时候我们点回退

    发现又返回了一个主页,

    也就是说我们每一次跳转页面的时候,后台服务器2都会给我们返回一个新的html文档,这种网站就是多页面应用

    优点:

    首屏时间(页面首个页面内容展现的时间)非常快,这是因为只需要一个http请求,请求完毕,就可以展示出来了;

    SEO(搜索引擎优化效果)非常好,搜索引擎在做网页排名的时候是根据网页内容来的,而我们所有的内容都是放在html里面的,所以多页应用的搜索引擎排名技术是非常好的

    缺点:

    当然就是慢啦,当你网速不好,每跳转一个页面就需要发送一个http请求,就会有卡顿出现

    单页应用:

    先在原来的基础上加一个跳转页面:

    第一次进入页面的时候:

    然后把信息清除

    再点击列表页

    再返回

    发现都没有新的dom元素

    这是因为我们用Vue写出来的页面是一个单页应用

    原理是这样的:js会感知到你url的变化,感知到url发生变化之后,js就可以动态的把当前页面的内容清除掉,再把一下一个页面的内容挂载到页面上,所以这个路由不是由后端来做了,是由前端来做,所以在每次跳页的时候就不会请求html文件了

    SEO差的原因是因为页面中的内容都是靠js渲染出来了,在百度或者goole这样的搜素引擎当中,排名会比较差,

    但是为什么我们还是要用Vue来去写单页面应用呢?

    其实Vue还提供了一些其他技术能完美解决这些问题,所以再解决了这些问题之后,单页面应用就显得很好了

    展开全文
  • 单页Web应用

    2018-05-18 03:18:52
    概念:Web应用程序:WEB应用程序一般是B(浏览器)/S(服务器)模式。Web应用程序首先是“应用程序”,和用标准的程序语言,如C、C++等编写出来的程序没有什么本质上的不同。然而Web应用程序又有自己独特的地方,...

    概念:

    Web应用程序:

    WEB应用程序一般是B(浏览器)/S(服务器)模式。Web应用程序首先是“应用程序”,和用标准的程序语言,如CC++等编写出来的程序没有什么本质上的不同。然而Web应用程序又有自己独特的地方,就是它是基于Web的,而不是采用传统方法运行的。换句话说,它是典型的浏览器/服务器架构的产物。

    理解了什么是浏览器/服务器架构,就了解了什么是Web应用程序。常见的计数器、留言版、聊天室和论坛BBS等,都是Web应用程序,不过这些应用相对比较简单,而Web应用程序的真正核心主要是对数据库进行处理,管理信息系统Management Information System,简称MIS)就是这种架构最典型的应用。MIS可以应用于局域网,也可以应用于广域网。基于InternetMIS系统以其成本低廉、维护简便、覆盖范围广、功能易实现等诸多特性,得到越来越多的应用。

    Web app

    WebApp是指基于Web系统应用,其作用是向广大的最终用户发布一组复杂的内容和功能。

    其实这些服务大多都是Web App。我常常这样问自己“这个程序是否完成了某个任务?”。即便它只完成了某个非常小的任务,那么它也是一个Web AppGoogle的搜索引擎就是一个Web App,它本质上和电话查询服务没有什么区别。

    这样说来,也并非所有的网站都是Web App。如果这个网站并没有执行任何任务,那么它就并不是Web App

     

    单页Web应用:

    SPA 是适合放在单个可滚动网页上的 Web 应用程序或网站,它们会动态地加载合适的内容来响应用户操作。它们支持在单个页面上与多个组件进行丰富的交互。

    单页Web应用,顾名思义,就是只有一张Web页面的应用。浏览器一开始会加载必需的HTMLCSSJavaScript,之后所有的操作都在这张页面上完成,这一切都由JavaScript来控制。因此,单页Web应用会包含大量的JavaScript代码,复杂度可想而知,模块化开发和设计的重要性不言而喻。

     

    多页 Web 应用程序对比 SPA

    传统 Web 应用程序通常由静态内容组成,用户在页面之间导航时需要加载完整的页面并在客户端与服务器之间传输数据。

    由于以一个页面的形式传送到浏览器,所以 SPA 不需要重新加载页面,甚至在客户从应用程序的一部分转移到另一部分时也不需要。

    因为 SPA 将数据与数据的表示分开,所以它们可重绘UI 的任何部分,而不需要服务器往返传输来检索 HTML。因此,SPA 提供了更加流畅的用户体验,更快的导航,以及更高效的网络传输。

     

    SPA的优势:

    1、它提供了更加吸引人的用户体验。单页应用可以做到一举两得:桌面应用的即时性和网站的可移植性和可访问性。

    2、单页应用可以和桌面应用一样渲染—单页应用只需要重绘界面上需要变化的部分。相比之下的传统网站,许多用户操作都会重绘整张页面,结果是当浏览器从服务器获取数据时,页面会假死并有“闪烁”现象,然后再重绘页面上的所有东西。如果页面很大,服务器又繁忙,或者网络连接很慢,这种“闪烁”现象会持续好几秒钟甚至是更长时间,用户只得猜测页面什么时候才可以再次使用。与单页应用的快速渲染和即时反馈相比,这是一种很恐怖的体验。

    3、单页应用可以拥有和桌面应用一样的响应速度—尽可能地把(临时的)工作数据和处理过程从服务端转移到浏览器端,单页应用由此把响应时间减至最小。单页应用在本地拥有大多数需要决策判断的数据和业务逻辑,因此是很快的。只有数据验证、授权和持久存储必须要放在服务端,原因我们会在第6章到第8章中进行讨论。传统网站的大多数应用逻辑在服务端,对大部分的用户输入的响应,他们必须等待一个“请求/响应/重绘”的循环周期。与接近即时响应的单页应用相比,这需要花费几秒钟的时间。

    4、单页应用和网站一样,也是跨平台的。

     

    SPA的缺点:

    1、SPA还有一些历史遗留问题(大部分是针对HTML5的改进)以及SEO。目前该技术还存在一些争议,但这并不是重点,因为这种类型的体系架构为SAAS Web Apps提供了一个极大的可用性。

    2、对搜索引擎不友好,单页应用实际是把视图(View)渲染从Server交给浏览器,Server只提供JSON格式数据,视图和内容都是通过本地JavaScript来组织和渲染。而搜索搜索引擎抓取的内容,需要有完整的HTML和内容,单页应用架构的站点,并不能很好的支持搜索。

     

    一个单页面Web应用程序就是一个Web应用程序,但结构不同。其中最重要的是:在第一次请求的时候,所有的标记语言(HTML)就已经传输到客户端,其余的请求都通过REST API获取JSON数据,数据的传输通过Web Socket API或远程过程调用。单页面应用程序可以说是分拆Web技术的最后一步——通过分离(css)内容,改进架构(XML和 XSLT)上的灵活性,调用服务器(AJAX)再到解压应用程序的导航页面结构。因此,这在Web发展中是个历史性的转折点。

    单页Web应用程序的结构很简单:首先传递HTML文档框架;然后使用JavaScript修改页面;紧接着再从服务器传递更多数据然后再修改页面,如此循环。从性能的角度看,在现代浏览器中单页面Web App已经能够和普通应用程序相媲美,而且几乎所有的操作系统都支持现代的浏览器。使用HTML+CSS+Javascript编写应用程序,能使更多的人们都加入到程序开发的行列。

    这足以说明,在Web设计过程中标志着Web将呈现一种新的趋势,它将一个分离的功能层作为API并将表示层用APP的形式体现出来 (HTML5Native)

     

    SPAURL中的#

    单页应用只有一个页面,视图的变化通常是通过路由(route)来驱动,首先,我们先来谈一谈单页应用的URL中的#号,很多采用单元结构网站的URL都出现了这个符号。

    #号在浏览器的URL中是一个锚点,在当前页改变#号的参数,页面会跳转到锚点所在的位置,通过JavaScript我们可以获取到#号后的参数:

     

    改变#号后的参数,页面并不会重载,于是大多数的单页架构网站,都在URL中采用#号来作为当前视图的URL地址,例如:

     

    符号#!Twitter曾在URL使用这个标识。这个标识是Google提出(AJAX 抓取:网站站长和开发人员指南1):

    因为复杂的单页架构页面,对Google来说抓取比较困难,于是给开发者制定一个规范:

    1网站提交sitemapGoogle

    2Google发现URL里有#!符号,例如example.com/#!/detail/1,于是Google开始抓取example.com/?_escaped_fragment_=/detail/1

    _escaped_fragment_这个参数是Google指定的命名,如果开发者希望把网站内容提交给Google,就必须通过这个参数生成静态页面。

    如此以来,就需要Server通过生成静态的内容以便Google抓取。

    以下将简单介绍,单页架构,爬虫访问根目录时如果配置Server端的路由。

    判断爬虫

    Google访问119.28.4.22/#!/detail/1 时,会自动转化成http://119.28.4.22/?_escaped_fragment_=/detail/1,,以Nginx为例:

     

    /api为后台服务的接口,已nodejs为例,代理设置如下

     

    如此,我们便将Google的访问重写到/api这个接口,然后在Server/api处理请求把静态内容输出即可。

     

    Sitemap

    Google的这个规范,必须有sitemap支持,因为有可能单页架构的站点,索引页面也是JavaScript渲染的。提交sitemap时,不用关注_escaped_fragment_这个参数名,只提交带哈希符号的URL即可,例如:

     

    技术潮流的步伐很快,单页应用,URL哈希处理也没渲染的方式实际上已经流行了很久,在国外很多用户数据较好的情况下,开发者会选择HTML5 History APIpushstate特性开发,在URL中抛弃#!。但是IE67等低端浏览器用户情况较多的网站,#能够很好的兼容。关于采用HTML5 History API来架构单页应用的方案,也欢迎讨论。

    展开全文
  • h5 单页应用 首页效果

    2020-07-18 23:30:55
    h5 单页应用 精美导航 首页效果
  • 单页应用模式和多页应用模式

    千次阅读 2018-10-06 14:47:57
    最近学习VUE,了解到 “Vue.js 提供了一个官方命令行工具,可用于快速搭建大型单页应用” 之前做过项目,改过项目,基本都是小部分单页,大部分多页的模式,也没有在这方面进行细致的学习,这次通过学习VUE进行了...
  • 单页应用和多页应用的区别

    千次阅读 2019-02-14 18:06:21
  • 什么是单页应用单页应用是指在浏览器中运行的应用,它们在使用期间不会重新加载页面。像所有的应用一样,它旨在帮助用户完成任务,比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web服务器...
  • Vue_单页应用VS多页应用

    千次阅读 2018-07-01 10:29:09
    单页应用 实现页面跳转,在以前是使用a标签链接,在Vue中,使用的是<router-link to='路由配置地址'> 进行页面跳转,和a标签差不多 eg: <template> <...
  • 多页和单页应用模式区别

    万次阅读 多人点赞 2016-12-15 11:02:46
    webx5 单页模式打开方式:justep.shell.showpage(); 多页模式打开方式:window.loacation.href = require.tourl();
  • web单页应用的优缺点

    千次阅读 2018-07-17 17:17:37
    web单页应用是什么? Web单页应用就是指只有一个Web页面作为入口的应用,在浏览器中运行期间不会重新加载页面。也就是说浏览器一开始会加载它必需的thml、css和Js,之后所有的交互操作都在一个页面上完成,这些都是...
  • 三张图区别多页和单页应用模式

    千次阅读 2017-12-29 10:32:46
    关于单页应用和多页应用模式的区别,借助网友的三张图就可以说明。 图片来源:http://blog.csdn.net/u013291076/article/details/53667382
  • angularjs(一):单页应用

    千次阅读 2015-01-12 22:14:35
    什么是单页应用? 二.单页应用给传统网站带来的好处? 三.关于单页Web应用 一.什么是单页应用单页应用是指在浏览器中运行的应用,它们在使用期间不会重新加载页面。像所有的应用一样,它旨在帮助用户...
  • SPA单页应用的优缺点

    千次阅读 2017-09-25 21:01:25
    单页Web程序的出现是富客户端发展的必然结果,但是该技术也是有些局限性,所以采用...单页Web应用可以和RESTful规约一起使用,通过REST API提供接口数据,并使用Ajax异步获取,这样有助于分离客户端和服务器端工作。
  • 单页应用跳转实现浅析-demo篇

    千次阅读 2017-05-02 14:38:52
    单页应用跳转实现浅析demo篇
  • AngularJS与jQuery的区别

    万次阅读 2017-09-13 11:14:41
    AngularJS与jQuery在web应用开发模式上有着完全不同的思路:jQuery: 通过显示操作浏览器中的DOM来创建应用...AngularJS:将浏览器吸收为应用程序的基础(适合单页应用),擅长大型及复杂项目,便于全面的单元测试。
  • 单页面应用

    千次阅读 2016-09-22 09:48:38
    什么是单页面应用? 单页Web应用(single page web application,SPA),就是只有一张...像所有的应用一样,它旨在帮助用户完成任务,比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web服务器加载
  • 单页应用添加百度统计

    千次阅读 2018-07-30 15:32:03
    1. 添加统计代码 const baiduTongji = () => { window._hmt = window._hmt || []; let sc; (function () { if ((sc = document.getElementById('baidu'))) { document.head.removeCh...
  • 什么是单页应用单页应用是指在浏览器中运行的应用,它们在使用期间不会重新加载页面。像所有的应用一样,它旨在帮助用户完成任务,比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web...
  • 最近公司技术 Leader 说要以后要使用 VUE 来构建单页应用,让我先研究下怎么搞。既然接到了任务那就撸起袖子开干吧,由于之前有过使用 VUE 做页面数据绑定,对 VUE 这东西还是很有好感的。于是乎 google 了一堆...
1 2 3 4 5 ... 20
收藏数 43,751
精华内容 17,500
关键字:

单页应用