前端越来越吃香的感觉

  年后回来,跟之前和几个同事和朋友聊天,发现有两个.net的和一个php的朋友都转到了前端,真是出乎意料。自从之前的webapp兴起后,前端感觉比后端吃香很多,总结朋友们转的原因,大概就几点

1.易上手,相对其他语言来说,作为后端人员,转到前端,其实已经有了很好的底子和基础了,毕竟以前多少都会和js,jq,html,css打交道

2.前端比后端容易找工作,这里的容易找工作,是指不会被后端的语言限死。就像我朋友说的“做网站不一样需要.net,可以是java,可以是php,但一定离不开js,jq,html,css这些东西”。

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

  其实自己也觉得有一定道理,感觉这两年.net的需求度相对其他的语言都弱了些,前程上搜索发现,.net的职位数是1100+,php是1800+, 前端是2000+,java 是3600+(都是仅限于广州)。所以还是蛮明显的。

  看到了那么多朋友转前端,自己也开始搞点前端的东西,近期刚好有点时间,正好研究下webapp开发, 其实webapp开发说到底就是响应式布局嘛,配合html5+css3就看上去高大上点了。不过作为后端程序猿来说,我还没打算深入去研究html5和css3,反正就是响应式布局,用现成的前端框架来练练手。于是,就想用bootstrap做一个简单的新闻网站来装下逼。

初试

  Boootstrap,来自 Twitter,是目前很受欢迎的前端框架,主要是响应式布局,无论是文档,资料,还是demo等都比较齐全,而且界面好看,提供多样式主题,还有很多开源的插件和模板,上手相对简单,让后端程序屌丝也能做出好看的界面。

文件的下载和相关引用,可参考如下地址,详细明了

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

就是下载后只要依次引入:

bootstrap.min.css

bootstrap-theme.min.css

Jquery.min.js

Bootstrap.min.js

这四个文件就好了,然后 在<head> 之中添加 viewport 元数据标签,用来指定移动设备优先

<meta name="viewport" content="width=device-width, initial-scale=1">

viewport

登陆,注册

使用到的组件 panel(面板),navbar(导航条),from(表单) jNotify(提示框)

表单验证,Bootstrap下的表单本身不带验证功能,不过它的插件很多,表单插件bootstrapvalidator就是其中一款,感觉它封装的验证功能比easyui的还要强大。

下载地址: https://github.com/nghuuphuoc/bootstrapvalidator

使用方式,引入 bootstrapValidator.min.css  和  bootstrapValidator.min.js

这两个文件,然后初始化表单

Bootstrapvalidator下载的代码中有大量的demo,可以根据需要自己选择查看。

提示框,jNotify

jNotify是一款提示消息的插件,不过它并不是Bootstrap专有的插件。它提示界面好看,而已又是属于轻量级的,方法使用也简单,下载地址:http://www.jq22.com/jquery-info1377

使用方式,引入  jNotify.jquery.js  和  jNotify.jquery.css

这两个文件,然后就可以直接使用

jError("错误信息提示");

jSuccess("成功信息提示");

jNotify("一般信息提示");

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

JNotify简单封装

效果如下:

    

新闻列表

使用到的组件 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 &nbsp;
                     <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> 93 &nbsp;
                     <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 2 &nbsp;
                 </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 &nbsp;
             <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> 11 &nbsp;
             <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 56 &nbsp;
         </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> &nbsp;
                 </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>用户昵称:最爱晴天 &nbsp; &nbsp;| &nbsp; &nbsp; 收藏数: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;
             ;
             ;
             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)
                         {
                             //只获取单图新闻
                             )
                             {
                                 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 + ;

             }
             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, , 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(, ),
                 CommentsCount = ,
                 Context = item.Details.Context,
                 Imgsrc = item.SaveDbImgsrc,
                 LikeCount = rd.Next(, ),
                 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,希望有博友有好的博客能推荐下,一起学习,一起分享。

