开发笔记 第631页

继前两篇文章

google reader api：http://www.cnblogs.com/mybear/archive/2011/02/18/1957704.html

GoogleReader用户登陆验证原理：http://www.cnblogs.com/mybear/archive/2011/02/18/1957769.html

相信大家对GoogleReader api已经有所认识，下面就讲下GoogleReader用户登陆验证C#具体实现

1.创建HttpWebRequest

private HttpWebRequest CreateRequest(string url)
        {
            HttpWebRequest webRequest = WebRequest.Create(url) as HttpWebRequest;
            IWebProxy defaultParoxy = HttpWebRequest.GetSystemWebProxy();
            webRequest.Proxy = defaultParoxy;
            webRequest.UserAgent = "GoogleReader for Windows/"+Assembly.GetExecutingAssembly().GetName().Version;
            webRequest.CookieContainer = _CookieContainer;
            webRequest.ServicePoint.Expect100Continue = false;
            webRequest.Timeout = 20000;

            if (_isLoginIn)
                webRequest.Headers.Add("Authorization", "GoogleLogin auth=" + _LoginAuth[2].Split('=')[1]);
            return webRequest;
        }

2.使用HttpPost传递登陆参数

private string PostGoogleLogin(HttpWebRequest webRequest,string queryString)
        {
            string ResponseString = string.Empty;
            webRequest.ContentType = "application/x-www-form-urlencoded";
            webRequest.Method = "POST";

            byte[] QueryData = Encoding.UTF8.GetBytes(queryString);
            webRequest.ContentLength = QueryData.Length;
            try
            {
                using (Stream stream = webRequest.GetRequestStream())
                {
                    stream.Write(QueryData, 0, QueryData.Length);
                    stream.Close();
                    ResponseString = GetResponseString(webRequest);
                }
            }
            catch (Exception ex)
            {
                LoginError += ex.ToString() + "\r\n";
            }
            return ResponseString;
        }

3.传递用户名和密码实现登陆

  public void GoogleLogin(string email,string password)
        {
            string SID_ID = string.Empty;
            string responseData = string.Empty;
            List<Parameter> queryParams = new List<Parameter>();
            queryParams.Add(new Parameter("service", "reader"));
            queryParams.Add(new Parameter("Email", Uri.EscapeDataString(email)));
            queryParams.Add(new Parameter("Passwd", Uri.EscapeDataString(password)));
            queryParams.Add(new Parameter("source", "Mobile Newspaper/0.1"));
            queryParams.Add(new Parameter("continue", "http://www.google.com"));
            
            HttpWebRequest webRequest=CreateRequest("https://www.google.com/accounts/ClientLogin");

            responseData = PostGoogleLogin(webRequest, HttpUtil.GetQueryParamters(queryParams));
            string pattern="SID=(.*)";
            Regex reg = new Regex(pattern, RegexOptions.IgnoreCase);
            if (reg.IsMatch(responseData))
            {
                _isLoginIn = true;
                _LoginAuth = responseData.Split('\n');
                SID_ID = reg.Match(responseData).Groups[1].Value;
                _CookieContainer.Add(new Cookie("SID",SID_ID,"/",".google.com"));
            }
        }

至此，google用户登陆验证完成了!我们可以根据googlereader提供的API打造一个属于自己的客户端RSS订阅器！

比如，我们要获得已阅读的20篇文章：可以用httpget的方法访问：http://www.google.com/reader/atom/user/[user ID]/state/com.google/read

[user ID]可以使用“-”来代表当前登陆的用户,返回的记录是XML数据格式：

用js实现了表格数据管理的以下几个功能：

• • 点击添加按钮可以添加一个空的可以修改的记录。
  • 点击表格单元格可以修改文本。
  • 修改后实现了保存的接口。
  • 如果添加了新的记录而未做任何修改值都为null，保存全部时将被忽略。
  • 保存全部时只保存修改过的值，原有的数据不再重复保存。
  • 刷新时如果数据未保存则提示保存。
  • 点击删除时如果是临时添加的无效数据则直接删除，如果保存过的记录则实现了记录删除的接口。

