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 元数据标签,用来指定移动装备优先

图片 1图片 2

<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(“一般消息指示”);

图片 3图片 4

 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>

登录页代码

图片 5图片 6

 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>

登记页代码

图片 7图片 8

 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         });

申单验证先导化

图片 9图片 10

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

效能如下:

图片 11 
  图片 12

 音信列表

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

图片 13图片 14

 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>

顶部菜单代码

图片 15图片 16

 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>

尾部菜单代码

图片 17图片 18

 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"></a>
34     <a class="right carousel-control" data-slide="next" href="#NewsCarousel"></a>
35 </div>
36 <!--焦点图end-->

轮播代码

图片 19图片 20

 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                      76 &nbsp;
16                      93 &nbsp;
17                      2 &nbsp;
18                 </div>
19             </div>
20         </div>

资讯列表代码

效果图:

图片 21

音信详情及收藏页面

 使用及之零部件 panel(面板),dropdown(下来菜单),lyphicon(图标) 栅格布局  

图片 22图片 23

 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              0 &nbsp;
16              11 &nbsp;
17              56 &nbsp;
18         </div>
19     </div>
20     <!--评论区start-->
21     <h3 class="commentItem">评论区</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              正在努力加载中...
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                      76
43                 </a>
44             </div>
45             <div class="col-xs-3">
46                 <a href="javascript:void(0)" onclick="return addReview(1,this)">
47                      93
48                 </a>
49             </div>
50             <div class="col-xs-3">
51                 <a href="javascript:void(0)" id="commentBtn">
52                      2
53                 </a>
54             </div>
55             <div class="col-xs-3">
56                 <a href="javascript:void(0)" onclick="return addCollection()">
57                      &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>

资讯详情页面代码

图片 24图片 25

 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          正在努力加载中...
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>

收藏页面代码

效果图:

图片 26图片 27图片 28图片 29

 造数据

前者基本搭建好了,一个简约的情报浏览页面就出来了,接着就是让后端有数据出来,怎么惩罚也,自己写一个后台,提供音讯宣布效率,然后自己来之数据?不不不,难得搞定了前者,后端就重新要作逼点,直接搜索个网站偷点数据就是好了。于是乎浏览了虎扑音信,用谷歌查看了其的要,发现较想象着之略过剩:

 果壳网网页:

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

 哈哈,就是如此简单了,写单操高跑一下,把信息标题,图片,内容分外信息全以下来保存及本地,发送给前端展现就哼了,于是就闹了脚代码:

图片 30图片 31

  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设置访问网络权限:

图片 32图片 33

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

View Code

接下来修改MainActivity,如下:

图片 34图片 35

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

图片 36

 

吓了,这逼装了了,最终,说那么多不分开享源码的都是流氓,源码如下:

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

后边有时光学下node.js,希望来博友有好之博客能引进生,一起学学,一起享受。 

 

相关文章