JS里的md5加密

发表评论

https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js

源码：

/*
 * JavaScript MD5
 * https://github.com/blueimp/JavaScript-MD5
 *
 * Copyright 2011, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * https://opensource.org/licenses/MIT
 *
 * Based on
 * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
 * Digest Algorithm, as defined in RFC 1321.
 * Version 2.2 Copyright (C) Paul Johnston 1999 - 2009
 * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
 * Distributed under the BSD License
 * See http://pajhome.org.uk/crypt/md5 for more info.
 */

/* global define */

;(function ($) {
  'use strict'

  /*
  * Add integers, wrapping at 2^32. This uses 16-bit operations internally
  * to work around bugs in some JS interpreters.
  */
  function safeAdd (x, y) {
    var lsw = (x & 0xffff) + (y & 0xffff)
    var msw = (x >> 16) + (y >> 16) + (lsw >> 16)
    return (msw << 16) | (lsw & 0xffff)
  }

  /*
  * Bitwise rotate a 32-bit number to the left.
  */
  function bitRotateLeft (num, cnt) {
    return (num << cnt) | (num >>> (32 - cnt))
  }

  /*
  * These functions implement the four basic operations the algorithm uses.
  */
  function md5cmn (q, a, b, x, s, t) {
    return safeAdd(bitRotateLeft(safeAdd(safeAdd(a, q), safeAdd(x, t)), s), b)
  }
  function md5ff (a, b, c, d, x, s, t) {
    return md5cmn((b & c) | (~b & d), a, b, x, s, t)
  }
  function md5gg (a, b, c, d, x, s, t) {
    return md5cmn((b & d) | (c & ~d), a, b, x, s, t)
  }
  function md5hh (a, b, c, d, x, s, t) {
    return md5cmn(b ^ c ^ d, a, b, x, s, t)
  }
  function md5ii (a, b, c, d, x, s, t) {
    return md5cmn(c ^ (b | ~d), a, b, x, s, t)
  }

  /*
  * Calculate the MD5 of an array of little-endian words, and a bit length.
  */
  function binlMD5 (x, len) {
    /* append padding */
    x[len >> 5] |= 0x80 << (len % 32)
    x[((len + 64) >>> 9 << 4) + 14] = len

    var i
    var olda
    var oldb
    var oldc
    var oldd
    var a = 1732584193
    var b = -271733879
    var c = -1732584194
    var d = 271733878

    for (i = 0; i < x.length; i += 16) {
      olda = a
      oldb = b
      oldc = c
      oldd = d

      a = md5ff(a, b, c, d, x[i], 7, -680876936)
      d = md5ff(d, a, b, c, x[i + 1], 12, -389564586)
      c = md5ff(c, d, a, b, x[i + 2], 17, 606105819)
      b = md5ff(b, c, d, a, x[i + 3], 22, -1044525330)
      a = md5ff(a, b, c, d, x[i + 4], 7, -176418897)
      d = md5ff(d, a, b, c, x[i + 5], 12, 1200080426)
      c = md5ff(c, d, a, b, x[i + 6], 17, -1473231341)
      b = md5ff(b, c, d, a, x[i + 7], 22, -45705983)
      a = md5ff(a, b, c, d, x[i + 8], 7, 1770035416)
      d = md5ff(d, a, b, c, x[i + 9], 12, -1958414417)
      c = md5ff(c, d, a, b, x[i + 10], 17, -42063)
      b = md5ff(b, c, d, a, x[i + 11], 22, -1990404162)
      a = md5ff(a, b, c, d, x[i + 12], 7, 1804603682)
      d = md5ff(d, a, b, c, x[i + 13], 12, -40341101)
      c = md5ff(c, d, a, b, x[i + 14], 17, -1502002290)
      b = md5ff(b, c, d, a, x[i + 15], 22, 1236535329)

      a = md5gg(a, b, c, d, x[i + 1], 5, -165796510)
      d = md5gg(d, a, b, c, x[i + 6], 9, -1069501632)
      c = md5gg(c, d, a, b, x[i + 11], 14, 643717713)
      b = md5gg(b, c, d, a, x[i], 20, -373897302)
      a = md5gg(a, b, c, d, x[i + 5], 5, -701558691)
      d = md5gg(d, a, b, c, x[i + 10], 9, 38016083)
      c = md5gg(c, d, a, b, x[i + 15], 14, -660478335)
      b = md5gg(b, c, d, a, x[i + 4], 20, -405537848)
      a = md5gg(a, b, c, d, x[i + 9], 5, 568446438)
      d = md5gg(d, a, b, c, x[i + 14], 9, -1019803690)
      c = md5gg(c, d, a, b, x[i + 3], 14, -187363961)
      b = md5gg(b, c, d, a, x[i + 8], 20, 1163531501)
      a = md5gg(a, b, c, d, x[i + 13], 5, -1444681467)
      d = md5gg(d, a, b, c, x[i + 2], 9, -51403784)
      c = md5gg(c, d, a, b, x[i + 7], 14, 1735328473)
      b = md5gg(b, c, d, a, x[i + 12], 20, -1926607734)

      a = md5hh(a, b, c, d, x[i + 5], 4, -378558)
      d = md5hh(d, a, b, c, x[i + 8], 11, -2022574463)
      c = md5hh(c, d, a, b, x[i + 11], 16, 1839030562)
      b = md5hh(b, c, d, a, x[i + 14], 23, -35309556)
      a = md5hh(a, b, c, d, x[i + 1], 4, -1530992060)
      d = md5hh(d, a, b, c, x[i + 4], 11, 1272893353)
      c = md5hh(c, d, a, b, x[i + 7], 16, -155497632)
      b = md5hh(b, c, d, a, x[i + 10], 23, -1094730640)
      a = md5hh(a, b, c, d, x[i + 13], 4, 681279174)
      d = md5hh(d, a, b, c, x[i], 11, -358537222)
      c = md5hh(c, d, a, b, x[i + 3], 16, -722521979)
      b = md5hh(b, c, d, a, x[i + 6], 23, 76029189)
      a = md5hh(a, b, c, d, x[i + 9], 4, -640364487)
      d = md5hh(d, a, b, c, x[i + 12], 11, -421815835)
      c = md5hh(c, d, a, b, x[i + 15], 16, 530742520)
      b = md5hh(b, c, d, a, x[i + 2], 23, -995338651)

      a = md5ii(a, b, c, d, x[i], 6, -198630844)
      d = md5ii(d, a, b, c, x[i + 7], 10, 1126891415)
      c = md5ii(c, d, a, b, x[i + 14], 15, -1416354905)
      b = md5ii(b, c, d, a, x[i + 5], 21, -57434055)
      a = md5ii(a, b, c, d, x[i + 12], 6, 1700485571)
      d = md5ii(d, a, b, c, x[i + 3], 10, -1894986606)
      c = md5ii(c, d, a, b, x[i + 10], 15, -1051523)
      b = md5ii(b, c, d, a, x[i + 1], 21, -2054922799)
      a = md5ii(a, b, c, d, x[i + 8], 6, 1873313359)
      d = md5ii(d, a, b, c, x[i + 15], 10, -30611744)
      c = md5ii(c, d, a, b, x[i + 6], 15, -1560198380)
      b = md5ii(b, c, d, a, x[i + 13], 21, 1309151649)
      a = md5ii(a, b, c, d, x[i + 4], 6, -145523070)
      d = md5ii(d, a, b, c, x[i + 11], 10, -1120210379)
      c = md5ii(c, d, a, b, x[i + 2], 15, 718787259)
      b = md5ii(b, c, d, a, x[i + 9], 21, -343485551)

      a = safeAdd(a, olda)
      b = safeAdd(b, oldb)
      c = safeAdd(c, oldc)
      d = safeAdd(d, oldd)
    }
    return [a, b, c, d]
  }

  /*
  * Convert an array of little-endian words to a string
  */
  function binl2rstr (input) {
    var i
    var output = ''
    var length32 = input.length * 32
    for (i = 0; i < length32; i += 8) {
      output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xff)
    }
    return output
  }

  /*
  * Convert a raw string to an array of little-endian words
  * Characters >255 have their high-byte silently ignored.
  */
  function rstr2binl (input) {
    var i
    var output = []
    output[(input.length >> 2) - 1] = undefined
    for (i = 0; i < output.length; i += 1) {
      output[i] = 0
    }
    var length8 = input.length * 8
    for (i = 0; i < length8; i += 8) {
      output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << (i % 32)
    }
    return output
  }

  /*
  * Calculate the MD5 of a raw string
  */
  function rstrMD5 (s) {
    return binl2rstr(binlMD5(rstr2binl(s), s.length * 8))
  }

  /*
  * Calculate the HMAC-MD5, of a key and some data (raw strings)
  */
  function rstrHMACMD5 (key, data) {
    var i
    var bkey = rstr2binl(key)
    var ipad = []
    var opad = []
    var hash
    ipad[15] = opad[15] = undefined
    if (bkey.length > 16) {
      bkey = binlMD5(bkey, key.length * 8)
    }
    for (i = 0; i < 16; i += 1) {
      ipad[i] = bkey[i] ^ 0x36363636
      opad[i] = bkey[i] ^ 0x5c5c5c5c
    }
    hash = binlMD5(ipad.concat(rstr2binl(data)), 512 + data.length * 8)
    return binl2rstr(binlMD5(opad.concat(hash), 512 + 128))
  }

  /*
  * Convert a raw string to a hex string
  */
  function rstr2hex (input) {
    var hexTab = '0123456789abcdef'
    var output = ''
    var x
    var i
    for (i = 0; i < input.length; i += 1) {
      x = input.charCodeAt(i)
      output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f)
    }
    return output
  }

  /*
  * Encode a string as utf-8
  */
  function str2rstrUTF8 (input) {
    return unescape(encodeURIComponent(input))
  }

  /*
  * Take string arguments and return either raw or hex encoded strings
  */
  function rawMD5 (s) {
    return rstrMD5(str2rstrUTF8(s))
  }
  function hexMD5 (s) {
    return rstr2hex(rawMD5(s))
  }
  function rawHMACMD5 (k, d) {
    return rstrHMACMD5(str2rstrUTF8(k), str2rstrUTF8(d))
  }
  function hexHMACMD5 (k, d) {
    return rstr2hex(rawHMACMD5(k, d))
  }

  function md5 (string, key, raw) {
    if (!key) {
      if (!raw) {
        return hexMD5(string)
      }
      return rawMD5(string)
    }
    if (!raw) {
      return hexHMACMD5(key, string)
    }
    return rawHMACMD5(key, string)
  }

  if (typeof define === 'function' && define.amd) {
    define(function () {
      return md5
    })
  } else if (typeof module === 'object' && module.exports) {
    module.exports = md5
  } else {
    $.md5 = md5
  }
})(this)