考虑到嵌套的比较多就没有使用form表单，用js直接解析dom来分离出了要传递的数据。

先看下运行的效果图：

js的代码如下，其中注释较多就不解释了：

调用时要传几个参数，有几个参数为函数，每个参数都有注释，调用代码如下：

可以看出saver、allSaver、deler都是需要自己实现的，这与后台的实现相关，与本例子也没有主要关系也就不实现了，只把要传的数据传过来供使用。

下面做了一个比较完整的例子，可以修改一下，实际看一下运行效果：

最近在帮一个朋友在GoogleMap上画扇形，GoogleMap本身不提供这种画法，所以需要自己去实现，无赖原来学过的数学也忘记的差不多了，只能求助网络。

国外有一个高手写了一个扩展，地址是：http://econym.org.uk/gmap/eshapes.htm

但里面没有扇形的画法，在此基础上自己增加了扇形的画法：

GPolyline扩展方法：

 1 GPolyline.Sector = function(point, radius, sDegree, eDegree, colour, weight, opacity,opts) {
 2     var points = [];
 3     var step = ((eDegree - sDegree) / 10) || 10;
 4         
 5     points.push(point);
 6     for(var i=sDegree;i<eDegree + 0.001;i+=step){
 7         points.push(EOffsetBearing(point,radius,i));                                  
 8     }
 9     points.push(point);
10         
11     return new GPolyline(points, colour, weight, opacity, opts);
12 }

GPolygon扩展方法：

 1 GPolygon.Sector = function(point, radius, sDegree, eDegree, strokeColour, strokeWeight,Strokepacity, fillColour, fillOpacity, opts) {
 2         var points = [];
 3         var step = ((eDegree - sDegree) / 10) || 10;
 4         
 5         points.push(point);
 6         for(var i=sDegree;i<eDegree + 0.001;i+=step){
 7             points.push(EOffsetBearing(point,radius,i));                                  
 8         }
 9         points.push(point);
10         
11         return new GPolygon(points, strokeColour, strokeWeight,Strokepacity, fillColour, fillOpacity, opts);
12     }

使用方法见Demo，下载地址是：http://files.cnblogs.com/liongis/eshapes.rar

续上篇介 绍Mono在Window下的部署，对于我而言，相比于Windows平台下的部署，Linux平台下的部署挑战性会更大一点。从来没有Linux使用经 验的我，要在Linux下部署Mono，遇到的不仅仅是Mono部署的问题，还有各种Linux操作的问题。我是使用的从Mono官方下载的安全配置好的 虚拟机，安装方面的问题就可以暂时先跳过去，不过这里还是要先总结一下，先熟悉一下的几个常用的openSUSE操作。

1）配置网卡，进行文件管理都需要超级用户（su）密码，官方下载的虚拟机，su密码是:mono。刚开始不知道，还是小小的折腾了一会儿。其实，访问http://localhost 的默认首页就有这个用户密码的说明了。

2）apache的配置路径是在：/etc/apache2/。站点的默认目录是在：/srv/www/htdocs/，你会频繁在这两个目录做切换。

3）要修改配置你需要用超级用户的权限打开文件管理器，这个也是让我花了一些时间去查找。解决方案是创建一个命令行的快捷方式就可以了，看这个贴子。

4）重启apache的命令行：/etc/init.d/apache2 restart

5）如果需要，最好去扫盲一下什么是，YaST，什么是安装源。Linux下，动不动就要下源码编译安装，吓都吓死人了。使用的VPC是之前下载的，装的是Mono 2.8，昨天就是利用YaST自动升级到Mono 2.10。

