CN108491206A

CN108491206A - 一种spa单页面实现方法及系统

Info

Publication number: CN108491206A
Application number: CN201810325428.1A
Authority: CN
Inventors: 孔祥智; 袁志玲; 李玲
Original assignee: Jiangnan University
Current assignee: Jiangnan University
Priority date: 2018-04-12
Filing date: 2018-04-12
Publication date: 2018-09-04

Abstract

本发明公开了一种SPA单页面实现方法及系统，通过使用AngularJS以及AngularJS核心模块ngRoute的路由插件实现SPA模式，灵活配置前端路由，实现灵活定义“局部”范围的变化，从而提供了另外一种网页打开模式，无需重新加载整体页面就可以实现页面切换：通过路由方式，实现“局部”改变，这个局部经过前端技术可以很好包装成整个页面的切换方式，但是实际上无需重新加载公共模块，按需加载所需模块以及部分渲染就能实现页面切换效果，降低了重复加载公共文件的时间，从而提高了页面访问效率；因为降低了页面切换的时间等待，所以带来了更加优秀的用户体验，消除了卡顿、页面空白等不友好体验。

Description

一种SPA单页面实现方法及系统

技术领域

本发明涉及一种SPA单页面实现方法及系统，属于互联网技术领域。

背景技术

SPA：Single Page Application指一种基于web的应用或者网站，这种单页面在和用户交互的时候，当用户点击某个物件或者按键的时候不会跳转到其他的页面。

Ajax：“Asynchronous Javascript And XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。

AngularJS：一款优秀的前端JS框架，以JavaScript编写的库。它可通过<script>标签添加到HTML页面。最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

HTML：超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

在Web Service,Ajax,Web 2.0,REST等Web应用与技术话题热潮，带动许多第二代的Web开发技术成长之后，这些Web应用与技术话题也渐渐地消退。不过许多人可能不曾发现，其实这些技术名词，是在慢慢地显露一点：Web应用程序逐渐从Server Side转移到Client Side，也就是浏览器身上。时至今日，浏览器也发展至可以支持H5、Css3、ES5的基本标准，因此以前很多只是存在于理论或者实验室中的方法也逐渐被广泛的应用于现实环境中。

用户在使用浏览器时，经常需要从一个页面跳转至另一个页面；传统的网页应用页面跳转都是通过HTML语言中的a标签进行实现，如<a href＝‘http://www.ggkbigdata.com’>广业开元科技有限公司</a>，这段代码就是用于告知浏览器进行页面跳转至一个新的页面。这种实现方式具有快捷、便利的优点，所以业内经常使用该方法，但同时这种处理方法对于一些新型的应用带来一些不友好的体验，如重复加载公众文件、页面跳转过程中存在页面留白的间隙等等用户体验较差的表现。为了实现无刷新的视图切换的模式，传统的做法就是利用AJAX从后取出数据然后渲染在前台页面HTML中，但是AJAX有一个致命的缺点就是不能实现浏览器的后退按钮失效。

发明内容

本发明针对现有技术的缺陷，提供了一种SPA单页面实现方法及系统，提高了页面访问效率；因为降低了页面切换的时间等待，所以带来了更加优秀的用户体验，消除了卡顿、页面空白等不友好体验。一种SPA单页面实现方法，所述方法包括：

步骤一：引用核心文件并注入；

步骤二：定义路由信息表；

步骤三：定义重新加载范围。

可选的，所述引用核心文件并注入，包括：

在页面引入angular；

在页面引入angular之后引入angular-route。

可选的，定义路由信息表，以便程序会根据定义好的路由信息表的内容进行页面渲染，同时根据浏览器的地址或者路由方法进行加载页面的操作；所述定义路由信息表，包括：

when(path,route)和otherwise(params)。

可选的，所述定义重新加载范围，包括：

确定页面公共模板范围；

采用angular的ngView指令实现重新加载范围的定义。

一种SPA单页面实现系统，所述系统包括：

登录模块、首页模块、系统管理模块和业务模块；

所述登录模块用于用户登录系统；

所述首页模块用于集中展示业务模块的汇总信息和各个模块的入口；

所述系统管理模块用于设置系统基本数据，所述基本数据包括用户管理和权限管理；

所述业务模块用于系统本身的业务逻辑。

可选的，所述登录模块用于在用户登录时校验用户账户，密码，以及验证码信息，若校验通过，则通过localStorage缓存服务端返回的token；若校验不通过，则给出相应提示。

