你的位置:首页 > ASP.net教程

[ASP.net教程]WebApp简单制作(后端也可以装逼啦)


前端越来越吃香的感觉

  年后回来,跟之前和几个同事和朋友聊天,发现有两个.net的和一个php的朋友都转到了前端,真是出乎意料。自从之前的webapp兴起后,前端感觉比后端吃香很多,总结朋友们转的原因,大概就几点

1.易上手,相对其他语言来说,作为后端人员,转到前端,其实已经有了很好的底子和基础了,毕竟以前多少都会和js,jq,html,css打交道

2.前端比后端容易找工作,这里的容易找工作,是指不会被后端的语言限死。就像我朋友说的“做网站不一样需要.net,可以是java,可以是php,但一定离不开js,jq,html,css这些东西”。

3.前端妹子多......

   其实自己也觉得有一定道理,感觉这两年.net的需求度相对其他的语言都弱了些,前程上搜索发现,.net的职位数是1100+,php是1800+, 前端是2000+,java 是3600+(都是仅限于广州)。所以还是蛮明显的。

   看到了那么多朋友转前端,自己也开始搞点前端的东西,近期刚好有点时间,正好研究下webapp开发, 其实webapp开发说到底就是响应式布局嘛,配合html5+css3就看上去高大上点了。不过作为后端程序猿来说,我还没打算深入去研究html5和css3,反正就是响应式布局,用现成的前端框架来练练手。于是,就想用bootstrap做一个简单的新闻网站来装下逼。

 初试

  Boootstrap,来自 Twitter,是目前很受欢迎的前端框架,主要是响应式布局,无论是文档,资料,还是demo等都比较齐全,而且界面好看,提供多样式主题,还有很多开源的插件和模板,上手相对简单,让后端程序屌丝也能做出好看的界面。

 文件的下载和相关引用,可参考如下地址,详细明了

 http://v3.bootcss.com/getting-started/

 就是下载后只要依次引入:

bootstrap.min.css

bootstrap-theme.min.css

Jquery.min.js

Bootstrap.min.js

这四个文件就好了,然后 在<head> 之中添加 viewport 元数据标签,用来指定移动设备优先

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

viewport

登陆,注册

使用到的组件 panel(面板),navbar(导航条),from(表单) jNotify(提示框)

 

表单验证,Bootstrap下的表单本身不带验证功能,不过它的插件很多,表单插件bootstrapvalidator就是其中一款,感觉它封装的验证功能比easyui的还要强大。

 下载地址: https://github.com/nghuuphuoc/bootstrapvalidator

 使用方式,引入 bootstrapValidator.min.css  和  bootstrapValidator.min.js

 这两个文件,然后初始化表单

Bootstrapvalidator下载的代码中有大量的demo,可以根据需要自己选择查看。

 

提示框,jNotify

jNotify是一款提示消息的插件,不过它并不是Bootstrap专有的插件。它提示界面好看,而已又是属于轻量级的,方法使用也简单,下载地址:http://www.jq22.com/jquery-info1377

 使用方式,引入  jNotify.jquery.js  和  jNotify.jquery.css

这两个文件,然后就可以直接使用

jError("错误信息提示");

jSuccess("成功信息提示");

jNotify("一般信息提示");

 1 <div class="panel"> 2   <div class="wrapper-dropdown active navbar navbar-default" id="navbar"> 3     <label style="color: white; padding-left: 8px; font-size: 20px;"><strong>登录</strong></label> 4     <div class="h_Icon"> 5       <a class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 6         <img src="http://www.cnblogs.com//Content/img/head/nemu.png" /> 7       </a> 8       <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu"> 9         <li><a href="http://www.cnblogs.com//Home/Index"><i class="glyphicon glyphicon-home"></i> 首页</a></li>10         <li><a href="http://www.cnblogs.com//Home/Registere"><i class="glyphicon glyphicon-user"></i>注册</a></li>11       </ul>12     </div>13   </div>14   <div class="row panel-body">15     <form id="loginform">16       <div class="form-group">17         <input type="text" class="form-control" id="username" name="username" placeholder="用户名">18       </div>19       <div class="form-group">20         <input type="password" class="form-control" id="password" name="password" placeholder="密码">21       </div>22       <button type="button" data-loading-text="正在提交" autocomplete="off" id="validateBtn" class="btn btn-info btn-block">登陆</button>23     </form>24   </div>25 </div>