事后总结，在Linux下部署Mono ASP.NET，主要是没有像IIS那样可视化的操作，都是命令行，看起来就是恐怖，但其实并没有的想像中的那么复杂。我们要先把官方的几个文档（Mod_mono，AutoHosting，Apache mod_mono configuration tool） 先熟悉一下，了解一下工作原理，再动手实施可能会少走一些弯路。另外一条教训就是，先部署低版本的，简单的，再尝试新版本刚支持的特性，比如先部署简单的 ASP.NET WebForm页面（简单的一个页面），再部署MVC站点；先部署MVC1.0，再部署最新的MVC3.0，这样即使出错也更利于我们排错。刚开始直接折 腾MVC3，那个杯具啊。

官方文档中介绍，在openSUSE+Apache有两种部署方式：自动Hosting和手工创建配置文件部署：

1.自动Hosting，只需做一次Apache配置，以后的部署Mono站点就只需要Xcopy到站点目录下就可以了，不需要再做额外部署。参考AutoHosting，主要步骤：

1）在/etc/apache2/httpd.conf添加：Include /etc/apache2/mod_mono.conf （这个文件在openSUSE 11.3的实际路径是Include /etc/apache2/con.d/mod_mono.conf），引入mod_mono的配置。

2）在mod_mono.conf文件中添加这一行：MonoAutoApplication enabled。 在官方文档中，还需要加入：MonoServerPath “/usr/bin/mod-mono-server2″，但实际上好像不需要。而且我改成：MonoServerPath “/usr/bin/mod-mono-server4″，它也不工作，不知道是什么问题。

3）如果是部署MVC站点，还需要在mod_mono.conf文件中加入这行：ForceType application/x-asp-net。但是对MVC站点，不推荐使用自动Hosting。

当我做了以上配置之后，我们在部署ASP.NET站点时，就只需要把目录拷贝到/srv/www/htdocs/就可以完成部署了。文件目录对应的就是站点的虚拟目录。

2.手工创建部署文件，看完善友兄的这篇文章在Mono 2.8上部署ASP.NET MVC 2，我有点晕。那个配置文件就足以让我头痛，之前这篇文档Apache mod_mono configuration tool一直都被我无视着。当我完整的看完几个官方文档之后，我才意识到这个工具的重要性。这个工具会根据我们希望部署的站点的情况，提供几个输入框让我们输入，之后我们就可以下载它生成的配置文件，直接将这些配置文件下载放到：/etc/apache2/conf.d/ 而不需要再做其它配置站点就可以正常工作。

3.最土的部署办法，就是看看内置的那几个站点是如何部署的，直接把它的几个配置文件拷贝一下，修修改改也一样可以。在刚开始，我没有按正常流程来的时候，实在搞不清楚了，我用这种办法也一样把站点部署成功了。而且还是直接部署MVC3站点。

总 结到这里，我发现在Linux下部署Mono ASP.NET也不是很难的事情嘛。只是一开始走的弯路有点多，心情有点急躁。不过，上篇中提到的MVC3的几个问题，在Linux下面也是同样存在的， 应该可以判断是Mono2.10存在的bug吧，不过这bug也太过低级吧，难道他们没有测试提交的情况？如果是这样，希望能尽快解决这些bug。

互联网日新月异，尤其是近一两年，各种前卫的技术开始频频出现在人们视野中，比如html5，css3，虽然规范仍旧在不断修订的草案中，但是已经不妨碍前卫的设计师或者前端工程师们的尝试了。企图利用这种变迁带给用户不一样的新奇体验。

其实稍微细心点看下，国外的对这两个新技术的使用已经很常见了，尤其是css3，各种圆角阴影甚至dom变换都开始用css3才完成，而在低版本的ie中采用优雅降级的处理方式。这是一个过渡阶段，总有一天，会完全过渡到那个闪耀着诱人光圈的时代。

所以，为了与时俱进，我也开始抽空余时间学习一下这两个更为强大的武器。并将陆续的将学习过程中的一些小实践分享给大家，仅仅起个抛砖引玉的作用。可能更多的是和html5相关的东东，如canvas，或者svg。因为本人是个视觉主义者，更喜欢一些有视觉冲击力的东东。