可选的，所述首页模块用于在用户成功登录进入首页后，在加载完所有的DOM结构后，执行自封装的getAllData()方法；通过getAllData()内的异步请求(ajax)，发送参数给服务端，服务端根据发送来的参数查询数据库并返回相应的数据；根据返回的相应数据，如果失败则结束流程并提示错误信息，如果成功则把数据通过JSON.stringify()转成json字符串并通过localStorage缓存到本地并对页面展示形式构建，通过angualurjs的双向绑定机制给各个元素赋值并绑定相应的方法。

可选的，所述系统管理模块用于当用户点击左侧菜单的系统管理中的权限管理时，执行自封装的getAllData()方法；通过getAllData()内的异步请求(ajax)，发送参数给服务端，服务端根据接收到的参数查询数据库，返回相应的数据并在第一次加载的时候会向服务端发送默认的page/size(当前页码/每页条数)；根据返回的相应的数据，如果失败则结束流程并提示错误信息，如果成功则把数据通过JSON.parse()转成json字符串并通过localStorage缓存到本地并对页面展示形式构建，通过AngularJS的ng-repeat遍历出权限列表；若用户需要追加新的权限，点击新增按钮时系统触发layer的方法，弹出新增权限的小页面，当用户输入权限名称并设置权限按钮后，点击确认按钮，通过触发自封装的saveInfo()方法内的异步请求(ajax)，发送参数给服务端，服务端根据接口选择相应数据库表进行保存操作，如果成功则流程结束并关闭弹出页面刷新列表，如果失败，流程结束并提示错误信息。

可选的，所述业务模块用于当管理员点击左侧菜单的系统管理中的权限管理时，执行自封装的getAllData()方法；通过getAllData()内的异步请求(ajax)，发送参数给服务端，服务端根据接收到的参数查询数据库，返回相应的数据并在第一次加载的时候会向服务端发送默认的page/size(当前页码/每页条数)；根据返回的相应的数据，如果失败，则结束流程并提示错误信息，如果成功则把数据通过JSON.parse()转成json字符串并通过localStorage缓存到本地并对页面展示形式构建，通过AngularJS的ng-repeat遍历出权限列表；若管理员需要追加新的权限，点击新增按钮时系统触发layer的方法，弹出新增权限的小页面，当用户输入权限名称并设置权限按钮后，点击确认按钮，通过触发自封装的saveInfo()方法内的异步请求(ajax)，发送参数给服务端，服务端根据接口选择相应数据库表进行保存操作，如果成功则流程结束并关闭弹出页面刷新列表，如果失败，流程结束并提示错误信息。

本发明的有益效果是：通过使用AngularJS以及AngularJS核心模块ngRoute的路由插件实现SPA模式，灵活配置前端路由，实现灵活定义“局部”范围的变化，从而提供了另外一种网页打开模式，无需重新加载整体页面就可以实现页面切换：通过路由方式，实现“局部”改变，这个局部经过前端技术可以很好包装成整个页面的切换方式，但是实际上无需重新加载公共模块，按需加载所需模块以及部分渲染就能实现页面切换效果，降低了重复加载公共文件的时间，从而提高了页面访问效率；因为降低了页面切换的时间等待，所以带来了更加优秀的用户体验，消除了卡顿、页面空白等不友好体验。

附图说明

图1SPA实现原理示意图。

图2本发明实施例一和实施例二提供的SPA单页面实现方法的方法流程图。

具体实施方式

本发明实现SPA的方式是通过使用AngularJS以及基于AngularJS核心模块ngRoute的路由插件，其中，SPA实现原理示意图如图1所示。

实施例一：

本发明实施例提供一种SPA单页面实现方法，参见图2，具体实现步骤包括：

步骤一：引用核心文件并注入；

步骤二：定义路由信息表；

步骤三：定义重新加载范围。

本发明实施例通过基于AngularJS以及其核心路由插件引用核心文件并注入、定义路由信息表实现灵活配置前端路由，并且定义重新加载范围，实现了灵活定义需要重新加载的范围，降低了重复加载公共文件的时间，从而提高了页面访问效率；因为降低了页面切换的时间等待，所以带来了更加优秀的用户体验，消除了卡顿、页面空白等不友好体验。

实施例二

步骤一：引用核心文件并注入；

首先需要在页面引入angular和angular-route，要在angular-route之前引入angular。

因为angularjs是一种MVC前端框架，其核心思想中有一个是按需挂载，因此在页面上引入还不够，还需在模块声明中注入对ngRoute的依赖，具体引用代码：

