webappversion_小白入门 webApp开发中如何进行相册/拍照

⑴ webapp怎么连接数据库

JAVA Web开发中与数据库的连接操作，配置：
1、新建数据库。
新建登录角色，在新建数据库的时候把数据库的所有权交给你新建的角色。用用户和密码控制数据库。保证数据库的安全。

2、编写context.xml文件 Xml文件的目的是封装用户和密码，也是封装的一种，方便操作。
以下为context.xml文件样例：
<?xml version="1.0" encoding="utf-8"?>
<Context reloadable = "true">
<Resource
name="jdbc/sampleHS"
type="javax.sql.DataSource"
maxActive="14"
maxIdle="10"
username="hstaoshu"
maxWait="5000"
driverClassName="org.postgresql.Driver"
password="hstaoshu"
url="jdbc:postgresql://localhost:5432/hstaoshu"/>
</Context>
详细说明：
name="jdbc/sampleHS"里面的ssampHS是可改名称，建议根据需要自己命名；
username="hstaoshu"
password="hstaoshu"此两项为你新建的数据库登录角色用户名和密码信息，只有匹配了才能访问。这里简单为了表示，把用户名和密码弄成了跟数据库名字一样。其实这是很不安全的。
url="jdbc:postgresql://localhost:5432/hstaoshu"/>
这是连接数据库的URl,就像访问网站的地址一样。没有这个是无法访问数据库的。localhost:5432表示本地端口。一般不需要改动，如果你在配置数据库的时候改动过端口，那么你需要把它改回来。/hstaoshu是你的数据库名称。

⑵ webapp怎么连接服务器上的数据库

建登录角色，在新建数据库的时候把数据库的所有权交给你新建的角色。用用户和密码控制数据库。保证数据库的安全。

⑶ java 怎么获取服务器webroot的路径

使用JAVA后台代码取得WEBROOT物理路径，可以有如下两种方式：
1、使用JSP Servlet取得WEB根路径可以用request.getContextPath()，相对路径request.getSession().getServletContext().getRealPath("/")，它们可以使用我们很容易取得根路径。

2、如果使用了spring, 在WEB-INF/web.xml中，创建一个webAppRootKey的param,指定一个值（默认为webapp.root）作为键值，然后通过Listener,或者Filter,或者Servlet执行String webAppRootKey = getServletContext().getRealPath("/"); 并将webAppRootKey对应的webapp.root分别作为Key,Value写到System Properties系统属性中。之后在程序中通过System.getProperty("webapp.root")来获得WebRoot的物理路径。
具体示例代码如下：
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<context-param>
<param-name>webAppRootKey</param-name>
<param-value>csc2.root</param-value>
</context-param>
<listener>
<listener-class>test.ApplicationListener</listener-class>
</listener>
</web-app>

ApplicationListener.java
package test;
import javax.servlet.ServletContextEvent;
import org.springframework.web.context.ContextLoaderListener;
public class ApplicationListener extends ContextLoaderListener {
public void contextDestroyed(ServletContextEvent sce) {
// TODO Auto-generated method stub
}
public void contextInitialized(ServletContextEvent sce) {
// TODO Auto-generated method stub
String webAppRootKey = sce.getServletContext().getRealPath("/");
System.setProperty("csc2.root" , webAppRootKey);
String path =System.getProperty("csc2.root");
System.out.println("sssss:::"+path);
}
}

test.java
public class test {
public void remve(){
String path =System.getProperty("csc2.root");
System.out.println("result::::::::"+path);
}

}

index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ page import="test.test" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
test t = new test();
t.remve();
%>
<html>
</html>
部署程序发布启动TOMCAT 运行index.jsp 就可以调用JAVA中全局设置的物理路径了（说明这里的JSP 只是调用了TEST.JAVA 的remove方法，不做其他使用。原理解释，TOMCAT启动和读取WEB.XML 监听方式加载SPRING ApplicationListener继承SPRING ContextLoaderListener加载SPRING顺便吧全局路径赋值给csc2.root 描述，这样之后JAVA 代码中就可以使用System.getProperty("csc2.root")调用全路路径了。

