前端越来越吃香的感觉
年后回来,跟之前和几个同事和朋友聊天,发现有两个.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 元数据标签,用来指定移动设备优先
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<meta name="viewport" content="width=device-width, initial-scale=1">
登陆,注册
使用到的组件 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("一般信息提示");
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 });
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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));
效果如下:
新闻列表
使用到的组件 panel(面板),dropdown(下来菜单),Carousel(轮播)glyphicon(图标) 栅格布局
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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-->
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
效果图:
新闻详情和收藏页面
使用到的组件 panel(面板),dropdown(下来菜单),lyphicon(图标) 栅格布局
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
效果图:
造数据
前端基本搭建好了,一个简单的新闻浏览页面就出来了,接着就是让后端有数据出来,怎么办呢,自己写一个后台,提供新闻发布功能,然后自己来造数据?不不不,难得搞定了前端,后端就更要装逼点,直接找个网站偷点数据就好了。于是乎浏览了网易新闻,用谷歌查看了它的请求,发现比想象中的简单很多:
网易网页:
新闻列表的获取地址(地址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
哈哈,就是这么简单了,写个控制台跑一下,把新闻标题,图片,内容等信息全部拿下来保存到本地,发送给前端显示就好了,于是就有了下面代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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设置访问网络权限:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<uses-permission android:name="android.permission.INTERNET"/>
然后修改MainActivity,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 }
对,就是这么简单(太难的我也不会O(∩_∩)O),然后生成apk安装包,安装后在手机上直接打开后如下:
好了,这逼装完了,最后,说那么多不分享源码的都是流氓,源码如下:
http://pan.baidu.com/s/1c1aJ4UO aro3
后面有时间学习下node.js,希望有博友有好的博客能推荐下,一起学习,一起分享。