最近遇到一个需求，给所有页面加水印（登录人+登录时间），不影响其他点击等功能的使用，目的是防止信息外漏，当时就在想：这年头，PS就不说人人都能使用，谁手机还没个涂鸦功能，防不了，但是就是这么个需求，那就实现吧，不逼逼了，直接上：
 
具体实现思路：在页面底部加一个大的div,给这个div添加背景图，背景图？从哪来？canvas实现吧！
 
思路有了，直接上代码：
 
(function waterMark(){
	function textBecomeImg(text,fontsize,fontcolor){
		var canvas = document.createElement('canvas');
		$buHeight = 0;
		if(fontsize <= 32){ $buHeight = 99; }
		else if(fontsize > 32 && fontsize <= 60 ){ $buHeight = 2;}
		else if(fontsize > 60 && fontsize <= 80 ){ $buHeight = 4;}
		else if(fontsize > 80 && fontsize <= 100 ){ $buHeight = 6;}
		else if(fontsize > 100 ){ $buHeight = 10;}
		canvas.height=fontsize + $buHeight ;
		canvas.padding=30;
		var context = canvas.getContext('2d');
		context.clearRect(0, 0, canvas.width*2, canvas.height);
		context.textAlign = "center";
                canvas.width = 450;
                canvas.height = 200;
                context.fillStyle = fontcolor;
                context.font=fontsize+"px Arial";
                context.textBaseline = 'middle'; 
                context.fillText(text,0,fontsize/2);
                var canvasWidth = canvas.width/99;
                canvasWidth = context.measureText(text).width;
		var dataUrl = canvas.toDataURL('image/png');
		return dataUrl;
	}
	var text = DateUtil.getDate(new Date())+currentUserName;
	var shuiyinDiv = document.createElement('div');
	var style = shuiyinDiv.style;
	style.position = 'absolute';
	style.left = 0;
	style.top = '-60%';
	style.width = '120%';
	style.height = '200%';
	style.opacity = '0.1';
	style.background = "url("+textBecomeImg(text,22,"gray")+")";
	style.zIndex = 9999999991;
	style.transform = "rotate(-30deg)";
	style.pointerEvents = "none";
	document.body.appendChild(shuiyinDiv);
})();
 
效果图：
 

java实现爬虫利用httpclient获取页面数据,再用jsoup解析获取数据,在此页面的分析不作过多赘述,读者自行分析.
 
1.首页输入手机,观察url参数,将其中"&page="提取到最后,便于拼接页码参数;
 
2.查看网页源代码,观看到商品列表标签,所以第一步,获取商品列表,Elements spuEles = doc.select( "div#J_goodsList>ul>li" );第二步,获取spu,long spu = Long.parseLong( spuEle.attr( "data-spu" ) );第三步,获取sku列表,Elements skuEles = spuEle.select( "li.ps-item" );第四步,获取单个sku,long sku = Long.parseLong( skuEle.select( "[data-sku]" ).attr( "data-sku" ) );之后的操作就都是通过这个sku来操作的;
 
3.代码:
 
(1)添加依赖
 
<!-- https://mvnrepository.com/artifact/org.apache.httpcomponents/httpclient -->
		<dependency>
		    <groupId>org.apache.httpcomponents</groupId>
		    <artifactId>httpclient</artifactId>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.jsoup/jsoup -->
		<dependency>
		    <groupId>org.jsoup</groupId>
		    <artifactId>jsoup</artifactId>
		    <version>1.11.3</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 -->
		<dependency>
		    <groupId>org.apache.commons</groupId>
		    <artifactId>commons-lang3</artifactId>
		    <version>3.4</version>
		</dependency>
<!-- jpa -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>
 
数据库等其他依赖就不贴了;
 
(2)工具类封装
 
@Component
public class HttpUtils {

    private PoolingHttpClientConnectionManager cm;