至于canvas的基本api，我就不详讲了，因为有人比我讲的更好，请参考http://dev.opera.com/articles/view/html-5-canvas-the-basics/ 或翻译版http://kb.operachina.com/node/190 。

为了使学习不那么无趣，我喜欢做一点点好玩的东西，哪怕是很简单的东东。

【以下demo请使用新版本的现代浏览器如firefox3.0+,chrome8.0+,等等查看，ie9未经测试, 看不到效果的请拷代码本地运行】

<!doctype html> <html> <head> <meta charset=”utf-8″ /> <style>body{margin:0; overflow:hidden;}</style> <script> onload = function () { var C = Math.cos, S = Math.sin, w = window, d = document.getElementById(“canvas”), n = 360, c = d.getContext(“2d”); c.fillRect(0, 0, d.width = w.innerWidth, d.height = w.innerHeight); c.globalCompositeOperation = “lighter”; c.lineWidth = .5; var st = setInterval(function () { if (n >= 3) { c.font = “”+Math.ceil(120-n/3)+”px 宋体”; c.globalAlpha = n / 1000; c.strokeStyle = “hsl(” + (n + 110 % 360) + “,99%,50%)”; x = -n * C(n / 100); y = 250 – S(n / 360 ) * n / 2.5; c.strokeText(“岑安”, x + 100, y); c.font = “”+n/3+”px Georgia”; c.strokeText(“HTML5″, x + 380, y + 255); n -= 1; } else clearInterval(st); }, 16) } </script> </head> <body> <canvas id=”canvas”>your browser don’t support html canvas!</canvas> </body> </html>

