Skip to content
Luv Letter edited this page Jun 1, 2019 · 2 revisions

后台使用经典的非MVC的ASP.net框架,使用C#书写。

前端使用了Bootstrap 3的框架,辅以各种插件完成。

后台

文件列表

  • 根目录下页面的Codefile(.aspx.cs)
  • App_code的类(.cs)
  • Ajax目录下的处理程序(.ashx)

Page Codefile

为了保证平台的迁移性,并未用到任何的asp.net控件,前端交互均使用ajax完成。同样的,不希望在根目录下页面的Codefile内写入太多动态内容。

using System;
public partial class Calendar : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!SAAO.User.IsLogin)
            Response.Redirect("login");
    }
}

以该页为例,仅在Page_Load函数内加入了是否登录的判断以及相关跳转。对未使用页面自动生成的名称空间的使用进行了删除。

App_code

App_code下的类几乎一一对应地实现的各种功能的对象化,体现了面向对象的编程的特色。其目的是减少代码的复制,增加代码重用的机会,使后期开发变得轻松,使网站程序条理更清晰。

为避免类名重复的问题,所有类都在SAAO名称空间下,在网站使用到SAAO下的类的时候,应避免using SAAO;句,而在类名前加上SAAO名称空间限定。 Utility类本身并不是对象,而是用于放置静态(static)的网站需要使用的公用的成员,如错误记录,数据库连接字符串(调用Web.config中的键值)、BASE64的加密与解密。

SqlIntegrate类则是一个较为完善的数据库交互类,该类后续有说明。

Event(日历事件)、File(文件)、Mail(邮件)三者是针对功能中的对象设计出来的类。因为日历功能并不完善,Event类并不完善;文件基本完成;邮件已经完成。

User类是用户的类,提供的各种接口后续有说明。User类集成了Session操作,在程序其他位置的Session操作请通过User类来实现。

Organization类是根据学活特色设计的类,但是尚未完成。其生命周期较长,ASP.net的程序(即IIS启动)就会将一个根据时间产生实例存入内存中,未来使用时,可根据其提供的接口访问实例。此外,还有一个State的结构写在该文件中,用于确定学活的状态(游园会、十大、交接等)。

Ajax

Ajax下是各页面前端与服务器交互的处理程序。Ajax的交互完全使用JSON进行(响应头均设置为application/json),对于列出所有用户之类的JSON的代码已并入User.cs内,其他的也均如此。

<%@ WebHandler Language="C#" Class="calendarHandler" %>

using System;
using System.Web;
using System.Web.SessionState;