WebApp简单制作(后端也可以装逼啦)的更多相关文章

  1. 关于NGINX的502的装逼打怪之路

    写日志之前先copy一段nginx502的原因,从某网看到如下,然而这并不是重点,最重要还是看博主手敲的东西. 一.NGINX 502错误排查 NGINX 502 Bad Gateway错误是Fast ...

  2. JavaScript 装逼指南

    Summary 本文秉承着 你看不懂是你sb,我写的代码就要牛逼 的理念来介绍一些js的装逼技巧. 下面的技巧,后三个,请谨慎用于团队项目中(主要考虑到可读性的问题),不然,leader 干你没商量. ...

  3. 前端 JSer 装逼手册

    阅读 8143收藏 2352016-7-18 SegmentFault 分享:吉祥物 @ SegmentFault 在装逼成本越来越高的 JS 圈,是时候充值一下了 -- 题记. 作者:kenberk ...

  4. 一行能装逼的JavaScript代码

    一行能装逼的JavaScript代码 2016-06-28 野狗 一行神奇的JS代码,当时我就震 惊了,这不就是传说中的ZB神奇么… … 哈哈. 写本篇文章的缘由是之前看到了一段js代码,如下: (! ...

  5. Centos学习手册——装逼宝典之强制重置密码

    ---恢复内容开始--- Centos学习手册by RuffianFish; 痞子鱼 近日闲的无聊,而最近又在搞Centos决定写个Centos详细的学习手册,以便自己在长时间没摸Centos的情况下 ...

  6. JavaScript装逼指南

    如何写JavaScript才能逼格更高呢?怎样才能组织JavaScript才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在JavaScrip ...

  7. 你会用Python做出装逼的东西吗

    如果我回答:“用Python很牛逼,但不能做出装逼的东西”,那大家来学习“小白的Python入门教程 ”,还有多少意义? 所以,为了让装逼的小船升级为牛逼的巨轮,让大家学完“小白的Python入门教程 ...

  8. Dev-C++之开启装逼效果

    Dev-C++是个不错的C++IDE——在10年前,它是很不错,在现在,它是个以界面丑陋和调试像吃粑粑这两点著称,如下图.

  9. 简单制作 OS X Yosemite 10.10 正式版U盘USB启动安装盘方法教程 (全新安装 Mac 系统)

    原文地址: http://www.iplaysoft.com/osx-yosemite.html 简单制作 Mac OS X Yosemite 正式版 USB 启动盘的方法教程: 其实制作 OS X ...

随机推荐

  1. 求N个数的最大公约数和最小公倍数(转)

    除了分解质因数,还有另一种适用于求几个较小数的最大公约数.最小公倍数的方法 下面是数学证明及算法实现 令[a1,a2,..,an] 表示a1,a2,..,an的最小公倍数,(a1,a2,..,an)表 ...

  2. ElasticSearch第一步-环境配置

    ElasticSearch第一步-环境配置 ElasticSearch第二步-CRUD之Sense ElasticSearch第三步-中文分词 ElasticSearch第四步-查询详解 Elasti ...

  3. MVVM架构~knockoutjs实现简单的购物车

    返回目录 概念相关 购物车相信大家都用过,很方便,可以将多个商品添加到购物车,并且可以修改购买商品的数据,当然为了用户体验好,在修改数据时,你的价格也会出现变化的,这使用JS可以实现,但我认为,代码量 ...

  4. json-jsonConfig使用

    一,setCycleDetectionStrategy 防止自包含 /** * 这里测试如果含有自包含的时候需要CycleDetectionStrategy */ public static void ...

  5. HDU 4873 ZCC Loves Intersection(JAVA、大数、推公式)

    在一个D维空间,只有整点,点的每个维度的值是0~n-1 .现每秒生成D条线段,第i条线段与第i维度的轴平行.问D条线段的相交期望. 生成线段[a1,a2]的方法(假设该线段为第i条,即与第i维度的轴平 ...

  6. C# Dictionary已知value获取对应的key

    1:循环遍历法,分为遍历key-value键值对和遍历所有key两种形式 2:使用Linq查询法 private void GetDictKeyByValue() { Dictionary<in ...

  7. Dos del参数与作用(/f/s/q)

    Dos del参数与作用(/f/s/q) C:\Documents and Settings>del /? 删除一个或数个文件. DEL [/P] [/F] [/S] [/Q] [/A[[:]a ...

  8. poj2395 Out of Hay

    题意就是给你一张无向连通图,试问对于图上所有点对(u,v)从u到v的所有路径中边权最大值的最小值的最大值. 定义f(u,v)表示从u到v所有路径中边权最大值的最小值,对所有点对取其最大. 实际上就是求 ...

  9. Sublime text2用户自定义配置

    [{ "keys": ["ctrl+d"], "command": "run_macro_file", "ar ...

  10. c++对象模型以及内存布局的研究

    先引出问题,看一段代码: #include <iostream> using namespace std; class A { }; class B { public: B() {} ~B ...