年后回来，跟之前和几个同事和朋友聊天，发现有两个.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://hovertree.com/menu/bootstrap/
就是下载后只要依次引入：
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">
使用到的组件 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("一般信息提示");
<div class="panel"> <div class="wrapper-dropdown active navbar navbar-default" id="navbar"> <label style="color: white; padding-left: 8px; font-size: 20px;"><strong>登录</strong></label> <div class="h_Icon"> <a class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <img src="/Content/img/head/nemu.png" /> </a> <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu"> <li><a href="/Home/Index"><i class="glyphicon glyphicon-home"></i> 首页</a></li> <li><a href="/Home/Registere"><i class="glyphicon glyphicon-user"></i>注册</a></li> </ul> </div> </div> <div class="row panel-body"> <form id="loginform"> <div class="form-group"> <input type="text" class="form-control" id="username" name="username" placeholder="用户名"> </div> <div class="form-group"> <input type="password" class="form-control" id="password" name="password" placeholder="密码"> </div> <button type="button" data-loading-text="正在提交" autocomplete="off" id="validateBtn" class="btn btn-info btn-block">登陆</button> </form> </div> </div>
<div class="panel"> <div class="wrapper-dropdown active navbar navbar-default" id="navbar"> <label style="color: white; padding-left: 8px; font-size: 20px;"><strong>注册</strong></label> <div class="h_Icon"> <a class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <img src="/Content/img/head/nemu.png" /> </a> <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu"> <li><a href="/Home/Index"><i class="glyphicon glyphicon-home"></i>首页</a></li> <li><a href="/Home/Login"><i class="glyphicon glyphicon-lock"></i>登录</a></li> </ul> </div> </div> <div class="row panel-body"> <form id="loginform"> <div class="form-group"> <input type="text" class="form-control" name="username" placeholder="用户名"> </div> <div class="form-group"> <input type="text" class="form-control" name="nickName" placeholder="用户昵称"> </div> <div class="form-group"> <input type="password" class="form-control" name="password" placeholder="密码"> </div> <div class="form-group"> <input type="password" class="form-control" name="confirmPassword" placeholder="确认密码"> </div> <button type="button" data-loading-text="正在提交" autocomplete="off" id="validateBtn" class="btn btn-info btn-block">注册</button> </form> </div> </div>
var $btn;
$('#loginform').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名必须在6-30位之间'
},
remote: {
type: 'POST',
url: '/User/CheckUserName',
message: '该用户名已经存在'
},
different: {
field: 'password,confirmPassword',
message: '用户名不能与密码一致'
}
}
},
nickName: {
validators: {
notEmpty: {
message: '用户昵称不能为空'
},
stringLength: {
min: 2,
max: 8,
message: '用户昵称必须在2-8位之间'
},
remote: {
type: 'POST',
url: '/User/CheckNickName',
message: '该用户昵称已经存在'
}
}
},
password:
{
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 8,
max: 20,
message: '密码长度必须在8-20位之间'
},
different: {
field: 'username',
message:
'用户名不能与密码一致'
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: '确认密码不能为空'
},
identical: {
field: 'password',
message:
'两次密码不一致，请检查'
},
different: {
field: 'username',
message:
'用户名不能与密码一致'
}
}
}
}
});
(function ($) { $.extend($, { //成功提示 MsgSuccess: function (msg, func) { jSuccess(msg, { VerticalPosition: 'center', HorizontalPosition: 'center', TimeShown: 1000, onClosed: function () { if (func) func(); } }); }, //出错时的提示 MsgError: function (msg, func) { jError(msg, { VerticalPosition: 'center', HorizontalPosition: 'center', TimeShown: 1000, onClosed: function () { if (func) func(); } }); }, //一般的提示 MsgInfo: function (msg, func) { jNotify(msg, { VerticalPosition: 'center', HorizontalPosition: 'center', TimeShown: 1000, onClosed: function () { if (func) func(); } }); }, //统一处理 返回的json数据格式 DealAjaxData: function (data, funcSuc, funcErr) { //如果是字符串格式的josn，就变为json对象 if (typeof (data) == "string") { try { data = eval("(" + data + ")"); } catch (e) { } } if (!data || data.Code == undefined) { return; } switch (data.Code) { //错误的提示 case 0: $.MsgError(data.Msg, function () { if (funcErr) { funcErr(data); } }); break; //成功的提示 case 1: $.MsgSuccess(data.Msg, function () { if (funcSuc) { funcSuc(data); } }); break; //带跳转的提示 case 2: $.MsgInfo(data.Msg, function () { if (window.top) window.top.location = data.BackUrl; else window.location = data.BackUrl; }); break; } } }); }(jQuery));
效果如下:
使用到的组件 panel(面板),dropdown(下来菜单),Carousel（轮播）glyphicon（图标） 栅格布局
<div class="head"> <div class="wrapper-dropdown active navbar navbar-default" id="navbar"> <label style="color: white; padding-left: 8px; font-size: 20px;"><strong>新闻列表</strong></label> <div class="h_Icon"> <a class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <img src="/Content/img/head/nemu.png" /> </a> <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu"> <li><a href="/Home/Index"><i class="glyphicon glyphicon-home"></i> 首页</a></li> <li><a href="/Home/Login"><i class="glyphicon glyphicon-lock"></i>登录</a></li> <li><a href="/Home/Registere"><i class="glyphicon glyphicon-user"></i>注册</a></li> <li><a href="/Collection/Index"><i class="glyphicon glyphicon-star"></i>我的收藏</a></li> </ul> </div> </div> <nav class="head-bar"> <a class="action" href="jvavscript:;">推荐</a> <a href="/News/NewsList?type=News">新闻</a> <a href="/News/NewsList?type=Sports">体育</a> <a href="/News/NewsList?type=Entertainment">娱乐</a> </nav> </div>
<div class="row fix-bottom"> <div class="col-xs-6"> <a href="/Home/Index"> <img src="/Content/img/Login/home.png" /> </a> </div> <div class="col-xs-6"> <a href="/Collection/Index"> <img src="/Content/img/Login/collect.png" /> </a> </div> </div> <!--返回顶部--> <div class="toTop"> <a href="javascript:void(0)" onclick='$("body").animate({ "scrollTop": "0px" }, 300)'> <img src="/Content/top.png"/> </a> </div>
<!--焦点图start--> <div class="carousel slide" id="NewsCarousel"> <!--Indicators--> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#NewsCarousel"></li> <li data-slide-to="1" data-target="#NewsCarousel"></li> <li data-slide-to="2" data-target="#NewsCarousel"></li> </ol> <!--wrapper for slides--> <div class="carousel-inner"> <div class="item active" id="slide1"> <img src="/Content/img/image.jpg" class="img-responsive center-block" /> <div class="carousel-caption"> <h4>围棋人机大战第二局 李世石再次中盘落败</h4> </div> </div> <div class="item" id="slide2"> <img src="/Content/img/image1.jpg" class="img-responsive center-block" /> <div class="carousel-caption"> <h4>《看客》第491期：梦在迪士尼</h4> </div> </div> <div class="item" id="slide3"> <img src="/Content/img/image2.jpg" class="img-responsive center-block" /> <div class="carousel-caption"> <h4>“动”态两会：消防官兵列队行进</h4> </div> </div> </div> <!--controller--> <a class="left carousel-control" data-slide="prev" href="#NewsCarousel"><span class="icon-prev"></span></a> <a class="right carousel-control" data-slide="next" href="#NewsCarousel"><span class="icon-next"></span></a> </div> <!--焦点图end-->
<div class="context panel panel-default"> <div class="row newsItem" data-url="/News/NewsDetails?newId=24"> <div class="left-context col-sm-2 col-xs-4 "> <img src="/thumbnail/down/BA8J7DG9wangning/BI0GG89900014AED.jpg" class="left-img"> </div> <div class="right-context col-sm-10 col-xs-8"> 长沙市长:望让小学生步行上学 </div> </div> <div class="row"> <div class="col-xs-4"> 2小时前 </div> <div class="col-xs-8 showTip"> <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> 76 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> 93 <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 2 </div> </div> </div>
效果图：
使用到的组件 panel(面板),dropdown(下来菜单),lyphicon（图标） 栅格布局
<div class="panel panel-info" id="newspanel"> <div class="panel-heading article_head"> <strong>长沙市长:望让小学生步行上学</strong> </div> <div class="row article_info"> <small> 2016-03-13 00:59; 北京晨报</small> </div> <div class="article_list panel-body "> <!--IMG#0--> <p>我是内容</p> </div> </div> <div class="row fix-bottom"> <div style="padding: 6px;"> <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> 0 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> 11 <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 56 </div> </div> <!--评论区start--> <h3 class="commentItem"><span class="label label-primary">评论区</span></h3> <div class="panel panel-default commentItem" id="nonecomment"> <div class="row"> <p class="text-center text-muted" style="padding-top: 6px;">此新闻暂无评论，快来评论吧</p> </div> </div> <div id="commentList"> </div> <div class="row text-center"> <label id="loading" class="text-muted"> <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 正在努力加载中... </label> </div> <br /> <br /> <!--评论区end--> <div class="row fix-bottom" id="bottombar"> <div class="row"> <div class="col-xs-3"> <a href="javascript:void(0)" onclick="return addReview(0,this)"> <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true" id="likeCount"></span> <span class="count">76</span> </a> </div> <div class="col-xs-3"> <a href="javascript:void(0)" onclick="return addReview(1,this)"> <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true" id="badCount"></span> <span class="count">93</span> </a> </div> <div class="col-xs-3"> <a href="javascript:void(0)" id="commentBtn"> <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> <span id="commentsCount">2</span> </a> </div> <div class="col-xs-3"> <a href="javascript:void(0)" onclick="return addCollection()"> <span class="glyphicon glyphicon glyphicon-star-empty" aria-hidden="true"></span> </a> </div> </div> </div> <div class="row fix-bottom" id="commentbar"> <form id="commentform"> <input type="hidden" name="newId" value="24" /> <div class="form-group"> <textarea name="context" id="context" class="form-control" rows="4" placeholder="请输入你的评论内容"></textarea> </div> <div style="text-align: right;"> <button class="btn btn-success" data-loading-text="正在提交" autocomplete="off" id="validateBtn"> 提交 </button> </div> </form> </div>
<div class="wrapper-dropdown active navbar navbar-default" id="navbar"> <label style="color: white; padding-left: 8px; font-size: 20px;"><strong>我的收藏</strong></label> <div class="h_Icon"> <a class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <img src="/Content/img/head/nemu.png" /> </a> <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu"> <li><a href="/Home/Index"><i class="glyphicon glyphicon-home"></i> 首页</a></li> </ul> </div> </div> <div class="userpanel"> <div class="row"> <div id="username" class="bg-primary center-block text-center" >QingTT</div> <p> <small>用户昵称:最爱晴天 | 收藏数:4</small> </p> </div> </div> <div id="newsList"> </div> <div class="row text-center"> <label id="loading" class="text-muted"> <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 正在努力加载中... </label> </div> <br /> <br /> <div class="row fix-bottom"> <div class="col-xs-6"> <a href="/Home/Index"> <img src="/Content/img/Login/home.png" /> </a> </div> <div class="col-xs-6"> <a href="/Collection/Index"> <img src="/Content/img/Login/collect.png" /> </a> </div> </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
哈哈，就是这么简单了，写个控制台跑一下，把新闻标题，图片，内容等信息全部拿下来保存到本地，发送给前端显示就好了，于是就有了下面代码：
public class NewsHelper { //获取新闻列表 public static List<NewsItem> GetNews(KeyValuePair<NewTypeEnum, string> newType) { string type = newType.Value; int pageIndex = 0; int pageSize = 10; bool isStart = true; while (isStart) { List<NewsItem> newsInfos = new List<NewsItem>(); string url = string.Format("http://3g.163.com/touch/article/list/{0}/{1}-{2}.html", type, pageIndex * pageSize, pageSize); string result = HttpHelper.Get(url); Console.WriteLine(string.Format("{0} 行位置：{1}", type, pageIndex * pageSize)); if (!string.IsNullOrWhiteSpace(result)) { result = result.Replace("artiList(", "").Trim(')'); if (!string.IsNullOrWhiteSpace(result)) { var jsonObj = JsonConvert.DeserializeObject<dynamic>(result); var newList = jsonObj[type]; foreach (var newItem in newList) { //只获取单图新闻 if (newItem.hasImg > 0) { NewsItem model = new NewsItem() { //新闻标示 Docid = newItem.docid, //缩略图url Imgsrc = newItem.imgsrc, //发布时间 Ptime = newItem.ptime, //标题 Title = newItem.title }; newsInfos.Add(model); DownloadImg(model, type); DownDetails(model, type); } } } else { isStart = false; } } else { isStart = false; } SaveDb(newsInfos, newType.Key); pageIndex = pageIndex + 1; } Console.WriteLine(type + " get end~~~"); return null; } //将新闻保存到数据库 public static void SaveDb(List<NewsItem> newsItems, NewTypeEnum newTypeEnum) { List<NewsInfo> newsInfos = newsItems.Select(p => ConvertNewsInfo(p, newTypeEnum)).ToList(); if (newsInfos.Any()) { using (var db = DbHelp.OpenConnection()) { db.InsertAll(newsInfos); } Console.WriteLine("保存到数据库 {0}", newTypeEnum); } } #region 辅助方法 //图片下载 private static bool DownloadImg(NewsItem item, string type) { var imgUrl = item.Imgsrc; byte[] imgByes = HttpHelper.HttpGetBytes(imgUrl); var path = string.Format("/thumbnail/down/{0}/", type); var uploadPath = GetFilePath(path); if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } string fileName = item.Docid + ".jpg"; //创建一个文件流对象，并初始化 using (FileStream fs = new FileStream(uploadPath + fileName, FileMode.OpenOrCreate)) { //向文件流中写入内容 fs.Write(imgByes, 0, imgByes.Length); } item.SaveDbImgsrc = path + fileName; return true; } //文章下载 private static bool DownDetails(NewsItem item, string type) { string url = string.Format("http://3g.163.com/touch/article/{0}/full.html", item.Docid); string result = HttpHelper.Get(url); if (!string.IsNullOrWhiteSpace(result)) { result = result.Replace("artiContent(", "").Trim(')'); if (!string.IsNullOrWhiteSpace(result)) { var jsonObj = JsonConvert.DeserializeObject<dynamic>(result); var detail = jsonObj[item.Docid]; //新闻内容 item.Details.Context = detail.body; //标题 item.Details.Title = detail.title; //发布时间 item.Details.Ptime = detail.ptime; //来源 item.Details.Source = detail.source; } } return true; } private static string GetFilePath(string file) { string dir = System.Configuration.ConfigurationManager.AppSettings["imgSavePath"]; var filename = Path.Combine(dir, file.TrimStart('~', '/')); return filename; } static Random rd = new Random(); //数据转换 private static NewsInfo ConvertNewsInfo(NewsItem item, NewTypeEnum newTypeEnum) { NewsInfo result = new NewsInfo() { BadCount = rd.Next(0, 100), CommentsCount = 0, Context = item.Details.Context, Imgsrc = item.SaveDbImgsrc, LikeCount = rd.Next(0, 100), NewType = (int)newTypeEnum, Ptime = DateTime.Parse(item.Ptime), Source = item.Details.Source, Title = item.Title }; return result; } #endregion }
用户是最懒的，你让用户在手机上自己输入一个网站的地址来使用你的webapp，用户会打你的。所以对用户来讲，手机上我想的是一安装，然后打开就能用了。那无非就是搞了app，什么功能都不用，内置一个浏览器，一开到就直接在这个app上面跳到你的网站就好了。就像winfrom里面的webBrowser一样。于是百度了一下，android有WebView 这一控件，可以实现这样功能，虽然不懂安卓，不过这个小功能还是简单的，于是百度WebView 的使用，大致过程如下：
先建一个空白的android项目
在AndroidManifest.xml设置访问网络权限：
<uses-permission android:name="android.permission.INTERNET"/>
然后修改MainActivity，如下：
private WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); init(); } private void init(){ webView = (WebView) findViewById(R.id.webView); webView.loadUrl("http://192.168.0.102:1111/"); WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true); webView.setWebViewClient(new WebViewClient(){ @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } }); }
对，就是这么简单（太难的我也不会O(∩_∩)O），然后生成apk安装包，安装后在手机上直接打开后如下：
好了，这逼装完了，最后，说那么多不分享源码的都是流氓，源码如下：
http://pan.baidu.com/s/1c1aJ4UO aro3
后面有时间学习下node.js，希望有博友有好的博客能推荐下，一起学习，一起分享。
联系客服