小程序里使用，把最后的部分修改一下即可：

/*
 * JavaScript MD5
 * https://github.com/blueimp/JavaScript-MD5
 *
 * Copyright 2011, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * https://opensource.org/licenses/MIT
 *
 * Based on
 * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
 * Digest Algorithm, as defined in RFC 1321.
 * Version 2.2 Copyright (C) Paul Johnston 1999 - 2009
 * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
 * Distributed under the BSD License
 * See http://pajhome.org.uk/crypt/md5 for more info.
 */

/* global define */

 
  /*
  * Add integers, wrapping at 2^32. This uses 16-bit operations internally
  * to work around bugs in some JS interpreters.
  */
  function safeAdd (x, y) {
    var lsw = (x & 0xffff) + (y & 0xffff)
    var msw = (x >> 16) + (y >> 16) + (lsw >> 16)
    return (msw << 16) | (lsw & 0xffff)
  }

  /*
  * Bitwise rotate a 32-bit number to the left.
  */
  function bitRotateLeft (num, cnt) {
    return (num << cnt) | (num >>> (32 - cnt))
  }

  /*
  * These functions implement the four basic operations the algorithm uses.
  */
  function md5cmn (q, a, b, x, s, t) {
    return safeAdd(bitRotateLeft(safeAdd(safeAdd(a, q), safeAdd(x, t)), s), b)
  }
  function md5ff (a, b, c, d, x, s, t) {
    return md5cmn((b & c) | (~b & d), a, b, x, s, t)
  }
  function md5gg (a, b, c, d, x, s, t) {
    return md5cmn((b & d) | (c & ~d), a, b, x, s, t)
  }
  function md5hh (a, b, c, d, x, s, t) {
    return md5cmn(b ^ c ^ d, a, b, x, s, t)
  }
  function md5ii (a, b, c, d, x, s, t) {
    return md5cmn(c ^ (b | ~d), a, b, x, s, t)
  }

  /*
  * Calculate the MD5 of an array of little-endian words, and a bit length.
  */
  function binlMD5 (x, len) {
    /* append padding */
    x[len >> 5] |= 0x80 << (len % 32)
    x[((len + 64) >>> 9 << 4) + 14] = len

    var i
    var olda
    var oldb
    var oldc
    var oldd
    var a = 1732584193
    var b = -271733879
    var c = -1732584194
    var d = 271733878

    for (i = 0; i < x.length; i += 16) {
      olda = a
      oldb = b
      oldc = c
      oldd = d

      a = md5ff(a, b, c, d, x[i], 7, -680876936)
      d = md5ff(d, a, b, c, x[i + 1], 12, -389564586)
      c = md5ff(c, d, a, b, x[i + 2], 17, 606105819)
      b = md5ff(b, c, d, a, x[i + 3], 22, -1044525330)
      a = md5ff(a, b, c, d, x[i + 4], 7, -176418897)
      d = md5ff(d, a, b, c, x[i + 5], 12, 1200080426)
      c = md5ff(c, d, a, b, x[i + 6], 17, -1473231341)
      b = md5ff(b, c, d, a, x[i + 7], 22, -45705983)
      a = md5ff(a, b, c, d, x[i + 8], 7, 1770035416)
      d = md5ff(d, a, b, c, x[i + 9], 12, -1958414417)
      c = md5ff(c, d, a, b, x[i + 10], 17, -42063)
      b = md5ff(b, c, d, a, x[i + 11], 22, -1990404162)
      a = md5ff(a, b, c, d, x[i + 12], 7, 1804603682)
      d = md5ff(d, a, b, c, x[i + 13], 12, -40341101)
      c = md5ff(c, d, a, b, x[i + 14], 17, -1502002290)
      b = md5ff(b, c, d, a, x[i + 15], 22, 1236535329)

      a = md5gg(a, b, c, d, x[i + 1], 5, -165796510)
      d = md5gg(d, a, b, c, x[i + 6], 9, -1069501632)
      c = md5gg(c, d, a, b, x[i + 11], 14, 643717713)
      b = md5gg(b, c, d, a, x[i], 20, -373897302)
      a = md5gg(a, b, c, d, x[i + 5], 5, -701558691)
      d = md5gg(d, a, b, c, x[i + 10], 9, 38016083)
      c = md5gg(c, d, a, b, x[i + 15], 14, -660478335)
      b = md5gg(b, c, d, a, x[i + 4], 20, -405537848)
      a = md5gg(a, b, c, d, x[i + 9], 5, 568446438)
      d = md5gg(d, a, b, c, x[i + 14], 9, -1019803690)
      c = md5gg(c, d, a, b, x[i + 3], 14, -187363961)
      b = md5gg(b, c, d, a, x[i + 8], 20, 1163531501)
      a = md5gg(a, b, c, d, x[i + 13], 5, -1444681467)
      d = md5gg(d, a, b, c, x[i + 2], 9, -51403784)
      c = md5gg(c, d, a, b, x[i + 7], 14, 1735328473)
      b = md5gg(b, c, d, a, x[i + 12], 20, -1926607734)

      a = md5hh(a, b, c, d, x[i + 5], 4, -378558)
      d = md5hh(d, a, b, c, x[i + 8], 11, -2022574463)
      c = md5hh(c, d, a, b, x[i + 11], 16, 1839030562)
      b = md5hh(b, c, d, a, x[i + 14], 23, -35309556)
      a = md5hh(a, b, c, d, x[i + 1], 4, -1530992060)
      d = md5hh(d, a, b, c, x[i + 4], 11, 1272893353)
      c = md5hh(c, d, a, b, x[i + 7], 16, -155497632)
      b = md5hh(b, c, d, a, x[i + 10], 23, -1094730640)
      a = md5hh(a, b, c, d, x[i + 13], 4, 681279174)
      d = md5hh(d, a, b, c, x[i], 11, -358537222)
      c = md5hh(c, d, a, b, x[i + 3], 16, -722521979)
      b = md5hh(b, c, d, a, x[i + 6], 23, 76029189)
      a = md5hh(a, b, c, d, x[i + 9], 4, -640364487)
      d = md5hh(d, a, b, c, x[i + 12], 11, -421815835)
      c = md5hh(c, d, a, b, x[i + 15], 16, 530742520)
      b = md5hh(b, c, d, a, x[i + 2], 23, -995338651)

      a = md5ii(a, b, c, d, x[i], 6, -198630844)
      d = md5ii(d, a, b, c, x[i + 7], 10, 1126891415)
      c = md5ii(c, d, a, b, x[i + 14], 15, -1416354905)
      b = md5ii(b, c, d, a, x[i + 5], 21, -57434055)
      a = md5ii(a, b, c, d, x[i + 12], 6, 1700485571)
      d = md5ii(d, a, b, c, x[i + 3], 10, -1894986606)
      c = md5ii(c, d, a, b, x[i + 10], 15, -1051523)
      b = md5ii(b, c, d, a, x[i + 1], 21, -2054922799)
      a = md5ii(a, b, c, d, x[i + 8], 6, 1873313359)
      d = md5ii(d, a, b, c, x[i + 15], 10, -30611744)
      c = md5ii(c, d, a, b, x[i + 6], 15, -1560198380)
      b = md5ii(b, c, d, a, x[i + 13], 21, 1309151649)
      a = md5ii(a, b, c, d, x[i + 4], 6, -145523070)
      d = md5ii(d, a, b, c, x[i + 11], 10, -1120210379)
      c = md5ii(c, d, a, b, x[i + 2], 15, 718787259)
      b = md5ii(b, c, d, a, x[i + 9], 21, -343485551)

      a = safeAdd(a, olda)
      b = safeAdd(b, oldb)
      c = safeAdd(c, oldc)
      d = safeAdd(d, oldd)
    }
    return [a, b, c, d]
  }

  /*
  * Convert an array of little-endian words to a string
  */
  function binl2rstr (input) {
    var i
    var output = ''
    var length32 = input.length * 32
    for (i = 0; i < length32; i += 8) {
      output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xff)
    }
    return output
  }

  /*
  * Convert a raw string to an array of little-endian words
  * Characters >255 have their high-byte silently ignored.
  */
  function rstr2binl (input) {
    var i
    var output = []
    output[(input.length >> 2) - 1] = undefined
    for (i = 0; i < output.length; i += 1) {
      output[i] = 0
    }
    var length8 = input.length * 8
    for (i = 0; i < length8; i += 8) {
      output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << (i % 32)
    }
    return output
  }

  /*
  * Calculate the MD5 of a raw string
  */
  function rstrMD5 (s) {
    return binl2rstr(binlMD5(rstr2binl(s), s.length * 8))
  }

  /*
  * Calculate the HMAC-MD5, of a key and some data (raw strings)
  */
  function rstrHMACMD5 (key, data) {
    var i
    var bkey = rstr2binl(key)
    var ipad = []
    var opad = []
    var hash
    ipad[15] = opad[15] = undefined
    if (bkey.length > 16) {
      bkey = binlMD5(bkey, key.length * 8)
    }
    for (i = 0; i < 16; i += 1) {
      ipad[i] = bkey[i] ^ 0x36363636
      opad[i] = bkey[i] ^ 0x5c5c5c5c
    }
    hash = binlMD5(ipad.concat(rstr2binl(data)), 512 + data.length * 8)
    return binl2rstr(binlMD5(opad.concat(hash), 512 + 128))
  }

  /*
  * Convert a raw string to a hex string
  */
  function rstr2hex (input) {
    var hexTab = '0123456789abcdef'
    var output = ''
    var x
    var i
    for (i = 0; i < input.length; i += 1) {
      x = input.charCodeAt(i)
      output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f)
    }
    return output
  }

  /*
  * Encode a string as utf-8
  */
  function str2rstrUTF8 (input) {
    return unescape(encodeURIComponent(input))
  }

  /*
  * Take string arguments and return either raw or hex encoded strings
  */
  function rawMD5 (s) {
    return rstrMD5(str2rstrUTF8(s))
  }
  function hexMD5 (s) {
    return rstr2hex(rawMD5(s))
  }
  function rawHMACMD5 (k, d) {
    return rstrHMACMD5(str2rstrUTF8(k), str2rstrUTF8(d))
  }
  function hexHMACMD5 (k, d) {
    return rstr2hex(rawHMACMD5(k, d))
  }

  function md5 (string, key, raw) {
    if (!key) {
      if (!raw) {
        return hexMD5(string)
      }
      return rawMD5(string)
    }
    if (!raw) {
      return hexHMACMD5(key, string)
    }
    return rawHMACMD5(key, string)
  }

   