    public HttpUtils() {
        this.cm = new PoolingHttpClientConnectionManager();
        // 设置最大连接数
        this.cm.setMaxTotal( 100 );
        // 设置每个主机的最大连接数
        this.cm.setDefaultMaxPerRoute( 10 );
    }

    // 根据请求地址下载页面数据
    public String doGetHtml( String url ) {
        // 获取httpclient对象
        CloseableHttpClient httpClient = HttpClients.custom()
                                                    .setConnectionManager( this.cm )
                                                    .build();
        // 设置httpGet请求对象,设置url地址
        HttpGet httpGet = new HttpGet( url );
        httpGet.addHeader( "user-agent", "Mozilla/5.0" );
        // 设置请求信息
        httpGet.setConfig( this.getConfig() );
        CloseableHttpResponse response = null;
        try {
            // 使用httpclient发起请求,回去响应
            response = httpClient.execute( httpGet );
            // 解析响应.返回结果
            if ( response.getStatusLine()
                         .getStatusCode() == 200 ) {
                // 判断响应体Entity是否不为空,如果不为空就可以使用EntityUtils
                if ( response.getEntity() != null ) {
                    String content = EntityUtils.toString( response.getEntity(), "utf-8" );
                    return content;
                }
            }
        } catch( Exception e ) {
            e.printStackTrace();
        } finally {
            try {
                // 关闭response
                if ( response != null ) {
                    response.close();
                }
            } catch( IOException e ) {
                e.printStackTrace();
            }
        }
        // 返回空字符串
        return "";
    }

    /**
     * //下载图片名称
     * 
     * @param url
     * @return
     */
    public String doGetImage( String url ) {
        // 获取httpclient对象
        CloseableHttpClient httpClient = HttpClients.custom()
                                                    .setConnectionManager( this.cm )
                                                    .build();
        // 设置httpGet请求对象,设置url地址
        HttpGet httpGet = new HttpGet( url );
        httpGet.addHeader( "user-agent", "Mozilla/5.0" );
        // 设置请求信息
        httpGet.setConfig( this.getConfig() );
        CloseableHttpResponse response = null;
        try {
            // 使用httpclient发起请求,回去响应
            response = httpClient.execute( httpGet );
            // 解析响应.返回结果
            if ( response.getStatusLine()
                         .getStatusCode() == 200 ) {
                // 判断响应体Entity是否不为空,如果不为空就可以使用EntityUtils
                if ( response.getEntity() != null ) {
                    // 下载图片
                    // 获取图片的后缀
                    String extName = url.substring( url.lastIndexOf( "." ) );
                    // 创建图片名,重命名图片
                    String picName = UUID.randomUUID()
                                         .toString() +
                                     extName;
                    // 下载图片
                    // 声明OutPutStream
                    OutputStream outPutStream = new FileOutputStream( new File( "D:\\driver\\images\\" + picName ) );
                    response.getEntity()
                            .writeTo( outPutStream );
                    // 返回图片名称
                    return picName;
                }
            }
        } catch( Exception e ) {
            e.printStackTrace();
        } finally {
            try {
                // 关闭response
                if ( response != null ) {
                    response.close();
                }
            } catch( IOException e ) {
                e.printStackTrace();
            }
        }
        // 如果下载失败,返回空字符串
        return "";
    }

    // 设置请求信息
    private RequestConfig getConfig() {
        RequestConfig config = RequestConfig.custom()
                                            .setConnectTimeout( 1000 ) // 创建连接的最长时间
                                            .setConnectionRequestTimeout( 500 ) // 获取连接的最长时间
                                            .setSocketTimeout( 10000 ) // 数据传输最长时间
                                            .build();
        return config;
    }
}
 
(3)dao层,service层以及实体类
 
public interface ItemDao extends JpaRepository<Item, Long> {

}

@Service
public class ItemService {

    @Autowired
    private ItemDao itemDao;