var app＝angular.module('MyApp',['ngRoute'])；

经过引入文件以及诸如模块之后，则可以在模板或是controller中使用路由的服务和指令了。

步骤二：定义路由信息表；

在angularjs的设计模式里面，定义路由信息表，可以等价于程序的开端应用，程序会根据路由信息表的内容进行页面渲染，同时根据浏览器的地址或者路由方法进行加载页面等操作。

定义路由信息表主要用到了angular-route.js中的$routeProvider服务，它有两个核心方法：when(path,route)和otherwise(params)。

其中，when(path,route)原理及应用：

when(path,route)方法接收两个参数，path是一个string类型，表示该条路由规则所匹配的路径，它将与地址栏的内容($location.path)值进行匹配。如果需要匹配参数，可以在path中使用冒号加名称的方式，如：path为/show/:name，如果地址栏是/show/tom，那么参数name和所对应的值tom便会被保存在$routeParams中，例如：{name:tom}。也可以用*进行模糊匹配，如：/show*/:name将匹配/showInfo/tom。

route参数是一个object，用来指定当path匹配后所需的一系列配置项，包括以下内容：

controller//function或string类型，在当前模板上执行的controller函数，生成新的scope；

controllerAs//string类型，为controller指定别名；

template//string或function类型，视图所用的模板，这部分内容将被ngView引用；

templateUrl//string或function类型，当视图模板为单独的html文件或是使用了<script type＝"text/ng-template">定义模板时使用；

resolve//指定当前controller所依赖的其他模块；

redirectTo//重定向的地址；

示例代码：$routeProvider.when('/show',{controller:ShowController,templateUrl:'show.html'})；

以上代码就是定义了一个/show场景下应用的controller以及对应的templateUrl。一旦程序监听到路由是/show的时候，就会立刻执行渲染templateUrl对应的界面以及调用对应的controller的方法。

其中，otherwise(params)方法原理及应用：

otherwise(params)方法对应路径匹配不到时的情况，可以配置一个redirectTo参数，让它重定向到404页面或者是首页。