module.exports = {  
  md5: md5  
}

java 集合按照ASCII码从小到大（顺序）排序

发表评论 
import java.util.SortedMap;
import java.util.TreeMap;
 
public class TestTreeMap {
	public static void main(String[] args) {
	SortedMap <String, Object> params = new TreeMap <>();
 
        params.put("ZKK", "15");
        params.put("AT", "1525524700740");
        params.put("NONCESTR", "1522115166482");
        params.put("PASSWORD", "123456");
        params.put("PHONEID", "android");
        params.put("PHONEIP", "PHONEIP");
        params.put("USERNAME", "13800000001");
        params.put("APPID", "A80C1A90A90C4260B52CB8FE559F70BD");
        
        System.out.println(params);
	}
}

CSS实现垂直居中的几种方法

发表评论

======

目录

正文回到顶部

单行文本的居中

1.文字水平居中

1 <div class='box' style="text-align: center;">hello world</div>

2.文本垂直水平居中

1 <div class="box2" style="width:150px;height:100px;line-height: 100px;">文本垂直水平居中</div>

回到顶部

二、多行文本的垂直居中

1.使用display:flex实现

flex布局会让容器内的元素得到垂直水平居中

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>登陆</title>
 6     <style type="text/css">
 7         html{width: 100%;height: 100%;}  /*整个页面的居中*/
 8         body{
 9             width: 100%;
10             height: 100%;
11             display: flex;             /*flex弹性布局*/
12             justify-content: center;
13             align-items: center;
14         }
15         #login{
16             width: 300px;
17             height: 300px;
18             border: 1px black solid; 
19             display: flex;
20             flex-direction: column;        /*元素的排列方向为垂直*/
21             justify-content: center;    /*水平居中对齐*/
22             align-items: center;        /*垂直居中对齐*/
23         }
24     </style>
25 </head>
26 <body>
27     <div id="login">
28         <h1>登陆</h1>
29         <input type="text"><br>
30         <input type="password"><br>
31         <button>确定</button>
32     </div>
33 </body>
34 </html>
复制代码

