泉州网页设计培训-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 元数据标签,用来指定移动设备优先

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

 哈哈,就是这么简单了,写个控制台跑一下,把新闻标题,图片,内容等信息全部拿下来保存到本地,发送给前端显示就好了,于是就有了下面代码:

获取新闻帮助类

装逼升级

用户是最懒的,你让用户在手机上自己输入一个网站的地址来使用你的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

发表评论

电子邮件地址不会被公开。 必填项已用*标注