Cvv.WebUtility框架是在我学习了promesh.net框架后,根据项目开发的需要,去除一些不必要的特性,添加一些必要的特性,并且运用编译原理的知识重新实现了自己的模板解析算法,再结合.net2.0的等性加入了模板缓存,采用了PetShop的数据分层方式.
以下是项目结构图:
IDAL: 接口层
Model: 实体层
SQLiteDAL 和 SQLServerDAL: 数据层
Web: Web项目层
App_Data
Permission.config 权限配置文件
Languages 语言配置
Themes 风格根目录
Default 风格目录
Images 图片目录
Layouts 相当于Asp.net里的母板页目录
Skins 皮肤文件
Utility 主要用来存放JS文件
WebApp项目 主要存放控制类
BasePageControllers 页面控制基类，可以在这里做一些对PageController基础类的扩展，主要是在这里实现Session
BLL 业务逻辑层
Components 不知道应该放哪里的代码就放在这里来写
DALFactory DAL工厂
DataProxy 代理层
PageControllers 这里实现页面对应的控制类
RABC 实现访问控制的代码
Application 程序初始化的时候加载这个类并且执行其静态方法Init();
下面来说明一下URL与PageController还有Skin的对应关系.例如我们访问一个网址:http://localhost/ssky/Index.aspx,ssky为应用程序所在的目录,index.aspx为我们访问的路径,那它对应的控制类为:Ssky.WebApp.PageControllers根名空间下的Index类,Ssky.WebApp为WebApp的要命名空间,所有的控制类都放在Ssky.WebApp.PageControllers命名空间下,对应的skin文件为:skins/index.html,默认的母板文件为:Layouts/master.html.
下面我们以一个例子说明怎么实现一个注册功能:
1.添加注册skin文件register.html
<
div
class
="nav"
>
注册步骤：
<
strong
>
1. 填写信息
</
strong
>
>
2. 收电子邮件
>
3. 注册成功
</
div
>
<
div
class
="content"
>
<%
=
msg
%>
<
form
method
="post"
action
="<%= _SELF_ %>/save"
onsubmit
="return ckeckForm(this);"
>
<
h5
>
基本信息
</
h5
>
<
ul
class
="box"
>
<
li
class
="col0"
>
邀请码:
</
li
>
<
li
class
="col1"
><
input
type
="text"
name
="invitationCode"
class
="input"
/></
li
>
<
li
class
="col2"
>
邀请码为您注册的必要通行证[
<
a
href
=""
>
怎么取得邀请码
</
a
>
]
</
li
>
<
li
class
="col0"
>
帐号:
</
li
>
<
li
class
="col1"
><
input
type
="text"
name
="userName"
class
="input"
/></
li
>
<
li
class
="col2"
>
只能是数字、字母和下划线的组合，首字符不可以为数字（3至18个字符）
</
li
>
<
li
class
="col0"
>
昵称:
</
li
>
<
li
class
="col1"
><
input
type
="text"
name
="nickName"
class
="input"
/></
li
>
<
li
class
="col2"
>
可以为中英文、数字和下划线的组合（1至18个字符）
</
li
>
<
li
class
="col0"
>
密码:
</
li
>
<
li
class
="col1"
><
input
type
="password"
name
="password"
class
="input"
/></
li
>
<
li
class
="col2"
>
6至18个任意字符，建议采用字符、数字、特殊符号的混和密码
</
li
>
<
li
class
="col0"
>
确认密码:
</
li
>
<
li
class
="col1"
><
input
type
="password"
name
="rePassword"
class
="input"
/></
li
>
<
li
class
="col2"
>
必须和密码相同的字符组合
</
li
>
<
li
class
="col0"
>
邮箱:
</
li
>
<
li
class
="col1"
><
input
type
="text"
name
="email"
class
="input"
/></
li
>
<
li
class
="col2"
></
li
>
<
li
class
="col0"
></
li
>
<
li
class
="col1"
><
input
type
="submit"
value
=" 注册 "
/></
li
>
<
li
class
="col2"
></
li
>
</
ul
>
<
input
type
="Hidden"
name
="hash"
/>
</
form
>
</
div
>
<
script
type
="text/javascript"
language
="javascript"
src
="<%= _ROOT_PATH_ %>/Utility/sha256.pack.js"
></
script
>
<
script
type
="text/javascript"
language
="javascript"
>
function ckeckForm(o){
var invitationCode = $('input[name=invitationCode]'); var userName = $('input[name=userName]'); var nickName = $('input[name=nickName]'); var password = $('input[name=password]'); var rePassword = $('input[name=rePassword]'); var email = $('input[name=email]'); var hash = $('input[name=hash]'); hash.val(sha256Encode(password.val())); password.val(''); rePassword.val(''); return true;
}
</
script
>
2.添加控制类
using
System;
using
System.Collections.Generic;
using
System.Text;
using
Cvv.WebUtility;
namespace
Ssky.WebApp.PageControllers
{ public class Register : BasePageController { public void Run() {
} public void Save(string invitationCode, string userName, string nickName, string password, string hash, string email) { int r = DataProxy.UsersDataProxy.CreateUser(userName, Cryptography.Sha256Encode(hash), email, 2); if (r > 0) { } else { ViewData["msg"] = r; } } }}
3. 添加CSS代码(根据需要添加)
body
{}
{color:#333; background-color: #fff;}
*
{}
{margin:0;padding:0; font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;}
ul
{}
{list-style:none;}
a
{}
{text-decoration: underline; color: #333;}
a:hover
{}
{text-decoration: none; color: #fe6700;}
.input
{}
{border-right: #ccc 1px solid; padding-right: 0px; border-top: #ccc 1px solid; padding-left: 4px; background: url(input_bg.gif) no-repeat; padding-bottom: 0px; border-left: #ccc 1px solid; width: 180px; line-height: 20px; padding-top: 0px; border-bottom: #ccc 1px solid; height: 20px;}
h5
{}
{font-size:12px; background: url(h5bg.gif) no-repeat; width: 950px; height: 40px; margin: 10px 0px 15px; padding: 5px 0px 0px 20px; color: #fff; clear: both;}
div
{}
{max-width: 970px; margin: 0px auto;}
div.header
{}
{height: 60px;}
div.header .logo
{}
{width: 197px; height: 50px; background: url(top-logo.png) no-repeat; float: left;}
div.menu
{}
{height: 33px;background: url(imgcomm.gif) repeat-x 0px -49px;}
div.menu ul li
{}
{padding-right: 5px;padding-left: 5px;float: left;padding-bottom: 0px;width: 68px;line-height: 19px;padding-top: 4px;height: 19px;text-align: center}
div.menu ul li a
{}
{text-decoration: none; color: #fff; font: bold 14px/160% "Arial";}
div.menu ul li a:hover
{}
{text-decoration: underline;}
div.menu ul li.up
{}
{color: #fff; font: bold 14px/160% "Arial";}
div.menu ul li.up
{}
{padding-right: 5px; padding-left: 5px; background: url(imgcomm.gif) no-repeat 5px -214px; padding-bottom: 0px; width: 68px; padding-top: 4px; height: 23px; text-align: center}
div.content
{}
{}
div.nav
{}
{text-align: center;}
div.footer
{}
{height: 72px; border: solid #aedef2; border-width: 1px 0px 0px 0px; clear: both;}
div.footer p
{}
{margin: 6px 0px; text-align: center;}
div.clear
{}
{height: 3px; clear: both;}
ul.box
{}
{width: 808px; margin: 0px auto;}
ul.box li
{}
{float: left; height: 22px; padding: 3px;}
ul.box .col0
{}
{width:60px; text-align: right;}
ul.box .col1
{}
{width: 210px;}
ul.box .col2
{}
{width: 500px; float: right;}
ul.table
{}
{width: 100%;margin:22px auto; border-top: 1px solid #ccc; clear: both;}
ul.table li
{}
{margin: 0px; padding: 6px; border: solid #ccc; border-width: 0px 1px 1px 1px; min-height: 16px; clear: both;}
ul.table li a
{}
{color:#0071BC;}
ul.table .title
{}
{font-weight:bold; background-color: #f7f7f7;}
ul.table div
{}
{float:left; clear: none;}
ul.table li select
{}
{width: 120px; margin: 0px;}
ul.table li input
{}
{width: 32px; margin: 0px; border: 1px solid #111;}
ul.table .left
{}
{float: left;}
ul.table .right
{}
{float: right;}
div.content .left
{}
{width: 248px; float: left; clear: left; background-color: Red;}
div.content .right
{}
{width: 722px; float: right; clear: right; background-color: green;}
ul.leftmenu
{}
{width: 240px; margin: 4px;}
ul.leftmenu li
{}
{height: 22px; padding: 3px; text-align: center; background: #eee;}
实现的效果为:
比较晚了,明天再接着写,希望在短期内能把自己做的这个东西介绍清楚.
130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
