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简单封装

效果如下:

新闻列表

使用到的组件 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 &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="/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>用户昵称:最爱晴天 &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="/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>

收藏页面代码

效果图：

造数据

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

网易网页：

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安装包，安装后在手机上直接打开后如下：

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

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

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

posted @ 2016-03-13 04:04 最爱晴天阅读(70647) 评论(39) 编辑收藏举报

刷新页面返回顶部

最爱晴天

学无止境