单页面应用

什么是 SPA? 　　SPA就是单页面应用，即single page application，通过看代码就可以发现，整个网站就只有一个Html文件。 github地址 WHY SPA? 减小服务器压力。 如果不用SPA，那么我们每次切换页面的时候，就会向服务器发送一个请求，服务器返回一个html文件；但是如果使用了SPA，在切换时，不需要请求服务器，只要通过本地的js来切换即可。并且服务器端就不需要配置路由，完全做到了前后端分离，这对于分工合作的意义可想而知。 增强用户体验，增加app的使用流畅性。 做过spa的同学都知道，使用spa之后，页面在切换的时候非常流畅，完全没有那种不断刷新的感觉，而是非常快的就有了响应，因为js运行速度很快，所以js在做本地路由的时候，就会非常快。 SPA路由的实现方式有哪些？ 　　目前来说，无论是vue，还是react，spa的路由实现方式无非就是以下两者： hash方式。 使用location.hash和hashchange事件实现路由。 history api。使用html5的history api实现，主要就是popState事件等。 　　hash用的还是比较多的，但是这种方式的url会比较丑陋，会出现 #； 而history api就可以很好的解决这个问题，但是需要后端配置，并且由于是html5中的api，所以兼容性还不是很好

优点： Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。 缺点： 不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。 来源： https://www.cnblogs.com/2001-/p/10570183.html

定义： 　　单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 　　通俗点来讲，在应用整个使用流程里浏览器由始至终没有刷新，所有的数据交互由ajax完成。但是用户体验起来和app一样，有明确的页面区分，即所谓的web app。 　　浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。 特点： 　　速度：更好的用户体验，让用户在web app感受native app的速度和流畅， 　　MVC：经典MVC开发模式，前后端各负其责。 　　ajax：重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交。 　　路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载。 优点： 　　1、分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起； 　　2、减轻服务器压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍； 　　3、同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端； 缺点：

一、定义 单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。 二、优缺点 单页Web程序的出现是富客户端发展的必然结果，但是该技术也是有些局限性，所以采用之前需要了解清楚它的优缺点。 1、优点： 1).良好的交互体验 用户不需要重新刷新页面，获取数据也是通过Ajax异步获取，页面显示流畅。 2).良好的前后端工作分离模式 单页Web应用可以和RESTful规约一起使用，通过REST API提供接口数据，并使用Ajax异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分。 3).减轻服务器压力 服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍； 4).共用一套后端程序代码 不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端； 2、缺点： 1).SEO难度较高

　　最近一直在学习关于Vue的一些知识，由于遇到了问题，去网上查找资料，收获颇丰，在此分享。 1. 什么是SPA？ 　　单页Web应用（single page web application, SPA）,就是只有一张Web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序，是指在浏览器中运行的应用，在使用期间不会重新加载页面。像所有的应用一样，它旨在帮助用户完成任务，比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web服务器加载的富客户端。 　　速度：更好的用户体验，让用户在web app感受native app的速度和流畅， 　　MVC：经典MVC开发模式，前后端各负其责，后端只需要提供数据接口 　　ajax：重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交。 　　路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载，这个也就是哈希。 　　 　　SPA也是当今网站开发技术的一种趋势和潮流，毕竟前端三大框架不是盖的~~，很多的传统网站都在或者已经转型为单页Web应用，新的单页Web应用网站（包括移动端平台上面的）也雨后春笋涌现出来。 　　单页Web应用和前端工程师们息息相关，因为主要的变革发生在浏览器端，用到的技术其实还是HTML+CSS+JavaScript，所有的浏览器都原生支持

定义： 单页面应用( SinglePage Web Application ，SPA)：通俗讲就是只有一个主页面的应用，浏览器一开始要加载所有必需的js，css，单页面跳转仅刷新局部资源，共用资源(js，css)仅需加载一次， 常用于PC端官网、购物等网站 多页面应用( MultiPage Application ，MPA)：一个应用中有多个页面，页面跳转需刷新整个页面，每个共用资源(js，css)在每个页面都需要重新加载，常用于app，客户端 结构示意图： 单页面应用结构视图 多页面应用结构视图 单页面与多页面模式区别： 参考： https://blog.csdn.net/weixin_33975951/article/details/91814953 ， https://blog.csdn.net/wangbinxmu/article/details/79747408 来源： oschina 链接： https://my.oschina.net/u/3680343/blog/3184976

