web-develop-architecture

技术选型

前端框架

- jQuery1.9,因为jQuery2.0起摒弃IE6~8,1.9的版本是稳定版中比较活跃的一个版本。

Spring4.0.0

- 4.0发布于2013年12月发布,较之Spring3系的版本增强了对RESTful的支持,支持servlet3.0。

Mybatis3.2

- sql操作松散结合,可操作性强。3.2最大的特点就是各种支持插件,已下载涌现出来诸如mapper、pager等等三方插件,避免重复造轮子。

PostgreSQL9.3

- 虽然9.4的JSONB很不错,9.5的upset也不错,但是考虑到数据的重要性,数据库暂时采用保守9.3版本。

redis2.8

- 较之memcached,多数据类型支持很好地解决我们目前的问题,2.8版本相对稳定。

MongoDB 2.6

- MongoDB 2.6是迄今为止改进最大的版本,优化查询引擎、引入索引交集和安全性增强等。

Tomcat7

- 支持Servlet 3.0,异步日志。主要还是使用者居多,外加我们对tomcat有相对的丰富的经验。

other

- jdk1.7,mvn3.5, log4j1.2, google code style(wiki://技术管理/技术类规范/JAVA代码规范),  neunn-template(wiki://技术管理/技术类规范/java-neunn-template)

kafka-vs-rabbitmq

对比项 kafka rabbitmq
架构 kafka遵从一般的MQ结构,producer,broker,consumer,以consumer为中心,消息的消费信息保存的客户端consumer上,consumer根据消费的点,从broker上批量pull数据;无消息确认机制。 RabbitMQ遵循AMQP协议,RabbitMQ的broker由Exchange,Binding,queue组成,其中exchange和binding组成了消息的路由键;客户端Producer通过连接channel和server进行通信,Consumer从queue获取消息进行消费(长连接,queue有消息会推送到consumer端,consumer循环从输入流读取数据)。rabbitMQ以broker为中心;有消息的确认机制。
可靠性 消息默认磁盘持久化,可以制定多副本,消息消费不会删除 消息持久化, 消息接收、发送确认, 高可用集群
吞吐能力 intel Xeon 2.5 GHz processor with six cores
Six 7200 RPM SATA drives
32GB of RAM
1Gb Ethernet
一个消息生产端,无备份,每秒消息数821557条,传输量78m/s。
单节点传输速度8745msg/s,传输量10m/s
集群 kafka采用zookeeper对集群中的broker、consumer进行管理,可以注册topic到zookeeper上;通过zookeeper的协调机制,producer保存对应topic的broker信息,可以随机或者轮询发送到broker上;并且producer可以基于语义指定分片,消息发送到broker的某分片上 rabbitMQ的负载均衡需要单独的loadbalancer进行支持。
消息隔离性 通过acl控制topic访问 基于vhost做消息隔离,用户对queues,exchanges,channels等权限独立
监控 三方kafka-manager提供,详见下方提供的管理页面 自身集成rabbitmq-management

rabbitmq管理页面
username:guest
password:guest
kafka管理页面

rabitmq-manual

一、 概述
rabbitmq作为消息队列服务,主要用以消息接受、存储和转发。我们可以简单理解为邮件服务系统,所以涉及到的主要交互终端包括发件人和收件人,在rabbitmq中被称为消息生产者(producer)和消息消费者(consumer)。下文我们主要描述如何使用最简单的Java程序与rabbitmq server进行消息交互。
二、 管理页面设置
a) 新增vHost

b) 添加用户

c) 设置用户vHost权限

三、 环境准备

  1. jdk1.6以上
  2. 依赖jar包
1
2
3
4
5
6
7
<dependencies>
<dependency>
<groupId>com.rabbitmq</groupId>
<artifactId>amqp-client</artifactId>
<version>3.6.3</version>
</dependency>
</dependencies>
  1. rabbitmq server 2.8以上

四、 发送端
代码中诸如vhost, username, password以及用户和vhost之间的权限关系都是在rabbitmq management 的web页面中设置的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ConnectionFactory factory = new ConnectionFactory();
//指定rabbitmq服务器地址,默认端口5672
factory.setHost("103.39.107.171");
//rabbitmq将队列、交换策略,绑定关系等抽象成Vhost,此处需要指定
factory.setVirtualHost("chaoyang");
//指定连接使用的用户名
factory.setUsername("chaoyanguser");
//指定连接使用的密码
factory.setPassword("111111");
//队列名称,就是要指定消息放到哪个通道里
String queueName = "chaoyang_queue";
//创建tcp连接
Connection connection = factory.newConnection();
//打开连接通道
Channel channel = connection.createChannel();
//申明一个队列
channel.queueDeclare(queueName, false, false, false, null);
String message = "I hate it";
//发送消息
channel.basicPublish("", queueName, null, message.getBytes());
System.out.println(" [x] Sent '" + message + "'");
//关闭别忘以上各种对象