    @Transactional
    public void save( Item item ) {
        this.itemDao.save( item );
    }

    public List<Item> findAll( Item item ) {
        // 声明查询条件
        Example<Item> example = Example.of( item );
        // 根据查询条件进行查询数据
        List<Item> list = this.itemDao.findAll( example );
        return list;
    }
}

@Entity
@Table( name = "jd_item" )
@Data
public class Item {

    @Id
    @GeneratedValue( strategy = GenerationType.IDENTITY )
    private Long   id;

    private Long   spu;

    private Long   sku;

    private String title;

    private Double price;

    private String pic;

    private String url;

    private Date   created;

    private Date   updated;
}
 
(4)定时任务
 
@Component
public class ItemTask {

    @Autowired
    private HttpUtils                 httpUtils;

    @Autowired
    private ItemService               itemService;

    @Autowired
    private static final ObjectMapper MAPPER = new ObjectMapper();

    // 当下载任务完成后,间隔多长时间进行下一次的任务
    @Scheduled( fixedDelay = 100 * 1000 )
    public void itemTask() throws Exception {
        // 声明需要解析的初始地址
        String url = "https://search.jd.com/Search?keyword=%E6%89%8B%E6%9C%BA&enc=utf-8&qrst=1&rt=1&stop=1&vt=2&suggest=1.def.0.V13--12%2C20%2C&wq=shouji&cid2=653&cid3=655&s=59&click=0&page=";
        // 遍历页面
        for( int i = 1; i < 10; i = i + 2 ) {
            String html = httpUtils.doGetHtml( url + i );
            // 解析页面,获取商品数据并存储
            this.parse( html );
        }
        System.out.println( "手机数据抓取完成!" );
    }

    // 解析页面,获取商品数据并存储
    private void parse( String html ) throws Exception {
        // 解析html,获取dom对象
        Document doc = Jsoup.parse( html );
        // 获取商品列表
        Elements spuEles = doc.select( "div#J_goodsList>ul>li" );
        for( Element spuEle : spuEles ) {
            // 获取spu
            long spu = Long.parseLong( spuEle.attr( "data-spu" ) );
            // 获取sku列表
            Elements skuEles = spuEle.select( "li.ps-item" );
            for( Element skuEle : skuEles ) {
                // 获取sku
                long sku = Long.parseLong( skuEle.select( "[data-sku]" )
                                                 .attr( "data-sku" ) );
                // 根据sku查询商品数据
                Item item = new Item();
                item.setSku( sku );
                List<Item> list = this.itemService.findAll( item );
                if ( list.size() > 0 ) {
                    // 如果商品存在,就进行下一个循环,该商品不保存,因为已存在
                    continue;
                }
                // 设置商品的spu
                item.setSpu( spu );
                // 获取商品详情的url
                String itemUrl = "https://item.jd.com/" + sku + ".html";
                item.setUrl( itemUrl );
                // 获取商品的图片
                String picUrl = "https:" + skuEle.select( "img[data-sku]" )
                                                 .first()
                                                 .attr( "data-lazy-img" );
                picUrl = picUrl.replace( "/n9", "/n1" );
                String picName = this.httpUtils.doGetImage( picUrl );
                item.setPic( picName );
                // 获取商品的价格
                String priceJson = this.httpUtils.doGetHtml( "https://p.3.cn/prices/mgets?skuIds=J_" + sku );
                double price = MAPPER.readTree( priceJson )
                                     .get( 0 )
                                     .get( "p" )
                                     .asDouble();
                item.setPrice( price );
                // 获取商品的标题
                String itemInfo = this.httpUtils.doGetHtml( item.getUrl() );
                String title = Jsoup.parse( itemInfo )
                                    .select( "div.sku-name" )
                                    .text();
                item.setTitle( title );
                item.setCreated( new Date() );
                item.setUpdated( item.getCreated() );
                // 保存商品数据到数据库
                this.itemService.save( item );
            }
        }
    }
}
 
