利用wojilu框架仿一个网站的全过程（Step by Step利用wojilu框架开发网站系列一 附源码）

被仿的网站和仿照后的网站

　　被仿的网站-易读 

　　仿照后的网站-我读 

　　仿这个网站的目的：为了实践一下新学习的轻量级asp.net web开发框架[我记录] ，该网站比较简单，适合入门。  

设计领域模型（数据库表）

　　首先分析原站 易读 的结构，上图：

　　

 　　

　　由上图可知，我们需要一个分类表以及一个文章表，每篇文章属于某个分类。同时我们做一些简化的工作，去掉文章的热门属性。 

 

　　由上图可知，应该有个章节表，章节隶属于某篇文章，一个文章下面分为很多章节，同时，由下图可知，章节表中应该有个内容字段，用来存储文章的内容。 

　　于是，就有了如下的设计，其中用户表是为了我们日后方便后台管理所做的设计：

    public class Category : ObjectBase<Category>
    {
        [NotNull("请输入分类")]
        public string Name { get; set; }
    }
　　public class Article : ObjectBase<Article>
    {
        public Category category { get; set; }
        [NotNull("请输入标题")]
        public string Title { get; set; }
        [NotNull("请输入作者")]
        public string Author { get; set; }

    }
    public class ArticleSection : ObjectBase<ArticleSection>
    {
        public Article article { get; set; }
        public int SectionNo { get; set; }
        [LongText, NotNull("请输入内容")]
        public string SectionContent { get; set; }
    }
 　　[Table( "Users" )]
    public class User : ObjectBase<User> {

        [NotNull( "必须填写用户名" )]
        public string Name { get; set; }

        [NotNull( "必须填写密码" )]
        public string Pwd { get; set; }
    }


　　wojilu ORM 强调以领域模型为中心，而不是以数据库为中心。所以在上面的整个流程中，您只看到建立领域模型 Category，Article， ArticleSection 及 User 类，却完全没有看到任何数据库的操作。

　　那是不是说 wojilu ORM 不使用数据库？当然不是！wojilu ORM一定会使用数据库，只不过将使用的过程彻底自动处理了：

  1. 当网站首次启动，并有请求到达网站的时候，ORM开始检查数据库；
  2. 如果配置了数据库连接字符串，则判断是哪种类型的数据库：
  • 如果是sqlserver数据库，则登录数据库服务器，根据领域模型的元数据，检查数据表是否存在，如果不存在，则自动建立数据表
  • 如果是access数据库，则检查网站文件夹下面是否存在access数据库文件。如果不存在，则建立access文件。接着检查数据表，流程同上。


——以上检查数据库和数据表的操作只在网站第一次启动的时候执行，所以不会对系统性能造成影响。

实现Controller

1.MainController Index() action（这个是网站的入口，暂时什么也不做，后续的文章补充这里，显示全部文章）。

2.LayoutController Layout() 方法。

　　在实际项目中，往往有多个页面在某些局部方面是相同的。比如每个页面都有一致的导航菜单。
　　wojilu MVC 把这种提供给多个方法共用的页面叫 layout(布局页)，在ASP.NET中，它有个类似的名称，叫 MasterPage(母版页)。如果您有ASP.NET webform的开发经验，应该马上就明白了。
　　layout和控制器中的其他方法一样，也是由一个叫 Layout() 的方法和对应的 layout.html 视图构成。

　　这里我们设置网站的的标题和后台的链接地址，以及列出全部分类：

 

 　　　　public override void Layout()
        {
            set("adminLink", to(new Admin.CategoryController().Index)); // 后台管理首页的链接
            set("adminLinkTitle", "后台管理"); // 后台管理首页的链接
            set("siteTitle", "我读");
            List<Category> recent = Category.findAll();
            IBlock block = getBlock("list");
            foreach (Category c in recent)
            {
                block.Set("c.Title", c.Name);
                block.Set("c.ShowLink", to(new CategoryController().Show, c.Id));
                block.Next();
            }
        }


 　　以上代码，填充的wojilu视图模板的代码，layout.html视图模板的部分代码如下：

View Code 
<div id="userLogin"><a href="#{adminLink}">#{adminLinkTitle}</a></div>
<TABLE WIDTH=950 height=90 align='center' cellpadding='3' cellspacing='0' >
<TR><TD align='center' valign='top'>
</TD></TR></TABLE>

