phpstudy集成环境

 首页 > 前后端完全分离中页面布局问题

前后端完全分离中页面布局问题

尝试项目中前后端分离，注意这里不是中间加一个所谓的nodejs的那种“分离”，我的意思是前端就是纯html页面+js，后台java或者其他后端语言通过http接口提供服务。

所有的操作比如用户验证、数据存取都通过ajax进行，但是目前觉得不好操作的是页面布局，页面通过后端渲染的话，过去习惯用apache tiles，一些页头、页脚等通用的内容可以横跨n个页面重用，非常方便，布局什么的都可以重用。

但是如果换到前端呢？好像没有找到类似的替代方法，大家都是怎么做的？

补充：我是准备前端用angularjs的，另外即使做SPA，也不意味着全站一个页面，还是会按照模块划分页面，比如用户管理跟项目管理页面就不一样，但是在用户管理页面会把用户列表、更新、等全部放到一起。

使用一个前端框架类似angulr.js的有模板和路由，js做数据的交互，后台提供接口，也许就是你希望的前后端分离

angular 的router，driective， include 等都可以解决你的问题。

那最好利用mvvm框架来实现

首先你需要一个前端框架例如backbone.js/angulr.js/react.js,然后把你的title之类的信息放到一个json里边传到前端，前端基于这个返回信息进行页面渲染。

弱智的方法：复制粘贴复制粘贴。
常用的方法：类似JSP或者PHP的include功能。
变态的方法：把HTML分离出来，用JS进行再次加载。

Angular 应用中的布局设计与管理（w/ ui.router）

话不多说，直接上代码：

// 我们是这样定义路由的（节省篇幅，开头写一遍后面不重复了）
angular.module('demo', ['ui.router'])
.config(function($stateProvider) {
    $stateProvider.state(...)
})

场景一：应用大部分时候都是 Header Main Footer 的上中下三行布局

这是模版：

<!-- template/main-layout.html -->
<header>...</header>
<main ui-view></main>
<footer>...</footer>

这是路由：

$stateProvider.state('application', {
    abstract: true,     // WHY abstract here? READ THE FUCKIN' MANAUL!!!
    url: '/',
    templateUrl: 'template/main-layout.html'
})

以上就是布局，然而这并没有做完，因为目前为止我们还没有一个可访问的应用了此布局的入口路由，所以接着往下：

这是模版：

<!-- template/child-one.html -->
<h1>Welcome to my app, idiot</h1>

这是路由：

$stateProvider.state('application.childOne', {
    // parent: 'application',    因为我们用了 application.childOne 的命名规则，所以无需显式指定 parent……RTFM
    url: 'one',
    templateUrl: 'template/child-one.html'
})

于是，当用户访问 /one 的时候：

  1. 通过 Url Matching，angular 知道（实际上是 ui.router 知道）当前路由是 application.childOne

  2. 由此向上寻找此路由树的根找到 application，开始渲染 template/main-layout.html 布局模版，得到 header 和 footer

  3. 布局模板中有一个 ui-view，所以其下的子路由要渲染自己的模版到这个 <main ui-view> 里面去

这就是你得到三行布局的办法。

场景二：需要一个没有 Header 和 Footer 的白板布局

前面的布局覆盖了应用大部分的界面，但是个别界面（比如登录注册之类的）不需要 Header Footer 怎么办？

有 N 种办法！这里介绍最简单最蠢（其实也很巧，只是不需要什么技巧的暴力实现）的办法：

新的布局模版：

<!-- template/plain-layout.html -->
<main ui-view></main>

应用于此模版（比如登录）

<!-- template/sigin.html -->
<h1>Sign In Here</h1>

新的路由体系：

$stateProvider

.state('plain', {
    abstract: true,     // Again, RTFM
    url: '/',
    templateUrl: 'template/plain-layout.html'
})

.state('plain.signin', {
    url: 'signin',
    templateUrl: 'template/signin.html'
})

就这么简单。

何为 Partial？怎么用？

partial 是 HTML 的片段，它有这样几个特征：

  1. 可复用，不解释

  2. 和应用整体状态变化无关（这是和布局最大的区别，布局是和应用状态挂钩的，比如说登录前是一个布局，登录后是一个布局等等。当然你可以从头到尾都用一样的布局，但只要有变化，我们就要从概念上把这种变化看作是状态的变化，这就是为什么要用路由的缘故。仔细想想后端模板渲染不就是这么回事吗？状态！）

  3. 自身是没有状态管理的（如果有，请用 directive）

拿上例来说，假如 <header> 部分里面有一个 LOGO 是可以复用的 HTML 片段，我们可以抽取出来：

<!-- template/partials/logo.html -->
<span class="logo">...</span>

于是你可以把这段代码复用在不同的布局里面，这才是 ng-include 的正确使用场景，拿 ng-include 来布局的，让人家一看就知道你没学到家。

【热门文章】
【热门文章】