webapp_webapplicationcontext - CSDN
精华内容
参与话题
  • 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


    展开全文
  • webapp开发综合案例

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

    千人学习 2018-10-22 21:38:13
    APP开发,是指智能终端设备应用软件开发。由于智能手机、平板电脑等移动终端设备的不断普及,使APP应用软件得到广泛的使用,导致APP开发的“兴起”。App是application的缩写,通常专指手机上的应用软件,或称手机...
  • 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。

    展开全文
  • app应用选型——原生还是web

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

    首先简单介绍一下什么是原生app和webapp:

    原生app是基于平台开发的一个应用程序,webapp则是一个web应用(和pc端的web应用没有本质区别,唯一的区别是一个在pc端的浏览器中访问,一个在移动端的浏览器中访问)。

    再举一个例子:原生app类似于安装在电脑上的微信应用程序,webapp则类似于电脑上在浏览器中运行的网页版微信。

    不过实际情况是目前已经很少有纯的原生app或webapp,绝大多数的情况是两者混合使用——即外面套原生app的外壳,在应用内部嵌入或多或少的web页面。然而我们在决定开发一个app后,仍然需要考虑哪些功能以原生app的方式开发,哪些功能以webapp的方式开发。下面我们来看看两者的区别:

    开发成本:

    对比特性 原生app webapp 对比结果
    工作量 基于平台的应用开发,需要在每个平台(IOS、android)都开发一套应用。 基于浏览器的web开发,需要兼容各个不同类型的浏览器及浏览器各个版本之间的差异。 原生app工作量高于webapp。
    开发技能 IOS平台:object-c、c或swift(apple官方推荐);android:java、kotlin(google官方推荐)或reactNative。 javascript+html+css(且业界有通用模版供下载使用)。 原生app技能要求高于webapp。

    维护成本:

    对比特性 原生app webapp 对比结果
    更新方式 IOS需由apple审核后在appstore发布,然后用户从appstore处更新;android需要用户下载新版本安装包或更新包重装应用或更新应用。 直接在服务端更新,用户直接刷新页面即可。 原生app更新方式不如webapp便捷(且由于apple的审核机制,可能发生IOS和android平台版本不同步的问题)。

    用户体验:

    对比特性 原生app webapp 对比结果
    性能 大多数资源已经在用户手机内,加载速度快。 所有资源均需向服务器请求获取,且css动画在移动端过于消耗资源,导致性能有所下降。 原生app性能优于webapp。
    可支持行为 可调用系统底层api(如调用摄像头、陀螺仪接口等)。 只能通过浏览器调用系统底层api(部分浏览器当前已支持部分底层api的调用,但中转必然会损耗性能)。 原生app相比webapp可支持行为更完整,性能也更好。
    网络依赖性 可以缓存部分数据,无网络部分功能也能正常使用(如微信仍然可以查看缓存的聊天记录)。 完全依赖网络,离线后无法使用。 原生app优于webapp。

    综合上面的对比来看,我们可以得出这样的结论:

    app内的固定功能(不频繁变更的功能,包括功能本身调用方式的变更和功能包含内容的变更)以原生app的方式开发(如调用摄像头执行人脸识别)——开发成本较高,但维护成本(不轻易更新)和用户体验都可以得到改善;而可能频繁变更的功能(功能本身要一直迭代优化或功能包含内容频繁变更)则以webapp的方式开发(如外卖app内展示商家列表信息)——开发维护成本都较低,且不涉及需要调用底层api的场景(且由于数据实时性的要求,必须获取最新的数据资源——即无法大量使用缓存)。

    另外要注意一点,在IOS平台上,如果混合应用中原生内容过少而web内容过多时,有可能审核不过。

    展开全文
  • 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修改页面;紧接着再从服务器传递...
  • webApp学习

    2020-07-30 23:33:33
    绘制饼图、柱状图、雷达图、折线图实现载入动画效果 大家可以下载研究研究、通过html、js、Canvas实现的,数据使用的静态数据 仅供参考学习,大神们可略过、、、
  • WebApp

    2019-01-06 23:35:54
    WebApp 1、Java Web应用中包含如下内容: (1)静态文档如HTML、图片、声音等 (2)客户端类(如Applet) (3)描述Web应用的信息(web.xml) (4)Servlet 服务器端Servlet接口的实现类 -JSP 客户端请求访问JSP时,...
  • Web app 入门(一)

    千次阅读 2018-11-14 17:24:25
    这一篇博客记录的是我第一次接触Webapp的详细过程。关于环境配置我就不细说了,网上很多配置教程。 软件及环境:jdk1.7及以上,MyEclipse或Eclipse(本人第一次学习安装的是MyEclipse,如果你要使用Eclipse还需要...
  • APP,一般认为是 mobile application,也就是移动移动应用程序。 目前主流应用程序大体分为三类:Web App、Hybrid App、 Native App。 1.Web App ...WebApp是基于Web的系统和应用,其作用是向...
  • 1、23、4、5、
  • SpringBoot添加webapp目录

    万次阅读 2018-07-05 10:36:52
    一、文章简述 使用IDEA工具创建的SpringBoot项目本身是没有webapp目录的。如果我们想要添加webapp目录的话,可以手动添加。二、操作步骤1)点击IDEA右上角的Project Structure2)先点击下图中的+号,再点击Web3)...
  • IDEA webapp文件夹不识别解决方案

    万次阅读 多人点赞 2017-04-19 10:02:52
    问题: 新建的maven项目,webapp文件夹也是在创建完项目后手动添加的,出现了webapp文件夹不能被识别的情况,如下图: 解决方法: 只需要配置一下,将webapp文件夹关联上就可以了,如下图:
  • IDEA中maven项目webapp目录未被识别

    万次阅读 2016-12-31 17:12:41
    maven项目中默认的web root 目录就是main/webapp目录。如果发现你的webapp目录没有被idea识别。不要试图通过project structure强行配置。肯定是你的项目结构或者pom.xml的配置有问题导致的。 首先检查项目结构:是...
  • springboot项目配置webapp

    千次阅读 2018-07-08 19:50:59
    1.idea创建springboot标准项目。2.添加webapp3.修改项目读取静态资源路径配置4.开始写接口,推送界面咯。
  • //此方法获取到工程webapp文件夹下 String contexPath= request.getSession().getServletContext().getRealPath("/"); //获取IP地址端口号以及项目名称  String path = request.getContextPath(); ...
  • 使用Intellij IDEA 和maven创建web项目webapp全过程。注意中间可能会卡住,所以中间有说要加个参数这样就会很快。
  • IDEA webapp文件夹没有蓝色小圆点的解决方案

    万次阅读 多人点赞 2019-02-22 09:27:05
    有的idea版本,新建的maven项目下的webapp文件夹是没有 任何标记,这样的情况下; 1、点击file -----&gt;project Structure 2、然后点击 Models 中的 + ,在出现的列表中下滑选择Web 选择对应路劲,点击保存...
  • 第一步: 先获得classpath路径 1 String classpath = this.getClass().getResource("/").getPath().replaceFirst("/", ""); ...F:/projects/JavaStudyParent/study
1 2 3 4 5 ... 20
收藏数 174,673
精华内容 69,869
关键字:

webapp