注意事项,一开始我httpclient没有添加header,导致获取到的html都是跳转到登录页面,后面模拟浏览器之后OK了

vue 如何给页面添加enter回车事件？
 
 
主要代码：
 

 	@keyup.enter.native="ajaxLoginApi()"   
 	
 
 
代码示例：
 

	<el-form ref="form" :model="form" :label-position="labelPosition" label-suffix=":" label-width="100px" status-icon>
     	   <el-form-item label="手机号码">
                <el-input v-model="form.username" size="mini" @keyup.enter.native="ajaxLoginApi()"></el-input>
           </el-form-item>
           <div class="tips"></div>
           <el-form-item label="密码">
                <el-input type="password" v-model="form.pwd" size="mini" clearable  @keyup.enter.native="ajaxLoginApi()"></el-input>
           </el-form-item>
           <div class="tips"></div>
           <div class="tips"></div>
           <div style="margin-top: 10px;margin-left：0">
             <el-button type="primary" @click="ajaxLoginApi" size="medium">确认登录</el-button>
             <el-button type="" plain size="medium" @click="linkTo('#/register')">立即注册</el-button>
           </div>
     </el-form>

 
 
效果图截图：
 
 
 
 
除了按钮提交，还能在表单校验无误之后，键盘enter回车提交！
 
 
 
 
 
以上就是关于 ” vue 给页面添加enter回车事件 - 代码篇 “ 的全部内容。
 

  前天，客户打电话来说系统出现了一个问题，就是苹果的手机页面不能往下滑动，导致数据显示只有一页，很多数据都不能显示。情况如下：
 
   但是在安卓手机上很正常，经过分析，和js和ajax都没有关系，那么就只可能是和mui框架或者iframe标签有关系了，找到原因后就可以定位解决了。
   具体的原因是因为mui的框架样式不兼容苹果手机的浏览器，css样式有两个属性可以完美的帮助我们解决这个问题。我们将它修改一下，自己写一个样式添加上去就可以。
 
原先的代码：
 
<!--主要可变区域-->
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
	<iframe id="content" frameborder="0"scrolling="auto" 
		style="width: 100%; height: 100%;" src="/mobile_annonce/Index" >
	</iframe>
</div>
 
做如下修改，来兼容iphone的浏览器。
 
1、添加css样式：
 
/*********************************************************************/
/*
    修改人：张连康
    修改内容：兼容iframe框架的苹果手机端的下滑滚动
    修改时间：2018年8月29日17:01:35
*/ 
.main-iframe-holder {
    margin-top:44px;  /*适应手机端顶部区域*/ 
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
}

    .main-iframe-holder iframe {
        height: 100%;
        width: 100%;
    }
/*********************************************************************/
 
2、将原先的mui的框架div去掉，换成如下div，并应用上面的css样式。
 
<!--
/*********************************************************************/
/*
    修改人：张连康
    修改内容：兼容iframe框架的苹果手机端的下滑滚动
    修改时间：2018年8月29日17:01:35
*/    
-->
<!--主要可变区域-->
<div class="main-iframe-holder">
    <iframe id="content" frameborder="0" scrolling="auto" 
    style="width: 100%; height: 100%;" src="/mobile_annonce/Index"></iframe>
</div>
<!--/*********************************************************************/-->
 
3、查看效果，经过测试在苹果手机上都已经解决了。
 
 
  也是经过查看了好多资料才找到的解决方案，解决ios系统iframe滚动问题这是一个国外的网站，幸好没有被墙掉，不然都不知道要费多少时间才能解决，就这样，也是花费了一天的时间和精力，软考和自考都落下很多了。。。希望系统不要在有bug了，让我安静的学习一段时间。
   解决问题前，一定要分析问题产生的原因，不能上来就干，要不然会浪费很多时间，做一些无用功。才好对症下药，提高效率、节省时间。