原址:点击打开链接

WebApp简单制作(后端也可以装逼啦)

阅读目录

  • 前端越来越吃香的感觉
  • 初试
  • 登陆,注册
  • 新闻列表
  • 新闻详情和收藏页面
  • 造数据
  • 装逼升级
回到顶部

前端越来越吃香的感觉

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

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

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

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

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

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

回到顶部

初试

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

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

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

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

bootstrap.min.css

bootstrap-theme.min.css

Jquery.min.js

Bootstrap.min.js

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

 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("一般信息提示");

 登录页代码
 注册页代码
 表单验证初始化
 JNotify简单封装

效果如下:

    

回到顶部

新闻列表

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

 顶部菜单代码
 尾部菜单代码
 轮播代码
 新闻列表代码

效果图:

回到顶部

新闻详情和收藏页面

使用到的组件 panel(面板),dropdown(下来菜单),lyphicon(图标) 栅格布局

 新闻详情页面代码
 收藏页面代码

效果图:

回到顶部

造数据

前端基本搭建好了,一个简单的新闻浏览页面就出来了,接着就是让后端有数据出来,怎么办呢,自己写一个后台,提供新闻发布功能,然后自己来造数据?不不不,难得搞定了前端,后端就更要装逼点,直接找个网站偷点数据就好了。于是乎浏览了网易新闻,用谷歌查看了它的请求,发现比想象中的简单很多:

网易网页:

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

 View Code

然后修改MainActivity,如下:

 View Code

对,就是这么简单(太难的我也不会O(∩_∩)O),然后生成apk安装包,安装后在手机上直接打开后如下:

好了,这逼装完了,最后,说那么多不分享源码的都是流氓,源码如下:

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

WebApp简单制作相关推荐

  1. WebApp简单制作(后端也可以装逼啦)

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

  2. macos安装盘第三方工具制作_简单制作OSXYosemite10.10正式版U盘USB启动安装盘方法教程(全新安装Mac系统)下载|异次元软件世界...

    伴随着 iMac 5K Retina 和新的 Mac mini 等硬件的发布,苹果终于都推出了 OS X Yosemite 系统正式版了!相信很多人都已经用上.不过对于一些不想升级,而是打算「全新安装 ...

  3. 简单的php引导页面设计,PS简单制作唯美朦胧柔美的渐变APP引导页

    今天小编为大家分享PS简单制作唯美朦胧柔美的渐变APP引导页方法,教程很不错,难度不是很大,推荐到脚本之家,大家快快来学习吧! 此适合和对颜色研究不深,又急需应用的朋友.小编良心保证,再零基础的同学也 ...

  4. html遮罩层动画制作,flash简单制作遮罩动画效果

    flash简单制作遮罩动画效果QQ空间的开机动画大家应该都有,从最初的出现的一点到后面全部出现,如此神奇的效果到底是怎么做的呢,一起来看看吧!遮罩特效: 由于百度只能上传500k以内的照片,所以效果图 ...

  5. qt登录界面简单制作,是真的保姆级别了!!!

    qt登录界面简单制作,是真的保姆级别了!!! 第二周工程创新实践:创建一个窗体,设计用户登录的界面(含有用户名.密码),并实现用户登录的功能,要求用户提交的登录按钮时能获取界面中的用户名.密码数据并与 ...

  6. 电子脑PHP动画制作,PS简单制作一个动态的字体动画

    这篇教程是向PHP中文网的朋友分享PS简单制作一个动态的字体动画方法,教程制作出来的字体动画非常漂亮,难度不是很大,来看看吧 动态的文字比静态的文字更加吸引人的目光.如果在平时的海报中,在平时的促销活 ...

  7. matlab车轮滚动动画,Fireworks动画教程:简单制作轮子滚动动画效果

    本教程是向大家介绍利用Fireworks简单制作轮子滚动动画效果,方法很简单,主要想通过这一实例向大家介绍fw mx如何让我们的web design变得更easy,希望大家通过本篇教程能有收获! 一直 ...

  8. 超简单制作多系统启动U盘教程

    超简单制作多系统启动U盘教程 文章目录 超简单制作多系统启动U盘教程 前言 基本配置 配置PE系统 配置其他操作系统 前言 ​ 这两天心血来潮,本来想用Win to go做一个windows便携系统, ...

  9. php 图片生成封面,用ps简单制作一张漂亮的封面

    Photoshop主要处理以像素所构成的数字图像.使用其众多的编修与绘图工具,可以有效地进行图片编辑工作.ps有很多功能,在图像,图形,文字,视频,出版等各方面都有涉及.通过以上我们可以得知ps是一个 ...

最新文章

  1. 基础搭建Hadoop大数据处理-编程
  2. MOSS推荐之1-WSS V3服务器架构
  3. P2575 高手过招
  4. 关键词热度分析工具_阿里国际站外贸独立站关键词的收集
  5. 腾讯地图 添加事件和移除事件
  6. Mac : PS1变量不生效了
  7. 网管必杀技之VLAN的网络管理
  8. 开关造成的毛刺_干冰清洗机模具清洗机干冰去毛刺机注意事项
  9. Java判断奇数偶数-高效率
  10. Win10使用sh执行python脚本报错:Permission denied
  11. 数值分析期末复习(解线性和非线性方程组)
  12. 2-2 nginx整体结构
  13. clonezilla(clonezilla备份系统)
  14. 虚幻4引擎开发的手游_虚幻4引擎开发 《神佑》手游首次公开
  15. 新浪微博营销的方式与技巧都有哪些呢?
  16. 基于python+openCV的中值滤波
  17. 基于java的量化交易软件,用户可自行编写交易策略,用于期货、股票、外汇、炒币等多种交易场景,前端采用node14 + vue2
  18. 画【Python折线图】的一百个学习报告(三、设置全局 Label 颜色)
  19. python实现骚操作,表白神技:整个朋友圈都是爱你的样子
  20. 《Norwegain Wood》—— The Beatles

热门文章

  1. Codechef June Challenge 2020 简要题解
  2. 固件avr usb驱动程序_在AVR固件上使用Z3定理
  3. ad18放置标尺(测量)
  4. 三星程序员晒源码泄露机密
  5. Linux查看所有子文件夹及文件的数量
  6. java中isprime_java:19:找不到符号 符号:方法isPrime(int) 位置:类ziji_9
  7. Mars 是什么、能做什么、如何做的——记 Mars 在 PyCon China 2018 上的分享...
  8. matlab 混沌分叉图,如何做出poincare 图或混沌分叉图
  9. 像素工厂如何显示服务器列表,萌新如何快速解锁像素工厂炮台科技
  10. 一小时搞定计算机网络面试