DotNet版的ExtJS单用户Blog系统源码解析

Posted 大峡

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DotNet版的ExtJS单用户Blog系统源码解析相关的知识，希望对你有一定的参考价值。

在讲解源码之前，这里先简单说说系统运行的几个事项。虽然下载的压缩包中已经包含了简单的说明，但有一个重点没有强调，也就是虽然这个系统会在启动的时候自动创建数据库表结构，但他是不能自动创建数据库的，因此在启动之前需要自己手动创建数据库，比如VifirBlog。
数据库的配置是在Web.config文件中，在启动应用程序时，需要修改Web.config文件中的数据库配置，把用户名及密码根据你的情况进行修改，数据库的配置内容如下：
 
< databaseSettings >
     < add  key ="db.datasource"  value ="(local);Integrated Security=true" />
     < add  key ="db.user"  value ="sa" />
     < add  key ="db.password"  value ="sa" />
     < add  key ="db.database"  value ="vifirblog" />
     < add  key ="db.generateDdl"  value ="true" />
  </ databaseSettings >
  < appSettings >
db.datasource表示数据源，默认是SQL Server的，当然你可以选择使用mysql、Oracle等各种数据源，其中db.user表示用户名，db.password表示密码，db.database表示数据库名，db.generateDdl表示是否让程序启动的时候自动生成表系统所需要的表结构。db.generateDdl默认为true，第一次运行成功后会自动建表结构，然后请手动修改成false这样下次再启动就不会再建表结构了。
压缩后的文件结构是一个VS项目文件，如下图所示：
 
 如果你机器上安装了VS2005(SP1)以上的版本，那么理论上应该可以直接双击Vifir.Web.sln这个文件来实现在VS中打开项目（如果装的VS版本打不开的话，那么你就得好好想办法了，因为本人不是搞.Net的，所以不太清楚为什么，也许其中原因你们比我都专业），如下图所示：
项目打开后，大家可以直接打开Web.config文件，重点看看databaseSettings一节的配置，确认没问题后，可以直接点击上面的运行按钮来运行项目。
 
启动后即可进行Blog后台管理页面的登录页面，演示系统的用户名及密码均为admin，直接输入后按登录即可进入系统。如下图所示：
 
 进入后可以先进入日志目录管理，程序主区域会出现一个还算漂亮的可编辑表格，可以点击上面的按钮添加日志分类等，并在右边的表格中直接编辑各表格荐的内容。如下图所示：
 
到这里，这个.Net版的程序就算成功跑起来了。至于系统其它的功能，你就得慢慢体验了，其实也就是三四天做出来的一个小东西，大家可以简单看看即可，用Ext做的更多实用功能（像在线聊天、在线课堂等），可以直接到 http://www.vifir.com/my.html中进行实地体验。下面我们重点对本项目的代码作简单的解析。
 
由于这里主要演示的是ExtJS与.Net结合应用，因此一个核心就是ExtJS部分，打开manage/Default.aspx中的源代码，可以得到如下的内容：
<% @ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Vifir.Web.manage.Default"  %>
<? xml version="1.0" encoding="UTF-8" ?>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="content-type"  content ="text/html; charset=UTF-8"   />
< link  rel ="stylesheet"  type ="text/css"  href ="../plugins/extjs/ext-2.0/resources/css/ext-all.css"   />

< style  type ="text/css" >
a{ text-decoration:none; color:#000033 }
.link{
font-weight:bold;
padding:6px 0 0 -2px;
line-height:25px;
}
 </ style >
< title > Blog后台管理 </ title >
</ head >
< body  style ="font-size:12px" >
   < div  id ="loading-mask"  style ="" ></ div >
   < div  id ="loading" >
     < div  style ="text-align:center;padding-top:25%" >< img  src ="../images/extanim32.gif"  width ="32"  height ="32"  style ="margin-right:8px;"  align ="absmiddle" /> Loading...... </ div >
   </ div >
< script  type ="text/javascript"  src ="../plugins/extjs/ext-2.0/adapter/ext/ext-base.js" ></ script >
< script  type ="text/javascript"  src ="../plugins/extjs/ext-2.0/ext-all.js" ></ script >
< script  type ="text/javascript"  src ="manage.js" ></ script >
< script  type ="text/javascript"  src ="core.js" ></ script >
< script  type ="text/javascript"  src ="topic.js" ></ script >
< script  type ="text/javascript"  src ="album.js" ></ script >
</ body >
</ html >
其对应的 Default.aspx.cs 文件内容如下：
namespace  Vifir.Web.manage
 {
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!UserContext.isAdmin())//如果没有登录
            {
                Response.Redirect("login.html");//跳转到登录页面
            }
        }
    }
}
 
在manage/Default.aspx中，我们没有引入任何特殊的服务器端控件，基本上就是普通的html，注意包含了很多的js文件。其中../plugins/extjs/ext-2.0/adapter/ext/ext-base.js及../plugins/extjs/ext-2.0/ext-all.js是Ext的库文，而manage.js、core.js、topic.js、album.js等是我们本系统中编写的ExtJS应用文件，那些艳丽的界面都是直接在这些js文件中调用ExtJS的组件生成的。对于不熟悉Ext的朋友们来说，我推荐直接通过 《ExtJS实用开发指南》来进行一个系统的学习、并且可以把《指南》作为日常的参考书籍。而对于熟悉Ext并且希望进一步提升的朋友们来说，我建议你直接看 《Wlr单用户Blog系统源码详细开发文档》，该文档中包含了对我们这里用到的manage.js、core.js、topic.js、album.js等文件作了较为详尽的讲解及分析。
 
