2019-04-21 16:47:22 yuanl15 阅读数 576
  • Maven速成

    maven是行业事实上的项目管理标准,熟悉maven,能让我们在工作中如鱼得水。本教程主要讲解eclipse maven向导的使用,maven的生命周期,maven的依赖管理,maven的插件管理,maven的私服搭建,希望大家用20%的时间掌握80%的功能

    4767 人正在学习 去看看 黄艮

目录

创建Maven工程

maven工具安装与配置

使用IDE创建maven的webapp工程


此博客将详细描述如何构建第一个webapp。首先创建一个maven项目,其次在maven项目中引入spring、mybatis等jar包。同时搭建起项目需要的数据库mysql、redis等。在项目中构建起与这些数据库的连接关系。

创建Maven工程

Maven项目对象模型(POM),是可以通过一小段描述信息(pom.xml)来管理项目的构建,报告和文档的项目管理工具软件。通过maven工具可以很好地管控项目工程的依赖,因此一般webapp项目都是通过maven来进行构建。

maven工具安装与配置

要使用maven首先需要在系统中安装maven工具,并对其进行配置。这里给出maven下载地址

http://maven.apache.org/download.cgi

和maven的配置与使用教程链接

http://www.runoob.com/maven/maven-tutorial.html

使用IDE创建maven的webapp工程

在这里使用的是idea来创建项目,如果习惯使用eclipse也是类似的方法。

首先打开idea创建新的项目Create New Project。

idea创建项目

在创建项目的窗口中选择创建Maven工程,同时通过选择Create from archetype选择模板进行创建。在这些archetype是模板原型,可以通过这些原型快速地创建标准化的项目。这里不对每一个骨架原型分别介绍了。可以选择maven-archetype-webapp模板进行创建。

选择maven工程模板

选择之后会进入到下一个步骤,需要给出项目的GroupId、ArtifactId和版本号。其中GroupId是组织标识,而ArtifactId是该项目的标识。例如Apache项目通常GroupId为org.apache,而它的一个项目ArtifactId则为spring。填入GroupId和ArtifactId后,你的项目就被唯一标识了。这里项目版本选择了默认的1.0-SNAPSHOT。在这之后的下一步则为选择项目创建的目标文件夹路径,选好之后就创建好了我们的webApp项目。

项目标识

等待一段时间之后,IDE就会将所有的文件构建好,最终呈现出来的项目结构如下图所示。这就可以开始做我们的一个webapp项目了。

初始项目
2018-09-03 13:14:25 LHX_ldm 阅读数 487
  • Maven速成

    maven是行业事实上的项目管理标准,熟悉maven,能让我们在工作中如鱼得水。本教程主要讲解eclipse maven向导的使用,maven的生命周期,maven的依赖管理,maven的插件管理,maven的私服搭建,希望大家用20%的时间掌握80%的功能

    4767 人正在学习 去看看 黄艮

https://blog.csdn.net/zhuming3834/article/category/6307605

转载:互相学习,webApp相关的东西很全。

解决了我好多问题,大家有什么不会的也可以和我一起讨论。

共同进步

 

 

2013-10-23 17:45:14 qingqingfeiangel 阅读数 437
  • Maven速成

    maven是行业事实上的项目管理标准,熟悉maven,能让我们在工作中如鱼得水。本教程主要讲解eclipse maven向导的使用,maven的生命周期,maven的依赖管理,maven的插件管理,maven的私服搭建,希望大家用20%的时间掌握80%的功能

    4767 人正在学习 去看看 黄艮

webapp,什么是webapp呢?网络上有很多这个方面的定义,我没必要多做阐述。这里要说的是我所理解的webapp。

粗略估算一下,计算机技术已经有60到70年历史了。从最初的硬件为主软件为辅,可能当时根本算不上有什么软件,根本就是一大堆电子器件拼装的机器。到后来有了系统,或者叫系统软件,因为当时的操作系统和软件很难区分,所以姑且叫系统软件。然后有了操作系统和软件程序,系统和软件是分开的,硬件的地位在逐渐降低。之后又有了网络,把很多计算机连接起来,计算机系统逐渐在弱化,跨网络的软件应用占据主导地位。而现在云计算出现了。

