利用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一定会使用数据库,只不过将使用的过程彻底自动处理了:
- 当网站首次启动,并有请求到达网站的时候,ORM开始检查数据库;
- 如果配置了数据库连接字符串,则判断是哪种类型的数据库:
- 如果是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视图模板的部分代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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的。这也就是为何我们可以山寨一个网站的原因。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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中,读取数据库,填充网页模板中的变量就好了。