Notes for a front-end developer, esyou.net

0%

发表于 分类于 Valine：
本文字数： 5.4k 阅读时长 ≈ 5 分钟

表单美化在前端开发中经常使用到，CSS3中有很多对我们有利的伪类和属性选择器，今天主要来说说使用属性选择器和label来进行美化，不使用伪类。
首先，先来看下美化后的相关效果：

下面我们来看看实现的思想：
1、首先隐藏input
2、在label中设置背景即可

首先我们要先了解一下几个关于浏览器的知识点：
浏览器中，chrome在input的focus的时候会自动增加一个蓝色的外边框，以及select下拉，在Firefox和chrome下的显示都不一样，如下图chrome中的显示：

出现以上的问题，我们需要通过以下几个属性来解决：
select的小三角样式既然不一样，那么我们就将其删除，使用我们自己设定的图片或者svg，删除小三角的代码如下：

1
-webkit-appearance: none;
2
-webkit-tap-highlight-color: #fff;
3
appearance:none;

第二个，在chrome中出现的蓝色边框，可以直接设置outline的值为none来去除：
outline: none;
第三个问题，chrome中自动填充后，input背景会自动变为黄色的，如果input没有使用背景图片的话，那可以通过下面的css解决这个问题：

1
input:-webkit-autofill {
2
-webkit-box-shadow: 0 0 0px 1000px white inset;
3
}
阅读全文 »

发表于 分类于 Valine：
本文字数： 8.2k 阅读时长 ≈ 7 分钟

效果

GIF动图有3M多，如果没有显示出来，请再等等

看到了吧，自己的一点小创意，搞了个猪头上去。

相关代码

本程序中仅使用了vue的ajax框架vue-resource，未使用到vue-router，因此再安装vue-cli的时候，可以略过vue-router，本程序仅有一个组件，即只有一个vue文件，使用了css预处理语言stylus。使用的json数据为本站相关php代码生成的（仅为了演示），如果你是在本地搭建环境，json也可以写在本地。

本demo已经使用cordova制作成了安卓的apk文件，如需体验，请点击此处下载
源码已经提交到github（记得给我加星哦）：https://github.com/king2088/vue-tplayer
演示地址：http://www.egtch.com/t_works/tplayer/

生成json的php如下

代码非常简单，就是定义一串json数据，然后在展现出来：

1
<?php
2
    header("Access-Control-Allow-Origin: *");//设置跨域允许
3
    header('Content-Type: text/html; charset=utf-8'); //设置页面编码
4
    header('Content-type: application/json');//设置页面为json格式的文档
5
6
    $data =' {"music":[
7
        {
8
          "id":"1",
9
          "name": "Apologize",
10
          "singer":"Timbaland Remix",
11
          "img":"http://www.egtch.com/t_works/Vuedata/apologize.jpg",
12
          "url": "http://www.egtch.com/t_works/Vuedata/Apologize (Timbaland Remix).mp3"
13
        },
14
        {
15
          "id":"2",
16
          "name": "Hero",
17
          "singer":"Enrique Iglesias",
18
          "img":"http://www.egtch.com/t_works/Vuedata/hero.jpg",
19
          "url": "http://www.egtch.com/t_works/Vuedata/Hero.mp3"
20
        },
21
        {
22
          "id":"3",
23
          "name": "I AM YOU",
24
          "singer":"Kim Taylor",
25
          "img":"http://www.egtch.com/t_works/Vuedata/iamyou.jpg",
26
          "url": "http://www.egtch.com/t_works/Vuedata/I Am You.mp3"
27
        }
28
      ]}';
29
    echo $data
30
?>
阅读全文 »

发表于 分类于 Valine：
本文字数： 3.9k 阅读时长 ≈ 4 分钟

什么是MD5

MD5即Message-Digest Algorithm 5（信息-摘要算法5），用于确保信息传输完整一致。是计算机广泛使用的杂凑算法之一（又译摘要算法、哈希算法），主流编程语言普遍已有MD5实现。将数据（如汉字）运算为另一固定长度值，是杂凑算法的基础原理，MD5的前身有MD2、MD3和MD4。
MD5算法具有以下特点：
1、压缩性：任意长度的数据，算出的MD5值长度都是固定的。
2、容易计算：从原数据计算出MD5值很容易。
3、抗修改性：对原数据进行任何改动，哪怕只修改1个字节，所得到的MD5值都有很大区别。
4、强抗碰撞：已知原数据和其MD5值，想找到一个具有相同MD5值的数据（即伪造数据）是非常困难的。

MD5如此完美

虽然上面把MD5说得这么完美，而且MD5加密是不可逆加密、单向加密（就是说MD5加密后，是无法再通过相关的破解方法破解出明文密码的），但是如果真要破解MD5那也是一件很容易的事情，目前很多网站都提供相关的碰撞解密MD5的功能，因此，简单的字符串MD5加密，很容易就会被破解。那么MD5还能使用吗？肯定是可以使用的，但是必须使用混淆的方法来对加密的数据进行混淆加密。在java开发中经常都会使用混淆加密来加密字符串。如果混淆的字符串被别人发现了，那样也照样是不安全的。