2.使用display:-webkit-box实现

复制代码
1         body{
2             width: 100%;
3             height: 100%;
4             display: -webkit-box;             /*flex弹性布局*/
5             -webkit-box-align: center;
6             -webkit-box-pack: center;
7         }
复制代码

display:flex和display:box都可用于弹性布局实现水平垂直居中，不同的是display:box是2009年的命名，已经过时，用的时候需要加上前缀；display:flex是2012年之后的命名

3.使用绝对定位和负边距

　　CSS代码：

复制代码
<style>
        .box{
               width: 150px;
               height: 150px;
               background:blue;
               position: relative;
        }
        p{
               width: 50px;
               height: 50px;
               background:red;
               position: absolute;
               left:50%;
               top:50%;
               margin-left:-25px;
               margin-top: -25px;
               display: flex;
               align-items: center;
               justify-content: center;
        }
    </style>
复制代码

　　HTML代码：

1     <div class="box"><p>A</p></div>

4.使用transform:translate定位

复制代码
 1     <style>
 2     *{padding: 0;margin: 0;}   /*解决容器内元素.div是p元素产生的居中不完整*/
 3         .box{
 4                 margin: 20px auto;
 5                 width: 150px;height: 150px;
 6                 background:blue;
 7                 position: relative;
 8                 text-align: center;
 9         }