登录页代码
 1 <div class="panel"> 2   <div class="wrapper-dropdown active navbar navbar-default" id="navbar"> 3     <label style="color: white; padding-left: 8px; font-size: 20px;"><strong>注册</strong></label> 4     <div class="h_Icon"> 5       <a class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 6         <img src="http://www.cnblogs.com//Content/img/head/nemu.png" /> 7       </a> 8       <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu"> 9         <li><a href="http://www.cnblogs.com//Home/Index"><i class="glyphicon glyphicon-home"></i>首页</a></li>10         <li><a href="http://www.cnblogs.com//Home/Login"><i class="glyphicon glyphicon-lock"></i>登录</a></li>11 12       </ul>13     </div>14   </div>15   <div class="row panel-body">16     <form id="loginform">17       <div class="form-group">18         <input type="text" class="form-control" name="username" placeholder="用户名">19       </div>20       <div class="form-group">21         <input type="text" class="form-control" name="nickName" placeholder="用户昵称">22       </div>23       <div class="form-group">24         <input type="password" class="form-control" name="password" placeholder="密码">25       </div>26       <div class="form-group">27         <input type="password" class="form-control" name="confirmPassword" placeholder="确认密码">28       </div>29       <button type="button" data-loading-text="正在提交" autocomplete="off" id="validateBtn" class="btn btn-info btn-block">注册</button>30     </form>31   </div>32 </div>

注册页代码
 1  var $btn; 2     $('#loginform').bootstrapValidator({ 3       message: 'This value is not valid', 4       feedbackIcons: { 5         valid: 'glyphicon glyphicon-ok', 6         invalid: 'glyphicon glyphicon-remove', 7         validating: 'glyphicon glyphicon-refresh' 8       }, 9       fields: {10         username: {11           validators: {12             notEmpty: {13               message: '用户名不能为空'14             },15             stringLength: {16               min: 6,17               max: 30,18               message: '用户名必须在6-30位之间'19             },20             remote: {21               type: 'POST',22               url: '/User/CheckUserName',23               message: '该用户名已经存在'24             },25             different: {26               field: 'password,confirmPassword',27               message: '用户名不能与密码一致'28             }29           }30         },31         nickName: {32           validators: {33             notEmpty: {34               message: '用户昵称不能为空'35             },36             stringLength: {37               min: 2,38               max: 8,39               message: '用户昵称必须在2-8位之间'40             },41             remote: {42               type: 'POST',43               url: '/User/CheckNickName',44               message: '该用户昵称已经存在'45             }46           }47         },48         password:49         {50           validators: {51             notEmpty: {52               message: '密码不能为空'53             },54             stringLength: {55               min: 8,56               max: 20,57               message: '密码长度必须在8-20位之间'58             },59             different: {60               field: 'username',61               message:62                 '用户名不能与密码一致'63             }64           }65         },66         confirmPassword: {67           validators: {68             notEmpty: {69               message: '确认密码不能为空'70             },71             identical: {72               field: 'password',73               message:74                 '两次密码不一致,请检查'75             },76             different: {77               field: 'username',78               message:79                 '用户名不能与密码一致'80             }81           }82         }83       }84     });