由于这里是一个基于DotNet平台的应用，因此我们重点来看看后台管理部分。后台管理的程序在manage目录中，包含Album.aspx、AlbumCategory.aspx、Topic.aspx、TopicCategory.aspx、Blog.aspx、Link.aspx、User.aspx、Comment.aspx等等。经常搞Asp.Net开发的朋友一定会迫不急待的点开这些扩展名为.aspx的文件想看过究竟，看看这些文件是如何与客户端交付、使用了哪些控件、如何产生JSON、如何访问数据库、SQL语句如何写等。但我想点开后你一定会有所失望了，因为点开这些文件后你会发现里面几乎什么东西都没有。比如Topic.aspx文件中只包含下面一句大家平时瞟都不会瞟一眼的代码：
<% @ Page Language="C#" AutoEventWireup="true" CodeFile="Topic.aspx.cs" Inherits="manage_Topic" %>
 
当然，你一定猜到我们一定把处理这些内容的东西都放下面的Topic.aspx.cs文件中了，恭喜你，完全正确！我们重点应该是看aspx下面的C#类文件，比如Topic.aspx.cs，如下图所示：
 
       由于每一个模块要实现的功能本来就是相似的，使得这些代码都是模板化的，所以你打开其它的Link.aspx.cs、User.aspx.cs、TopicCategory.aspx.cs都会看到类似的内容，只要搞懂一个，其它的举一反三自然就都懂了。而且在实际开发中，这些代码还真不需要用手来写（那么用什么呢？当然是用机器人了，简单写一个代码生成工具，替换一下名称就给你搞定了！）。因此，下面我们来重点看看Topic.aspx.cs的源代码，其全部内容如下：
using  System;
 using  System.Data;
 using  System.Configuration;
 using  System.Collections;
 using  System.Web;
 using  System.Web.Security;
 using  System.Web.UI;
 using  System.Web.UI.WebControls;
 using  System.Web.UI.WebControls.WebParts;
 using  System.Web.UI.HtmlControls;
 using  Vifir.Model.Service;
 using  Vifir.Core;
 using  Vifir.Model.Domain;
 using  Vifir.Web.Code;
 public   partial   class  manage_Topic : BaseAction
 {
    private ITopicService service;   
    private ITopicCategoryService categoryService;
 
    public ITopicService Service
    {
        set { service = value; }
    }
    public ITopicCategoryService CategoryService
    {  
        set { categoryService = value; }
    }

    public void List()
    {
        QueryObject qo = new QueryObject();
        ToPo(qo);
        string categoryId = Request.Params["categoryId"];
        if (categoryId != null && !"".Equals(categoryId))
        {
            qo.addQuery("obj.Category.id", long.Parse(categoryId), "=");
        }
        IPageList pageList = service.getTopicBy(qo);
        jsonResult = pageList;
    }

    public void Remove()
    {
        long id = long.Parse(Request.Params["id"]);
        service.delTopic(id);
        jsonResult = true;
    }

    public void Save()
    {
       Topic obj = new Topic();
       ToPo(obj);
       string CategoryId = Request.Params["CategoryId"];
       if (CategoryId != null && !"".Equals(CategoryId))
       {
         TopicCategory c = this.categoryService.getTopicCategory(long.Parse(CategoryId));
         obj.Category = c;
       }
       if (!HasError())
       service.addTopic(obj);
       extFormResult = true;
    }

    public void Update()
    {
        long id = long.Parse(Request.Params["id"]);
        Topic obj = service.getTopic(id);
        ToPo(obj);
        string CategoryId = Request.Params["CategoryId"];
        if (CategoryId != null && !"".Equals(CategoryId))
        {
            TopicCategory c = this.categoryService.getTopicCategory(long.Parse(CategoryId));
            obj.Category = c;
        }
        if (!HasError())
            service.updateTopic(id, obj);
        extFormResult = true;
    }
}
 
Topic.aspx用来实现日志的添加、修改、删除、分页查询、排序等一系列的功能，我们可以理解为日志管理模块。
       前面的一大堆using我想不用多说，你应该知道就是引入需要用到的包package(或命名空间)，其中的System.XX的我想你是见多了，不会有什么疑问，而Vifir.XX是本系统的域模型、业务逻辑层接口等，另外还包含Vifir的核心类库，你直接像System.XX里面的东西一样在该用的时候使用是了。（备注：Vifir.Model是本系统的后台业务逻辑，如果你是Vifir的VIP用户，则应该还能够直接下载他的源代码，我也会在后面的文章中对Vifir.Model中的源码进行具体的分析，Vifir.Core是Vifir提供的一个简单Ajax、Ext支持及企业应用快速开发的开发库，不是开源项目，但可以免费使用，所以想看他源代码的就只有加入到Vifir团队中才有可能了。当然，看不到也没关系，想想我们虽然没看到System.XX里面的一句代码，还不是照样屁颠屁颠地用着！）。
      
下面我们来看看类的声明，代码如下：