如何让MD5加密更为安全

比如说网站用户密码加密，一般的肯定会想到，直接使用MD5(用户名+密码+”字符串”)的方式进行加密，以增加破解难度。当然这种方法很不错，确实能够保证数据的安全，但是也说不准，假如别人破解了你2个MD5密码的话，那么就会知道，你的加密模式。
因此，我个人建议是使用SHA1+MD5混合加密模式，或者MD5+base64的方式，使用这样的方式后，我们再对最终加密结果进行相应的替换即可得到一个很难破解的密码了。
下面我以java中MD5+base64的方式，编写了一个实例，大家可以学习下这种思路。

阅读全文 »

发表于 分类于 Valine：
本文字数： 3k 阅读时长 ≈ 3 分钟

闲着无聊，自己写了一款jQuery插件，名字就叫ScrollToAnyWhere，下面来介绍下。
github项目地址：https://github.com/king2088/jquery.ScrollToAnyWhere
jquery.ScrollToAnyWhere.js是一个jQuery滚动插件，基本上，只要给出元素id或class，即可实现滚动。其中包含了，滚动到顶部(Scroll to Top)、滚动到底部(Scroll to Bottom)、滚动到任意位置(Scroll to AnyWhere)。

兼容性 Browser Compatibility

什么，你还在用IE6？一个插件，大家都很在乎兼容性，本人鄙视IE，因此仅支持jQuery 2.0版本以上的jQuery版本，2.0版本以下未进行过测试，IE10以下浏览器未进行测试。不支持IE9及以下版本浏览器。
IE9- NO WAY.
jquery library 2.0+

使用方法

1、导入jQuery文件 Import jQuery library

在html代码head或者body标签中引入jQuery库和jquery.ScrollToAnyWhere.js
Include jquery library and jquery.ScrollToAnyWhere.js in html tag for head or body

阅读全文 »

发表于 分类于 Valine：
本文字数： 1.5k 阅读时长 ≈ 1 分钟

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式。看到ECMAScript了吧，说明是基于JavaScript大库哦。所以在开发中一般Json主要用于传递数据，我们可以通过最基本的JavaScript获得json数据，当然也可以使用Java、C++等语言获取这个json的数据。
如果在做手机应用开发的话，你又不懂Java，你只知道html、JavaScript、css，那么开发手机应用最实用的就是json了吧。大概思路如下：
建立一个Web服务器，建立一个Web程序。使用JavaScript+css建立一个手机app，通过JavaScript获得Web程序生成的Json数据，即可在手机应用上展现出Web上的相关数据咯。具体做法，可以查看我另一篇文章，《利用Cordova，jqurey与wp-rest-api制作一个属于自己博客的移动APP》，今天我要说的是Java中利用google开发的Gson jar包直接获得json数据，相关方法如下：

下载Gson jar包

打开https://github.com/google/gson，找到如下图所示，点击Clone or Download，再点击Download ZIP即可下载

解压后，看到的都是源码，自己使用elipse或者netbeans等java开发工具，自动编译java文件，并打包成jar即可

阅读全文 »

发表于 分类于 Valine：
本文字数： 749 阅读时长 ≈ 1 分钟

JQ与JAVA（Java使用GBK编码）使用GET传递参数总是出现乱码，网上找了很多解决办法，比如修改tomcat的sever.xml等都试了但是没有成功，最终使用encodeURI与decode就可以解决乱码问题。下面请看代码：

JQ代码：

