通用灵活的网站内容展示数据结构设计与代码编写（借助AngularJs）

前言

假设公司需要快速构建一个CMS系统，同时支持灵活多变的内容展示形式。该CMS系统需要支持用户自定义内容的属性、值、以及展示方式。因此，不能仅仅使用固定的表字段来表示某个内容或者栏目的属性。同时，栏目与内容的展示，在某一程度上应该遵循固定的数据格式，便于最大限度的代码复用。

数据结构

参考Jspxcms本文中将涉及几种主要数据结构：

栏目命名为节点(Node)

某一具体内容命名为信息(Info)

页面展示模板资源命名为模型(Model)

可附加的属性定义(AttribueDefine)

属性值(AttributeValue)

节点(Node)

主要包含栏目(Node)， 栏目属性关联(NodeAttribute)两个实体

Node

记录栏目的基本属性，其中记录父节点和根两个属性即可令Node集合形成树，从而支持复杂的栏目组合。

@Id
@Column(name = "node_id")
private int nodeId;//栏目ID

@Column(name = "node_name", length = 100)
private String nodeName;//栏目名称

@Column(name = "parent_id")
private int parentId;//父节点

@Column(name = "node_model_id")
private int nodeModelId;//栏目模板

@Column(name = "node_img_url", length = 1024)
private String nodeImgUrl;//栏目图URL

@Column(name = "node_sequence", length = 3)
private String nodeSequence;//栏目顺序号

@Column(name = "is_root", length = 1)
private String isRoot;//是否根栏目

@Column(name = "is_show", length = 1)
private String isShow;//是否启用

@Column(name = "home_flag", length = 1)
private String homeFlag;//首页展示

@Column(name = "version_no", length = 17)
private String versionNo;//版本号

NodeAttribute

记录外挂属性定义与属性值的Id，通过外挂形式支持无限的属性/值集合。这里将值直接记录在该实体中。

@Id
@Column(name= "node_id")
private int nodeId;//栏目id

@Column(name = "attribute_define_id")
private Long attributeDefineId;//属性定义id

@Id
@Column(name = "key_code", length = 50)
private String keyCode;//key

@Id
@Column(name = "attribute_value", length = 2000)
private String attributeValue;//属性值

内容(Info)

Info

Info作为栏目的内容，挂在某个栏目之下，同时也支持外挂属性定义和属性值。

@Id
@Column(name = "info_id",unique=true,nullable=false)
private Long infoId;//内容ID  info_id bigint      主键

@Column(name = "node_id",nullable=false)
private Integer nodeId;//栏目ID   node_id int not null

@Column(name = "priority",length=2)
private String priority;//优先级   priority

@Column(name = "info_title",length=150,nullable=false)
private String infoTitle;//标题   info_title  varchar(150)    not null

@Column(name = "info_subtitle",length=150)
private String infoSubtitle;//副标题   info_subtitle   varchar(150)

@Column(name = "info_link",length=1024)
private String infoLink;//转向链接  info_link   varchar(1024)

@Column(name = "is_new_window",length=1)
private String isNewWindow;//是否在新窗口打开   is_new_window   char(1)     0否、1是

@Column(name = "info_path",length=1024)
private String infoPath;//信息路径  info_path   varchar(1024)

@Column(name = "info_template_id")
private int infoTemplateId;//内容模板

@Column(name = "meta_description",length=255)
private String metaDescription;//描述 meta_description    varchar(255)

@Column(name = "info_author",length=100)
private String infoAuthor;//作者  info_author varchar(100)

@Column(name = "start_date",length=8)
private String itartDate;//有效期起日期   start_date  char(8)

@Column(name = "stop_date",length=8)
private String stopDate;//有效期止日期    stop_date   char(8)

@Column(name = "version_no",length=17,nullable=false)
private String versionNo;//版本号  version_no  varchar (17)    not null    新增和更新时填写

InfoAttribute

通过外挂形式支持无限属性定义与属性值。这里将值直接记录在该实体中。

@Id
@Column(name = "info_id")
private Long infoId;//内容ID

@Column(name = "attribute_define_id")
private Long attributeDefineId;//属性定义ID

@Id
@Column(name = "key_code", length = 50)
private String keyCode;//key

@Id
@Column(name = "attribute_type")
private String attributeType;//值

属性(Attribute)

将属性定义与属性值区分开，其中属性值(AttributeValue)仅与属性定义连接，作为记录某属性的多个备选值列表用。实际应用是，使用的值将直接记录在(NodeAttribute或者InfoAttribute中)。

AttributeDefine

@Id
@Column(name = "attribute_define_id")
private Long attributeDefineId;//属性定义id

@Column(name ="attribute_type", length =1)
private String attributeType;//属性类型

@Column(name = "input_type", length = 50)
private String inputType;//输入类型