⑷ org.eclipse.jetty.webapp.webappcontext是个什么包

这个类在jetty-webapp.jar下。
maven方式：
<dependency>
<groupId>org.eclipse.jetty</groupId>
<artifactId>jetty-webapp</artifactId>
<version>9.2.18.v20160721</version>
</dependency>

⑸ maven 怎么配置webapp

<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>2.1-beta-1</version>
<configuration>
<warSourceDirectory>
${basedir}/webapp
</warSourceDirectory>

<webXml>${basedir}/webapp/WEB-INF/web.xml</webXml>
</configuration>
</plugin>

⑹ 如何为ionic webapp开发自定义插件

安装cordova插件管理工具，plugman
在终端中输入：
npm install -g plugman
安装命令与安装结果如下：

2
新建一个插件myEcho，用弹出框来显示我们的内容。
plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variable NAME=VALUE]
把其中的<pluginName>替换为 myEcho;
<pluginID> 替换为 com.lulee007.myEcho
<version> 替换为 0.0.1
[--path <directory>] [--variable NAME=VALUE] 这两个是可选参数，这里不写了。这样会在当前目录下（desktop）创建一个新的目录myEcho
在终端中输入：
plugman create --name myEcho --plugin_id com.lulee007.myEcho --plugin_version 0.0.1

执行命令后会在当前目录下生成一个文件夹，我这里的目录是在桌面下的myEcho.

3
向myEcho项目中添加一个android平台
plugman platform add --platform_name <platform>
把<platform>替换为 android
接着在终端中继续输入：
cd myEcho
然后输入：
plugman platform add --platform_name android
这时候查看我们的myEcho目录下的 src会新增一个目录android里面会有一个java文件：myEcho.java

END
插件项目修改配置
项目结构组成：
src 对应不同的平台，www 放我们的 javascript 文件，plugin.xml 是插件的配置文件。

2
先来看看配置文件：plugin.xml
解释一下关键的几个元素：
id: 插件的标识，即一开始我们新建插件输入的 ID，com.lulee007.myEcho
name：插件的名称，新建插件时输入的名称，myEcho
description：描述信息
js-mole：对应我们的 javascript 文件，src 属性指向 www/myEcho.js
platform：支持的平台，这里仅有一个 android，这是刚才我们通过“ plugman platform add --platform_name android ”添加进来的。
其中android下的config-file：
这里是android插件的配置信息，当安装到应用时，会添加到目标平台android下的 res/xml/config.xml 文件中，并将 src/android/myEcho.java，复制到 android 的 package 包中。

3
看下javascript文件：myEcho.js
文件内容很简单，第一句是引入cordova下的exec库
第二句是我们插件的执行插件方法，
exec(success, error, "myEcho", "coolMethod", [arg0]);
success:调用成功时的回调函数，
error:调用出错时的回调函数，
"myEcho"：插件名称，
"coolMethod"：执行插件里的方法，
[arg0]：可选参数，执行方法的参数数组。
这里我们把“exports.coolMethod”改为“window.plugins.myEcho”
并在“exports.coolMethod”上面添加一行：
window.plugins = window.plugins || {};
同样把“coolMethod”也改为“echo”。
最终修改后的js文件内容如图：

4
接着修改myEcho.java文件
可以看到myEcho继承自CordovaPlugin，并重载了execute方法。
在execute方法里有个判断，action.equals("coolMethod")，这表示如果执行的是我们的方法那就继续执行内部的逻辑并返回true，如果不是则直接返回false结束。
这里我们修改下方法：“coolMethod”为“echo”,并把方法coolMethod名称修改为echo。
最终修改后的java文件内容如下：

END
安装测试插件
这里用事先准备好的ionic项目myFirstApp来测试我们的插件。
这里不再赘述ionic项目的创建，具体可以参考我的另一篇经验。
直接在网络经验里搜索：如何用ionicframework进行混合移动应用开发
第一篇就是。

打开终端，在终端中输入：
cd myFirstApp
切换到myFirstApp目录下
输入：
cordova plugin add ../myEcho
显示已经安装myEcho插件到ios和android平台下

