神刀安全网

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="/Content/img/head/nemu.png" />  7             </a>  8             <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu">  9                 <li><a href="/Home/Index"><i class="glyphicon glyphicon-home"></i> 首页</a></li> 10                 <li><a href="/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="/Content/img/head/nemu.png" />  7             </a>  8             <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu">  9                 <li><a href="/Home/Index"><i class="glyphicon glyphicon-home"></i>首页</a></li> 10                 <li><a href="/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简单封装

效果如下:

WebApp简单制作(后端也可以装逼啦) WebApp简单制作(后端也可以装逼啦)

新闻列表

使用到的组件 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="/Content/img/head/nemu.png" />  7             </a>  8             <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu">  9                 <li><a href="/Home/Index"><i class="glyphicon glyphicon-home"></i> 首页</a></li> 10                 <li><a href="/Home/Login"><i class="glyphicon glyphicon-lock"></i>登录</a></li> 11                 <li><a href="/Home/Registere"><i class="glyphicon glyphicon-user"></i>注册</a></li> 12                 <li><a href="/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="/News/NewsList?type=News">新闻</a> 20                     <a href="/News/NewsList?type=Sports">体育</a> 21                     <a href="/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="/Home/Index">  4             <img src="/Content/img/Login/home.png" />  5         </a>  6     </div>  7     <div class="col-xs-6">  8         <a href="/Collection/Index">  9             <img src="/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="/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="/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="/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="/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="/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   16                     <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> 93   17                     <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 2   18                 </div> 19             </div> 20         </div>  新闻列表代码

效果图:

WebApp简单制作(后端也可以装逼啦)

新闻详情和收藏页面

使用到的组件 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   16             <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> 11   17             <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 56   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>   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="/Content/img/head/nemu.png" />  6         </a>  7         <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu">  8             <li><a href="/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>用户昵称:最爱晴天    |     收藏数: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="/Home/Index"> 35             <img src="/Content/img/Login/home.png" /> 36         </a> 37     </div> 38     <div class="col-xs-6"> 39         <a href="/Collection/Index"> 40             <img src="/Content/img/Login/collect.png" /> 41         </a> 42     </div> 43 </div>  收藏页面代码

效果图:

WebApp简单制作(后端也可以装逼啦) WebApp简单制作(后端也可以装逼啦) WebApp简单制作(后端也可以装逼啦) WebApp简单制作(后端也可以装逼啦)

造数据

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

网易网页:

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.Title 152  153             }; 154             return result; 155         } 156         #endregion 157     }  获取新闻帮助类

装逼升级

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

先建一个空白的android项目

在AndroidManifest.xml设置访问网络权限:

  <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            @Override 18          public boolean shouldOverrideUrlLoading(WebView view, String url) { 19              view.loadUrl(url); 20             return true; 21         } 22        }); 23     }  View Code

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

WebApp简单制作(后端也可以装逼啦)

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

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

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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » WebApp简单制作(后端也可以装逼啦)

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