五、 接受端
代码中诸如vhost, username, password以及用户和vhost之间的权限关系都是在rabbitmq management 的web页面中设置的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
ConnectionFactory factory = new ConnectionFactory();
//指定rabbitmq服务器地址,默认端口5672
factory.setHost("103.39.107.171");
//rabbitmq将队列、交换策略,绑定关系等抽象成Vhost,此处需要指定
factory.setVirtualHost("chaoyang");
//指定连接使用的用户名
factory.setUsername("chaoyanguser");
//指定连接使用的密码
factory.setPassword("111111");
//队列名称,就是要指定消息放到哪个通道里
String queueName = "chaoyang_queue";
//创建tcp连接
Connection connection = factory.newConnection();
//打开连接通道
Channel channel = connection.createChannel();
//申明一个队列
channel.queueDeclare(queueName, false, false, false, null);
//定义一个消息消费者对象
QueueingConsumer consumer = new QueueingConsumer(channel);
//指定要接收消息的通道
channel.basicConsume(queueName, false, consumer);
//阻塞式消息收取
while (true) {
QueueingConsumer.Delivery delivery = consumer.nextDelivery();
String message = new String(delivery.getBody());
channel.basicAck(delivery.getEnvelope().getDeliveryTag(), false);
System.out.println(" [x] Received '" + message + "'");
}

java-interview

概括的解释下线程的几种可用状态。

线程在执行过程中,可以处于下面几种状态:

就绪(Runnable):线程准备运行,不一定立马就能开始执行。

运行中(Running):进程正在执行线程的代码。

等待中(Waiting):线程处于阻塞的状态,等待外部的处理结束。

睡眠中(Sleeping):线程被强制睡眠。

I/O阻塞(Blocked on I/O):等待I/O操作完成。

同步阻塞(Blocked on Synchronization):等待获取锁。

死亡(Dead):线程完成了执行。

同步方法和同步代码块的区别是什么?

在Java语言中,每一个对象有一把锁。线程可以使用synchronized关键字来获取对象上的锁。synchronized关键字可应用在方法级别(粗粒度锁)或者是代码块级别(细粒度锁)。

15.在监视器(Monitor)内部,是如何做线程同步的?程序应该做哪种级别的同步?

监视器和锁在Java虚拟机中是一块使用的。监视器监视一块同步代码块,确保一次只有一个线程执行同步代码块。每一个监视器都和一个对象引用相关联。线程在获取锁之前不允许执行同步代码。

Java中的HashMap的工作原理是什么?

Java中的HashMap是以键值对(key-value)的形式存储元素的。HashMap需要一个hash函数,它使用hashCode()和equals()方法来向集合/从集合添加和检索元素。当调用put()方法的时候,HashMap会计算key的hash值,然后把键值对存储在集合中合适的索引上。如果key已经存在了,value会被更新成新值。HashMap的一些重要的特性是它的容量(capacity),负载因子(load factor)和扩容极限(threshold resizing)。

简述JVM内存模型和垃圾回收机制

java中有几种方法可以实现一个线程?

可以使用Runnable,Callable,Thread或者线程池

java如何实现多线程之间的通讯和协作?

同步和互斥,资源互斥、协调竞争是要解决的因,同步是竞争协调的果。可以使用synchnized/notify/notifyAll以及Lock/Condition, CyclicBarrier/Semaphore/Countdownbatch。线程的join以及Future/FutureTask是为了解决多线程计算后的结果统计

如何合理的配置java线程池?如CPU密集型的任务,基本线程池应该配置多大?IO密集型的任务,基本线程池应该配置多大?用有界队列好还是无界队列好?任务非常多的时候,使用什么阻塞队列能获取最好的吞吐量?

浅谈java的io和nio

解释AOP模块

AOP模块用于发给我们的Spring应用做面向切面的开发, 很多支持由AOP联盟提供,这样就确保了Spring和其他AOP框架的共通性。这个模块将元数据编程引入Spring。