<TABLE WIDTH=900px align='center' cellpadding='0' cellspacing='0'>

<TR><TD>

<DIV class=Header>

<!-- BEGIN list -->
<a href="#{c.ShowLink}" target='_blank'>#{c.Title}</a> |
<!-- END list -->


</DIV>
</TD></TR></TABLE>
        
    #{layout_content}
    
 <TABLE WIDTH=950 align='center'cellpadding="0" cellspacing="0" border="0">  
<TR>
<TD align='left' valign='top'>
</TD>
</TR></TABLE>

<TABLE WIDTH=90% align='center' cellpadding="3" cellspacing="0" border="0">  
<TR ><TD align='center' ><a href="http://www.wojilu.com">Powered by wojilu</a>
</TD></TR></TABLE>

　　其中，<!-- BEGIN list -->和<!-- END list -->夹住的内容是要循环的内容。#{layout_content}是其它内嵌视图内容的占位符。以下的css代码是从易读网站上copy的。这也就是为何我们可以山寨一个网站的原因。

 

View Code 
<STYLE>
body{font-size:14px;LINE-HEIGHT:19px;MARGIN:0px}
#userLogin {float:right;padding:20px; line-height:100%;}
#userLogin a {color:#205AA7;}
TABLE{font-size:14px;LINE-HEIGHT:19px;}

.Header{BACKGROUND:#511F90;Color:#FFF;PADDING:5px;Line-HEIGHT:19px;PADDING-LEFT:14px;font-size:14px;}
.Header A{text-decoration: None;color:#FFF;font-size:14px;}
.Header A:hover{text-decoration: None;color:#f00;font-size:14px;}
.T1 A{text-decoration: None;color:#000; font-size:14px;}
.T1 A:hover{text-decoration: None;color:#f00;font-size:14px;}
.T2 A{text-decoration: None;color:#C50023;font-size:14px;}
.T2 A:hover{text-decoration: None;color:#205AA7;font-size:14px;}
.TA A{text-decoration: None;color:#00f;}
.TA A:hover{text-decoration: None;color:#f00;}
.L1 A{text-decoration: None;color:#00f;margin-right: 10px;font-size:14px;}
.L1 A:hover{text-decoration: None;color:#f00;margin-right: 10px; font-size:14px;}
.Auth A{text-decoration: None;color:#000;margin-right: 10px;font-size:14px;}
.Auth A:hover{text-decoration: underline;color:#00f;margin-right: 10px; font-size:14px;}
.New {border-bottom: #A095C4 1px dashed ;line-height: 30px;font-size:14px;}
.Hot{border-bottom: #F5A89A 1px dashed ;line-height: 30px; font-size:14px;}
.FL{float: right;Line-HEIGHT:19px;padding-bottom: 3px;font-size:14px;}
.Next{line-height: 30px;}
.Next A{text-decoration: None;color:#00f; font-size:14px;}
.Next A:hover{text-decoration: None;color:#f00;font-size:14px;}
.ART{font-size:15px;LINE-HEIGHT:27px;}
.B1{MARGIN:0px;PADDING:0px;LINE-HEIGHT:10px;}
.B2 TABLE A {MARGIN:1px;PADDING:0PX;LINE-HEIGHT:21px;text-align: center;text-decoration: None;}
.copyright{float:right;padding:10px 0px 0px 10px;}
</STYLE>


 　　剩下的代码是关于分类的管理的代码（增删改查），就不一一拷贝到这里了，有兴趣的可以参照附件的源代码（包含后台管理部分）。读者想要看懂本文，需要对wojilu框架有所熟悉，建议对照wojilu框架教程进行阅读。

 

仿站的一般步骤 

 　　观察站点的结构，设计好数据库，采用某种自己熟悉的开发框架进行开发，对asp.net来说，可以选择webform或asp.net mvc，对于初学者来说，推荐wojilu框架，因为里面包含了很多常用的工具类，比如自动分页，后台模板等等，而且提供了一个综合的demo供我们参考。选择了开发框架，设计好数据库之后，接下来就是实现各个网页。对于wojilu这样的mvc框架来说，就是复制待仿网站的网页源代码，提取出循环的部分，设计好网页模板，然后在相应的Controller中，读取数据库，填充网页模板中的变量就好了。

 

源码下载

posted @ 2011-11-08 08:19  xchsp  阅读(1738)  评论(4)  编辑  收藏  举报
友情链接 豆约翰博客备份专家 IT行业观察