大二实习使用的技术汇总（上）

（前言：这次实习归来，收获还是挺多的，我希望能够把大部分拿出来和大家分享。我会讲到实习中运用的大部分技术，而不是纯心情分享~这些技术点也是网站开发的比较常规但又比较cool的，也是一条我比较推荐的常规学习路线。我的新浪微博：@chen文 http://weibo.com/u/2448939884 欢迎程序员互粉，转载文章请保留本博客地址：http://blog.csdn.net/wowkk 欢迎交流^_^）

各种因缘巧合认识一位BOSS，受之邀请，这个暑假和几个师兄到他公司实习了。其实几个师兄已经在学校帮他做一个系统一个学期了，基本完成了一期的任务。BOSS就是技术出身，现在绝对是一堆资源，所以，不要老是说：

 

接下来的一系列文章中，我也尽量只谈技术不谈需求，甚至连公司名也不谈，因为，有些公司更喜欢更应该默默地赚钱的样子……

 

7.24

来到这近百号人的公司，研发部占了1/3多吧，而应用层开发的差不多占里面的1/4，我们过来，就是搞B/S架构下的数据分析系统。

 

找到自己的位置，熟悉下环境后，BOSS司机带我们去一个咖啡厅（顺路叫我们去参观下腾讯总部，可惜大块保安不让进~）。BOSS带两个工程师在包间里面向我们大概讲解了项目第二期的任务。其实也应该是敏捷开发中的一种吧，就是扩充功能和界面美化，但一个比较感兴趣的地方就是换用非关系型的实时数据库。因为我们做的是能源管理系统，数据库每时每刻要接受大量能源监测点的仪表发来的数据，关系型数据说是有点压力。但，在此之前，我们要先在一期的基础上，做一个手机可以访问的有部分功能的网站。

 

中午饭BOSS邀请几位大神说要让我们多沟通下互联网，其中有位是和张磊一起创造网易的张春晖，但进餐的时候我们分两桌坐了，而进餐结束后我们先回包厢，BOSS还在和他们谈了很久最后就没有最后了。但说真了，就算很和这等神人沟通，我们又能说出什么，匆匆一面就来谈我的想法那实在太失礼。

聊项目的地方：

 

7.25

张工是我们的项目头头，二期依然是由他来带。我是在一期的收尾时段才加入的，那时还在学校，BOSS经常在周末一大早带着张工从深圳开车过来惠州和我们沟通项目的事，但在张工言辞中完全感觉不出他是在加班的状态，真是我辈程序猿之典范！

 

今天是张工和我们的第一次项目会议，因为之前大家都没做过手机web，关于手机类型、屏幕分辨率等各种兼容问题还都不清楚，所以这一周的任务也比较简单，做两个界面原型即可。

 

我的任务点是：判断当前访问的用户是普通用户还是手机用户，然后跳转到对应的登陆界面。另一样要做的就是，我要确定个方案，手机Web页面放在一期工程下的一个Phone文件夹即可，还是成为一个独立的项目，再或者搞三个项目（其中一个项目只有判断用户类型然后跳转的功能）。

 

这是研发部后半部分我的小窝：

 

7.26

01因为系统分析的数据机密程度较高，我们在Web.config文件里设置了两个个规则：

 

<!--通过 <authentication> 节可以配置 ASP.NET 用来识别进入用户的安全身份验证模式。 -->
<authentication mode="Forms">
<forms loginUrl="Default.aspx" timeout="30" enableCrossAppRedirects="true"/>
</authentication>
<!-- 禁止匿名用户访问 -->
<authorization>
<deny users="?"/>
</authorization>

 

所以一开始就不允许没有登录的用户访问任何资源，并且没有登录的用户访问任何页面都会跳转到登录页面。这样的话，我们就很难在电脑版登录页面写个判断语句让用户跳转到依然是当前项目下的手机登陆页面（因为它会跳转来跳转去起冲突的样子，具体怎样忘了）所以最终确定用“两个项目的方案”（能用两个干嘛用要三个是吧~）

02而判断用户类型的代码，网上也有提供好多个版本了，测试了大半天，终于找到个比较简便的。请看代码，直接写在aspx前端页面即可。

 