10         .box .div1{    
11             position: absolute;
12             top:50%;
13             left:50%;
14             width:100%;
15             transform:translate(-50%,-50%);
16             text-align: center;
17             background: red
18         }
19     </style>　
复制代码

说明：/*一般情况下子元素不能是p元素，否则非完全居中，P元素自带有padding距离*/，.div1如果必须是p元素则必须加上*{margin:0;padding:0;};进行初始化，

5.绝对定位和0

复制代码
 1         .box p{    
 2             width:50%;
 3             height: 50%;
 4             overflow: auto;
 5             position: absolute;
 6             background:red;
 7             margin: auto;
 8             top:0;
 9             bottom:0;
10             left:0;
11             right:0;
12         }
复制代码

6.通过display:table-cell

复制代码
1         .box{
2                 width: 150px;height: 150px;
3                 background:blue;
4                 position: relative;
5                 text-align: center;
6                 display: table-cell;
7                 vertical-align: middle;
8 }
复制代码

缺点：对容器.box的子元素的设置宽高会造成失效。

原文：https://www.cnblogs.com/jing-tian/p/10969887.html

微信小程序wx.request使用post方式传参入坑

发表评论

急急忙忙尝试了2天，发现问题始终解决不掉

问题：通过微信小程序实现post   

（后端是python flask 