打开myFirstApp目录，可以看到在plugins目录下多了一个com.lulee007.myEcho目录。

打开myFirstApp目录下的www/js/controllers.js
添加如下代码到最后“PlaylistCtrl”位置：
window.plugins.myEcho("echo my text",
function(data){
alert(data);
},
function(error){
alert(error);
});

重新build然后run进行调试：
在终端里输入：
ionic build android
然后输入：
ionic run --device android
执行命令后结果如下图：

这时android设备上已经运行了我们的应用：
随便点击list的一个项，会弹出一个对话框，内容是“echo my text”

最后如果我们在测试中需要对插件进行更新，这时候只需要执行命令：
cordova plugin remove com.lulee007.myEcho
这里的“com.lulee007.myEcho”就是我们最开始新建插件的时候的插件ID。
重新安装还是这个命令：
cordova plugin add path/to/your/plugin/dir
把“path/to/your/plugin/dir”替换为自己的插件的目录就好了。

⑺ 如何保证ios webapp启动图清晰

iOS中的safri浏览器可以将一个网页添加到桌面，当做一个独立的应用运行。
当然，这里我们不讨论怎么去做一个webApp，这需要html5的相关知识和开发经验。
这里我们只讲webApp添加桌面后到启动的相关细节。

全屏显示：
<meta name="apple-mobile-web-app-capable" content="yes" />

系统顶栏的颜色(黑色和白色)：
<meta name="apple-mobile-app-status-bar-style" content="white" /><meta name="apple-mobile-app-status-bar-style" content="black" />

桌面程图标(如果不设置，则图标会显示网页的截图)：
<link rel="apple-touch-icon" href="icon.png" />

但是，iOS会自作多情的给这个图标加上高光，如果想图标不被高光，可以这样：
<link rel="apple-touch-icon-precomposed" href="icon.png" />

如果想给不同的设备匹配不同的icon，可以加上size属性：
<link rel="apple-touch-icon" size="72x72" href="icon-ipad.png" /><link rel="apple-touch-icon" size="114x114" href="icon-iphone4.png" />

程序启动的过程中，需要指定启动画面，否则，白屏或者截图是让人很不愉悦的。
iOS有ipad和iPhone/ipod touch之分。
ipad的启动画面是横竖屏分开的，画面的尺寸必须是1024*768、768*1024。
iPhone和ipod touch虽然都是竖屏的，但是却有Retina屏幕和非Retina屏幕之分；另外它们启动画面的尺寸并不是屏幕的大小，而是(屏幕宽度)*(屏幕高度-20)。也就是说，非Retina的尺寸为320*460，Retina屏幕的尺寸为640*920。
引入启动画面是支持媒体查询的。

因此，可以通过media query给ipad的横竖屏引入不同的图：
<link rel="apple-touch-start-image" href="landScape.png" madia="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape)" /><link rel="apple-touch-start-image" href="portait.png" madia="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portait)" />

但是媒体查询却搞不定Retina屏幕，所以通过js来hack：
给普通的分辨率引入320*460的图片：
<link rel="apple-touch-start-image" href="start.png"media="screen and (max-device-weidth:320px)" />Retina屏幕js:if((app.device.type === "iPhone" || app.device.type === "iPod") && app.device.version >= '5' && window.devicePixelRatio >= 2){$('head').append($('<link rel="apple-touch-startup-image" href="start-640-920.png" />'));
}

⑻ webapp开发怎么在ios上沉浸式头部

沉浸式通知栏Android4.4以上才支持的新特性。4.3不支持。

具体实现方式如下：

新建个公共style，设置android:fitsSystemWindows=true
<style name="AppBaseTheme" parent="android:Theme.Light.NoTitleBar"> <item name="android:fitsSystemWindows">true</item> </style>

2. 修改AndroidManifest.xml，让所有的activity样式默认设置为AppBaseTheme（*不同项目要灵活处理，笔者项目的activity样式都是统一的所以这样设置没问题，但是实际情况下不同的activity可能调用的样式不一样，需要读者自行按自己的项目来设置)

3.新增沉浸式通知栏实现类，实现原理很简单。