<%--判断手机登陆后跳转-%>
<%@ Import Namespace="System.Text.RegularExpressions" %>
<%    
    string u = Request.ServerVariables["HTTP_USER_AGENT"];
    Regex b = new Regex(@"(android|bb\d+|meego).+ipad|mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino", RegexOptions.IgnoreCase | RegexOptions.Multiline);
    Regex v = new Regex(@"各种手机型号……", RegexOptions.IgnoreCase | RegexOptions.Multiline);
    if ((b.IsMatch(u) || v.IsMatch(u.Substring(0, 4)))) {
        string phoneSite = ConfigurationManager.ConnectionStrings["PhoneSite"].ConnectionString;
        Response.Redirect(phoneSite); //phoneSite是一个跳转地址，我把它写到web.config文件里
    }
%>

 

 

其实这个跳转的原理也很简单，因为.net服务端会记录访问者的操作系统、浏览器等信息，提取出来，通过正则表达式，判断是否符合手机的特性即可。

今天接下来的时间就是找一套适合手机web的风格文件（包括按钮样式等）。

 

7.27

03之前就知道有一种软件，可以自动下载指定网站的模板文件（包括HTML源代码、CSS、JS和图片），像咱这种不是美工出身的，要做前端风格就只能去到处借鉴了。

很轻松地找到一款很简便的工具，名曰：网站模板扒皮者。

修改模板这种事，早在高中就经常做了，所以接下来只要能找到对象就行了。手机web知道得比较少，又大多是门户类型不适合。百度搜索wap等关键词，终于找到8684.和去哪儿网的页面，比较适合做我们的导航和登陆界面。

 

04而关于怎样在电脑模拟手机访问网站的，我找到了两个工具。

一个是利用谷歌浏览器模拟手机浏览器（手动改变浏览器大小就相当于在改分辨率）：

点击开始运行，输入以下代码即可。（这个是Android模拟的，另外还有iPhone模拟）

chrome.exe --user-agent="Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"

另一个是下载：Opera Mobile Emulator ，它可以模拟很多型号的手机包括平板启动浏览器。

这个项目大量使用到图表，包括折线图、饼图、实时刷新数据的图等等，他们用的是VS自带的Chart图表控件，我当然不喜欢这些太局限性的控件（比如跨平台了怎么办），但为了统一，今天还是学一下简单应用。

接下来的时间就是在修改这两个模板，其实就是修改修改文字而已。然后把Htlm代码搬到Aspx页中，在对应的地方替换下.net按钮、文本框之类的控件即可。

7.29

新的一周，今天会议上说要在本周发布手机版，我是负责登陆界面和主界面。

05看了挺多wap网页，发现一个特点，它们都使用了一个<Meta>标签，用于触屏手机网页的。

这个标签可以让文档与设备的宽度保持1:1，并且固定页面大小使其不可缩放，这样的好处就是，网页在手机浏览器中打开，默认就是正常字体大小，不然，就只是一个网页缩略图，需要看哪个区域还得去扩大。这个标签代码是：

 

<meta name="phoneWeb" content="width=device-width, initial-scale=1">

 

 

06不停搜索的过程中，突然发现了一件神器！jQuery Mobile。

以前简单用过jQuery，所以看到这手机版本的，实在一阵激动。它不仅封装了大量可以兼容各种手机和电脑的浏览器的JS代码，而且还自带CSS（包括主题、布局、各种控件样式，都很高端漂亮的。

 

  像上面这个页面，只需简简单单几十行代码即可实现。引入jquery.mobile.css/js、jquery.js文件，然后遵循jMobile的规则写代码即可。

代码模式：

 

<div data-role="page" id="page">
<div data-role="header">头部信息</div>
<div data-role="content">中间信息</div>
<div data-role="footer">底部信息</div>
</div>

 

 

参考一篇文章《jQuery Mobile入门教程--主题的使用和定制》，相信可以很快入门。

7.30