flask的post函数)

解决方案：凭我的经验猜测 只传输一个值  data ，然后里面包含字典形式的三个元素  

{“kind”:””,

“acc”:””,

“donor”:””}

为了转换在小程序上post我费了些时间

我感觉上述没有问题，但是不知道为什么就是通不过一直 500

下面是微信小程序的客户端post的

结果：

我猜测还是我post的数据格式不对，

相应200的  正确格式

最终解决方案：

采用

在前后端交互的过程中难免会出现需要我们将字符串转成json的时候。

 json.stringify()方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串

json.parse() 方法将数据转换为 JavaScript 对象( 将字符串转成json对象。 )
 

强烈安利JavaScript 教程

http://www.w3school.com.cn/json/json_eval.asp

后记：

再传post值的过程中

应先抓包分析一下对应的 post为和值，或者直接利用开发者工具箱直接network 拉到最后直接分析

通过content-type 得到传参方式 最下方仅为post的数据，我没农商

一般来说传参方式分为

    application/json   multipart/form-data      application/x-www-form-urlencoded   

为什么会有这么多传参方式，就是因为他的编码方式，协议规定 POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。  数据发送出去，还要服务端解析成功才有意义。一般服务端语言如 php、python 等，以及它们的 framework，都内置了自动解析常见数据格式的功能。
服务端通常是根据请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。

所以说到 POST 提交数据方案，包含了 Content-Type 和消息主体编码方式两部分。

原文：https://blog.csdn.net/qq_40268306/article/details/87893789

微信小程序之上传图片(含前后端代码例子)

发表评论

前端小程序代码

index.wxml:

<view class='content'>
  <view class='img-box'>
    <view class='img-list'>
      <block wx:for="{{detailPics}}" wx:key="index">
        <view class='img-item'>
          <image src='{{item}}' bindlongpress="bindlongpressimg" data-id='{{index}}'></image>
        </view>
      </block>
      <view class='chooseimg' bindtap='uploadDetailImage'>
        <view class="weui-uploader__input-box"></view>
      </view>
    </view>
    <view class='tips'>长按对应的图片即可删除</view>
  </view>
</view>

index.js:

