Memcached的使用，OA的两种布局方式

OA项目第四天

Memcached简介以及原理

安装就不多说百度就有，我是装在乌班图上的，window的安装需要开启服务。

Memcached 是一个高性能的分布式内存对象缓存系统，用于动态Web应用以减轻数据库负载。它通过在内存中缓存数据和对象来减少读取数据库的次数，从而提高动态、数据库驱动网站的速度。

然后我们可以封装一个MemcacheHelper类

public class MemcacheHelper
{
    private static readonly MemcachedClient mc = null;
    static MemcacheHelper()
    {
        //最好放在配置文件中
        string[] serverlist = { "127.0.0.1:11211", "10.0.0.132:11211" };

        //初始化池
        SockIOPool pool = SockIOPool.GetInstance();
        pool.SetServers(serverlist);

        pool.InitConnections = 3;
        pool.MinConnections = 3;
        pool.MaxConnections = 5;

        pool.SocketConnectTimeout = 1000;
        pool.SocketTimeout = 3000;

        pool.MaintenanceSleep = 30;
        pool.Failover = true;

        pool.Nagle = false;
        pool.Initialize();

        // 获得客户端实例
        mc = new MemcachedClient();
        mc.EnableCompression = false;
    }
    public static bool Set(string key, object value)
    {
        return mc.Set(key, value);
    }
    public static bool Set(string key, object value, DateTime time)
    {
        return mc.Set(key, value, time);
    }
    public static object Get(string key)
    {
        return mc.Get(key);
    }
    public static bool delete(string key)
    {
        if (mc.KeyExists(key))
        {
            mc.Delete(key);
        }
        return false;
    }
}

我们需要将登陆的用户序列化成json对象，保存在memcached中，我们的验证是20分钟过期。这里我们使用Newtonsoft.Json这个第三方的高性能的json插件。因此我们封装好一个SerializeHelper类

public class SerializeHelper
    {
        /// <summary>
        /// 对数据进行序列化
        /// </summary>
        /// <param name="value"></param>
        /// <returns></returns>
        public static string SerializeToString(object value)
        {
           return  JsonConvert.SerializeObject(value);
        }
        /// <summary>
        /// 反序列化操作
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="str"></param>
        /// <returns></returns>
        public static T DeserializeToObject<T>(string str)
        {
            return JsonConvert.DeserializeObject<T>(str);
        }
    }

我们在用户登陆之后保存对象**(LoginController下)**

public class LoginController : Controller
{
	。。。。
	  //验证用户登陆信息
       public ActionResult UserLogin()
       {
           string LoginCode = Request["LoginCode"];
           string LoginPwd = Request["LoginPwd"];
           string vCode = Request["vCode"];
           var user = bll.LoadEntities(u => u.UName == LoginCode && u.UPwd == LoginPwd).FirstOrDefault();
           string sessionStr = string.IsNullOrEmpty(Session["vCode"].ToString())
               ? string.Empty
               : Session["vCode"].ToString();
           Session["vCode"] = null;
           if (user!=null)
           {
               if ( vCode.Equals(sessionStr))
               {
                   //Session["userinfo"] = user;
                   string sessionId = Guid.NewGuid().ToString();
                   Common.MemcacheHelper.Set(sessionId, Common.SerializeHelper.SerializeToString(user)
                       , DateTime.Now.AddMinutes(20));//将登录用户信息序列化后存储到Memcache中。
                   Response.Cookies["sessionId"].Value = sessionId;//将Memcache的key以Cookie的形式返回给浏览器。关闭浏览器cookie将失去
                   return Content("OK:登陆成功");
               }
               else
               {
                   return Content("NO:验证码错误,请重新输入");
               }
           }
           else
           {
               return Content("NO:账号或密码错误,请输入正确后输入新的验证码");
           }
       }
}

OA

办公自动化（Office Automation，简称OA)，我们这个项目的模式是CS，并且我们做的部分是权限管理和工作流程部分。这里用的是传统布局，用的easyui的layout布局以及选项卡tabs，手风琴Accordion

<head>
    <meta name="viewport" content="width=device-width" />
    <title>HomePage</title>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <link href="~/Content/themes/icon.css" rel="stylesheet" />
    <link href="~/Content/themes/default/easyui.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function() {
            blindClickEvent();//给西边的添加点击事件
        });
        function blindClickEvent() {
            $('.detailLink').click(function () {
                var title = $(this).text();
                var url = $(this).attr("url");
                if ($('#tt').tabs('exists', title)) {
                    $('#tt').tabs('select', title);
                    return;
                }
                $('#tt').tabs('add',{
                    title: title,
                    content:ShowContent(url),
                    closable: true
                });
            });
        }

        function ShowContent(url) {
            var str = '<iframe src="' + url + '" width="100%" height="100%" frameborder="0"></iframe>';
            return str;
        }
    </script>
    <style>
        .txt {
            font-size: 20px;
            font-weight: bold;
            color: blue;
            margin-top: 10px;
            margin-left: 100px;
            float: left;
        }
    </style>
</head>
<body class="easyui-layout">

    <div data-options="region:'north'" style="height: 85px; background: #B3DFDA; padding: 10px; overflow: hidden; background-image: url('/Content/Images/bg3.png')">
        <span class="txt">OA办公系统</span>
    </div>
@*<div data-options="region:'south',split:true" style="height: 50px;"></div>*@
<div data-options="region:'west',split:true" title="West" style="width: 150px;">
    <div class="easyui-accordion" style="width:auto;height:auto;">
        <div title="用户管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
            <a href="javascript:void(0)" class="detailLink" url="/UserInfo/Index">用户管理</a>
        </div>
        <div title="角色管理" data-options="iconCls:'icon-help'" style="padding:10px;">
            <a href="javascript:void(0)" class="detailLink" url="/RoleInfo/Index">角色管理</a>
        </div>
    </div>
</div>
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
        <div class="easyui-tabs" style="width:700px;height:250px" fit="true" id="tt">
            <div title="用户管理" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
                <iframe src="/UserInfo/Index" width="100%" height="100%" frameborder="0"></iframe>
            </div>
        </div>
    </div>


</body>

另一种是现在用的比较多的WebQQ布局，参考

http://www.ligerui.com/demos/dialog/win7.htm