WebApp簡單製做（後端也能夠裝逼啦）

時間 2019-11-20

標籤 webapp 簡單製做後端能夠欄目無線简体版

原文原文鏈接

前端愈來愈吃香的感受

　　年後回來，跟以前和幾個同事和朋友聊天，發現有兩個.net的和一個php的朋友都轉到了前端，真是出乎意料。自從以前的webapp興起後，前端感受比後端吃香不少，總結朋友們轉的緣由，大概就幾點javascript

1.易上手，相對其餘語言來講，做爲後端人員，轉到前端，其實已經有了很好的底子和基礎了，畢竟之前多少都會和js,jq,html,css打交道php

2.前端比後端容易找工做，這裏的容易找工做，是指不會被後端的語言限死。就像我朋友說的「作網站不同須要.net，能夠是java，能夠是php，但必定離不開js,jq,html,css這些東西」。css

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

　　其實本身也以爲有必定道理，感受這兩年.net的需求度相對其餘的語言都弱了些，前程上搜索發現，.net的職位數是1100+，php是1800+, 前端是2000+，java 是3600+（都是僅限於廣州）。因此仍是蠻明顯的。前端

　　看到了那麼多朋友轉前端，本身也開始搞點前端的東西，近期恰好有點時間，正好研究下webapp開發，其實webapp開發說到底就是響應式佈局嘛，配合html5+css3就看上去高大上點了。不過做爲後端程序猿來講，我還沒打算深刻去研究html5和css3，反正就是響應式佈局，用現成的前端框架來練練手。因而，就想用bootstrap作一個簡單的新聞網站來裝下逼。html5

初試

　　Boootstrap，來自 Twitter，是目前很受歡迎的前端框架，主要是響應式佈局，不管是文檔，資料，仍是demo等都比較齊全，並且界面好看，提供多樣式主題，還有不少開源的插件和模板，上手相對簡單，讓後端程序屌絲也能作出好看的界面。java

文件的下載和相關引用，可參考以下地址，詳細明瞭node

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

就是下載後只要依次引入：android

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     }