关于标准的JDK库中使用的一些设计模式

Decorator设计模式常被用于各种Java IO类中
Singleton模式常被用在运行环节中,Calendar以及各种其他类
Factory(工厂)模式常被用于各种不可变类,比如Boolean。Boolean.valueOf
Observer模式常被用于Swing和许多事件监听器框架中。

解释Spring支持的几种bean的作用域。

Spring框架支持以下五种bean的作用域:

singleton : bean在每个Spring ioc 容器中只有一个实例。
prototype:一个bean的定义可以有多个实例。
request:每次http请求都会创建一个bean,该作用域仅在基于web的Spring ApplicationContext情形下有效。
session:在一个HTTP Session中,一个bean定义对应一个实例。该作用域仅在基于web的Spring ApplicationContext情形下有效。
global-session:在一个全局的HTTP Session中,一个bean定义对应一个实例。该作用域仅在基于web的Spring ApplicationContext情形下有效。
缺省的Spring bean 的作用域是Singleton.

解释Spring框架中bean的生命周期。

Spring容器 从XML 文件中读取bean的定义,并实例化bean。
Spring根据bean的定义填充所有的属性。
如果bean实现了BeanNameAware 接口,Spring 传递bean 的ID 到 setBeanName方法。
如果Bean 实现了 BeanFactoryAware 接口, Spring传递beanfactory 给setBeanFactory 方法。
如果有任何与bean相关联的BeanPostProcessors,Spring会在postProcesserBeforeInitialization()方法内调用它们。
如果bean实现IntializingBean了,调用它的afterPropertySet方法,如果bean声明了初始化方法,调用此初始化方法。
如果有BeanPostProcessors 和bean 关联,这些bean的postProcessAfterInitialization() 方法将被调用。
如果bean实现了 DisposableBean,它将调用destroy()方法。

有哪些不同类型的IOC(依赖注入)方式?

构造器依赖注入:构造器依赖注入通过容器触发一个类的构造器来实现的,该类有一系列参数,每个参数代表一个对其他类的依赖。
Setter方法注入:Setter方法注入是容器通过调用无参构造器或无参static工厂 方法实例化bean之后,调用该bean的setter方法,即实现了基于setter的依赖注入。

nosql数据库有哪些类型,举例

键值 redis memcache
列存储 hbase cassandra
文档 mongodb

redis的持久话方式和各自特点

aof rdb

redis集群原理

Hash分片盒数据交换

redis的使用场景

mongo适用场景:

网站数据:Mongo非常适合实时的插入,更新与查询,并具备网站实时数据存储所需的复制及高度伸缩性。
缓存:由于性能很高,Mongo也适合作为信息基础设施的缓存层。在系统重启之后,由Mongo搭建的持久化缓存层可以避免下层的数据源 过载。
大尺寸,低价值的数据:使用传统的关系型数据库存储一些数据时可能会比较昂贵,在此之前,很多时候程序员往往会选择传统的文件进行存储。
高伸缩性的场景:Mongo非常适合由数十或数百台服务器组成的数据库。Mongo的路线图中已经包含对MapReduce引擎的内置支持。
用于对象及JSON数据的存储:Mongo的BSON数据格式非常适合文档化格式的存储及查询。

分片(sharding)和复制(replication)是怎样工作的?

每一个分片(shard)是一个分区数据的逻辑集合。分片可能由单一服务器或者集群组成,我们推荐为每一个分片(shard)使用集群。

集群和分布式的区别

linux 修改时区并更新时间

edit system profile:

1
vi /etc/profile

add:

1
export TZ='Asia/Shanghai';

install ntpdate

1
2
apt-get install ntpdate
/usr/sbin/ntpdate asia.pool.ntp.org && /sbin/hwclock --systohc

add crontable

1
crontab -e

add:

1
/usr/sbin/ntpdate asia.pool.ntp.org && /sbin/hwclock --systohc

执行 “date”命令查看时间

maven集成sonar代码分析

这两天项目组做web开发基础框架,需要集成sonar代码分析。

之前也用过sonar,只不过代码分析需要人工触发或者设置linux定时任务,本次web基础框架同时集成了bamboo日构建,故此想在每次代码提交之后即触发代码分析。

阅读这篇笔记假设你已经搭建好了sonar服务,同时安装好了maven。

1.修改maven的配置文件setting.xml,这个文件一般会放在~/.m2或者$MAVEN_HOME/conf目录下。

