WebApp简单制作
原址:点击打开链接
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 元数据标签,用来指定移动设备优先
登陆,注册
使用到的组件 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("一般信息提示");
效果如下:
新闻列表
使用到的组件 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设置访问网络权限:
然后修改MainActivity,如下:
对,就是这么简单(太难的我也不会O(∩_∩)O),然后生成apk安装包,安装后在手机上直接打开后如下:
好了,这逼装完了,最后,说那么多不分享源码的都是流氓,源码如下:
http://pan.baidu.com/s/1c1aJ4UO aro3
WebApp简单制作相关推荐
- WebApp简单制作(后端也可以装逼啦)
前端越来越吃香的感觉 年后回来,跟之前和几个同事和朋友聊天,发现有两个.net的和一个php的朋友都转到了前端,真是出乎意料.自从之前的webapp兴起后,前端感觉比后端吃香很多,总结朋友们转的原因, ...
- macos安装盘第三方工具制作_简单制作OSXYosemite10.10正式版U盘USB启动安装盘方法教程(全新安装Mac系统)下载|异次元软件世界...
伴随着 iMac 5K Retina 和新的 Mac mini 等硬件的发布,苹果终于都推出了 OS X Yosemite 系统正式版了!相信很多人都已经用上.不过对于一些不想升级,而是打算「全新安装 ...
- 简单的php引导页面设计,PS简单制作唯美朦胧柔美的渐变APP引导页
今天小编为大家分享PS简单制作唯美朦胧柔美的渐变APP引导页方法,教程很不错,难度不是很大,推荐到脚本之家,大家快快来学习吧! 此适合和对颜色研究不深,又急需应用的朋友.小编良心保证,再零基础的同学也 ...
- html遮罩层动画制作,flash简单制作遮罩动画效果
flash简单制作遮罩动画效果QQ空间的开机动画大家应该都有,从最初的出现的一点到后面全部出现,如此神奇的效果到底是怎么做的呢,一起来看看吧!遮罩特效: 由于百度只能上传500k以内的照片,所以效果图 ...
- qt登录界面简单制作,是真的保姆级别了!!!
qt登录界面简单制作,是真的保姆级别了!!! 第二周工程创新实践:创建一个窗体,设计用户登录的界面(含有用户名.密码),并实现用户登录的功能,要求用户提交的登录按钮时能获取界面中的用户名.密码数据并与 ...
- 电子脑PHP动画制作,PS简单制作一个动态的字体动画
这篇教程是向PHP中文网的朋友分享PS简单制作一个动态的字体动画方法,教程制作出来的字体动画非常漂亮,难度不是很大,来看看吧 动态的文字比静态的文字更加吸引人的目光.如果在平时的海报中,在平时的促销活 ...
- matlab车轮滚动动画,Fireworks动画教程:简单制作轮子滚动动画效果
本教程是向大家介绍利用Fireworks简单制作轮子滚动动画效果,方法很简单,主要想通过这一实例向大家介绍fw mx如何让我们的web design变得更easy,希望大家通过本篇教程能有收获! 一直 ...
- 超简单制作多系统启动U盘教程
超简单制作多系统启动U盘教程 文章目录 超简单制作多系统启动U盘教程 前言 基本配置 配置PE系统 配置其他操作系统 前言 这两天心血来潮,本来想用Win to go做一个windows便携系统, ...
- php 图片生成封面,用ps简单制作一张漂亮的封面
Photoshop主要处理以像素所构成的数字图像.使用其众多的编修与绘图工具,可以有效地进行图片编辑工作.ps有很多功能,在图像,图形,文字,视频,出版等各方面都有涉及.通过以上我们可以得知ps是一个 ...
最新文章
- 基础搭建Hadoop大数据处理-编程
- MOSS推荐之1-WSS V3服务器架构
- P2575 高手过招
- 关键词热度分析工具_阿里国际站外贸独立站关键词的收集
- 腾讯地图 添加事件和移除事件
- Mac : PS1变量不生效了
- 网管必杀技之VLAN的网络管理
- 开关造成的毛刺_干冰清洗机模具清洗机干冰去毛刺机注意事项
- Java判断奇数偶数-高效率
- Win10使用sh执行python脚本报错:Permission denied
- 数值分析期末复习(解线性和非线性方程组)
- 2-2 nginx整体结构
- clonezilla(clonezilla备份系统)
- 虚幻4引擎开发的手游_虚幻4引擎开发 《神佑》手游首次公开
- 新浪微博营销的方式与技巧都有哪些呢?
- 基于python+openCV的中值滤波
- 基于java的量化交易软件,用户可自行编写交易策略,用于期货、股票、外汇、炒币等多种交易场景,前端采用node14 + vue2
- 画【Python折线图】的一百个学习报告(三、设置全局 Label 颜色)
- python实现骚操作,表白神技:整个朋友圈都是爱你的样子
- 《Norwegain Wood》—— The Beatles
热门文章
- Codechef June Challenge 2020 简要题解
- 固件avr usb驱动程序_在AVR固件上使用Z3定理
- ad18放置标尺(测量)
- 三星程序员晒源码泄露机密
- Linux查看所有子文件夹及文件的数量
- java中isprime_java:19:找不到符号 符号:方法isPrime(int) 位置:类ziji_9
- Mars 是什么、能做什么、如何做的——记 Mars 在 PyCon China 2018 上的分享...
- matlab 混沌分叉图,如何做出poincare 图或混沌分叉图
- 像素工厂如何显示服务器列表,萌新如何快速解锁像素工厂炮台科技
- 一小时搞定计算机网络面试