成都网站建设设计

将想法与焦点和您一起共享

构建多页的前后分离web项目(alpaca-spa的视图用法)

本文用来介绍使用alpaca-spa构建多页的前后分离项目的js实现。

十多年的新疆网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整新疆建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“新疆网站设计”,“新疆网站推广”以来,每个客户项目都认真落实执行。

Alpaca-spa.js是一款轻量的前端JS框架,提供前端路由功能,前端视图渲染功能,前端页面嵌套功能。目的是用来提高web项目的开发效率,前后端分离开发,同时使前端代码结构更加整洁。 Alpaca-spa.js区别于其他框架的主要特点是轻巧灵活移动端、PC端都适用大小项目都适用,而且学习成本低, 框架没有复杂的概念与特性,不依赖开发环境(如node.js等),都是最基本的JavaScript语法,也就是说读者只要有JavaScript语言基础,就可以很快学会使用Alpaca-spa.js框架用来构建前端页面。

1简介

视图功能是Alpaca-Spa.js的核心功能,主要解决前端JavaScript实现页面嵌套,页面数据渲染,页面局部渲染等功能。 使用alpaca-spa的View功能,可以轻松构建多页面前后分离结构,尤其是在开发后台功能时,非常实用。 当然,使用alpaca-spa开发移动端h5网站,单页面结构网站也是非常不错的选择。 使用视图功能需要配置web服务器,例如apache,nginx,node等。 这里使用apache举例,假设你的网站根目录位于:

C:www

当然你可以配置apache的虚拟主机,将网站的根目录放在任意你喜欢的地方。

如果你们项目的前后端在同一个域名下面,也就是网站根目录前后端用的是同一个,那前端的代码一般不会直接放在根木目下面, 在根目录下面建立一个叫alpaca-spa或者叫其他名字的目录(只要不与后端路由冲突既可),例如将前端代码放到alpaca-spa目录下面

一个简单的目录结构如下:

--C:wwwalpaca-spa  --main   --controller   index.js   --view   --index index.html index-2.html index-3.html   --layout --part leftMenu.html layout.html   main.js index.html

1.示例中的www是项目的根目录,应该将web服务器的根目录设置为此目录。 2.alpaca-spa是前端项目的目录,目录下面有1个子目录,1个html文件。 mainmain目录用来存放当前项目中所有main模块的文件。可以创建多个模块。 index.htmlindex.html用来做当前项目的入口文件 3.index目录里面有两个目录controller,view,一个js文件 controller用来存放main模块的控制器的js代码。里面有一个控制器js文件,index.js view用来存放main模块的视图部分的js代码。 示例中view目录里面有一个子目录index,用于存放index控制器中相关的模板, 本示例中,有三个模板:index.html,index2.html,index3.html 还有一个子目录layout,用于存放公共的布局信息, layout目录中的layout.html是默认的布局模板文件 layout目录中的还有一个子目录part,用来存放页面中其他公共区域,例如菜单等 main.jsmain.js是main模块的模块级别的js代码。 推荐在这个文件里面做模块的定义,例如:Alpaca.MainModule={};

了解完上面的目录结构之后,我们来学习使用Alpaca.View()方法,参看下面的示例。

alpaca-spa/index.html文件中的内容:

alpaca-spa.2.1

alpaca-spa/main/main.js文件中的内容:

/*1定义Index模块*/ Alpaca.MainModule={};

alpaca-spa/main/controller/index.js文件中的内容:

/*1定义Main模块中的Index控制器*/ Alpaca.MainModule.IndexController={ //index动作,创建一个视图index indexAction:function(){ //视图默认渲染到#content位置,可以通过参数中传递to字段改变渲染位置 //视图模板默认位于index/view/index/index.html,可以通过参数中传递template字段改变模块路径 //即:默认模板位置为:[模块名]/view/[控制器名]/[动作名].html varview=newAlpaca.View({data:{desc:\'我是一条数据,在controller中传递到view视图模版里面!\'}}); //layout布局视图 varlayout=newAlpaca.Layout(); //part部件视图,默认路由位于view/layout/part中,文件名默认与name属性相同 //part的默认渲染位置与其name属性相同,当然也可以通过to属性指定 varpart=newAlpaca.Part({name:\'leftMenu\'}); //将part添加到layout中,part的默认渲染位置与其name属性相同,也可以通过to属性指定 layout.addChild(part); //设置视图的layout view.setLayout(layout); //在view中,向layout中传递数据 view.setLayoutData({\'layoutData\':666}); //在view中,向part中传递数据 view.setPartData({leftMenu:{\'partData\':888}}); returnview; }, //index2动作,创建视图index2 index2Action:function(){ varview=newAlpaca.View(); varlayout=newAlpaca.Layout(); varpart=newAlpaca.Part({name:\'leftMenu\'}); layout.addChild(part); view.setLayout(layout); view.setLayoutData({\'layoutData\':\'666-2\'}); view.setPartData({leftMenu:{\'partData\':\'888-2\'}}); returnview; }, //index3动作,创建视图index3 index3Action:function(){ varview=newAlpaca.View(); varlayout=newAlpaca.Layout(); varpart=newAlpaca.Part({name:\'leftMenu\'}); layout.addChild(part); view.setLayout(layout); view.setLayoutData({\'layoutData\':\'666--3\'}); view.setPartData({leftMenu:{\'partData\':\'888--3\'}}); returnview; }, };

alpaca-spa/main/index/view/index.html文件中的内容:

我是内容区域:当前显示的是index.html里面的内容
我有一条数据:
{{=it.desc}}

alpaca-spa/main/index/view/index2.html文件中的内容:

我是内容区域:当前显示的是index2.html里面的内容

alpaca-spa/main/index/view/index3.html文件中的内容:

我是内容区域:当前显示的是index3.html里面的内容

在浏览器中访问:http://www1.tkc8.com/alpaca-spa/index.html

点击按钮,可以看到内容区域切换到对应的页面了,整体布局layout、菜单leftMenu除了数据其他的都没有变化,

上面的示例中,我们创建了Main模块,index控制器,index动作,并且在indexAction中通过Alpaca.View()方法创建了一个视图,运行结果是视图模板中的内容被渲染到了页面的#content位置中。这就是Alpaca.View()的用途。

Alpaca.View()方法

Alpaca.View(option)是一个用来创建视图页面的方法,接受一个对象参数option,参数option中可以包含以下字段:

option.data

  数据对象,为渲染模板提供数据

  例如:Alpaca.View({data:{name:\'Alpaca-spa\'}})

option.to

  设置被渲染位置,默认位置是#content

  例如:Alpaca.View({data:{name:\'Alpaca-spa\'},to:\'#divId\'})

option.template

  指定渲染的模板文件。默认是所属模块view目录下所属controller同名目录下action同名的.html文件,即:默认模板位置为:[模块名]/view/[控制器名]/[动作名].html

  如果需要改变视图模板,只需要这样写即可:template:\'index2\',这样就会使用同名controller下的index2.html作为模板。

  这是因为函数内部自动格式化了该参数,如果不想使用自动格式化功能,请使用notFormat参数,设置notFormat:true即可。

  例如:Alpaca.View({data:{name:\'Alpaca-spa\'},to:\'body\',template:\'index2\'})

option.notFormat(一般不用,不推荐使用,可以跳过不看)

  默认为false,表示系统会自动格式化template参数,如果设置为true,如下例,视图将使用根目录下的index-test.html文件作为视图模板。 Alpaca.View(template:\'/index-test.html\',notFormat:true})

3使用Layout和Part

实际的web项目开发中,大部分页面都是有结构的,比如总体的布局,公用的菜单、页头、页尾等。Alpaca-sap.js使用layout,part来解决这类问题。

继续上面介绍View的示例:

观察alpaca-spa/main/controller/index.js文件中的内容:

indexAction:function(){ //视图默认渲染到#content位置,可以通过参数中传递to字段改变渲染位置 //视图模板默认位于index/view/index/index.html,可以通过参数中传递template字段改变模块路径 //即:默认模板位置为:[模块名]/view/[控制器名]/[动作名].html varview=newAlpaca.View({data:{desc:\'我是一条数据,在controller中传递到view视图模版里面!\'}}); //layout布局视图 varlayout=newAlpaca.Layout(); //part部件视图,默认路由位于view/layout/part中,文件名默认与name属性相同 //part的默认渲染位置与其name属性相同,当然也可以通过to属性指定 varpart=newAlpaca.Part({name:\'leftMenu\'}); //将part添加到layout中,part的默认渲染位置与其name属性相同,也可以通过to属性指定 layout.addChild(part); //设置视图的layout view.setLayout(layout); //在view中,向layout中传递数据 view.setLayoutData({\'layoutData\':666}); //在view中,向part中传递数据 view.setPartData({leftMenu:{\'partData\':888}}); returnview; },

以及:alpaca-spa/main/view/layout/layout.html文件中的内容为:

我是layout!数据【{{=it.layoutData}}】是在控制器中传递给我的。

左边菜单:
页面内容区域:

alpaca-spa/main/view/layout/part/leftMenu.html文件中的内容为:

我是左边的菜单,请把我放到左面!数据【{{=it.partData}}】是在控制器中传递给我的。

点下面的连接可以切换其他页面
页面Index1 页面Index2 页面Index3

上面的示例演示了如何使用layout、part来渲染复杂页面。

Alpaca.Layout()方法

Alpaca.Layout(option)是用来创建一个layout布局的视图对象的方法,接受一个对象参数option,参数option中可以包含以下字段:

option.data

  数据对象,为渲染模板提供数据

  例如:Alpaca.Layout({data:{name:\'Alpaca-spa\'}})

option.to

  设置被渲染位置,默认位置是body

  例如:Alpaca.Layout({data:{name:\'Alpaca-spa\'},to:\'#divId\'})

option.name

  指定layout的名字。默认为layout

  layout默认的模板路径是所属模块view目录下layout目录下的layout.html文件

  通过name字段可以修改模板的路径为:所属模块view目录下layout目录下与name同名的html文件

  例如:Alpaca.Layout({data:{name:\'Alpaca-spa\'},to:\'body\',name:\'layout2\'})

Alpaca.Part()方法

Alpaca.Part(option)是用来创建一个part布局的视图对象的方法,接受一个对象参数option,参数option中可以包含以下字段:

option.data

  数据对象,为渲染模板提供数据

  例如:Alpaca.Part({data:{name:\'Alpaca-spa\'}})

option.name

  指定Part的名字。

  Part默认的模板路径是所属模块viewlayoutpart目录下与其name同名的html文件

  Part默认的渲染位置是id与其name同名的元素

  通过name字段可以达到指定他的视图模板路径,以及渲染位置的效果,例如,

  例如:Alpaca.Part({data:{name:\'Alpaca-spa\'},name:\'top\'})

option.to

  设置被渲染位置,默认位置是id与其name同名的元素

  例如:Alpaca.Part({data:{name:\'Alpaca-spa\'},to:\'#divId\'})

4.如何改变layout、view的默认渲染位置 1、layout默认渲染位置是位置,

通过设置Alpaca.ViewModel.DefaultLayoutCaptureTo="body";可以全局改变layout的默认渲染位置

如果只修改当前视图的渲染位置,有两种方法:

varlayout=newAlpaca.Layout({to:\'body\'}});

或者

varlayout=newAlpaca.Layout(); layout.setCaptureTo(\'.layout-area\'); 2、view默认渲染位置是

位置,

通过设置Alpaca.ViewModel.DefaultViewCaptureTo="body";可以全局改变view的默认渲染位置

如果只修改当前视图的渲染位置,有两种方法:

varview=newAlpaca.View({to:\'#content\'}});

或者

varview=newAlpaca.View(); view.setCaptureTo(\'.content-area\');

layout、view的默认渲染位置非常重要,一个路由执行后,url中的hash是否改变,就依据layout、view的默认位置决定。而hash是否改变,会影响刷新点击按钮的结果。

1、如果当前view没有使用layout,则view的CaptureTo等于DefaultLayoutCaptureTo时,hash会改变 2、如果使用了layout,则layout的CaptureTo等于DefaultLayoutCaptureTo时,hash会改变 5ready()方法

视图渲染完毕后会执行view.ready()方法,例如

varview=newAlpaca.View() //视图渲染完成后执行ready方法。 view.ready(function(){ console.log(\'视图渲染完成了...\'); }) returnview; 6自定义显示效果

通过设置view.show方法可以自定义视图显示效果,例如:

varview=newAlpaca.View(); //自定义视图渲染效果为闪入效果。 //注意:在自定义视图显示效果时,需要调用onLoad事件,来触发执行ready函数。 view.show=function(to,html){ varthat=this; $(to).fadeOut("fast",function(){ $(to).html(html); $(to).fadeIn("fast",function(){ that.onLoad(); }); }); }; returnview;

上面面示例代码,实现了视图渲染时的闪入效果。

7init()与release()方法

如果在控制器中定义了init()方法,那么在执行当前控制器的所有action方法前都会执行init()方法。如果在控制器中定义了release()方法,那么在执行完成当前控制器的所有action方法之后,都会执行release()方法,

模块中也可以定义init()、release()方法。

参考示例:

/*定义Index模块中的TestController*/ Alpaca.IndexModule.TestController={ //init方法,当前控制下的所有动作在执行前,都会执行init方法 init:function(){ console.log(\'执行action之前,执行init()方法\'); }, //release方法,当前控制下的所有动作在执行前,都会执行release方法 release:function(){ console.log(\'执行action之后,执行release)方法\'); }, }; 8.关于hash何时被改变

1:如果未使用layout,则view的CaptureTo等于DefaultLayoutCaptureTo 2:如果使用了layout,则layout的CaptureTo等于DefaultLayoutCaptureTo


当前题目:构建多页的前后分离web项目(alpaca-spa的视图用法)
当前链接:http://chengdu.cdxwcx.cn/article/cpjcdc.html

其他资讯