// component/uploadImages/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    count: { //最多选择图片的张数，默认9张
      type: Number,
      value: 9
    },
    uploadUrl: { //图片上传的服务器路径
      type: String,
      value: ''
    },
    showUrl: { //图片的拼接路径
      type: String,
      value: ''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    detailPics: [], //上传的结果图片集合
  },

  ready: function () {
    console.log(this.data)
  },

  /**
   * 组件的方法列表
   */
  methods: {

    uploadDetailImage: function (e) { //这里是选取图片的方法
      var that = this;
      var pics = [];
      var detailPics = that.data.detailPics;
      if (detailPics.length >= that.data.count) {
        wx.showToast({
          title: '最多选择' + that.data.count + '张！',
        })
        return;
      }
      wx.chooseImage({
        count: that.data.count, // 最多可以选择的图片张数，默认9
        sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
        sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
        success: function (res) {
          var imgs = res.tempFilePaths;
          for (var i = 0; i < imgs.length; i++) {
            pics.push(imgs[i])
          }
          that.uploadimg({
            url: "http://www.test.com//test-api/wechat/applet/api/uploadUserAvatar", //这里是你图片上传的接口
            path: pics, //这里是选取的图片的地址数组
          });
        },
      })

    },
    //多张图片上传
    uploadimg: function (data) {
      wx.showLoading({
        title: '上传中...',
        mask: true,
      })
      var that = this,
        i = data.i ? data.i : 0,
        success = data.success ? data.success : 0,
        fail = data.fail ? data.fail : 0;
      wx.uploadFile({
        url: data.url,
        filePath: data.path[i],
        name: 'file',
        formData: {"userId":"35"},
        success: (resp) => {
          wx.hideLoading();
          success++;
          var str = resp.data //返回的结果，可能不同项目结果不一样

          console.log(str);
          // var pic = JSON.parse(str);
          // var pic_name = that.data.showUrl + pic.Data;
          // var detailPics = that.data.detailPics;
          // detailPics.push(pic_name)
          // that.setData({
          //   detailPics: detailPics
          // })
        },
        fail: (res) => {
          fail++;
          console.log('fail:' + i + "fail:" + fail);
        },
        complete: () => {
          i++;
          if (i == data.path.length) { //当图片传完时，停止调用     
            console.log('执行完毕');
            console.log('成功：' + success + " 失败：" + fail);
            var myEventDetail = {
              picsList: that.data.detailPics
            } // detail对象，提供给事件监听函数
            var myEventOption = {} // 触发事件的选项
            that.triggerEvent('myevent', myEventDetail, myEventOption)//结果返回调用的页面
          } else { //若图片还没有传完，则继续调用函数
            data.i = i;
            data.success = success;
            data.fail = fail;
            that.uploadimg(data);//递归，回调自己
          }
        }
      });
    },

  }
})

后端Java代码(这里我使用的是第三方存储，如腾讯云，如果读者朋友们是使用第三方存储替换是一件很容易的事情)

核心代码如下:

@PostMapping("/uploadUserAvatar")
@ApiOperation(value = "上传用户头像", notes = "上传用户头像")
public JSONObject uploadUserAvatar(HttpServletRequest request) {

    JSONObject json = new JSONObject();
    try {

        String userId = request.getParameter("userId");

        COSClientUtil cosClientUtil = new COSClientUtil();

        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;

        // 获取上传的文件
        MultipartFile multiFile = multipartRequest.getFile("file");

        
        
        String name = cosClientUtil.uploadFileCos(multiFile);

        // 获取文件路径
        String fileUrl = cosClientUtil.getFileUrl(name);
        
        Console.log("fileUrl:"+fileUrl);
        
        
        // 对文件路径进行处理
        String dbFileUrl = fileUrl.substring(0, fileUrl.indexOf("?"));
        
        
        Console.log("dbFileUrl:"+dbFileUrl);

        User user = new User();
        user.setId(Integer.parseInt(userId));
        user.setSmallAvatar(dbFileUrl);

        boolean isUploadUserAvatar = userService.updateById(user);

        if (isUploadUserAvatar) {
            json.put(ResponseUtils.CODE, ResponseUtils.SUCCESS_CODE);
            json.put(ResponseUtils.MSG, ResponseUtils.SUCCEESS_MSG);
        } else {
            json.put(ResponseUtils.CODE, ResponseUtils.ERROR_CODE);
            json.put(ResponseUtils.MSG, ResponseUtils.ERROR_MSG);
        }

    } catch (Exception e) {
        e.printStackTrace();

        json.put(ResponseUtils.CODE, ResponseUtils.ERROR_CODE);
        json.put(ResponseUtils.MSG, ResponseUtils.ERROR_MSG);

    }

    return json;
}

原文：https://www.cnblogs.com/youcong/p/11524006.html

微信小程序 点击复制文本到剪贴板

发表评论

调用小程序的接口来实现，没什么难点，就直接上代码啦。

wxml：

<view>内容：{{contents}} </view>
<view  bindtap='copyText' data-text="{{contents}}">复制</view>

js:

Page({
  data: {
    contents:'这是可以复制的文字,粘贴后即可看到效果'
  },
  copyText: function (e) {
    console.log(e)
    wx.setClipboardData({
      data: e.currentTarget.dataset.text,
      success: function (res) {
        wx.getClipboardData({
          success: function (res) {
            wx.showToast({
              title: '复制成功'
            })
          }
        })
      }
    })
  },
}

JS字符串和数组之间的转换

发表评论 
1、字符串转换为数组
var string = '123,456,789';
var stringResult = string.split(',');
console.log(stringResult) //输出["123", "456", "789"]
 
var string2 = 'abcdef'
var string2Result = string2.split('')
console.log(string2Result) //输出['a','b','c','d','e','f']
string2.split(",").map(Number);//输出[123,456,789]
JSON.parse("[" + string + "]"); //输出[123,456,789]
 
2、数组转换为字符串
var array = ['abc', 'def', 'hig']
var arrayResult = array.join(',')
console.log(arrayResult) // 输出"abc,def,hig"
array.toString()//输出"abc,def,hig"

微信小程序实现下拉刷新

发表评论
  • 本文将简单介绍如何实现微信小程序的下拉刷新
  • 将要使用的api：
    1. wx.showNavigationBarLoading(Object object)
    2. wx.showLoading(Object object)
    3. wx.hideLoading(Object object)
    4. wx.hideNavigationBarLoading(Object object)
    5. wx.stopPullDownRefresh(Object object)
    6. wx.request(Object object)
    //刷新
    onRefresh(){
        //在当前页面显示导航条加载动画
        wx.showNavigationBarLoading(); 
        //显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
        wx.showLoading({
          title: '刷新中...',
        })
        this.getData();
      },
    //网络请求，获取数据
    getData(){
    	wx.request({
            url: '',
            //网络请求执行完后将执行的动作
            complete(res){
                //隐藏loading 提示框
                wx.hideLoading();
                //隐藏导航条加载动画
                wx.hideNavigationBarLoading();
                //停止下拉刷新
                wx.stopPullDownRefresh();
      	  	}
    	})   
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        //调用刷新时将执行的方法
    	this.onRefresh();
    }

除了在js页面编写响应的逻辑之外，还需要再相应页面的json中写入以下配置，这个配置允许这个页面进行下拉刷新动作

    {
         "enablePullDownRefresh": true
    }

特别需要注意的是：

  • 写之前先看看有无已经存在的onPullDownRefresh:function()函数，否则将不能监听到用户的下拉刷新动作
  • 注意相关api的配对使用
  • 不要忘了在需要刷新结束时调用wx.stopPullDownRefresh()，否则，页面将会保持下拉状态、不会回弹。·

此外，除了下拉刷新，有时候可能是在某个事件进行时触发刷新动作，此时可以调用wx.startPullDownRefresh(Object object) 此api的作用是：“ 开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。”

原文：https://www.cnblogs.com/xunxian/p/12862660.html

js过滤emoji表情符号

发表评论

手机端常常会遇到用户输入框，输入emoji，如果是数据库是UTF8，会遇到报错：SQLException: Incorrect string value: ‘\xF0\x9F\x98\x84’ for column ‘review’ at row 1

原因是：UTF-8编码有可能是两个、三个、四个字节。Emoji表情是4个字节，而Mysql的utf8编码最多3个字节，所以数据插不进去。

过滤

php过滤emoji表情：

$name = preg_replace('/[^\\u0000-\\uFFFF]/ig', '', $string);

js过滤emoji表情：

name = name.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, "");

原文：https://blog.csdn.net/ugg/article/details/44225723

php 根据实际地址获取对应的经纬度

发表评论

在php中根据实际地址获取对应的经纬度，这里推荐使用百度地图和腾讯地图提供的现成的接口

这里注意一点：

百度地图和腾讯地图的坐标与真实经纬度是不同的，国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理位置进行首次加密，腾讯使用的就是国测局制定的GCJ-02。百度坐标在此基础上，进行了BD-09二次加密措施

一：百度地图：

根据实际地址获取经纬度的百度接口文档地址：地理编码

1：获取密钥

点击文档左侧的获取密钥按钮，根据提示获取密钥

image.png

2：实现根据实际地址获取到经纬度

<?php
function curl($url)
{
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    //参数为1表示传输数据，为0表示直接输出显示。
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    //参数为0表示不带头文件，为1表示带头文件
    curl_setopt($ch, CURLOPT_HEADER,0);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER,false);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST,false);
    $output = curl_exec($ch);
    curl_close($ch);
    return $output;
}
$data_info=curl("http://api.map.baidu.com/geocoder/v2/?address=实际地址&output=json&ak=你的密钥");
$data_info = json_decode($data_info, true); //数据转换
print_r($data_info);

根据如上的代码就可以获取到实际地址对应的经纬度

二：腾讯地图

腾讯根据实际地址获取经纬度接口文档：https://lbs.qq.com/webservice_v1/guide-geocoder.html

1：获取密钥：

申请密钥地址：https://lbs.qq.com/console/key.html

根据提示获取到所需的密钥

2：获取实际地址的经纬度

接口：https://apis.map.qq.com/ws/geocoder/v1/?address=实际地址&key=您的密钥

代码实现和上面的相同，这里就不写出来了

原文：https://blog.csdn.net/huaweichenai/article/details/90233294