public class calendarHandler : IHttpHandler, IRequiresSessionState
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json";
        if (context.Request["action"] != null && SAAO.User.IsLogin)
        {
            switch (context.Request["action"].ToString())
            {
                case "get":
                    try
                    {
                        context.Response.Write("{\"flag\":0,\"data\":" + SAAO.Event.ListJSON() + "}");
                    }
                    catch (Exception ex)
                    {
                        context.Response.Write("{\"flag\":3}");
                        SAAO.Utility.Log(ex);
                    }
                    break;
            }
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

因为类并不继承页面的接口,所以若需在ajax使用Session请务必添加System.Web.SessionState.IRequiresSessionState接口的继承。由于习惯性书写,此处使用了using句。

所有的处理程序都带有action的参数,在判断参数是否为null的时候验证用户的登录状态。在action参数的switch中,若无法避免同名变量的声明,则将所有case中的内容(冒号至分号)用花括号括住使其作用域限定在括号内即内联化。

对于try…catch…的使用,请对Exception加以分析,在类中应避免使用try…catch…句,而是使用throw Exception的方式将错误抛出,交到最后的handler的try…catch…去分析错误。切忌盲目使用来逃避问题。(在涉及到文件IO时推荐使用,可能有未预料的情况) 代码中直接调用Event中的列出函数输出JSON。加上统一的flag返回提示,将列出的JSON嵌入data中。Flag的规定如下(英文为前端提示插件对应的消息级别):

  • 0 成功 success
  • 1 信息 info
  • 2 错误 error
  • 3 致命错误 error

例:"{"flag":0,"data":" + data + "}"。使用标准的文本型的JSON,字段名用双引号括起。对于程序生成的JSON(未来可能引入JSON.NET)不必保留空格。

  • user: password, logout, login
  • mail: list.folder, info.id, attachment.id.index, display.id, delete.id, send
  • file: upload, list, info.id, update.id, download.id, delete.id
  • dashboard: list
  • contact: list
  • calendar: list

MISC

根据环境需要变更的常量均已写入Web.config中,部署时根据实际情况修改。目录注意要补上最后一个斜杠。

地址改写,该项技术实现了伪静态页,但也可能会带来缓存刷新的问题,故不改写成.html。需要安装IIS URL Rewrite Module,其配置文件在Web.config中,需使用正则表达式来匹配。目前有如下规则

aspx → ①
Ajax/①.ashx?action=② →①.②
Ajax/①.ashx?action=②&③ →①.②.③

在Global.asax将当前的Organization实例写入Application的org字段中,调用方法在Organization类中。

Bin目录下的动态链接库(dll)中的Interop.ADODB以及Interop.CDO.dll是邮件eml处理的依赖项;SevenZipSharp是建议使用的7z压缩(文件压缩依赖)。

数据库

新版SAAO为了优化数据存储,需要进行数据库设计升级(同时需要手动修改或导入较多的数据)。本次升级将放弃旧版本SAAO的兼容性。

Calendar

日程表

列名 数据类型 备注
ID int IDENTITY
GUID varchar(50) default:newid()
title nvarchar(500) 事件内容
color varchar(50) fullcalendar事件背景颜色
sdate date 开始日期
edate date 结束日期
列名 数据类型 备注
ID int IDENTITY
title nvarchar(50) 限制长度避免显示不正常
start date 与fullcalendar JSON使用字段保持相同
[end] date
[group] tinyint 组的ID(数字)

“[]”标记的为保留字;若显示中文nvarchar长度将是varchar的两倍varchar(50)能容纳25个汉字,而nvarchar(50)能容纳50个汉字,但考虑到数据库兼容性,建议使用varchar。因为SQLIntegrate类设计时并未充分考虑到这个问题,现已解决,在字段完全是中文的情况下使用nvarchar,不使用ntext。

Discuss

未使用

File

文件表

列名 数据类型 备注
ID int IDENTITY
GUID varchar(50) default:newid()
version int 记录版本
versionum int 文件版本合计
filename nvarchar(260) 文件名
filetype varchar(10) 文件拓展名
uploadtime datetime 上传时间
filesize varchar(25) 文件大小(自适应后的字符串)
uploader varchar(50) 上传者UUID
uploadgroup nvarchar(10) 上传组名称
downloadtime int 下载次数
fileinfo varchar(MAX) 描述
described int 是否描述(1/0)
filesession varchar(5) 文件权限

文件部分的多文件设计在新版本中被移除。

列名 数据类型 备注
ID int IDENTITY
GUID varchar(36) default:newid()
name nvarchar(50) 文件名
extension varchar(10) 文件拓展名
uploadTime datetime 上传时间(T大写)
size bigint 文件大小(字节)
uploader varchar(36) 上传者UUID
downloadCount int default:0下载次数
info text 描述
permission tinyint 全部0, 本组1, 仅高二2,仅高层3, 高层(工作序号)定义在Organization.IMPT_MEMBER

Filetag

文件标签表

列名 数据类型 备注
ID int IDENTITY
GUID varchar(50) default:newid()
fileid varchar(50) 文件GUID
tagid varchar(50) 未明
tagname varchar(500) 标签名(BASE64 ENCODED)
列名 数据类型 备注
ID int IDENTITY
name nvarchar(20) 标签名
FUID varchar(36) 文件GUID

Log

错误记录表

列名 数据类型 备注
ID int IDENTITY
context ntext
IP varchar(50)
broswer ntext 是的,这单词之前都拼错了
OS varchar(50)
session varchar(50)
datetime datetime

IPv6有39位长呢(虽然根本遇不到)

列名 数据类型 备注
ID int IDENTITY
context text
IP varchar(50)
browser varchar(100)
OS varchar(50)
session varchar(50)
datetime datetime

Org_structure(更名作Org)

架构表

列名 数据类型 备注
ID int IDENTITY
GUID varchar(50) default:newid()
year varchar(10)
type char(5)
code int
name nvarchar(30)

type有两值C、D:C表示职务,D表示组;对于职务的code上一届架构分为:秘书长、非技术副秘书长、技术副秘书长兼总监、总监、干事、组长、组员;year列在Struct SAAO.State中有说明,大概是高二届数(学号前4位)+当前活动(0-游园会,1-十大),均以每年二月十五日和八月一日零点为界。

列名 数据类型 备注
ID int IDENTITY
year varchar(10)
name nvarchar(50)
job tinyint
[group] tinyint
color varchar(7) 允许#FFFFFF或#FFF
mail varchar(50) 组邮箱,例:[email protected]

将code拆开,分别放在group和job中,group有color(用于日历中的颜色)和mail(邮件系统的组邮箱)手动添加

User

用户表

列名 数据类型 备注
ID int IDENTITY
UUID varchar(50) default:newid()
username varchar(50)
password varchar(300)
SN varchar(20) 学号
realname nvarchar(10)
class int
isin int 1表示user is in SAA
mail varchar(50)
phone varchar(20)
initial int 姓氏首字母的序号从1计起
groups varchar(5) 如D1
job varchar(5) 如C6
api_session varchar(50) 用于客户端联动(已弃用)
列名 数据类型 备注
ID int IDENTITY
UUID varchar(36) default:newid()
username varchar(50)
password varchar(70)
SN varchar(10)
realname nvarchar(10)
class tinyint
activated tinyint default:0从isin更名
mail varchar(50)
phone varchar(11)
initial tinyint
group tinyint 只保留数字
job tinyint 只保留数字

前端

HTML

HTML遵照HTML5规范(无结束标签时,不写作<img src=”#” />,即斜杠省略)

Head

ASP.net需要一个runat=”server”的头来实现某些预加载脚本,在本项目中可省略。

Meta标签目前有:

charset utf-8
http-equiv X-UA-Compatible content="IE=edge
viewport width=device-width, initial-scale=1.0, user-scalable=no
description SAAO,学活在线协作平台,是由学活自主开发的工作协作平台。
keywords 学生活动中心,深圳中学,在线协作平台,SAAO

所有代码文件均用utf-8编码;第二项是针对IE的兼容性(Bootstrap建议添加);第三项是响应式设计的宽度定义,并禁用用户缩放;第四和第五项为搜索引擎的SEO优化。

Title目前暂时只写作SAAO。

引入一个css文件,在basic.css内再import其他css(需考虑其引入顺序和优先级的问题)。

设置网站的图标,建议设计成16*16的ico。

最后加上IE9的兼容性调整。

Body

Body加上各页页名的id。

    <div id="menu">
        <div id="logo">
        <img src="image/logo.png" alt="SAAO">
        </div>
        <ul>
    		菜单部分略
        </ul>
    </div>
    <div id="workspace">
        <nav id="topbar" class="navbar navbar-default" role="navigation">
    		顶栏内容略
        </nav>
        <div id="content">
            <div id="cal"></div>
        </div>
    </div>

结构如下:

Menu

Logo

 

 

 

 

 

Workspace

Topbar

content

若页面使用到了FAB(Floating Action Button暂时试用),则置于Workspace结束后。FAB弃用,将其功能转移到Topbar

此外所有页面带有的模拟框均放在body标签结束之前。

该页面使用的插件按顺序置于模拟框后。

CSS

在开发中,建议将各页面的用于调整的CSS拆分到逐个CSS文件中,在basic用import来引用。在产品中建议将所有的css整合为一个basic并压缩。

目前,在basic中除了import了bootstrap以及各页的css外,主要有:

  • 整体调整(上方图例的布局)
  • 整体的响应式设计
  • FAB
  • Tag(文件中的标签)

各部分已用注释分割。

各页面的色彩定义在各页面的CSS中(依赖body的id),且均具有body的id的限定,可避免合并时的冲突。

由于Login页并不引入basic,故有单独的Login。不推荐在Login页添加背景变色动画。

JS

开发结构与CSS完全相同。同时希望各页面的JS中函数名称命名时将页名放在前面,方便整合。

为了阅读方便,建议将所有字符串的引号统一为单引号或者双引号。

不建议使用阻塞主线程的同步的ajax请求。

若函数仅在某单一作用域内使用,建议将函数内联化。

插件

公用插件 jQuery
Bootstrap CSS提前引入
Pnotify 消息提示插件
日历 Moment Fullcalendar依赖
Fullcalendar
联系人 Mixitup 筛选、排序
仪表盘 N/A
文件 Dropzone 拖拽上传
Base64 Base64加解密(建议并入Basic)
Tagging 标签(CSS并入Basic)
登录 N/A
邮件 Tinymce 富文本编辑器
Base64 Base64加解密
通知 N/A

建议使用BOOTCSS提供的CDB服务(www.bootcdn.cn),以上插件若在CDN存在,则优先使用CDN。

但以下插件需另行处理(置于plugin文件夹内)

字体

Bootstrap的图标字体有cdn加速,FAB的Material Icon使用了本地源。如果要使用字体,请务必注意带宽问题以及文件加载大小。同时,本地源的woff2字体需单独添加MIME映射。

图片

请务必注意带宽问题以及文件加载大小,必要时使用CDN。