当前位置:编程学习 > 网站相关 >>

CMS:文章管理之视图(1)

文章管理的视图与文件管理区别不大,都是分左右两部分。文章管理的左边是树状的分类列表,右边以Grid形式显示的文章列表。基本上重复劳动比较多,使用Sencha Architect这个可视化工具来做这方面的设计,是不错的选择,如果公司收益好,强烈建议使用,一个开发包的价格是399美金,大约2800人民币,还是很划得来的,起码比请多个程序员划得来。

废话又有点多了,转回正题,在Scripts\app\view目录下,创建一个Content目录,用来存放文章管理需要用到的视图,主要的视图包括文章管理的主视图、分类编辑窗口和文章编辑窗口。

接着,在Content目录下创建一个名称为View.js的文件,用来定义主视图,基本结构代码如下:

Ext.define('SimpleCMS.view.Content.View',{

    extend: 'Ext.container.Container',

    alias: 'widget.contentview',

    layout:"border",

 

    initComponent: function () {

        var me = this;

 

        me.callParent(arguments);

    }

 

});

 

接下来就是一步步添加组件了,先完成树的定义,代码如下:

me.tree= Ext.widget("treepanel", {

    title: "文章类别", region: "west", collapsible: true, rootVisible:true, store: "CategoriesTree",

    width: 200, minWidth: 100, split: true

});

 

接着是Grid,代码如下:

me.grid= Ext.widget("grid", {

    title: "文章列表", region: "center",

    store: "Contents",

    selType: "checkboxmodel",

    selModel: { checkOnly: false, mode:"MULTI" },

    columns: [

            { text: '编号', dataIndex: 'ContentId', width: 80},

            { text: '标题', dataIndex: 'Title', flex: 1 },

        {xtype: "datecolumn", text: '创建时间', dataIndex: 'Created', format: "Y-m-d H:i:s", width: 150},

            { text: '排序序数', dataIndex: 'SortOrder', width: 80},

            { text: '点击量', dataIndex: 'Hits', width: 80 },

        { text: '标签', dataIndex: 'Tags',width:150 }

     ]

});

 

Grid使用了复选框作为选择行的方式,也是一向习惯了。其它方面,应该问题不大。

 

最后是将树和Grid放到容器里,代码如下:

me.items = [me.tree, me.grid];

 

现在,可以测试一下效果了,不过,这还有修改控制器,切换到文章管理的控制器,在init方法内创建视图,并添加到面板里,这个应该很熟悉了,在用户管理和图片管理已经做过了。忘记了就直接复制过来修改一下创建的视图就行了,具体代码如下:

var me= this,

    panel = me.getContentPanel(),

    view = Ext.widget("contentview");

panel.add(view);

 

代码的panel用到了getContentPanel方法,返回文章管理的面板,因而要添加引用,代码如下:

refs: [

     { ref: "ContentPanel", selector:"#contentPanel" },

],

 

当然了,不要忘记在views配置项内添加视图了,代码如下:

views:[

    'Content.View'

],

在浏览器打开后,屏幕居然什么都没显示出来,而在Firebug居然显示两个“Layout run failed”错误,说明布局有问题。这个在之前也碰到过了,就是主面板定义中,没定义文章管理面板的布局,现在切换到主面板的视图,在文章管理的面板定义上加回布局定义,布局使用Fitlayout。

刷新一下浏览器,就可看到如图40的效果了。

 

 
现在来完成分类树的功能,先完成树的显示。在完成前,先要用实体框架,将数据库中的表转换为对象。在解决方案内添加一个新项,然后如图41所示,在添加新项窗口中,先选择数据模版,然后在中间选择ADO.NET实体数据模型,将名称修改为SimpleCMS.edmx后,单击添加按钮。

 

 
 选择从数据库生成,然后单击下一步。

 

 
在 选择您的数据连接窗口中,可以单击新建连接按钮新建一个连接。在不过,默认的ApplicationServices连接是在配置文件中定义好的连接,可以直接使用,就不必再创建新的了。选上“是,在连接字符串中包括敏感数据”后,单击下一步按钮。当然,如果不喜欢在Web.Config文件包含用户名和密码这些敏感数据,可以另行处理。

 

 
在 选择数据库对象窗口中,展开树中的表,然后如图那样选择以“T_”开头的4个表格,然后单击完成按钮结束向导。

 

 
等待生成完成后,会在解决方案中看到如图45所示的数据结构图。

 

 
看到图,一定会疑惑,为什么刚才选择了4个表格,怎么在这里只看到3个对象?这是因为连接表T_Content和T_Tag的关联表在对象中只是一种多对多关系,隐含在对象中了,因而,不需要像数据库那样,显式的表示成一个对象。

这里还要为T_Category添加一个关联,让父节点可以找到它的子节点。在T_Category 的图中单击鼠标右键,在右键菜单中选择添加>关联,在如图46所示的添加关联对话框中,修改右边的实体为T_Category,接着修改左边的多重性为“0...1(零或一个)”。接着修改左边的导航属性为Childs,这样,就可通过childs属性访问子节点了。然后将右边的导航属性修改为Parent,这样,通过Parent属性就可访问到父节点了。把复选框的勾去掉后,单击确定按钮完成添加关联操作。

 
接着在右边的属性列表中,编辑引用约束,在如图47的引用约束对话框中,选择主体为T_Category,然后在表格中将CategoryId的依赖属性设置为ParentId。

 
保存一下解决方案,然后新建一个服务器端的控制器Category,添加必要的引用后,添加一个只读的私有变量dc,用来访问SimpleCMSEntities的实例,代码如下:

private readonly SimpleCMSEntities dc = newSimpleCMSEntities();

 

分类树的Store调用的是List方法,因而将Index方法修改为List方法,并加入相应的权限、返回对象和基本结构代码,代码如下:

[AjaxAuthorize(Roles= "普通用户,系统管理员")]

publicJObject List()

{

    bool success = false;

    string msg = "";

    JArray ja = new JArray();

    int total = 0;

    try

    {

        success = true;

 

    }

    catch (Exception e)

    {

        msg = e.Message;

    }

    returnHelper.MyFunction.WriteJObjectResult(success, total, msg, ja);

}

 

树展开一个节点,都会以node作为参数将该节点的id提交,因而,在提取数据是,首先要做的是先从node提取id,代码如下:

intid=-1;

int.TryParse(Request["node"], out id);

 

因为在定义Store时,根节点的id为-1,因而这里要分两种情况处理搜索结果,代码如下:

IQueryable<T_Category>q = null;

if (id== -1)

{

    q = dc.T_Category.Where(m =>m.Hierarchylevel == 0 & m.State == 0).OrderBy(m=>m.Title);

}

else

{

    q = dc.T_Category.Where(m => m.ParentId== id & m.State == 0).OrderBy(m => m.Title);

}

代码中,当id为-1时,就搜索层数为0的记录,否则,则搜索ParentId的等于id的记录。

这里有个问题,因为记录根据标题进行了排序,因而未分类这个类别就不知道跑到那个位置去了,因而,为了保持为分类在顶部,在查询的时候最好把它排除出去,另外再添加到结果中,代码修改如下:

q =dc.T_Category.Where(m => m.Hierarchylevel == 0 & m.CategoryId!=10000& m.Stat

补充:Web开发 , 其他 ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,