1)判断当前系统版本是不是4.4以上，判断代码如下：

if (VERSION.SDK_INT >= VERSION_CODES.KITKAT)

2)如果大于4.4则设置状态栏透明化，代码如下：

window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

3)获取activity的根rootView(DecorView)，然后创建一个新的view stateBarView并把它添加到rootView(这里手动给它设置个ID，下次进来时先判断rootView是否已创建stateBarView,如果已创建则直接获取该View这样可以防止重复创建，导致内存泄露）

⑼ 小白入门 webApp开发中如何进行相册/拍照

点击用户头像后，弹出actionSheet，选着从相册或是拍照；选着图片后就调用上传方法，上传图片；在上传之前先压缩了一下图片。
使用流程
弹出actionSheet
/
*点击头像触发*/
document.getElementById('headImage').addEventListener('tap', function() {
if (mui.os.plus) {
var a = [{
title: "拍照"
}, {
title: "从手机相册选择"
}];
plus.nativeUI.actionSheet({
title: "修改用户头像",
cancel: "取消",
buttons: a
}, function(b) { /*actionSheet 按钮点击事件*/
switch (b.index) {
case 0:
break;
case 1:
getImage(); /*拍照*/
break;
case 2:
galleryImg();/*打开相册*/
break;
default:
break;
}
})
}
}, false);
拍照上传
//拍照
function getImage() {
var c = plus.camera.getCamera();
c.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var s = entry.toLocalURL() + "?version=" + new Date().getTime();
uploadHead(s); /*上传图片*/
}, function(e) {
console.log("读取拍照文件错误：" + e.message);
});
}, function(s) {
console.log("error" + s);
}, {
filename: "_doc/head.png"
})
}
从相册选图上传
//本地相册选择
function galleryImg() {
plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) {
plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
root.getFile("head.png", {}, function(file) {
//文件已存在
file.remove(function() {
console.log("file remove success");
entry.To(root, 'head.png', function(e) {
var e = e.fullPath + "?version=" + new Date().getTime();
uploadHead(e); /*上传图片*/
//变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
},
function(e) {
console.log(' image fail:' + e.message);
});
}, function() {
console.log("delete image fail:" + e.message);
});
}, function() {
//文件不存在
entry.To(root, 'head.png', function(e) {
var path = e.fullPath + "?version=" + new Date().getTime();
uploadHead(path); /*上传图片*/
},
function(e) {
console.log(' image fail:' + e.message);
});
});
}, function(e) {
console.log("get _www folder fail");
})
}, function(e) {
console.log("读取拍照文件错误：" + e.message);
});
}, function(a) {}, {
filter: "image"
})
};
图片上传和压缩
//上传头像图片
function uploadHead(imgPath) {
console.log("imgPath = " + imgPath);
mainImage.src = imgPath;
mainImage.style.width = "60px";
mainImage.style.height = "60px";

var image = new Image();
image.src = imgPath;
image.onload = function() {
var imgData = getBase64Image(image);
/*在这里调用上传接口*/// mui.ajax("图片上传接口", {// data: {// // },// dataType: 'json',// type: 'post',// timeout: 10000,// success: function(data) {// console.log('上传成功');// },// error: function(xhr, type, errorThrown) {// mui.toast('网络异常，请稍后再试！');// }// });
}
}
//将图片压缩转成base64
function getBase64Image(img) {
var canvas = document.createElement("canvas");
var width = img.width;
var height = img.height;
// calculate the width and height, constraining the proportions
if (width > height) {
if (width > 100) {
height = Math.round(height *= 100 / width);
width = 100;
}
} else {
if (height > 100) {
width = Math.round(width *= 100 / height);
height = 100;
}
}
canvas.width = width; /*设置新的图片的宽度*/
canvas.height = height; /*设置新的图片的长度*/
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height); /*绘图*/
var dataURL = canvas.toDataURL("image/png", 0.8);
return dataURL.replace("data:image/png;base64,", "");
}

总结
在使用中，我们可以发现，使用流程是非常清晰的；某种程度来说比原生iOS的使用还要简单一些。

webappversion

与webappversion相关的内容