该文章写的很清晰，让人很快的分别出其中差异 单页面应用（SinglePage Web Application，SPA） 只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次，常用于PC端官网、购物等网站 如图: 单页面应用结构视图 多页面应用（MultiPage Application，MPA） 多页面跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载，常用于 app 或 客户端等 如图： 多页面应用结构视图 具体对比分析： 单页面应用（SinglePage Web Application，SPA） 多页面应用（MultiPage Application，MPA） 组成 一个外壳页面和多个页面片段组成 多个完整页面构成 资源共用(css,js) 共用，只需在外壳部分加载 不共用，每个页面都需要加载 刷新方式 页面局部刷新或更改 整页刷新 url 模式 a.com/#/pageone a.com/#/pagetwo a.com/pageone.html a.com/pagetwo.html 用户体验 页面片段间的切换快，用户体验良好 页面切换加载缓慢，流畅度不够，用户体验比较差 转场动画 容易实现 无法实现 数据传递 容易 依赖 url传参、或者cookie 、localStorage等

当用户在没有登录的状态下，只能够访问到系统的登录界面，不管输入的路由是什么，都会跳转到登录界面，当用户登录成功后，就会将登录的信息保存到 sessionStorage中，话不多说，直接上代码： 第一步是配置路由：第一个路由是不需要登录就能够进入的路由，第二个是需要登录才能进入的路由 { path: '/Login', name: 'Login', component: Login }, { path: '/BackupWizard', name: 'BackupWizard', component: BackupWizard, meta: { requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的 } } 第二步：在登录界面点击登录按钮时，当用户名和秘密都正确的时候，将登录状态存到sessionStorage，我这里是使用isLogin:true的方式存放到sessionStorage中，并且是在store中进行修改的：代码如下：login.vue文件： this.$store.commit('login',values.userName);this.$router.push({name:'BackupDataView'}); //登录成功后跳转到的页面 store文件： //state中的token的初始值是false，表示未登录login

最近用vue+vue-router做了个单页应用的项目，页面大概有15个左右。积累了一些开发经验在此做一些记录.本文主要从可维护性方面来考虑SPA的开发实践 全站的颜色定义放在一个less或者scss的文件里，其他组件和页面import这个配置来引用颜色。 示例代码：define.scss $bgColor: #fff; $color:#619eee; $fontColor:#333333; $fontColor01:#A5A5A5; $fontColor02:#4a4a4a; $fontColor03:#448CFF; $color300:#ed5630; $color3001:#fbfbfb; $accpetColor:#2fbe27; $refusedColor: #de0101; $hrefColor:#4a90e2; $redColor:#ff4c4c; 好处： 方便维护整站的色彩风格，后续遇到VI升级改版等，你就偷着乐吧。 vue，vue-router单独抽出来，用script标签引入 bad case npm install vue npm install vue-router //js import Vue from 'vue' import VueRouter from 'vue-router' good case <script src="/path/to

构建单页Web应用 摘自 前端农民工的博客 让我们先来看几个网站： coding teambition cloud9 注意这几个网站的相同点，那就是在浏览器中，做了原先“应当”在客户端做的事情。它们的界面切换非常流畅，响应很迅速，跟传统的网页明显不一样，它们是什么呢？这就是单页Web应用。 所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。 其实单页应用我们并不陌生，很多人写过ExtJS的项目，用它实现的系统，很天然的就已经是单页的了，也有人用jQuery或者其他框架实现过类似的东西。用各种JS框架，甚至不用框架，都是可以实现单页应用的，它只是一种理念。有些框架适用于开发这种系统，如果使用它们，可以得到很多便利。 开发框架 ExtJS可以称为第一代单页应用框架的典型，它封装了各种UI组件，用户主要使用JavaScript来完成整个前端部分，甚至包括布局。随着功能逐渐增加，ExtJS的体积也逐渐增大，即使用于内部系统的开发，有时候也显得笨重了，更不用说开发以上这类运行在互联网上的系统。 jQuery由于偏重DOM操作，它的插件体系又比较松散，所以比ExtJS这个体系更适合开发在公网运行的单页系统