表单验证初始化
 1 (function ($) { 2   $.extend($, 3     { 4       //成功提示 5       MsgSuccess: function (msg, func) { 6         jSuccess(msg, { 7           VerticalPosition: 'center', 8           HorizontalPosition: 'center', 9           TimeShown: 1000,10           onClosed: function () {11             if (func) func();12           }13         });14       },15       //出错时的提示16       MsgError: function (msg, func) {17         jError(msg, {18           VerticalPosition: 'center',19           HorizontalPosition: 'center',20           TimeShown: 1000,21           onClosed: function () {22             if (func) func();23           }24         });25       },26 27       //一般的提示28       MsgInfo: function (msg, func) {29         jNotify(msg, {30           VerticalPosition: 'center',31           HorizontalPosition: 'center',32           TimeShown: 1000,33           onClosed: function () {34             if (func) func();35           }36         });37       },38       //统一处理 返回的json数据格式39       DealAjaxData: function (data, funcSuc, funcErr) {40 41         //如果是字符串格式的josn,就变为json对象42         if (typeof (data) == "string") {43           try {44             data = eval("(" + data + ")");45           } catch (e) {46 47           }48         }49 50         if (!data || data.Code == undefined) {51           return;52         }53 54         switch (data.Code) {55           //错误的提示56           case 0:57             $.MsgError(data.Msg, function () { if (funcErr) { funcErr(data); } });58             break;59             //成功的提示60           case 1:61             $.MsgSuccess(data.Msg, function () { if (funcSuc) { funcSuc(data); } });62             break;63             //带跳转的提示64           case 2:65             $.MsgInfo(data.Msg, function () { if (window.top) window.top.location = data.BackUrl; else window.location = data.BackUrl; });66             break;67         }68       }69     });70 }(jQuery));

JNotify简单封装

效果如下:

    

 新闻列表

使用到的组件 panel(面板),dropdown(下来菜单),Carousel(轮播)glyphicon(图标) 栅格布局 

 1 <div class="head"> 2   <div class="wrapper-dropdown active navbar navbar-default" id="navbar"> 3     <label style="color: white; padding-left: 8px; font-size: 20px;"><strong>新闻列表</strong></label> 4     <div class="h_Icon"> 5       <a class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 6         <img src="http://www.cnblogs.com//Content/img/head/nemu.png" /> 7       </a> 8       <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu"> 9         <li><a href="http://www.cnblogs.com//Home/Index"><i class="glyphicon glyphicon-home"></i> 首页</a></li>10         <li><a href="http://www.cnblogs.com//Home/Login"><i class="glyphicon glyphicon-lock"></i>登录</a></li>11         <li><a href="http://www.cnblogs.com//Home/Registere"><i class="glyphicon glyphicon-user"></i>注册</a></li>12         <li><a href="http://www.cnblogs.com//Collection/Index"><i class="glyphicon glyphicon-star"></i>我的收藏</a></li>13 14       </ul>15     </div>16   </div>17   <nav class="head-bar">18       <a class="action" href="jvavscript:;">推荐</a>19           <a href="http://www.cnblogs.com//News/NewsList?type=News">新闻</a>20           <a href="http://www.cnblogs.com//News/NewsList?type=Sports">体育</a>21           <a href="http://www.cnblogs.com//News/NewsList?type=Entertainment">娱乐</a>22 23   </nav>24 </div>

顶部菜单代码
 1 <div class="row fix-bottom"> 2   <div class="col-xs-6"> 3     <a href="http://www.cnblogs.com//Home/Index"> 4       <img src="http://www.cnblogs.com//Content/img/Login/home.png" /> 5     </a> 6   </div> 7   <div class="col-xs-6"> 8     <a href="http://www.cnblogs.com//Collection/Index"> 9       <img src="http://www.cnblogs.com//Content/img/Login/collect.png" />10     </a>11   </div>12 </div>13 14 <!--返回顶部-->15 <div class="toTop">16   <a href="javascript:void(0)" onclick='$("body").animate({ "scrollTop": "0px" }, 300)'>17     <img src="http://www.cnblogs.com//Content/top.png"/>18   </a>19 </div>

尾部菜单代码
 1 <!--焦点图start--> 2 <div class="carousel slide" id="NewsCarousel"> 3   <!--Indicators--> 4   <ol class="carousel-indicators"> 5     <li class="active" data-slide-to="0" data-target="#NewsCarousel"></li> 6     <li data-slide-to="1" data-target="#NewsCarousel"></li> 7     <li data-slide-to="2" data-target="#NewsCarousel"></li> 8   </ol> 9   <!--wrapper for slides-->10   <div class="carousel-inner">11     <div class="item active" id="slide1">12       <img src="http://www.cnblogs.com//Content/img/image.jpg" class="img-responsive center-block" />13       <div class="carousel-caption">14         <h4>围棋人机大战第二局 李世石再次中盘落败</h4>15       </div>16     </div>17 18     <div class="item" id="slide2">19       <img src="http://www.cnblogs.com//Content/img/image1.jpg" class="img-responsive center-block" />20       <div class="carousel-caption">21         <h4>《看客》第491期:梦在迪士尼</h4>22       </div>23     </div>24 25     <div class="item" id="slide3">26       <img src="http://www.cnblogs.com//Content/img/image2.jpg" class="img-responsive center-block" />27       <div class="carousel-caption">28         <h4>“动”态两会:消防官兵列队行进</h4>29       </div>30     </div>31   </div>32   <!--controller-->33   <a class="left carousel-control" data-slide="prev" href="#NewsCarousel"><span class="icon-prev"></span></a>34   <a class="right carousel-control" data-slide="next" href="#NewsCarousel"><span class="icon-next"></span></a>35 </div>36 <!--焦点图end-->

轮播代码
 1 <div class="context panel panel-default"> 2       <div class="row newsItem" data-url="/News/NewsDetails?newId=24"> 3         <div class="left-context col-sm-2 col-xs-4 "> 4           <img src="http://www.cnblogs.com//thumbnail/down/BA8J7DG9wangning/BI0GG89900014AED.jpg" class="left-img"> 5         </div> 6         <div class="right-context col-sm-10 col-xs-8"> 7           长沙市长:望让小学生步行上学 8         </div> 9       </div>10       <div class="row">11         <div class="col-xs-4">12           2小时前13         </div>14         <div class="col-xs-8 showTip">15           <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> 76 &nbsp;16           <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> 93 &nbsp;17           <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 2 &nbsp;18         </div>19       </div>20     </div>

新闻列表代码

效果图:

新闻详情和收藏页面

 使用到的组件 panel(面板),dropdown(下来菜单),lyphicon(图标) 栅格布局  

 1 <div class="panel panel-info" id="newspanel"> 2     <div class="panel-heading article_head"> 3       <strong>长沙市长:望让小学生步行上学</strong> 4     </div> 5     <div class="row article_info"> 6       <small> 2016-03-13 00:59; 北京晨报</small> 7     </div> 8     <div class="article_list panel-body "> 9       <!--IMG#0-->10       <p>我是内容</p>11     </div>12   </div>13   <div class="row fix-bottom">14     <div style="padding: 6px;">15       <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> 0 &nbsp;16       <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> 11 &nbsp;17       <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 56 &nbsp;18     </div>19   </div>20   <!--评论区start-->21   <h3 class="commentItem"><span class="label label-primary">评论区</span></h3>22   <div class="panel panel-default commentItem" id="nonecomment">23     <div class="row">24       <p class="text-center text-muted" style="padding-top: 6px;">此新闻暂无评论,快来评论吧</p>25     </div>26   </div>27   <div id="commentList">28 29   </div>30   <div class="row text-center">31     <label id="loading" class="text-muted">32       <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 正在努力加载中...33     </label>34   </div>35   <br />36   <br />37   <!--评论区end-->38   <div class="row fix-bottom" id="bottombar">39     <div class="row">40       <div class="col-xs-3">41         <a href="javascript:void(0)" onclick="return addReview(0,this)">42           <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true" id="likeCount"></span> <span class="count">76</span>43         </a>44       </div>45       <div class="col-xs-3">46         <a href="javascript:void(0)" onclick="return addReview(1,this)">47           <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true" id="badCount"></span> <span class="count">93</span>48         </a>49       </div>50       <div class="col-xs-3">51         <a href="javascript:void(0)" id="commentBtn">52           <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> <span id="commentsCount">2</span>53         </a>54       </div>55       <div class="col-xs-3">56         <a href="javascript:void(0)" onclick="return addCollection()">57           <span class="glyphicon glyphicon glyphicon-star-empty" aria-hidden="true"></span> &nbsp;58         </a>59       </div>60     </div>61   </div>62   <div class="row fix-bottom" id="commentbar">63     <form id="commentform">64       <input type="hidden" name="newId" value="24" />65       <div class="form-group">66         <textarea name="context" id="context" class="form-control" rows="4" placeholder="请输入你的评论内容"></textarea>67       </div>68       <div style="text-align: right;">69         <button class="btn btn-success" data-loading-text="正在提交" autocomplete="off" id="validateBtn"> 提交 </button>70       </div>71     </form>72   </div>

新闻详情页面代码
 1 <div class="wrapper-dropdown active navbar navbar-default" id="navbar"> 2   <label style="color: white; padding-left: 8px; font-size: 20px;"><strong>我的收藏</strong></label> 3   <div class="h_Icon"> 4     <a class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 5       <img src="http://www.cnblogs.com//Content/img/head/nemu.png" /> 6     </a> 7     <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu"> 8       <li><a href="http://www.cnblogs.com//Home/Index"><i class="glyphicon glyphicon-home"></i> 首页</a></li> 9     </ul>10   </div>11 </div>12 13 <div class="userpanel">14   <div class="row">15     <div id="username" class="bg-primary center-block text-center" >QingTT</div>16     <p>17       <small>用户昵称:最爱晴天 &nbsp; &nbsp;| &nbsp; &nbsp; 收藏数:4</small>18     </p>19   </div>20 21 </div>22 <div id="newsList">23 24 </div>25 <div class="row text-center">26   <label id="loading" class="text-muted">27     <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 正在努力加载中...28   </label>29 </div>30 <br />31 <br />32 <div class="row fix-bottom">33   <div class="col-xs-6">34     <a href="http://www.cnblogs.com//Home/Index">35       <img src="http://www.cnblogs.com//Content/img/Login/home.png" />36     </a>37   </div>38   <div class="col-xs-6">39     <a href="http://www.cnblogs.com//Collection/Index">40       <img src="http://www.cnblogs.com//Content/img/Login/collect.png" />41     </a>42   </div>43 </div>

收藏页面代码

效果图:

 造数据

前端基本搭建好了,一个简单的新闻浏览页面就出来了,接着就是让后端有数据出来,怎么办呢,自己写一个后台,提供新闻发布功能,然后自己来造数据?不不不,难得搞定了前端,后端就更要装逼点,直接找个网站偷点数据就好了。于是乎浏览了网易新闻,用谷歌查看了它的请求,发现比想象中的简单很多:

 网易网页:

http://3g.163.com

 新闻列表的获取地址(地址A):

http://3g.163.com/touch/article/list/BBM54PGAwangning/0-10.html

http://3g.163.com/touch/article/list/{类型标示}/{页码}-{页数}.html

新闻详情页面的获取地址:

http://3g.163.com/touch/article/BI0GG89900014AED/full.html

http://3g.163.com/touch/article/{地址A中返回的新闻标示}/full.html

 哈哈,就是这么简单了,写个控制台跑一下,把新闻标题,图片,内容等信息全部拿下来保存到本地,发送给前端显示就好了,于是就有了下面代码:

 1 public class NewsHelper 2   { 3     //获取新闻列表 4     public static List<NewsItem> GetNews(KeyValuePair<NewTypeEnum, string> newType) 5     { 6       string type = newType.Value; 7       int pageIndex = 0; 8       int pageSize = 10; 9       bool isStart = true; 10       while (isStart) 11       { 12         List<NewsItem> newsInfos = new List<NewsItem>(); 13         string url = string.Format("http://3g.163.com/touch/article/list/{0}/{1}-{2}.html", type, pageIndex * pageSize, pageSize); 14         string result = HttpHelper.Get(url); 15         Console.WriteLine(string.Format("{0} 行位置:{1}", type, pageIndex * pageSize)); 16         if (!string.IsNullOrWhiteSpace(result)) 17         { 18           result = result.Replace("artiList(", "").Trim(')'); 19           if (!string.IsNullOrWhiteSpace(result)) 20           { 21             var jsonObj = JsonConvert.DeserializeObject<dynamic>(result); 22             var newList = jsonObj[type]; 23  24             foreach (var newItem in newList) 25             { 26               //只获取单图新闻 27               if (newItem.hasImg > 0) 28               { 29                 NewsItem model = new NewsItem() 30                 { 31                   //新闻标示 32                   Docid = newItem.docid, 33                   //缩略图url 34                   Imgsrc = newItem.imgsrc, 35                   //发布时间 36                   Ptime = newItem.ptime, 37                   //标题 38                   Title = newItem.title 39                 }; 40                 newsInfos.Add(model); 41                 DownloadImg(model, type); 42                 DownDetails(model, type); 43  44               } 45             } 46           } 47           else 48           { 49             isStart = false; 50           } 51         } 52         else 53         { 54           isStart = false; 55         } 56         SaveDb(newsInfos, newType.Key); 57         pageIndex = pageIndex + 1; 58  59       } 60       Console.WriteLine(type + " get end~~~"); 61       return null; 62     } 63  64     //将新闻保存到数据库 65     public static void SaveDb(List<NewsItem> newsItems, NewTypeEnum newTypeEnum) 66     { 67       List<NewsInfo> newsInfos = newsItems.Select(p => ConvertNewsInfo(p, newTypeEnum)).ToList(); 68       if (newsInfos.Any()) 69       { 70         using (var db = DbHelp.OpenConnection()) 71         { 72           db.InsertAll(newsInfos); 73         } 74         Console.WriteLine("保存到数据库 {0}", newTypeEnum); 75       } 76     } 77  78     #region 辅助方法 79     //图片下载 80     private static bool DownloadImg(NewsItem item, string type) 81     { 82       var imgUrl = item.Imgsrc; 83       byte[] imgByes = HttpHelper.HttpGetBytes(imgUrl); 84  85       var path = string.Format("/thumbnail/down/{0}/", type); 86       var uploadPath = GetFilePath(path); 87       if (!Directory.Exists(uploadPath)) 88       { 89         Directory.CreateDirectory(uploadPath); 90       } 91       string fileName = item.Docid + ".jpg"; 92       //创建一个文件流对象,并初始化  93       using (FileStream fs = new FileStream(uploadPath + fileName, FileMode.OpenOrCreate)) 94       { 95         //向文件流中写入内容 96         fs.Write(imgByes, 0, imgByes.Length); 97       } 98       item.SaveDbImgsrc = path + fileName; 99 100 101       return true;102     }103 104     //文章下载105     private static bool DownDetails(NewsItem item, string type)106     {107       string url = string.Format("http://3g.163.com/touch/article/{0}/full.html", item.Docid);108       string result = HttpHelper.Get(url);109       if (!string.IsNullOrWhiteSpace(result))110       {111         result = result.Replace("artiContent(", "").Trim(')');112         if (!string.IsNullOrWhiteSpace(result))113         {114           var jsonObj = JsonConvert.DeserializeObject<dynamic>(result);115           var detail = jsonObj[item.Docid];116           //新闻内容117           item.Details.Context = detail.body;118           //标题119           item.Details.Title = detail.title;120           //发布时间121           item.Details.Ptime = detail.ptime;122           //来源123           item.Details.Source = detail.source;124         }125       }126       return true;127     }128 129     private static string GetFilePath(string file)130     {131       string dir = System.Configuration.ConfigurationManager.AppSettings["imgSavePath"];132       var filename = Path.Combine(dir, file.TrimStart('~', '/'));133       return filename;134     }135 136     static Random rd = new Random();137 138     //数据转换139     private static NewsInfo ConvertNewsInfo(NewsItem item, NewTypeEnum newTypeEnum)140     {141       NewsInfo result = new NewsInfo()142       {143         BadCount = rd.Next(0, 100),144         CommentsCount = 0,145         Context = item.Details.Context,146         Imgsrc = item.SaveDbImgsrc,147         LikeCount = rd.Next(0, 100),148         NewType = (int)newTypeEnum,149         Ptime = DateTime.Parse(item.Ptime),150         Source = item.Details.Source,151         Title = item.Title152 153       };154       return result;155     }156     #endregion157   }

获取新闻帮助类

装逼升级

用户是最懒的,你让用户在手机上自己输入一个网站的地址来使用你的webapp,用户会打你的。所以对用户来讲,手机上我想的是一安装,然后打开就能用了。那无非就是搞了app,什么功能都不用,内置一个浏览器,一开到就直接在这个app上面跳到你的网站就好了。就像winfrom里面的webBrowser一样。于是百度了一下,android有WebView 这一控件,可以实现这样功能,虽然不懂安卓,不过这个小功能还是简单的,于是百度WebView 的使用,大致过程如下:

 

先建一个空白的android项目

在AndroidManifest.

<uses-permission android:name="android.permission.INTERNET"/>

View Code

然后修改MainActivity,如下:

 1 private WebView webView; 2   @Override 3   protected void onCreate(Bundle savedInstanceState) { 4     super.onCreate(savedInstanceState); 5     setContentView(R.layout.main);        6     init(); 7  8   } 9   10   private void init(){11     webView = (WebView) findViewById(R.id.webView);12     webView.loadUrl("http://192.168.0.102:1111/");13     WebSettings settings = webView.getSettings();14     settings.setJavaScriptEnabled(true);15     16     webView.setWebViewClient(new WebViewClient(){17       @Override18     public boolean shouldOverrideUrlLoading(WebView view, String url) {19        view.loadUrl(url);20       return true;21     }22     });23   }

View Code

 对,就是这么简单(太难的我也不会O(∩_∩)O),然后生成apk安装包,安装后在手机上直接打开后如下:

 

好了,这逼装完了,最后,说那么多不分享源码的都是流氓,源码如下:

 http://pan.baidu.com/s/1c1aJ4UO     aro3

后面有时间学习下node.js,希望有博友有好的博客能推荐下,一起学习,一起分享。