webapp_webapp框架 - CSDN
  • webapp开发综合案例

    2020-07-28 23:32:53
    1.了解Web工程概念及与传统软件工程的区别 2.理解WebApp的概念、特点和开发过程 3.掌握WebApp的分析、设计和测试方法 4.掌握WebApp综合开发方法及课程设计过程
  • webapp是什么?

    千次阅读 2018-07-03 14:49:12
    Webapp网络应用程序WebApp是指基于Web的系统和应用,其作用是向广大的最终用户发布一组复杂的内容和功能。从一个简单的帮助消费者计算汽车租借费用的网页,到为商业人员和度假者提供全套旅游服务的大型复杂的WEB站点...
    Webapp

    网络应用程序

    WebApp是指基于Web的系统应用,其作用是向广大的最终用户发布一组复杂的内容和功能。
    从一个简单的帮助消费者计算汽车租借费用的网页,到为商业人员和度假者提供全套旅游服务的大型复杂的WEB站点,都是WebApp。它包括一些完整的WEB站点,WEB站点的专门功能以及在Internet、Intranet或ExtraNet上的信息处理应用。
    webapp 框架是一种简单的与WSGI兼容的网络应用程序框架,可以与 App Engine 配合使用。不必为了使用 App Engine 而使用 webapp:网络服务器支持任何使用 CGI 的 Python应用程序。webapp 提供一种简单的方式来开始为 App Engine 开发应用程序。
    响应式网页设计的大部分技术,是可用在WebApp开发中的。
    移动端Web App和WAP有什么不同?最直接的区别就是功能层面。WAP更侧重使用网页技术在移动端做展示,包括文字、媒体文件等。而Web App更侧重“功能”,是使用网页技术实现的App。总的来说,Web App就是运行于网络和标准浏览器上,基于网页技术开发实现特定功能的应用。


            

    区分

    撇开各种不同的Web技术不谈,弄清楚Web Apps定义最困难的是如何从各种纷繁复杂的Web App中提取出他们的共同特征。当用户登录一个网站(如Pixlr),大家很容易理解这是在访问一个Web App。但是对那些仅仅提供基础服务(如电话查询或是信息查询)的网站,区分用户是否在访问Web App就变得相当困难了。
    其实这些服务大多都是Web App。我常常这样问自己“这个程序是否完成了某个任务?”。即便它只完成了某个非常小的任务,那么它也是一个Web App。Google的搜索引擎就是一个Web App,它本质上和电话查询服务没有什么区别。
    这样说来,也并非所有的网站都是Web App。如果这个网站并没有执行任何任务,那么它就并不是Web App。

    展开全文
  • WebApp简单制作

    千次阅读 2016-05-03 11:00:35
    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

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

    复制代码
      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


    展开全文
  • Web app 入门(一)

    千次阅读 2018-11-14 17:24:25
    这一篇博客记录的是我第一次接触Webapp的详细过程。关于环境配置我就不细说了,网上很多配置教程。 软件及环境:jdk1.7及以上,MyEclipse或Eclipse(本人第一次学习安装的是MyEclipse,如果你要使用Eclipse还需要...

    这一篇博客记录的是我第一次接触Webapp的详细过程。关于环境配置我就不细说了,网上很多配置教程。

    软件及环境:jdk1.7及以上,MyEclipse或Eclipse(本人第一次学习安装的是MyEclipse,如果你要使用Eclipse还需要安装tomcat,我用的MyEclipse2015,它在后面学习Springmvc时会有jdk版本问题,建议换高版本)

    过程:

    1. 安装MyEclipse
    2. 新建WebProject

                 File->new->WebProject

                 

                 填写项目名称,然后next,next

                 

                 勾选Generate web.xml deployment descriptor,然后next,finish

                  

         3.将工程添加进服务器tomcat

                 Servers,右键->add Deployment

                 

                 在project处导入刚才新建的工程,finish

                 

                 右键服务器,选择Debug Server,也可以是run server

                 

                 

                 打开浏览器,输入http://localhost:8080/homew1/

                 

                 表示已经建好一个Web工程

       4.Servlet配置

                 在工程的src包处右键,src->new->Servlet

                 

                 包名Package可以自己起一个,next

                 

                 Servlet/JSP Mapping URL处可以简写成/MyServlet,然后finish

                 

                 建好后是

                 

                然后右键tomcat服务器下的工程,选择redeploy/reload application刷新  

                

                在浏览器输入http://localhost:8080/homew1/MyServlet

                

                 这样就新建好了一个servlet

       5.新建网页页面

                 在工程WebRoot处右键,WebRoot->new->JSP

                  

                 填好名字,然后finish

                 

                 右键建好的login.jsp,选择openwith->MyEclipse JSP Editor (注,这样打开快,也可以选择它默认打开方式)

                 

                 将jsp里第一行的编码方式pageEncoding改为utf-8  (支持中文)

                 

                 然后在<body> </body>里编写网页内容

                 

                注意,form里的action里的servlet名字要对应相应的Servlet,可以在WebRoot下的Web-INF下的web.xml里查看

                网页写好后记得刷新tomcat里的工程,可以去浏览器看效果http://localhost:8080/homew1/login.jsp  

                

                再新建一个与此页面相关的Servlet,可以用来接收信息

                

                打开loginServlet,改写doGet函数

                

               进入http://localhost:8080/homew1/login.jsp,输入信息,提交后就可以看到输入的信息了。

                        

              如果你没有在对应的jsp表单中声明method,则默认调用doGet方法,若要用doPost,则

               

               (注:post提交时不容易暴露信息)

                

     

    代码参考:https://github.com/HYDmonster/WebProject-day01

     

    展开全文
  • HTML5+JQuery Mobile 移动端WebApp案例

    热门讨论 2020-07-24 23:31:06
    此实例是做HTML5做一个WebApp的demo,案例中使用了一个金融系统原有部分功能转化成移动端页面的例子,案例只用来传播学习。
  • Web发展简史((webapp+Java原生)移动端开发 )+web网站)

    千次阅读 多人点赞 2019-04-01 20:04:25
    ((webapp+Java原生)移动端开发(微信小程序,公众号,头条app))+web网站) Web发展简史 1:在那时,Web开发还比较简单,开发者经常会去操作web服务器(主要还是他自己的机器),并且他会写一些HTML页面放到服务器...

     

    Web发展简史--------->((webapp+Java原生)移动端开发(微信小程序,公众号,头条app))+web网站)

    Web发展简史

    1:在那时,Web开发还比较简单,开发者经常会去操作web服务器(主要还是他自己的机器),并且他会写一些HTML页面放到服务器指定的文件夹(/www)下。这些HTML页面,就在浏览器请求页面时使用。(当时只能获取HTML,静态页面)

    2:问题就出现了,你只能获取到静态内容。倘若你想让访问者看到有多少其他访问者访问了这个网站呢(还记得那些统计流量的旋转图片吗?!),或者倘若你想让访问者去填写这样一个表单,包含有姓名和邮件地址呢?于此就转向了CGI和Perl脚本,在web服务器端运行一段短小的代码,并能与文件系统或者数据库进行交互(可以交互啦!提交个表单,查看个信息)

    3:当时组织CGI/Perl这样的脚本代码太混乱了。CGI伸缩性不是太好(经常是为每个请求分配一个新的进程),也不太安全(直接使用文件系统或者环境变量),同时也没提供一种结构化的方式去构造动态应用程序。几年来一直很困惑,直到大约2005年左右,出现了Java Server Pages(JSP),微软的ASP,以及PHP!我喜欢把当时的参考架构比作成IIS和ASP.NET,你可以用Visual Studio快速构建一个可伸缩并且安全的应用程序。(因为cgi交互不怎么好,所以在服务器上开始写(jsp,asp,php动态语言代码了进行帮助查找数据,查找图片,动态语言效率更高))

     

    4:直到当时,web服务器多半会返回整个页面或者文档,但AJAX(2005)的出现,让事情变得很有意思。AJAX允许客户端的JavaScript脚本为局部页面提供请求服务,然后可以在无需回到服务器情况下动态刷新部分页面,也就是更新浏览器中的document对象,通常称作DOM,或者文档对象模型。(javascript的出现让用户更加快速的更改,修改页面内容,而不用再去访问WEB服务器去请求,返回HTML修改页面啦!javascript访问更快)

    虽然从服务器端返回的仍然是HTML,但浏览器上的代码能把这HTML片段内嵌到当前页面中。也就是说web应用的响应可以更快,这时我们真正用web应用取代了web页面。谷歌的GMail和谷歌地图都是当时AJAX的杀手级产品。随后用AJAX局部刷新就如雨后春笋般出现。

    5:在随后的几年时间里,AJAX成为了焦点,但在服务器端仍然使用着旧有的技术。大概在2007年,37signals公司公开其成员–Ruby on Rails。那个基于Ruby on Rails 5分钟构建博客的演示完全征服了全世界的开发者。一夜之间,所以谈论的焦点都是关于Rails!Rails的不同之处在于使用规定的方式去设计你的web应用程序,运用一种已经广泛在桌面应用开发,但未被搬到web应用上的开发模式。这种模式就叫做模式(数据)-视图(模板)-控制器(业务逻辑)。Rails强调,“这事就该这么做”,并且通过许多插件让构建web应用再一次更加健全。(这时候后台框架打开了新的大门,后端框架先被提出来的,现在的前端趋势也开始要有MVC的前端框架啦!WEB前端全栈开发,node.js直接访问数据库,mongo数据库,)

     

    6:在2007到2010年期间,涌现了3种开发潮流:

    第一个是智能手机和移动应用潮流。通常情况下,许多应用程序同时有web和移动应用两种版本。尽管如此,服务端仍然返回的是HTML页面,而不是其它移动应用可以识别。因此,你需要返回的是结构化数据来取代HTML。

    第二个开发潮流是jQuery。这是一个非常流行的JavaScript库,能够很容易构建动态、美妙的web应用,甚至是AJAX!

    第三个潮流是Node.js的发布。这是第一次能让你用JavaScript开发高性能的服务端程序,进而可能结束“客户端开发者”要知道HTML/JavaScript,“服务端开发者”要知道.NET/C#/Ruby这样的噩梦。(json是服务器向浏览器返回的一种数据结构,浏览器解析json提取里面的key-value键值对,服务器端(jsp,php)可以把数据库里面的数据封装到json中,发给浏览器)

    7:尽管这是一个不错的架构,但我们可以重用一些在客户端的收获去简化那些曾经发生在像客户端意大利面似的jQuery代码。和Rails精神类似,我们需要用一种规定的方式从服务端获取到数据,再对客户端的HTML页面进行包装。因此,在接下来的2年时间里,业界出现了许多用于简化客户端开发的框架,诸如Backbone,Ember,Derby和Meteor,当然也包括我的最爱,AngularJS,vlue.js。(这些东西访问数据库,把数据从服务器取出到浏览器,浏览器MVC再去解析数据)

    8:因此,这就是我们看到的今天,而我后面要讲到的参考架构是这样的,mongodb作为数据库服务器,node/express作为web应用服务器,客户端使用AngularJS,同时也使用Bootstrap样式风格。我发现这种架构允许我能够快速构建web服务以及基于AngularJS的客户端接口,甚至和其它的服务,如PhoneGap或者其它原生移动开发工具一样,进行移动应用的开发。(这种开发模式越来越可以快速开发啦!应用到webapp开发,这些前端一般用于业务型强,主要用于给用户展现内容和数据,业务型比较强的。移动端开发还有Java原生开发的,主要用于逻辑性强的。Java安卓原生开发(处理密码处理,过滤什么的)逻辑性比较强的应用。现在APP可以使用混合式开发(webapp(html+css+javascript(mui移动端js框架)+node.js+mongo)+原生Java开发),现在网站开发用的还是html+css+javascript(包括js框架)前端+后端(ssh+ssm+springboot框架))。这就是现在主流的开发模式。

    https://blog.csdn.net/zzzkk2009/article/details/9849431   经典的安卓移动端开发(web+Java原生开发)web系统发展历史

    https://blog.csdn.net/z742182637/article/details/52055970   也是web系统开发历史(不怎么清晰,不是太好)

    https://blog.csdn.net/youngyouth/article/details/84755278#web_5   web服务器架构的发展历史
     

     

     

     

    1. 静态页面时代

    大学时候,上机还得换卡穿拖鞋,Novell的网络是很神奇的,然而更神奇的是通讯原理老师半神秘的讲他上 Internet,“Cernet(教育网)有条64K的出口,半年前还很快,现在已经比较卡了”。就这样,我们用Netscape指向Yahoo。那是一个HTML加图片的世界,充斥着各种花哨闪耀的字体和鞠躬的小人,蓝色连接点击后会奇幻的变色。

    我们开始用不熟练的HTML和简陋的设计来设计网页,并且知道这边有个浏览器,那边有个叫WebServer的东西,但管理Sun工作站的机房老师总是盯的很紧,不会让你动系统半分。听说有个叫Linux的神奇东西,好吧我想尝试,可是我只有一台攒的电脑,以及若干张5寸3寸的软盘。我至今感谢一位师兄,他帮我下载并切分了一个版本的Mandrake,就这样室友看到非常奇怪的一幕,我奔波在机房宿舍之间,仔细计算容量来拷贝,就这样在假期里我第一次搭建了Apache。

     

    2. CGI时代

    很快页面上流行一个叫做计数器的东西,免费的收费的建站网站都把它当作卖点,“立体超炫变色时尚计数器”,很快我们看到几乎每个页面都有了一个点击量在88888的酷装置,只是无论怎么点都不会变化。而校园里张贴着令人眼红的广告,“征人写CGI程序,一支500元!“。

    慢慢的,知道了CGI是利用进程间输入输出通信,和WebServer进行通信,从而可以写程序来控制页面输出的内容。但在当时会给硬盘分区就在中关村被看成电脑高手的年代,实在是会者寥寥。即便到了今天,我依然对Perl敬而远之。一些前辈用C写出更高级的CGI应用,比如WebMail,挖到第一桶金,成为今天互联网的先驱。

     

    3. PHP露出锋芒

    说实话,我认为PHP是最受益于互联网浪潮的语言,在合适的时间和好伙伴Mysql一起出现。利用Apache的模块mod-php,将php作为web服务器的一部分运行,效率和维护性都达到很好的提升。脚本语言成为互联网前端开发主力一直到今天。PHP和大哥Perl,以及兄弟Python,Ruby一起盘据在编程语言排行榜5-10名位置。

    同样的Mysql也是时代的娇子,它快速灵活易用成为网站数据库的首选,但很长时间里,Mysql被其他数据库诟病,别说Oracle等高富帅,即便是同为开源的Postgres社区里,也会有这样的声音,“不支持事务也叫数据库?”。没关系,开源社区很快为其加入各种引擎,如今Mysql绝对是装机总量第一的数据库。

     

    4. J2EE

    Java时代来临,一杯咖啡,一个可跳动的小精灵牵动了所有的大型软件公司。没错是所有,包括微软,Sun公司一时星光无限,所有的开发人员都在谈Java。人们对其桌面表现失望进而质疑时,J2EE及时出现了,Servlet+JSP快速成为Web开发的好用技术。能够跨平台,独立解包使用的Web服务器,挂接任意数据库的JDBC接口,一时世界变得很美好。

    微软的ASP也出现了,一开始也是脚本解释,和PHP等技术类似。很快微软的C#和dotNET战略出台,ASP也升级为ASP.Net,从此dotNET和J2EE是竞争者,更是一对站在相同站壕的朋友,互相学习和抄袭对方的技术和设计,直到今天。

     

    5. Web层框架百花齐放

    Servlet是一个优异的Web技术规范,但面对丛多的开发需求,还是不能很好的覆盖。Struts框架很快成为主流,今天我们依然看到很多.do后缀的页面。Struts主要做了三件事,一是对请求Url进行很好的梳理,通过Command模式把请求指配到Action对象上,并可以用同期出现的Ioc框架进行注入。二是梳理出若干有用好用的Intecepter,并可以自由组合构成自己的Stack。三是对页面流转流程通过xml的方式可以灵活定义。

    同期,数以百计的各种框架出现了,多数都是针对Servlet的空白点,在几个方面进行代码或者配置的约定,可谓百花齐放,百家争鸣,我想Java社区能到今天依然繁荣,这种海纳百川,开放的态度是根本原因。如今很多框架已经走过生命期,但还有很多活跃的,其中Webwork即Struts2,和SpringMVC是模板技术类别最出色的。GWT,Wicket等在页面组件类表现不错,还有脱离Servlet束缚Play等框架。

     

    6. WithoutEJB

    J2EE里,除了Servlet外另一个重量级的规范就是EJB。EJB设计的来源是Corba技术,分布式对象技术在EJB规范中有完整的体现。Rod在著作中对EJB规范粗重庞大难用提出各种质疑,尤其是针对其强制分布的要求。我的观念是分布式支持没有错,现在EJB规范中对于Local和Remote的划分定义是正确的。开发人员应该一开始就需要了解接口粒度的划分,本地和远程接口是不同的。对于一般的小型应用,Servlet和EJB容器都在一个虚拟机中,本地接口是合理的,但对于大型企业应用和互联网级别应用,势必需要服务的远程划分和调用。所以早期的EJB,可以说一方面设计不完备,另一方面又过度设计。但EJB自从3以后完全脱胎换骨,成为设计良好的规范。

    Spring作为开发框架,把Ioc和AOP能力发挥的淋漓尽致,在各个层次很好融合其他技术和项目库,一直是Java Web开发的主流。不过面对CDI等JavaEE规范,在注入,生命期管理,对象解耦等优势不在。我预计今后Spring, JavaEE和Osgi会在主流Java开发框架方向竞争,也会相互借鉴和融合。

     

    7. Ajax

    Javascript是浏览器正统的脚本语言,但在那个机器性能不佳的年代,一段Js代码造成鼠标没有响应的情况比比皆是。Js的给人影响就是页面上飘来飘去“点击我”对话框,页面上走马灯效果的变色通告,或者是几十层模态对话框的恶意页面,很多网吧的机器默认Js是禁用的。在很长的一段时间里,Java web开发一个潜规则就是少手写Js文件,这样可以很好的支持多种浏览器和提高效率。

    谷歌火了,Ajax也成为火爆的前端技术,我们在使用gmail,google map等产品时,有了另一种体验,点击链接或按钮后,即便网络不算流畅,页面不再全白重新刷新,而是内容渐渐的出现。其原理就是利用Js脚本到后台服务器获取数据,在浏览器前端对数据进行解析和渲染,在这个过程中,大多数页面并不需要进行改变,只是更新页面中一部分即可。谷歌公司大力支持Firefox使其重生,并和苹果一起发展webkit项目,各自发展了chrome和safari浏览器,伴随者页面渲染能力大力提升同时,Js脚本的解析能力也突飞猛进。我个人认为Ajax这个技术看似简单,但却是新一代Web,所谓Web2.0的基石性质技术,为互联网泡沫后互联网的复兴和今日腾飞起到了重要作用。

     

    8. Ruby and Rails

    快速成长的互联网需要快速的web开发能力,Rails框架出现了,同时火爆的还有Ruby语言,它的出现满足了当时开发者的需要,快速开发,玩cool的东西,有完备的后端模型支持。让我们仔细分析一下Rails中MVC就能发现,Model中对实体对象的关系定义,和JavaEE的JPA很多概念一致,但利用Ruby语言的元能力,可以直接对实体对象进行功能扩展,而其时Java社区还在为贫血,充血对象争论不休。Control,View等层次也能和Java的一些框架概念一致,不过有些设计构思更巧妙,而且Rails的基因就是满足互联网开发需要,和JavaEE企业级应用有所不同。

    很快的,各种语言纷纷出现模仿Rails的项目,Java的Grails, SpringROO,JBossForge,Python的Django,PHP的Symfony等等。毫无例外的,能有影响力的都是开源的,有良好社区能力建设的项目。

     

    9. JSF和CDI

    让我们回到企业应用开发,大家有没有想过所谓企业应用和互联网应用之间最大的差别是什么?我认为是用户数量级别的差异,导致前端设计方式,软件体系,后台数据库,缓存技术应用,有不同的设计理念和方式。用更技术化来说,就是会话和事务。企业应用是有强会话和事务需求的,而这两个技术词语也会一并关联存在。很简单,在一个事务中会经过多次会话过程,直到这个事务全部做完。和我们日常办事是一样的,填单子,和办事人员沟通,修改单据,盖章,各种口舌,最终感慨,办事真难。

    从软件层面考虑,一个企业应用软件可能用户数并不太多,就企业中百十号人,但前后台的交互是长时间,多次会话交互的。JSF技术其实是借鉴了微软ASP.net,它们继承了传统IDE快速开发的思路,希望通过拖拽连接可以快速开发一个应用。页面上的组件,对应后台服务器的业务组件,在得到服务器请求之后,组件需要做一系列动作来完成解析,校验,模型重建,业务方法调用,页面渲染等步骤,这些必然有个较长的过程。复杂性,效率,和其他技术的融合,JSF技术从诞生起就被质疑不断,而且面对每个明星技术,都有些格格不入,比如Ajax出现了,而JSF要求的Post方式还需要重刷页面。但JSF一直在改进,越来越科学完善。如今,配合CDI,JSF是企业应用开发的首选技术之一,大家可以研究一下Oracle的应用产品和ADF开发框架。

    CDI是Seam框架的技术精华形成的JavaEE规范,在JavaEE7里面已经成为最重要的规范之一。和Hibernate最终形成JPA一样,CDI也是GavinKing构思,开发推动的。仔细分析就会发现,CDI几乎弥补了JavaEE在现代开发需求中,对象方面定义的绝大多数不足,比如和DI规范定义了注入,生命期管理和会话范围定义,完善了EJB对于普通POJO对于事务,异步通知机制的定义,还有注解的堆叠定义,装饰模式等等。有时候我就在想,假如JavaEE是GK从头打造,我们开发人员会少走很多弯路,因为他对企业应用的理解和用Java构建框架和定义规范,都是贴近一线开发人员需求。唯一遗憾的就是CDI还没有推动完成,他转移兴趣玩起语言了。关于JSF和CDI,我建议做相关产品的朋友,即便不用这样的组合,最好也对其技术基本内容有所了解,我想对思路扩展是非常有好处的。

     

    10. Netty,NodeJs,Vertx和异步化趋势

    Netty的领导者和Mina的主力开发者TrustLee,是一个说话慢条斯里的韩国人。面试时问我一个关于volatile问题,双方都觉得非母语很别扭,所以就都简单表达一下就算。可我没想到这个同龄的开发人员,日后对Java在互联网公司的地位提升,起到这么大的作用,这个项目就是Netty。我们都知道Java异步集合库的作者DougLea的功劳,Nio1代,对于Socket的异步化还不是很完善,即便是Nio2,工作重心还是文件系统的异步化处理,网络层的异步化设计逐步加强改进。因为Java的设计理念,正交化,接口堆叠,底层功能平台统一化等给异步分布式网络框架留出足够的空间去发挥,Netty,Mina,Grizzly等项目纷纷出现。Twitter宣布从Ruby转向Scala,并使用Netty让其大红大紫。

    所谓异步网络框架,就是对网络层调用,进行异步化,并进行接口封装,使得容易理解和使用。异步能力还是通过Java虚拟机现有功能实现的,通过对数据流的处理和状态感知来进行处理,而不是传统的阻塞式的收发消息。这个符合我们生活中的感受,当你订票时,你会打电话告诉你需要什么,说订好票给我电话,然后你就去做别的事情,直到订票员通知你订好了来支付取票再进行下一步操作,如果订票是同步的,那你就要一直等待订票完成,遇到春运可能会搭上整天的时间。

    为什么异步网络框架也受到重视,答案也是互联网,数以亿计的请求点击涌来时,传统的webserver顶不住了,采用一个线程服务一个请求模型的webserver,无法承受这么大的数据访问,特别对于Java这样的吃内存语言,一个请求占用了一个线程,同时也占用了相对应的若干资源。用企业应用的设计的整个架构面对互联网级别的应用时,有点崩溃的感觉。解决高并发大量请求的途径是高吞吐量加上可扩展的软件架构。异步化可以提升吞吐量,就和银行的排队机一样,顾客来了得到排队服务,当有可用的柜台服务时会主动通知顾客,我们可以设想,即使有再多的顾客,也可以通过增加业务柜台,少许增加排队机和少量人工协调处理来解决。

    NodeJs是一个异步化的基于Javascript的开发框架,是当前的明星技术,符合了一些当前开发需求,如异步化,前端Js技术广泛应用,Js引擎能力极大提升,NoSQL的火爆,组件构建模式变化等。利用Js语言函数式编程能力,Js开发人员可以很轻松的利用已有的组件开发后端应用,前端可以直接用浏览器处理Js,别忘了Js是浏览器唯一能统一识别的脚本语言,或者用JQuery,AngularJS等流行框架,世界很清净,都是Js。

    但我们需要了解在常驻内存服务型程序方面,Java等语言占有极大优势,Java社区很快出现了和NodeJs有相同设计思路的项目,Vertx就是其中的优秀代表。它充分借鉴了NodeJs和Erlang/OTP Actor模型的优秀设计,利用分布式消息机制进行对象间通信,利用Netty进行网络异步操作,方法调用倡导异步调用,有自己的模块化机制。这样,Java社区出现了和NodeJs竞争的技术框架,良好使用,可以解决大规模互联网应用的需求。

    Java领域的异步化趋势可以说刚刚开始,我们看到Servlet和EJB都加入异步支持,Spring的Reactor,JBoss的undertow,随着Java8对函数语言能力的增强,可以预见又会有丛多的项目产生。我关注着异步化趋势和JavaEE开发方式的融合之路,相信那是Web开发的明天。

     

     

     

     

     

     

     

     

    展开全文
  • webApp开发心得

    万次阅读 2018-08-29 12:38:53
    从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,webapp究竟是好还是不好真是一言难尽哟! webapp使用JavaScript修改页面;紧接着再从服务器传递...
  • app应用选型——原生还是web

    千次阅读 2018-08-30 18:44:52
    首先简单介绍一下什么是原生app和webapp: 原生app是基于平台开发的一个应用程序,webapp则是一个web应用(和pc端的web应用没有本质区别,唯一的区别是一个在pc端的浏览器中访问,一个在移动端的浏览器中访问)。 ...
  • WebApp

    2019-01-06 23:35:54
    WebApp 1、Java Web应用中包含如下内容: (1)静态文档如HTML、图片、声音等 (2)客户端类(如Applet) (3)描述Web应用的信息(web.xml) (4)Servlet 服务器端Servlet接口的实现类 -JSP 客户端请求访问JSP时,...
  • APP,一般认为是 mobile application,也就是移动移动应用程序。 目前主流应用程序大体分为三类:Web App、Hybrid App、 Native App。 1.Web App ...WebApp是基于Web的系统和应用,其作用是向...
  • SpringBoot添加webapp目录

    万次阅读 2018-07-05 10:36:52
    一、文章简述 使用IDEA工具创建的SpringBoot项目本身是没有webapp目录的。如果我们想要添加webapp目录的话,可以手动添加。二、操作步骤1)点击IDEA右上角的Project Structure2)先点击下图中的+号,再点击Web3)...
  • WEBAPP介绍及其iOS Web开发技巧总结

    万次阅读 多人点赞 2014-07-03 19:29:57
    结合网上相关资料,以及自己项目中的经验,收集汇总了iOS Webapp相关的开发知识,如下。 WebApp是一种新出现的基于WEB形式的类应用程序,运行在高端的移动终端设备上,其应用范围会越来越广。 开发者们都知道在...
  • 接下来给大家来详细讲解一下:在上一节中我们已经介绍怎么去做一个开机引导图了[webAPP项目]基于MUI框架webAPP开发功能流程之引导图制作详解01如果不会的,就按照上一篇文章讲解的自己在作一遍.效果图最终我们要实现的...
  • Tomcat的webapp目录

    2020-04-24 22:56:30
    Tomcat下的webapp目录 1.用来加载应用程序,当Tomcat一启动就会自动去加载webapp下的应用程序,比如说 jar包,war包之类的 2.流媒体red5服务器以及nginx服务器都可以部署到webapp下 总结:带main函数的项目可以...
  • idea创建java项目后添加webapp怎么配置

    千次阅读 2019-07-17 10:35:37
    当创建好了一个项目后,并没有选择是web项目,之后我们想要添加webapp文件夹,却是普通文件夹,怎么解决? 1.首先创建一个普通webapp文件夹 2.在idea中标记为web 3.选中我们需要web的模块,在下图的位置修改为我们...
  • IDEA如何创建webapp(IDEA)

    千次阅读 2020-03-01 17:42:14
    在新建的maven项目中没有webapp,但是新建一个webapp之后只是一个普通的文件,怎么办? 如何让它变成一个Web!!!!! 打开你的IDEA项目,点击project structure 接着来! 接下来,出现如图! 你的项目就会出现web...
  • 本文适用于任何的H5打包, 如果你是使用BUI开发的Webapp, 那会更加简单。 最后会有不同平台的打包效果对比, 可以下载安装测试. BUI Webapp的特点. 想了解更多,可以去BUI官网看. 关于Cordova的打包教程,可以看另外...
  • 首先,我标题为什么说必看呢,是因为我因为创建web项目时没有自动生成src目录、webapp目录,也不知道我为什么一定要让去自动生成呢?反正就是去看了很多”大佬“的文章,也尝试了很多,都说自己的方法可行,可能是我...
  •   今天在测试web项目的demo的过程中,发现webapp下的资源无法访问,以前不是说只有WEB-INF目录下的文件对客户端不可见吗怎么webapp根目录下也无法访问   经过排查,发现由于IDEA是需要指定资源目录类型的,举个...
  • 最近因为需求,需要把移动端网页打包成APP,本人一直是做网站开发的,没想到现在的webapp打包能如此方便了,打包的时候只用提供网站链接就可以了(原理应该是做一个app简单浏览器,然后默认打开你网站的链接),让你...
1 2 3 4 5 ... 20
收藏数 173,766
精华内容 69,506
关键字:

webapp