2.打开这个文件在对应的为知里面添加如下配置。

  1. &lt;?xml version="1.0" encoding="UTF-8"?&gt;
  2. &lt;settings&gt;
  3. &lt;pluginGroups&gt;
  4. &lt;pluginGroup&gt;org.sonarsource.scanner.maven&lt;/pluginGroup&gt;
  5. &lt;/pluginGroups&gt;
  6. &lt;profiles&gt;
  7. &lt;profile&gt;
  8. &lt;id&gt;sonar&lt;/id&gt;
  9. &lt;activation&gt;
  10. &lt;activeByDefault&gt;true&lt;/activeByDefault&gt;
  11. &lt;/activation&gt;
  12. &lt;properties&gt;
  13. &lt;!-- Optional URL to server. Default value is http://localhost:9000 --&gt;
  14. &lt;sonar.jdbc.url&gt;jdbc:postgresql://10.20.0.171:5432/sonar&lt;/sonar.jdbc.url&gt;
  15. &lt;sonar.jdbc.driver&gt;org.postgresql.Driver&lt;/sonar.jdbc.driver&gt;
  16. &lt;sonar.jdbc.username&gt;postgres&lt;/sonar.jdbc.username&gt;
  17. &lt;sonar.jdbc.password&gt;&lt;/sonar.jdbc.password&gt;
  18. &lt;sonar.host.url&gt;http://10.20.0.171:9000&lt;/sonar.host.url&gt;
  19. &lt;/properties&gt;
  20. &lt;/profile&gt;
  21. &lt;/profiles&gt;
  22. &lt;/settings&gt;
    在此提醒一点,maven-sonar-plugin的会将分析完结果插入sonar指定的数据库中,所以在此需要保证数据库可以外网访问。postgresql为例,

a.更改postgressql.conf

  1. listen_addresses = '*'
     

b.更改 pg_hba.conf

  1. # IPv4 local connections:
  2. host all all 127.0.0.1/32 md5
  3. host all all 0.0.0.0/0 trust
     

3. 执行代码分析

  1. mvn clean verify sonar:sonar
    Ops!!!出错了!

Ops!!!出错了!

  1. Failed to execute goal org.sonarsource.scanner.maven:sonar-maven-plugin:3.0.1:sonar
    换个命令执行

  2. mvn org.sonarsource.scanner.maven:sonar-maven-plugin:3.0.1:sonar

    Ops!!!出错了!

  3. Failed to execute goal org.sonarsource.scanner.maven:sonar-maven-plugin:3.0.1:sonar (default-cli) on project ruma-web: 'sonar.projectDate' property cannot be older than the date of the last known quality snapshot on this project. Value: '2016-03-17T06:35:16+0000'. Latest quality snapshot: '2016-03-17T14:13:01+0000'. This property may only be used to rebuild the past in a chronological order. -&gt; [Help 1]

    搞咩啊,时间不对也不行啊,一看服务器的时间果然不对

尼玛,调整时间再试试吧。

参考我之前的笔记linux时区调整

  1. vi /etc/profile
  2. add line:
  3. export TZ='Asia/Shanghai';
  4. save and exit
  5. source /etc/profile


