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

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

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

视图功能是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/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文件中的内容:

我有一条数据:

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

alpaca-spa/main/index/view/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中可以包含以下字段：

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

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

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

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

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

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

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

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

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

实际的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}}】是在控制器中传递给我的。

左边菜单：