单页面应用

SPA单页面应用router实现

由 隐身守侯 提交于 2020-01-02 03:01:15
spa 单页面router 主要可以基于两种方式实现：修改哈希和直接修改url 1.根据在使用location 修改哈希的时候，页面不会刷新（angular1.x 路由采用） 2.根据h5 pushState 和replaceState 修改url 时，页面不会刷新（react-router、vue-router） pushState/replaceState 执行时，url 会发生变化，但是浏览器并不会刷新，只有当前进或者后退触发时，页面才会刷新 pushState/replaceState 带的url 必须同源，否则会报错（防止恶意的脚本模仿） 来源： https://www.cnblogs.com/lcx33/p/8641310.html

使用Angular构建单页面应用(SPA)

由 五迷三道 提交于 2020-01-02 03:00:43
　　什么是SPA？看下图就是SPA： 　　 　　下面说正经的，个人理解SPA就是整个应用只有一个页面，所有的交互都在一个页面完成，不需要在页面之间跳转。 　　单页面的好处是更快的响应速度，更流畅的用户体验，甚至和桌面应用或者原生App一样流畅。 　　有很多JS框架可以用来构建SPA，Ember.js、vue.js、React、Angular等等，甚至即使你用的是jQuery开发，也有相应的框架可以用来开发SPA，比如： page.js 。 　　本文介绍如何用Angular构建SPA，其他的依葫芦画瓢就是了，原理都差不多。 (一)Demo效果图 　　 (二)代码结构 　　　这个Demo使用Angular和Angular Route技术实现，相应地引入了angular和angular-route两个库，先看下代码结构，有个直观的印象： 　　　 (三)具体实现 　　 1.创建不可变的布局list.html 1 <!DOCTYPE html> 2 <html ng-app="demoApp"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Angular SPA Demo</title> 6 <link rel="stylesheet" href="../static/css/base.css"> 7 <link rel="stylesheet"

SPA 单页面应用

由 僤鯓⒐⒋嵵緔 提交于 2020-01-02 03:00:09
SPA一般只一个web页面，通过ajax，router等技术实现局部刷新，不会随着用户操作而出现重新加载页面或者页面跳转的功能，所有的用户操作都在一个页面实现。 组件化：UI组件和非UI组件 　　传统的ui层：UI和逻辑混在一起，比如往往会在远程请求的回调中更改DOM 　　分层带来的优势：每层的职责更专一，可以对其作单元测试的覆盖，以保证其质量 代码隔离： 　　由于SPA把各种子功能的js代码聚集到一个作用域，因此代码的隔离和模块化很重要 代码合并和加载 　　由于SPA界面基本都是动态生成的，所以不用担心文件加载从而阻塞渲染 路由和状态的管理 　　比如说我们有一个功能，经历过多次导航菜单的点击，才呈现出来。如果用户想要把这个功能地址分享给别人，他怎么才能做到呢？ 　　具体做法就是把产品功能划分为若干状态，每个状态映射到相应的路由，然后通过pushState这样的机制，动态解析路由，有了路由之后，SPA就可以前进后退 缓存和本地存储 服务器通信 　　webSocket实时通讯方式 内存管理 　　传统的web页面一般不需要考虑内存管理，因为用户的停留时间相对少，即使出现内存泄露，可能很快的被刷新页面之类的咋偶哦冲掉。但SPA不会这样，因此我们对DOM操作、网路链接等要格外小心 特点：一个页面集成多种功能，不会随着用户的操作而重新加载页面或者进行页面的跳转，而是局部动态的变换HTML内容

单页面应用

由 不问归期 提交于 2020-01-02 02:59:45
主要内容: https://blog.csdn.net/weixin_41646716/article/details/80073995 　1 概念 : 单页面应用指一个系统只加载一次资源, 下面的操作的交互, 数据的交互是通过router和ajax来进行, 页面并没有刷新. 2 单页面的应用优点 : 　　　　分离前后端, 前端负责页面展示,后端负责数据存储和计算, 不会吧前后端的逻辑混合在一起 　　　　减轻服务器的压力, 服务器只用出数据就可以 　　　　同一套后端程序代码, 就可以用于web界面,手机,平板等多种客户端 　　　　用户体验好, 快, 内容的改变不需要重新加载整个页面, web应用更加具有响应性和更令人着迷 　　　　SPA和RESTful架构一起使用，后端不再负责模板渲染、输出页面工作，web前端和各种移动终端地位对等，后端API通用化； 3 单页面的缺点 : 　　　　初次加载耗时相对增多； 　　　　导航不可用，如果一定要导航需要自行实现前进、后退，需要程序来实现管理； 　　　　使用脚本修改页面，这个脚本我们都知道，他的兼容性是个大问题； 　　　　不利于SEO问题，现在可以通过Prerender等技术解决一部分； 来源： https://www.cnblogs.com/gyh412724/p/9966350.html