<!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>canvas math</title> <meta name=”author” content=”hongru.chen” /> <style> body {margin:0; background:#000;} canvas {display:block; margin: 10px auto;} </style> <script> var AmazingLine = function () { var init = function (n, i, config) { window[n] = this; this.n = n; var canvas = document.getElementById(i), ctx = this.ctx = canvas.getContext(‘2d’); this.t = 0; this.r = config.radius || 300; this.draw(); } init.prototype = { draw : function () { var _this = this; this.ctx.fillRect(0, 0, 600, 600); this.ctx.translate(300, 300); for (var i=0; i<45; i++) { for (var j=-45; j<=45; j+=15) { setTimeout(new Function(this.n+’.drawLine(‘+j+’)’), 50*this.t) this.t ++; } } }, drawLine : function (i) { this.ctx.beginPath(); this.ctx.moveTo(0, this.r); var r = Math.PI/180 * i, x = (this.r * Math.sin(r)) / Math.sin(Math.PI/2 – r)*r; this.ctx.lineTo(x, Math.sin(x)); this.ctx.strokeStyle=’rgb(‘+Math.ceil(Math.random()*255)+’,’+Math.ceil(Math.random()*255)+’,’+Math.ceil(Math.random()*255)+’)’; this.ctx.lineWidth=.5; this.ctx.stroke(); this.ctx.rotate(Math.PI/360 * 30); } } return init; }(); </script> </head> <body> <canvas id=”canvas” width=”600″ height=”600″>Your Broswer don’t support html5 canvas!</canvas> <script> new AmazingLine(‘_mytest’, ‘canvas’, {radius: 300}) </script> </body> </html>

源码就不贴了，demo比较简单，就用到了canvas的几个基本的函数，如fillRect，translate，beginPath，moveTo，lineTo，stroke，rotate等等，具体使用方法见上面的参考文章地址。

互联网日新月异，尤其是近一两年，各种前卫的技术开始频频出现在人们视野中，比如html5，css3，虽然规范仍旧在不断修订的草案中，但是已经不妨碍前卫的设计师或者前端工程师们的尝试了。企图利用这种变迁带给用户不一样的新奇体验。

其实稍微细心点看下，国外的对这两个新技术的使用已经很常见了，尤其是css3，各种圆角阴影甚至dom变换都开始用css3才完成，而在低版本的ie中采用优雅降级的处理方式。这是一个过渡阶段，总有一天，会完全过渡到那个闪耀着诱人光圈的时代。

所以，为了与时俱进，我也开始抽空余时间学习一下这两个更为强大的武器。并将陆续的将学习过程中的一些小实践分享给大家，仅仅起个抛砖引玉的作用。可能更多的是和html5相关的东东，如canvas，或者svg。因为本人是个视觉主义者，更喜欢一些有视觉冲击力的东东。

至于canvas的基本api，我就不详讲了，因为有人比我讲的更好，请参考http://dev.opera.com/articles/view/html-5-canvas-the-basics/ 或翻译版http://kb.operachina.com/node/190 。

为了使学习不那么无趣，我喜欢做一点点好玩的东西，哪怕是很简单的东东。

【以下demo请使用新版本的现代浏览器如firefox3.0+,chrome8.0+,等等查看，ie9未经测试, 看不到效果的请拷代码本地运行】

<!doctype html> <html> <head> <meta charset=”utf-8″ /> <style>body{margin:0; overflow:hidden;}</style> <script> onload = function () { var C = Math.cos, S = Math.sin, w = window, d = document.getElementById(“canvas”), n = 360, c = d.getContext(“2d”); c.fillRect(0, 0, d.width = w.innerWidth, d.height = w.innerHeight); c.globalCompositeOperation = “lighter”; c.lineWidth = .5; var st = setInterval(function () { if (n >= 3) { c.font = “”+Math.ceil(120-n/3)+”px 宋体”; c.globalAlpha = n / 1000; c.strokeStyle = “hsl(” + (n + 110 % 360) + “,99%,50%)”; x = -n * C(n / 100); y = 250 – S(n / 360 ) * n / 2.5; c.strokeText(“岑安”, x + 100, y); c.font = “”+n/3+”px Georgia”; c.strokeText(“HTML5″, x + 380, y + 255); n -= 1; } else clearInterval(st); }, 16) } </script> </head> <body> <canvas id=”canvas”>your browser don’t support html canvas!</canvas> </body> </html>

<!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>canvas math</title> <meta name=”author” content=”hongru.chen” /> <style> body {margin:0; background:#000;} canvas {display:block; margin: 10px auto;} </style> <script> var AmazingLine = function () { var init = function (n, i, config) { window[n] = this; this.n = n; var canvas = document.getElementById(i), ctx = this.ctx = canvas.getContext(‘2d’); this.t = 0; this.r = config.radius || 300; this.draw(); } init.prototype = { draw : function () { var _this = this; this.ctx.fillRect(0, 0, 600, 600); this.ctx.translate(300, 300); for (var i=0; i<45; i++) { for (var j=-45; j<=45; j+=15) { setTimeout(new Function(this.n+’.drawLine(‘+j+’)’), 50*this.t) this.t ++; } } }, drawLine : function (i) { this.ctx.beginPath(); this.ctx.moveTo(0, this.r); var r = Math.PI/180 * i, x = (this.r * Math.sin(r)) / Math.sin(Math.PI/2 – r)*r; this.ctx.lineTo(x, Math.sin(x)); this.ctx.strokeStyle=’rgb(‘+Math.ceil(Math.random()*255)+’,’+Math.ceil(Math.random()*255)+’,’+Math.ceil(Math.random()*255)+’)’; this.ctx.lineWidth=.5; this.ctx.stroke(); this.ctx.rotate(Math.PI/360 * 30); } } return init; }(); </script> </head> <body> <canvas id=”canvas” width=”600″ height=”600″>Your Broswer don’t support html5 canvas!</canvas> <script> new AmazingLine(‘_mytest’, ‘canvas’, {radius: 300}) </script> </body> </html>

源码就不贴了，demo比较简单，就用到了canvas的几个基本的函数，如fillRect，translate，beginPath，moveTo，lineTo，stroke，rotate等等，具体使用方法见上面的参考文章地址。