示例代码：$routeProvider.when('/show',{controller:ErrorController,templateUrl:404.html'})；

以上代码就是定义匹配不到既定路由时，如空链接或者跳转到非法地址之类，即并不存在于定义好的路由列表中，那么就跳转到templateUrl为404.html的界面，并执行ErrorController对应的方法。

经过使用以上的两种方法，我们就可以配置出来一个前端路由表了。

步骤三：定义重新加载范围；

根据定义好的重新加载范围定义路由显示标签；

SPA模式的程序都是“局部”刷新的，也就是说定义好的“局部”范围才会进行变动，而“局部”范围之外的地方就不会有任何变动。因此就能够实现页面公共模块只是需要加载一次就行，无需多次加载等各种SPA页面的优点。

这个“局部”范围的定义，则是由angular的ngView指令实现，只需在模板中简单的使用此指令，就能够定义好“局部”的范围。

示例代码：<div ng-view></div>

示例代码中ng-view这个部分就是定义好的局部范围，而所有的路由指定的视图变化都是在这个div里面。

经过这三个步骤，就实现了基于AngularJS以及AngularJS核心模块ngRoute的路由插件的SPA模式。

步骤四：页面渲染；

根据定义好的路由显示标签进行页面渲染。

本发明实施例通过使用AngularJS以及AngularJS核心模块ngRoute的路由插件实现SPA模式，灵活配置前端路由，实现灵活定义“局部”范围的变化，从而提供了另外一种网页打开模式，无需重新加载整体页面就可以实现页面切换：通过路由方式，实现“局部”改变，这个局部经过前端技术可以很好包装成整个页面的切换方式，但是实际上无需重新加载公共模块，按需加载所需模块以及部分渲染就能实现页面切换效果，降低了重复加载公共文件的时间，从而提高了页面访问效率；因为降低了页面切换的时间等待，所以带来了更加优秀的用户体验，消除了卡顿、页面空白等不友好体验。

本发明方案采取的是前端路由的方式，其核心原理是利用AJAX从后取出数据然后渲染在前台页面HTML，同时监听hashchange事件来进行视图切换，以及利用HTML5的history API，通过pushState()记录操作历史，监听popstate事件来进行视图切换。具体所实现是基于AngularJS以及其核心路由插件。由于AngularJS用友很良好的生态环境，实现路由的方式有多样，如可以利用第三方插件ui.router等。

另外由于AngularJS是开源框架，目前很多技术借鉴了AngularJS并实现了SPA模式，譬如vue框架等，这些都是可以替代AngularJS实现本发明中的技术替代，实现SPA模式。

虽然本发明已以较佳实施例公开如上，但其并非用以限定本发明，任何熟悉此技术的人，在不脱离本发明的精神和范围内，都可做各种的改动与修饰，因此本发明的保护范围应该以权利要求书所界定的为准。

Claims

1.一种SPA单页面实现方法，其特征在于，所述方法包括：

步骤一：引用核心文件并注入；

步骤二：定义路由信息表；

步骤三：定义重新加载范围。

2.根据权利要求1所述的方法，其特征在于，所述引用核心文件并注入，包括：

在页面引入angular；

在页面引入angular之后引入angular-route。

3.根据权利要求1或2所述的方法，其特征在于，定义路由信息表，以便程序会根据定义好的路由信息表的内容进行页面渲染，同时根据浏览器的地址或者路由方法进行加载页面的操作；所述定义路由信息表，包括：

when(path,route)和otherwise(params)。

4.根据权利要求1～3任一所述的方法，其特征在于，所述定义重新加载范围，包括：

确定页面公共模板范围；

采用angular的ngView指令实现重新加载范围的定义。

5.一种SPA单页面实现系统，其特征在于，所述系统包括：

登录模块、首页模块、系统管理模块和业务模块；

所述登录模块用于用户登录系统；

所述业务模块用于系统本身的业务逻辑。

6.根据权利要求5所述的系统，其特征在于，所述登录模块用于在用户登录时校验用户账户，密码，以及验证码信息，若校验通过，则通过localStorage缓存服务端返回的token；若校验不通过，则给出相应提示。

7.根据权利要求6所述的系统，其特征在于，所述首页模块用于在用户成功登录进入首页后，在加载完所有的DOM结构后，执行自封装的getAllData()方法；通过getAllData()内的异步请求(ajax)，发送参数给服务端，服务端根据发送来的参数查询数据库并返回相应的数据；根据返回的相应数据，如果失败则结束流程并提示错误信息，如果成功则把数据通过JSON.stringify()转成json字符串并通过localStorage缓存到本地并对页面展示形式构建，通过angualurjs的双向绑定机制给各个元素赋值并绑定相应的方法。

8.根据权利要求7所述的系统，其特征在于，所述系统管理模块用于当用户点击左侧菜单的系统管理中的权限管理时，执行自封装的getAllData()方法；通过getAllData()内的异步请求(ajax)，发送参数给服务端，服务端根据接收到的参数查询数据库，返回相应的数据并在第一次加载的时候会向服务端发送默认的page/size(当前页码/每页条数)；根据返回的相应的数据，如果失败则结束流程并提示错误信息，如果成功则把数据通过JSON.parse()转成json字符串并通过localStorage缓存到本地并对页面展示形式构建，通过AngularJS的ng-repeat遍历出权限列表；若用户需要追加新的权限，点击新增按钮时系统触发layer的方法，弹出新增权限的小页面，当用户输入权限名称并设置权限按钮后，点击确认按钮，通过触发自封装的saveInfo()方法内的异步请求(ajax)，发送参数给服务端，服务端根据接口选择相应数据库表进行保存操作，如果成功则流程结束并关闭弹出页面刷新列表，如果失败，流程结束并提示错误信息。

9.根据权利要求7所述的系统，其特征在于，所述业务模块用于当管理员点击左侧菜单的系统管理中的权限管理时，执行自封装的getAllData()方法；通过getAllData()内的异步请求(ajax)，发送参数给服务端，服务端根据接收到的参数查询数据库，返回相应的数据并在第一次加载的时候会向服务端发送默认的page/size(当前页码/每页条数)；根据返回的相应的数据，如果失败，则结束流程并提示错误信息，如果成功则把数据通过JSON.parse()转成json字符串并通过localStorage缓存到本地并对页面展示形式构建，通过AngularJS的ng-repeat遍历出权限列表；若管理员需要追加新的权限，点击新增按钮时系统触发layer的方法，弹出新增权限的小页面，当用户输入权限名称并设置权限按钮后，点击确认按钮，通过触发自封装的saveInfo()方法内的异步请求(ajax)，发送参数给服务端，服务端根据接口选择相应数据库表进行保存操作，如果成功则流程结束并关闭弹出页面刷新列表，如果失败，流程结束并提示错误信息。