在jMobile官网下载的压缩包，包含了所有demo和文档，虽然是全英文的，但还是比较容易看懂那些基础内容的，或者你也可以到国内自制的jMobile中文网查看。如果需求不是很复杂，你所需要做的，就只是拼接官方给你的代码即可。但当做起真正的需求时，还是会发现很多意想不到的情况，这在我们发布手机版后期是很有感触的。

花了不少时间看了官方各种资料，最后花了10分钟定制了一个全站模板，在模板里指定个区域，让大家把展示的数据放到里面去。也就是说，舍弃了之前考虑使用的8684等网站的模板。

接下来就开始我的任务了，做一个首页，含主导航功能并且展示一下概要数据。要展示的数据，在第一期都已经写好了，但那时没有代码审核员（本来这期要有，但时间和人手是个问题），有些代码风格不是很好，一个函数一堆代码，由于只需要提取一部分功能，就只能慢慢筛选了。

 

7.31

今天除了移植登陆页面，还有一件很重要的事。

07本地架设网站，让局域网电脑和手机都能够访问。

首先是安装IIS（控制面板--程序和功能--左方栏目：打开或关闭Window功能）

 

然后是配置Asp.Net环境，这两个步骤，网站都有比较详细的很长的图文教程了，我找了一篇比较靠谱的文章《Win7旗舰版中的IIS配置asp.net运行环境》，现在一般都用.net4来开发了，所以配置完了之后，主PC和应用池都要修改为对应版本。

最后就是要实现局域网访问，参考文章《Window 7下配置IIS，并且局域网内可访问》，然后结合手机wife精灵，让手机也可以访问。

 

8.01

今天开始解决棘手的jMobile样式问题。各种特殊的原因，如果不处理有关“刷新”的动作，那么控件的样式就好丢失，变回了默认丑陋的样子。比如原有的三个“年、月、日”的DropDownList控件，选择不同的“月”，后台会进行判断，然后“日”显示正常的那个月份的天数，但返回之后，样式就跟着丢失了。

08一个比较好的方案就是使用jQuery实现无刷新效果。

但团队其他人基本没用过这个，而且要修改挺大数量的代码。入门代码可以参考下我的一篇文章《08.net网站开发（前端）：5.jQuery》（http://blog.csdn.net/wowkk/article/details/10233395）

所以我尽量找另外一个方案，通过谷歌流量器可以很方面地审查Html代码和查看网络请求等等，通过右键--审查元素，我发现我们写代码的时候，只是简单放一个控件上去，但实际渲染的时候，外部多了一堆样式代码，最里面有两个兄弟关系的标签。一个是控件标签，另一个是<span>标签（TEXT和控件一样）。展示时，Span覆盖在控件上面。沿着这个思路，最终中电脑上成功实现刷新时不会丢失样式的效果，但手机上却只能更新到值无法更新到样式（也就是看到的值和实际的值是不一样的）。搞了大半天，最终还是没有解决问题，所以我也不把过程写出来了（其实也忘了~）

 

8.02

09终于在最后一天解决了样式丢失的问题。

翻阅了大量资料，重新认识了jMobile里面的 data-ajax 属性。原来，为了实现平滑的切换等效果，默认jMobile在跳转到另一个界面时，并不是完全加载另一个页面，而是只加载它的内容（data-role=”page”）部分，然后把它们追加到自己的页面。这样，相对于一个页面其实包含了两个页面的内容，切换起来当然就很流畅啦。但有时我们不喜欢jMobile多此一举，比如我们在页头写了一些js代码初始化一些数据，从另一个页面超链接到这里后，默认是不会去加载这些js代码了，页面就异常了。要解决这个问题，只需要在另一个页面的跳转链接或按钮代码中，加多一个属性：data-ajax=”false” ，页面就会完全加载了。

搞定这个后，我就在首页主导航部分做上其他人做的页面的链接，然后协助解决主要Bug，如果早使用过jMobile就比较好了，因为一开始只注重样式的修改，没注意到jQuery的所有函数并不都适应于jMobile，比如要用$(document).bind(“pageinit”,function(){})代替$(function(){})实现各种数据初始化和事件绑定。

总之在任务要求的最后一天大概把手机版的做出来了。几天后，BOSS带着它去给客户演示，后来我问起，BOSS说界面效果还不错，就是操作体验还不大好。