单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态的变换HTML的内(采用的是div切换显示和隐藏),从而实现UI与用户的交互。由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验。得益于ajax,我们可以实现无跳转刷新,又多亏了浏览器的histroy机制,我们用hash的变化从而可以实现推动界面变化。
angularJS,是目前中最流行的mvvm框架,非常适合做SPA;与之类似的还有vueJS,backbone,extjs等。
hash值
即url中#号后面的部分。
<
a
href="target">go target</
a
>
......
<
div
id="target">i am target place</
div
>
驱动div显示隐藏的方式有很多种,比较好的选择为以下两种:
1.监听地址栏中hash变化驱动界面变化
2.用pushsate记录浏览器的历史,驱动界面发送变化
首先,我们画出三个div,它们实际上是作为三个界面存在界面上的,body作为界面外框容器,限制着它们的大小。为了给每个界面配对一个hash地址,我们给每个div配一个id,将hash地址与对应的选择器(id、class)建立链接关系,从而可以从hash变化值中操作界面。
window.onhashchange = function(){ //监听hash值变化,实现页面变换
var hash=window.location.hash;
changePage(hash);
}
function changePage(hash){
switch (hash)
{
case ‘#index’:
url=’partials/list.html’;
break;
case ‘#newpage’:
url=’partials/newpage.html’;
break;
case ‘#edit’:
url=’partials/edit.html’;
break;
case ‘#view’:
url=’partials/view.html’;
break;
}
$.ajax({ //根据hash值选择页面
type:’GET’,
url:url,
//async:false,
success:function(data){
main.innerHTML=data;
}
});
}
一、SPA的概述
SPA(single page application)单页面应用程序,在一个完成的应用或者站点中,只有一个完整的html页面,这个页面有一个容器,可以把需要加载的代码片段插入到该容器中。
SPA的工作原理:
eg: http://127.0.0.1/index.html#/start
①根据地址栏中url解析完整的页面:index.html
加载index.html
②根据地址栏中url解析#后的路由地址: start
根据路由地址,去在当前应用的配置中 找该路由地址的配置对象去查找该路由地址 所对应的模板的页面地址
发起异步请求加载该页面地址
③把请求来的数据加载到指定的容器中
二、通过VueRouter来实现一个SPA的基本步骤
①引入对应的vue-router.js(该文件我已经上传到我的文件中)
②指定一个盛放代码片段的容器
<router-view></router-view>
③创建业务所需要的各个组件
④配置路由词典
每一个路由地址的配置对象(要加载哪个页面…)
const myRoutes = [ {path:'/myLogin',component:TestLogin}, {path:'/myRegister',component:TestRegister} ] const myRouter = new VueRouter({ routes:myRoutes }) new Vue({ router:myRouter })
⑤测试
在地址栏中 输入对应的不同的路由地址 确认是否能够加载对应的<!doctype html>
<html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> <!-- 引入文件 --> <script src="js/vue-router.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <!--通过router-view指定盛放组件的容器 --> <router-view></router-view> </div> <script> var testLogin = Vue.component("login",{ template:` <div> <h1>这是我的登录页面</h1> </div> ` }) var testRegister = Vue.component("register",{ template:` <div> <h1>这是我的注册页面</h1> </div> ` }) //配置路由词典 //对象数组 const myRoutes =[ //当路由地址:地址栏中的那个路径是myLogin访问组件 //组件是作为标签来用的所以不能直接在component后面使用 //要用返回值 //path:''指定地址栏为空:默认为Login页面 {path:'',component:testLogin}, {path:'/myLogin',component:testLogin}, {path:'/myRegister',component:testRegister} ] const myRouter = new VueRouter({ //myRoutes可以直接用上面的数组替换 routes:myRoutes }) new Vue({ router:myRouter, //或者: /* router:new VueRouter({ routes:[ {path:'/myLogin',component:testLogin}, {path:'/myRegister',component:testRegister} ] }) */ el:"#container", data:{ msg:"Hello VueJs" } }) </script> </body> </html>
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>SPA练习</title> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <router-view></router-view> </div> <script> /* 需要大家创建一个SPA,这个SPA有3个组件,分别对应的是collect/detail/order 功能需求: 在地址栏中路由地址是: /myColllect --> 收藏页组件 /myDetail --> 详情页组件 /myOrder --> 订单页组件 */ /* 1、引入js文件 2、创建三个组件,需要返回值 3、路由词典配置(三小步)const myRoutes、const myRouter、router:myRouter, 4、指定一个盛放代码片段的容器 <router-view></router-view> */ var testCollect = Vue.component("collect",{ template:` <div> <h1>这是收藏页</h1> </div> ` }) var testDetail = Vue.component("detail",{ template:` <div> <h1>这是详情页</h1> </div> ` }) var testOrder = Vue.component("order",{ template:` <div> <h1>这是订单页</h1> </div> ` }) const myRoutes = [ {path:"",component:testCollect}, {path:"/myColllect",component:testCollect}, {path:"/myDetail",component:testDetail}, {path:"/myOrder",component:testOrder}, ] const myRouter = new VueRouter({ routes:myRoutes }) new Vue({ router:myRouter, el:"#container", data:{ msg:"Hello VueJs" } }) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助。
评论