回想一下,硬件----系统软件----系统----软件----跨网络的软件----网络软件。每当一个新的发展目标(姑且叫发展目标吧)出现的时候,之前的目标就被弱化(弱化不代表可以抛弃,或者不需要)。如果说需要例子的话,那就看看现在,软件公司在开发什么软件,他们的目光都在盯着跨网络的软件。浏览器,网络游戏,手机app,平板app等等。又有谁去关心那些跑在系统上的应用软件呢,因为它被弱化了,不再受关注了。同样操作系统在被弱化,计算机硬件在被弱化。

跨网络的软件正是现在目前正在发展的目标。他们基于网络,又可以脱离网络存在,短时间内存在。

那么webapp是哪一类呢,webapp是网络软件,他是植根于网络的软件,他本身就在网络上,没有网络就没有webapp存在。可能会有人问那怎么可能那,那他有存在意义吗,没网络就没办法用,谁会做那样的软件啊。我的回答是,软件是基于电力的基础上的,没有电什么软件都不能运行,可是还是有人开发软件啊。

任何一个发展目标的繁荣都是需要有一个环境,一个可以支撑起他的大环境,或者说是基础支撑。webapp的基础无疑是需要大网络,一个可以随时随地都可以接入的高速的,可靠的网络,还需要云计算,可以支撑webapp主要计算和存储的云计算系统环境。最终会是,弱终端,强网络,强计算和存储。这就是我所想的网络软件,我所认为的webapp。

待续...

2019-05-29 19:42:20 jnshu_it 阅读数 128
  • Maven速成

    maven是行业事实上的项目管理标准,熟悉maven,能让我们在工作中如鱼得水。本教程主要讲解eclipse maven向导的使用,maven的生命周期,maven的依赖管理,maven的插件管理,maven的私服搭建,希望大家用20%的时间掌握80%的功能

    4767 人正在学习 去看看 黄艮

这里是修真院前端小课堂,每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能,本篇分享的是:

【 固定宽度布局开发WEBAPP如何实现多终端下自适应?】

大家好,我是IT修真院北京分院第22期的学员杨纲,一枚正直纯洁善良的WEB前端程序员。

1.在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。

2.CSS中的1PX并不等于设备的1PX还有一个因素也会引起css中px的变化,那就是用户缩放。例如,当用户把页面放大一倍,那么css中1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,css中1px所代表的物理像素也会减少一倍。

3.利用META标签对VIEWPORT进行控制

移动设备默认的viewport是layout viewport,也就是那个比屏幕要宽的viewport,但在进行移动设备网站的开发时,我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢?这就该轮到meta标签出场了。 我们在开发移动设备的网站时,最常见的的一个动作就是把下面这个东西复制到我们的head标签中:

该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求,但让viewport的宽度等于设备的宽度,这个应该是大家都想要的效果,如果你不这样的设定的话,那就会使用那个比屏幕宽的默认viewport,也就是说会出现横向滚动条。 这个name为viewport的meta标签到底有哪些东西呢,又都有什么作用呢?

今天给大家分享一下,固定宽度布局开发WEBAPP如何实现多终端下自适应?

一.背景介绍

现在人们通过手机浏览网页占了大多数,随着浏览方式的改变,网页在webapp下面实现多终端自适应,无论对于避免工程师无谓的重复劳动或者是项目管理的便捷性上来说重要性都是十分巨大的。

二.知识剖析

固定宽度布局?

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。

三.常见问题

1.viewport的概念?

2.css中的1px等于设备的1px吗?

3.如何利用meta标签对viewport进行控制?

四.解决方案

1.VIEWPORT的概念

通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。在默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站---

移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可能是其它值,这个是由设备自己决定的),但带来的后果就是浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。

2.CSS中的1PX并不等于设备的1PX

在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。