Vue单页面应用

由 北战南征 提交于 2020-01-02 02:59:19
单页面应用指一个系统只加载一次资源，然后下面的操作交互、数据交互是通过router、ajax来进 行，页面并没有刷新； <1>在vue搭建的环境里面怎么有没有公用的css和js?如果有是怎么引用的？ 有公用的css和js，有两种引用的方法：（要深刻理解单页面应用程序哦，单页面就是引入后在哪里都能使用） 1.全局公共引用样式和js文件 2.组件的引入 单页面的应用优点： 1.分离前后端关注点，前端负责界面显示，后端负责数据存储和计算。不会把前后端的逻辑混杂在一起； 2.减轻服务器压力，服务器只用出数据就可以； 3.同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端； 4.用户体验好、快，内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷； 5.SPA和RESTful架构一起使用，后端不再负责模板渲染、输出页面工作，web前端和各种移动终端地位对等，后端API通用化； 单页面的应用缺点： 1.初次加载耗时相对增多； 2.导航不可用，如果一定要导航需要自行实现前进、后退，需要程序来实现管理； 3.使用脚本修改页面，这个脚本我们都知道，他的兼容性是个大问题； 4. 不利于SEO问题，现在可以通过Prerender等技术解决一部分； 来源： https://www.cnblogs.com/xiaoqi2018/p/10471717.html

单页面应用（SPA）

由 三世轮回 提交于 2020-01-02 02:58:06
此篇我们来瞅一瞅SPA，啥是SPA啊，实际上一点也不神秘，就是单页应用，可能有的同学又会问了，啥是单页面应用，别着急，我们慢慢来看 首先我们先来了解一下单页应用出现背景 背景： 在早期的 Web 应用中，前端的作用很弱，业务逻辑和数据处理都在后端，后端给前端返回一个 HTML 页面，前端只负责展示。在这种模式下，单个 HTML 页面被当做一个功能原件，表单提交，超链接跳转都可以用来重新请求新的 HTML 页面，从而达到给用户展示新的页面的目的。在这种方式中，你可以感觉到 页面总是在不停的刷新 ，一个点击可能都需要等待很久，这是因为，当页面变化时，所有资源都需要重新请求。这些问题导致了用户体验不佳，也浪费了资源。单页应用便很好的解决了这些问题 概念： 什么是单页应用呢？单页应用的全称是 single-page application，简称 SPA，它是一种网站应用的模型，它可以动态重写当前的页面来与用户交互，而不需要重新加载整个页面。单页应用的流畅性让 Web 应用更像桌面端或 Native 应用了。相对于传统的 Web 应用，单页应用做到了前后端分离，后端只负责处理数据提供接口，页面逻辑和页面渲染都交给了前端。前端发展到现在，单页应用的使用已经很广泛，目前时兴的 React、Vue、Angular 等前端框架均采用了 SPA 原则。单页应用意味着前端掌握了主动权

什么是单页应用(转)

由 风格不统一 提交于 2019-12-29 14:48:01
说白就是无刷新，整个webapp就一个html文件，里面的各个功能页面是javascript通过hash,或者history api来进行路由，并通过ajax拉取数据来实现响应功能。因为整个webapp就一个html，所以叫单页面！ 通俗点来讲，在应用整个使用流程里浏览器由始至终没有刷新，所有的数据交互由ajax完成。 但是用户体验起来和app一样，有明确的页面区分，即所谓的web app。 例子的话，PC最早期就是 gmail了，github 移动端可以看看 百度图片 百度视频 POCO世界 来源： CSDN 作者： 东方朔盗仙桃 链接： https://blog.csdn.net/appleyuchi/article/details/103752571