继续执行

  • mvn org.sonarsource.scanner.maven:sonar-maven-plugin:3.0.1:sonar


  • 等待了良久,喝了杯茶(twinings)…..

    4.终于成功了

    untitled

     

    问题真不少啊。

    qq:986737506

    email:ding_cuiping@163.com

    Extjs文件上传格式大小限制

    用extjs3实现文件上传时的格式和大小控制


    1. <span class="pun">&lt;</span><span class="pln">script type</span><span class="pun">=</span><span class="str">"text/javascript"</span><span class="pun">&gt;</span>
    2. <span class="pln"> </span><span class="com">//验证图片文件的正则</span>
    3. <span class="pln"> </span><span class="kwd">var</span><span class="pln"> img_reg </span><span class="pun">=</span><span class="pln"> </span><span class="str">/\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/</span><span class="pun">;</span>
    4. <span class="pln"> </span><span class="com">// var img_reg = /\.jpg$/;</span>
    5. <span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">img_reg</span><span class="pun">.</span><span class="pln">test</span><span class="pun">(</span><span class="pln">value</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span>
    6. <span class="pln"> </span><span class="typ">Ext</span><span class="pun">.</span><span class="typ">Msg</span><span class="pun">.</span><span class="pln">alert</span><span class="pun">(</span><span class="str">'提示'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'文件类型错误,请选择图片文件(jpg/jpeg/gif/png/bmp)'</span><span class="pun">);</span>
    7. <span class="pln"> o</span><span class="pun">.</span><span class="pln">setRawValue</span><span class="pun">(</span><span class="str">''</span><span class="pun">);</span>
    8. <span class="pln"> </span><span class="pun">}</span>
    9. <span class="pln"> </span><span class="kwd">var</span><span class="pln"> fileInput </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'add_image'</span><span class="pun">);</span>
    10. <span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">fileInput </span><span class="pun">!=</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span>
    11. <span class="pln"> </span><span class="kwd">var</span><span class="pln"> fileSize </span><span class="pun">=</span><span class="pln"> getFileSize</span><span class="pun">(</span><span class="pln">fileInput</span><span class="pun">);</span>
    12. <span class="pln"> alert</span><span class="pun">(</span><span class="pln">fileSize</span><span class="pun">);</span>
    13. <span class="pln"> </span><span class="com">//允许上传不大于1M的文件</span>
    14. <span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">fileSize </span><span class="pun">&gt;</span><span class="pln"> </span><span class="lit">512</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span>
    15. <span class="pln"> </span><span class="typ">Ext</span><span class="pun">.</span><span class="typ">Msg</span><span class="pun">.</span><span class="pln">alert</span><span class="pun">(</span><span class="str">'提示'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'文件太大,请选择小于512kb的图片文件!'</span><span class="pun">);</span>
    16. <span class="pln"> o</span><span class="pun">.</span><span class="pln">setRawValue</span><span class="pun">(</span><span class="str">''</span><span class="pun">);</span>
    17. <span class="pln"> </span><span class="pun">}</span>
    18. <span class="pln"> </span><span class="pun">}</span>
    19. <span class="pun">&lt;/</span><span class="pln">script</span><span class="pun">&gt;</span>

    使用跨平台技术h5+实现应用图片本地缓存

    在大哥王(andy)神一样的带领下,我们牛逼闪闪的走上了使用h5plus技术实现跨平台技术开发的道路,一路高歌!!!

    下面我要分享的内容是如何实现图片本地缓存。


    废话不说,直接看代码:




    1. <span class="pun">/**</span>
    2. <span class="pun">*</span><span class="pun">声明获取图片的方法</span>
    3. <span class="pun">*</span><span class="lit">@param</span><span class="pun">{</span><span class="typ">Object</span><span class="pun">}</span><span class="pln"> picUrl </span><span class="pun">图片的网络地址</span>
    4. <span class="pun">*</span><span class="lit">@param</span><span class="pun">{</span><span class="typ">Object</span><span class="pun">}</span><span class="pln"> defaultPic </span><span class="pun">默认图片</span>
    5. <span class="pun">*</span><span class="lit">@param</span><span class="pun">{</span><span class="typ">Object</span><span class="pun">}</span><span class="pln"> element </span><span class="pun">图片源元素</span>
    6. <span class="pun">*/</span>
    7. <span class="kwd">function</span><span class="pln"> fetchImage</span><span class="pun">(</span><span class="pln">picUrl</span><span class="pun">,</span><span class="pln"> defaultPic</span><span class="pun">,</span><span class="pln"> element</span><span class="pun">)</span><span class="pun">{</span>
    8. <span class="pun">//将图片网络地址进行</span><span class="pln">md5</span><span class="pun">摘要。</span>
    9. <span class="pln"> var filename </span><span class="pun">=</span><span class="pln"> hex_md5</span><span class="pun">(</span><span class="pln">picUrl</span><span class="pun">);</span>
    10. <span class="pln"> element</span><span class="pun">.</span><span class="pln">setAttribute</span><span class="pun">(</span><span class="str">"src"</span><span class="pun">,</span><span class="pln"> defaultPic</span><span class="pun">);</span>
    11. <span class="pun">//尝试加载本地图片</span>
    12. <span class="pln"> plus</span><span class="pun">.</span><span class="pln">io</span><span class="pun">.</span><span class="pln">resolveLocalFileSystemURL</span><span class="pun">(</span><span class="str">"_downloads/"</span><span class="pun">+</span><span class="pln"> filename</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">entry</span><span class="pun">)</span><span class="pun">{</span>
    13. <span class="pun">//</span><span class="pun">加载本地图片成功</span>
    14. <span class="pln"> entry</span><span class="pun">.</span><span class="pln">file</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">file</span><span class="pun">){</span>
    15. <span class="kwd">if</span><span class="pun">(</span><span class="pln">file</span><span class="pun">.</span><span class="pln">size</span><span class="pun">==</span><span class="lit">0</span><span class="pun">){</span>
    16. <span class="pun">//</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"2.1图片为空显示默认"</span><span class="pun">);</span>
    17. <span class="pln"> element</span><span class="pun">.</span><span class="pln">setAttribute</span><span class="pun">(</span><span class="str">"src"</span><span class="pun">,</span><span class="pln"> defaultPic</span><span class="pun">);</span>
    18. <span class="pun">}</span><span class="kwd">else</span><span class="pun">{</span>
    19. <span class="pln"> var path </span><span class="pun">=</span><span class="pln"> plus</span><span class="pun">.</span><span class="pln">io</span><span class="pun">.</span><span class="pln">convertLocalFileSystemURL</span><span class="pun">(</span><span class="str">"_downloads/"</span><span class="pun">+</span><span class="pln"> filename</span><span class="pun">);</span>
    20. <span class="pun">//</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"2.1加载本地图片"</span><span class="pun">+</span><span class="pln">path</span><span class="pun">);</span>
    21. <span class="pln"> element</span><span class="pun">.</span><span class="pln">setAttribute</span><span class="pun">(</span><span class="str">"src"</span><span class="pun">,</span><span class="pln"> path</span><span class="pun">);</span>
    22. <span class="pun">}</span>
    23. <span class="pun">});</span>
    24. <span class="pun">},</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pun">{</span>
    25. <span class="pun">//加载本地图片失败,本地没有该图片,尝试从网络下载图片并保存本地,保存文件名为</span><span class="pln">url</span><span class="pun">摘要</span><span class="pln">md5</span><span class="pun">值</span>
    26. <span class="pln"> var dtask </span><span class="pun">=</span><span class="pln"> plus</span><span class="pun">.</span><span class="pln">downloader</span><span class="pun">.</span><span class="pln">createDownload</span><span class="pun">(</span><span class="pln">picUrl</span><span class="pun">,</span><span class="pun">{</span><span class="pln">filename</span><span class="pun">:</span><span class="pln">filename</span><span class="pun">},</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">d</span><span class="pun">,</span><span class="pln"> status</span><span class="pun">)</span><span class="pun">{</span>
    27. <span class="pun">//</span><span class="pun">下载完成</span>
    28. <span class="kwd">if</span><span class="pun">(</span><span class="pln">status </span><span class="pun">==</span><span class="lit">200</span><span class="pun">)</span><span class="pun">{</span>
    29. <span class="kwd">if</span><span class="pun">(</span><span class="pln">d</span><span class="pun">.</span><span class="pln">downloadedSize</span><span class="pun">==</span><span class="lit">0</span><span class="pun">){</span>
    30. <span class="pun">//</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"2.2图片为空显示默认"</span><span class="pun">);</span>
    31. <span class="pln"> element</span><span class="pun">.</span><span class="pln">setAttribute</span><span class="pun">(</span><span class="str">"src"</span><span class="pun">,</span><span class="pln"> defaultPic</span><span class="pun">);</span>
    32. <span class="pun">}</span><span class="kwd">else</span><span class="pun">{</span>
    33. <span class="pun">//</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"2.2下载网络文件成功"</span><span class="pun">+</span><span class="pln">d</span><span class="pun">.</span><span class="pln">url</span><span class="pun">);</span>
    34. <span class="pln"> element</span><span class="pun">.</span><span class="pln">setAttribute</span><span class="pun">(</span><span class="str">"src"</span><span class="pun">,</span><span class="pln"> d</span><span class="pun">.</span><span class="pln">url</span><span class="pun">);</span>
    35. <span class="pun">}</span>
    36. <span class="pun">}</span>
    37. <span class="pun">});</span>
    38. <span class="pln"> dtask</span><span class="pun">.</span><span class="pln">start</span><span class="pun">();</span>
    39. <span class="pun">});</span>
    40. <span class="pun">}</span>


    以上主要用到h5plus的两个重要的api

    1.Downloader模块管理网络文件下载任务,用于从服务器下载各种文件,并支持跨域访问操作。


    2.IO模块管理本地文件系统,用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过plus.io可获取文件系统管理对象。

    详见官方:




    刚开始做的时候准备使用html5的indexedDB存储图片来的,但是后来发现在移动设备上不好用。参考https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/