还有一个因素也会引起css中px的变化,那就是用户缩放。例如,当用户把页面放大一倍,那么css中1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,css中1px所代表的物理像素也会减少一倍。

3.利用META标签对VIEWPORT进行控制

移动设备默认的viewport是layout viewport,也就是那个比屏幕要宽的viewport,但在进行移动设备网站的开发时,我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢?这就该轮到meta标签出场了。 我们在开发移动设备的网站时,最常见的的一个动作就是把下面这个东西复制到我们的head标签中:

该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求,但让viewport的宽度等于设备的宽度,这个应该是大家都想要的效果,如果你不这样的设定的话,那就会使用那个比屏幕宽的默认viewport,也就是说会出现横向滚动条。 这个name为viewport的meta标签到底有哪些东西呢,又都有什么作用呢?

meta viewport 标签首先是由苹果公司在其safari浏览器中引入的,目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿,引入对meta viewport的支持,事实也证明这个东西还是非常有用的。 在苹果的规范中,meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)

把当前的viewport宽度设置为 ideal viewport 的宽度!要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度,所以我们只需要把width设为width-device这个特殊的值就行了。

 

中心其实就是理解什么是css像素和物理像素,简单讲,一个任意宽度的屏幕,比如说设置css像素为980px,屏幕每一行所显示的css内容就是980px的css像素内容,以下面这个盒子为例;

盒子的定宽为350px,设置

 

屏幕就会显示400px的css像素(看下图可以发现恰好比350px的盒子宽一点)

 

如果设置

 

屏幕就会显示870px个css像素,(可以看到正好是两个盒子350*2多一点)

 

2.如果没有下面这行代码,手机在访问页面过程中会默认layout viewport为980px,因为layoutviewport的宽度要默认比visual viewport(视觉视口,就是实际上看到的浏览器的页面部分)要窄,所以会出现横向滚动条,并且随页面宽度变化,内容大小也会等比例缩放(因为每一行要铺满980px个css像素)。

 

3.initial-scale是初始化比例,很多人搞不清楚这个scale(比例)是相对于谁的比例,其实这个是相对于原本的页面css像素,比如下面这个350px的盒子,如果设置initial-scale=0.4,那么他显示的物理像素就会变成350px*0.4=140px;

 

4.如果同时设置width=750px,initial-scale=1,哪个大显示哪个。

5.如果不设置viewport的话,设置@media是无效的,因为宽度总是默认为980px,这里很重要,被坑过。

7.更多讨论

问题一:为什么INITIAL-SCALE=1和WIDTH=DEVICE-WIDTH效果一样,却要都写上呢?

问题二:浏览器可视区域的宽度是比这个默认的VIEWPORT的宽度要小,为什么当他在META属性里设置宽度却不会出现滚动条?

8.参考文献

博客

鸣谢

感谢大家观看

BY : 黄国保|冯馨雨|杨纲

 

WebApp如何实现多终端下自适应?_腾讯视频

 

ppt链接:https://ptteng.github.io/PPT/PPT/CSS-13-viewport-in-app-yg.html#/2

视频链接:https://v.qq.com/x/page/g05204b0zzc.html

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

 

猛戳这里

https://ptteng.github.io/PPT/PPT/CSS-13-viewport-in-app-yg.html#/2

 

2004-07-14 13:35:00 snowdot23 阅读数 883
  • Maven速成

    maven是行业事实上的项目管理标准,熟悉maven,能让我们在工作中如鱼得水。本教程主要讲解eclipse maven向导的使用,maven的生命周期,maven的依赖管理,maven的插件管理,maven的私服搭建,希望大家用20%的时间掌握80%的功能

    4767 人正在学习 去看看 黄艮

work/webapps/jonas/jonasAdmin/WEB-INF/classes/org/objectweb/jonas/webapp/jonasadmin/ApplicationResources.properties

目录下有文件ApplicationResources.properties文件,汉化

原生APP,or WebAPP?

阅读数 396

WebAPP的mate标签

阅读数 1027

转:WEBAPP 浅入

阅读数 28

没有更多推荐了,返回首页