单页面应用的History路由模式express后端中间件配合

由 匿名 (未验证) 提交于 2019-12-02 23:56:01
这篇文章主要分享一下通过 HTML5 的 history API 的时候，使用 NodeJS 后端应该如何配置，来避免产生404的问题，这里是使用的express的框架，主要是通过 connect-history-api-fallback 这个中间件来实现的！ 这里使用vue-router来实现的单页应用为例，访问 http://cnode.lsqy.tech ，进入首页，点击下面的tab栏，一切都是很正常的，但当这时候你 ctrl+command+R 或 点击浏览器的刷新按钮 或 在地址栏上再敲一下回车，总之就是刷新，发现就会出现404了，比如这样的错误 Cannot GET /message/ ,因为默认浏览器会认为你是在请求服务端的路由，服务端那边没有对应的处理，所以自然就会出错了，下面来引入 connect-history-api-fallback 这个中间件，来无痛使用优雅的History路由模式。 首先看它的介绍 Middleware to proxy requests through a specified index page, useful for **Single Page Applications** that utilise the HTML5 History API. 中文意思就是一个能够代理请求返回一个指定的页面的中间件，对于单页应用中使用HTML5

单页应用巧用history.go()、history.length返回到历史指定页面

由 别说谁变了你拦得住时间么 提交于 2019-12-02 19:04:17
本文转载于: 猿2048 网站➞ https://www.mk2048.com/blog/blog.php?id=c1abiiibb H5添加了新的接口history.pushState、history.replaceState让我们可以向history历史记录中添加、替换记录，从而实现了不刷新跳转页面。 在实际应用中通常会遇到这样的需求，需要从一个目标页跳到另一个页面就行一些操作，操作完成再跳到目标页，如果这时候我们还使用pushState跳转到目标页，就会向history中再添加一条目标页的记录 此时如果用户在目标页1中点击返回上一页按钮就会又重新回到操作页，但实际想要返回到的是起始页，这时需要连续返回3次才能到回到起始页。如果我们在操作页跳转目标页的时候使用返回上一页history.go(-1)，这时只需要点击1次返回键就可以回到起始页，这样对于用户体验来说更合理一些。 如果操作页数是2页、3页甚至更多，只要操作页的页数是固定的也只需要history.go(-N)就可以了。麻烦一点的是操作页数的数量是不固定的情况，出于安全考虑我们没有办法直接访问history记录中的具体信息，这时候就要结合history.length来实现返回到历史记录中的指定页面。 history.length存储的是历史记录中的页数，包含当前页面。页面的跳转、pushState操作都会使history

单页应用及多页应用

由 China☆狼群 提交于 2019-12-01 06:13:00
一：是什么 　　多页面应用：一个项目是由多个完整的html页面组成 　　单页面应用：一个项目中只有一个完整的html页面，其他的都是部分html片段组成。 二：渲染方式 　　多页面：页面跳转，后台服务器返回一个新的html文档，页面跳转所有资源都要重新加载 　　单页面：页面跳转，局部刷新，不会重新加载全部资源。片段切换快，容易实现 二：问题： 　　多页面：页面跳转切换，会出现卡顿空白问题，不容易实现切换动画。切换慢 　　单页面：首屏时间慢，SEO差；单页应用的首屏时间慢，首屏时需要请求一次 html ，同时还要发送一次 js 请求，两次请求回来了，首屏才会展示出来。相对于多页应用，首屏时间慢。 SEO效果差，因为搜索引擎只认识 html 里的内容，不认识 js 的内容，而单页应用的内容都是靠 js 渲染生成出来的，搜索引擎不识别这部分内容，也就不会给一个好的排名，会导致单页应用做出来的网页在百度和谷歌上的排名差。 三：特性： 　　多页面： 　　　　（1）首屏时间快=》访问页面时，服务器只需要返回一个html，页面就会展示出来，这个过程只经历一盒HTTP请求，所以页面展示速度快 　　　　（2）利于SEO=》SEO：根据网页内容给网页权重，搜索引擎可以识别html内容的，每个页面所有内容都放在html中，所以排名效果好 　　单页面： 　　　　（1）页面切换快=》页面每次切换跳转时
订阅 单页面应用