1
//注册表单ajax查询用户名是否可用
2
$('input[name=uname]').blur(function(){
3
   $.ajax({
4
       type:'GET',
5
       url:'<%=basePath%>NameChek.Tao',
6
       dataType:'html',
7
       data:'uname='+encodeURI(encodeURI($(this).val())),
8
       beforeSend:function(XMLHttpRequest)
9
       {
10
           $('#AjaxUname').text('正在查询');
11
           //Pause(this,100000);
12
       },
13
       success:function (response,status,xhr) {
14
       $('#AjaxUname').html(response);
15
       }
16
});

Java sevelet中的代码

1
import java.net.URLDecoder;
2
response.setContentType("text/html;charset=GB2312");
3
request.setCharacterEncoding("GB2312");
4
String xuname = request.getParameter("username");
5
String uname =URLDecoder.decode(xuname,"utf-8");

发表于 分类于 Valine：
本文字数： 1.3k 阅读时长 ≈ 1 分钟

众所周知，servlet、JSP获得当前目录，我们可以使用System.getProperty(“user.dir”)或者request.getRealPath(“/“)还有request.getContextPath()等方法，但是今天要说的是在JavaBean里面如何获得classes及WEB-INF目录

获取classes目录可以使用以下几个方法：

使用this.getClass()

1
this.getClass().getClassLoader().getResource("").getPath();

可以直接获得classes目录，比如C:/xampp/tomcat/webapp/root/WEB-INF/classes
如果要获得当前文件所在目录或者说是当前classes所在目录可以使用下面的方法

1
this.getClass().getResource("").getPath().toString();

可以获得file:/C:/xampp/tomcat/webapp/root/WEB-INF/classes/com/db

使用Thread

1
Thread.currentThread().getContextClassLoader().getResource("").toString();

也可以直接获得classes目录，如file:/C:/xampp/tomcat/webapp/root/WEB-INF/classes

我们要如何才能获得WEB-INF目录呢？

因为没有一个专门获取WEB-INF目录的，因此我们就得使用替换replace的方法将上面获得的classes目录中的相关信息替换掉，就可以得出WEB-INF目录了。
代码如下：

1
public class TestDir {
2
    public static void main(String[] args) throws IOException{
3
        String path1 = Thread.currentThread().getContextClassLoader().getResource("").toString();
4
        //上面的path1获得file:/C:/xxxx/xxx/xxx/classes/结构的目录，我们需要将file:/去掉,并且去掉classes/
5
        path1=path1.replace("/", "\");
6
        // 将/换成\(windows下，linux下请将此处注释)
7
        path1=path1.replace("file:", "");
8
        //去掉file:
9
        path1=path1.replace("classes\", ""); 
10
        //去掉class\(linux下由于不需要将“/”转换为"\"因此linux下应该修改为“classes/”而不是classes\\)
11
        path1=path1.substring(1); 
12
        //去掉第一个\,如file:/中的“/”去掉
13
        System.out.println("Thread:"+path1);
14
    }
15
}

发表于 分类于 Valine：
本文字数： 2.3k 阅读时长 ≈ 2 分钟

你有一个自己的WordPress博客？想要制作一个个人博客的APP吗？这样一个APP要怎么才能实现？其实可以直接通过HTML+css的方法直接实现，大家应该听说过PhoneGap这个东东了吧，PhoneGap简单的说就是让一些专门做前端开发的开发者通过简单的HTML与CSS及javascript代码来实现一个手机端的APP，目前PhoneGap已将相应的核心技术贡献给了Apache，Apache利用PhoneGap的核心技术，又重新塑造了一个名为cordova的APP开发工具，下面重点介绍下Cordova。

开发工具

Cordova

首先Cordova为Apache一个开源项目，主要应用于手机端APP，主要通过HTML、CSS以及javascript这类基本的前端开发语言来进行开发和功能的实现。
Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。
Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码。
Cordova支持如下移动操作系统：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

阅读全文 »

发表于 分类于 Valine：
本文字数： 410 阅读时长 ≈ 1 分钟

Cordova开发环境，Cordova是Apache的一个开源项目，主要用于手机端APP制作，通过简单的html+css+js即可以制作出与原生APP一样的手机APP。下面就来说下如何搭建Cordova开发环境。

1、安装JDK

请自行百度或者google一下吧。

2、安装node.js

要是大家不知道node.js是什么东西，可以google一下，到其官方网站下载并且安装即可，官方网址为https://nodejs.org

3、安装git

到https://git-scm.com/官方网址去下载git软件，并且安装。

4、打开node.js的命令提示符，或者直接打开widows的命令提示符即可

然后输入

1
npm install -g cordova
阅读全文 »

发表于 分类于 Valine：
本文字数： 1.1k 阅读时长 ≈ 1 分钟

Java语言跟我确实很有缘，但是我又觉得很无助，我以刚开始接触编程类语言，首先接触的就是Java，但是令我觉得懊悔的是，当时学习条件并不是很好，各方面并未得到更好的提升，对于Java，我仅仅只属于入门级别的枪手。

平时有时间就随便折腾下而已。今天随便写了个windows下Java对MySQL的备份与恢复，简单实用，不过却并不完善，希望朋友们给予建议。如果你是初学者，请先了解下MySQL备份恢复的相关语句，可以参考我之前的一篇文章《MySQL数据库备份还原命令》。

1
package com.amysql;
2
import java.io.IOException;
3
import java.io.PrintStream;
4
public class Mysql{
5
    private static String str = null;
6
    /*备份MySQL方法*/
7
    public static void backup(){
8
        str = "mysqldump -u root -p123456 --opt wordpress > c:/wordpress.sql";/*备份MySQL的SQL语句，并且将其备份于C盘根目录下*/
9
        try {
10
        Runtime rt = Runtime.getRuntime();
11
        rt.exec("cmd /c" + str);/*启动widows下的CMD来执行命令*/
12
        System.out.println("successly!");
13
        } catch (IOException e) {
14
        e.printStackTrace();
15
        System.out.println("something wrong!");
16
        }
17
    }
18
    /*将SQL文件恢复到数据库*/
19
    public static void load(){
20
        str = "mysql -u root -p123456 wordpress > c:/wordpress.sql";/*将SQL文件恢复到数据库的SQL语句*/
21
        Runtime rt = Runtime.getRuntime();
22
        try {
23
            rt.exec("cmd /c" + str);/*启动widows下的CMD来执行命令*/
24
            System.out.println("restore successly!");
25
        } catch (IOException e) {
26
            e.printStackTrace();
27
            System.out.println("restore fail!");
28
        }
29
    }
30
}