@Column(name ="field_name", length = 100)
private String fieldName;//字段名称

@Column(name = "field_code", length = 50)
private String fieldCode;//字段代码

@Column(name = "attribute_sequence", length = 3)
private String attributeSequence;//字段顺序

@Column(name = "is_mandatory",length = 1)
private String isMandatory;//是否必填

@Column(name = "default_value", length = 100)
private String defaultValue;//默认值

@Column(name = "information", length = 255)
private String information;//提示信息

DefineValue

@Id
@Column(name = "define_value_id")
private Long defineValueId;//属性定义值id

@Column(name = "attribute_define_id")
private Long attributeDefineId;//属性定义id

@Column(name = "value_attribute", length = 100)
private String valueAttribute;//值

@Column(name = "sequence_attribute", length = 3)
private String sequenceAttribute;//排序

后台代码

数据包装

因为需要同时返回栏目(内容)以及相应属性，因此需要将数据集合封装好并回传。以栏目封装为例。

最外层为NodeItem，其中包含Node以及一个属性/值集合NodeAttributeDefinePair 。类定义如下

public class NodeItem {
Node node;
List<NodeAttributeDefinePair> pairs;
public NodeItem(){}
public NodeItem(Node node, List<NodeAttributeDefinePair> pairs){
this.node  =node;
this.pairs = pairs;
}
public Node getNode() {
return node;
}
public void setNode(Node node) {
this.node = node;
}
public List<NodeAttributeDefinePair> getPairs() {
return pairs;
}
public void setPairs(List<NodeAttributeDefinePair> pairs) {
this.pairs = pairs;
}
}

public class NodeAttributeDefinePair {

private NodeAttribute nodeAttribute;
private AttributeDefine define;
private AttributeDefineValue value;

public NodeAttributeDefinePair(){}
public NodeAttributeDefinePair(NodeAttribute attr, AttributeDefine define, AttributeDefineValue value){
this.nodeAttribute = attr;
this.define = define;
this.value = value;
}
public NodeAttributeDefinePair(NodeAttribute attr, AttributeDefine define){
this.nodeAttribute  =attr;
this.define = define;
}

public NodeAttribute getNodeAttribute() {
return nodeAttribute;
}
public void setNodeAttribute(NodeAttribute nodeAttribute) {
this.nodeAttribute = nodeAttribute;
}
public AttributeDefine getDefine() {
return define;
}
public void setDefine(AttributeDefine define) {
this.define = define;
}
public AttributeDefineValue getValue() {
return value;
}
public void setValue(AttributeDefineValue value) {
this.value = value;
}
}

接口整理

初步考虑，用于获取数据的接口应该包含一下几个：

1、获取某栏目以及相应属性

2、获取某内容以及相应属性

3、获取某栏目的子栏目列表以及属性

4、获取某栏目的内容列表以及属性

具体实现

就是根据父子关系按照id进行搜索，比较简单，结合数据包装返回即可，因此不做过多描述。

前台代码(AngularJs)

根据上节的接口描述，可以将实现上述接口的方法统一封装为模块，并在需要的地方注入并调用即可。【使用$q 实现异步获取】

模块定义

angular.module('nodeInfo',[])
/*列表类型服务*/
.service('nodeInfolistService', function(){
this.listSubNodes = function($scope, $http,$q,paramsxxxx){
var q = $q.defer();
var url = ctx + 'api/xxxxxxx';
var params = {
params:paramsxxxx
};
$http({method:'GET', params:params,url:url})
.success(function(response){
q.resolve(response);
})
.error(function(response){
q.reject('服务器开小差了，请稍后重试');
});
return q.promise;
};

//......略
})
/*内容获取类型服务*/
.service('nodeInfoitemService', function(){
//......略
});

模块使用

外部使用的时候，首先在页面引入相应的js文件，在页面的APP申明中注入该模块，并引用服务即可。

代码如下：

/*注入nodeInfo*/
var app = angular.module('app',['nodeInfo']);

app.service('appService',function(){
});
/*引入服务nodeInfolistService*/
app.controller('appCtrl', function($scope, $http,$q, appService, nodeInfolistService){
var currentNodeId = $('#currentNodeId').text();
var parentId = $('#parentId').text();
//promise方式异步获取
var subPromise = nodeInfolistService.listSubNodes($scope, $http, $q, currentNodeId);
subPromise.then(
function(subNodes){
$scope.subNodes = subNodes;
},
function(err){
console.log(err);
}
)
});

通过归纳整理通用的数据获取接口库，并封装数据获取的相应服务，使网站的任意形式内容均可以以统一的方式获取，极大的简化了后期开发的代码量。同时，若后台逻辑变化时，也仅需要修改封装的服务即可，不需要修改其它页面。

效果

node列表



info列表



node详情+info列表

这里的”第一集”就是一个info



info详情