首先项目是基于vue开发的项目
需要引入js
import cryptoJs from 'crypto-js'
// DES加密
export const encryptDes = (message, key) => {
return cryptoJs.DES.encrypt(message, cryptoJs.enc.Utf8.parse(key), {
mode: cryptoJs.mode.ECB,
padding: cryptoJs.pad.Pkcs7
}).toString()
}
package com.huihui.until;
import java.security.SecureRandom;
import java.util.Scanner;
import javax.crypto.Cipher;
import javax.crypto.SecretKeyFactory;
import javax.crypto.spec.DESKeySpec;
import org.apache.commons.codec.binary.Base64;
/**
* <b>类说明：DES</b>
* <p>
* <b>详细描述：</b>
* @since 2019年3月31日 下午17:00:16
*/
public class DESCryptUtil {
private static final String DES = "DES";
public static final String desKey = "ba54ee44";
public static String doEncrypt(String plainMessage, String hexDesKey) throws Exception {
byte desKey[] = hexDesKey.getBytes();
byte desPlainMsg[] = plainMessage.getBytes();
return Base64.encodeBase64URLSafeString(desCrypt(desKey, desPlainMsg, Cipher.ENCRYPT_MODE));
}
/**
* 获取解密后的字符串
* @param hexEncryptMessage
* @param hexDesKey
* @return
* @throws Exception
*/
public static String doDecrypt(String hexEncryptMessage, String hexDesKey) throws Exception{
if (hexEncryptMessage == null) {
return null;
}
byte desKey[] = hexDesKey.getBytes();
byte desPlainMsg[] = Base64.decodeBase64(hexEncryptMessage);
return new String(desCrypt(desKey, desPlainMsg, Cipher.DECRYPT_MODE));
}
/**
* 获取解密后的数组
* @param desPlainMsg
* @param hexDesKey
* @return
* @throws Exception
*/
public static byte[] doDecryptByte(byte[] desPlainMsg, String hexDesKey) throws Exception{
if (desPlainMsg == null) {
return null;
}
byte desKey[] = hexDesKey.getBytes();
return desCrypt(desKey, desPlainMsg, Cipher.DECRYPT_MODE);
}
private static byte[] desCrypt(byte[] desKey, byte[] desPlainMsg, int CipherMode) throws Exception{
try {
SecureRandom sr = new SecureRandom();
DESKeySpec dks = new DESKeySpec(desKey);
SecretKeyFactory keyFactory = SecretKeyFactory.getInstance(DES);
javax.crypto.SecretKey key = keyFactory.generateSecret(dks);
Cipher cipher = Cipher.getInstance(DES);
cipher.init(CipherMode, key, sr);
return cipher.doFinal(desPlainMsg);
} catch (Exception e) {
String message = "";
if (CipherMode == Cipher.ENCRYPT_MODE) {
message = "DES\u52A0\u5BC6\u5931\u8D25";
} else {
message = "DES\u89E3\u5BC6\u5931\u8D25";
}
throw new Exception(message, e);
}
}
/**
* 获取8位的key
* @param str
* @return
*/
public static String processString(String str) {
if(str==null||"".equals(str)) {
return "";
}
StringBuilder sb = new StringBuilder();
for(int i=0;i<8;i++) {
int index = i<<2&(32-i);
sb.append(str.charAt(index));
}
return sb.toString();
}
public static void main(String[] args) throws Exception{
DESCryptUtil se=new DESCryptUtil();
for (int i = 0; i < 5; i++) {
Scanner scanner=new Scanner(System.in);
/*
* 加密
*/
System.out.println("请输入要加密的内容:");
String content = scanner.next();
System.out.println("加密后的密文是:"+se.doEncrypt(content, desKey));
/*
* 解密
*/
System.out.println("请输入要解密的内容:");
content = scanner.next();
System.out.println("解密后的明文是:"+se.doDecrypt(content, desKey));
}
}
}
这是我是在在线生成公钥私钥的网站中生成了自己的公钥私钥用来测试
前台
import JsEncrypt from 'jsencrypt'
// RSA加密
export function encryptRsa(publickey, message) {
const rsa = new JsEncrypt()
rsa.setPublicKey(publickey)
return rsa.encrypt(message)
}
后台
package com.huihui.until;
import org.apache.commons.codec.binary.Base64;
import com.googosoft.config.GlobalConstants;
import javax.crypto.Cipher;
import java.security.KeyFactory;
import java.security.KeyPair;
import java.security.KeyPairGenerator;
import java.security.NoSuchAlgorithmException;
import java.security.SecureRandom;
import java.security.interfaces.RSAPrivateKey;
import java.security.interfaces.RSAPublicKey;
import java.security.spec.PKCS8EncodedKeySpec;
import java.security.spec.X509EncodedKeySpec;
import java.util.HashMap;
import java.util.Map;
public class RSAUtil {
private static Map<Integer, String> keyMap = new HashMap<Integer, String>(); //用于封装随机产生的公钥与私钥
public static void main(String[] args) throws Exception {
//生成公钥和私钥
genKeyPair();
//加密字符串
String message = "df723820";
//GlobalConstants.PUBLICKEY 公钥加密
String messageEn = encrypt(message,GlobalConstants.PUBLICKEY);
System.out.println(message + "\t加密后的字符串为:" + messageEn);
//GlobalConstants.PRIVATEKEY 私钥解密
String messageDe = decrypt(messageEn,GlobalConstants.PRIVATEKEY);
System.out.println("还原后的字符串为:" + messageDe);
}
/**
* 随机生成密钥对
* @throws NoSuchAlgorithmException
*/
public static void genKeyPair() throws NoSuchAlgorithmException {
// KeyPairGenerator类用于生成公钥和私钥对，基于RSA算法生成对象
KeyPairGenerator keyPairGen = KeyPairGenerator.getInstance("RSA");
// 初始化密钥对生成器，密钥大小为96-1024位
keyPairGen.initialize(1024,new SecureRandom());
// 生成一个密钥对，保存在keyPair中
KeyPair keyPair = keyPairGen.generateKeyPair();
RSAPrivateKey privateKey = (RSAPrivateKey) keyPair.getPrivate(); // 得到私钥
RSAPublicKey publicKey = (RSAPublicKey) keyPair.getPublic(); // 得到公钥
String publicKeyString = new String(Base64.encodeBase64(publicKey.getEncoded()));
// 得到私钥字符串
String privateKeyString = new String(Base64.encodeBase64((privateKey.getEncoded())));
// 将公钥和私钥保存到Map
keyMap.put(0,publicKeyString); //0表示公钥
keyMap.put(1,privateKeyString); //1表示私钥
}
/**
* RSA公钥加密
*
* @param str
* 加密字符串
* @param publicKey
* 公钥
* @return 密文
* @throws Exception
* 加密过程中的异常信息
*/
public static String encrypt( String str, String publicKey ) throws Exception{
//base64编码的公钥
byte[] decoded = Base64.decodeBase64(publicKey);
RSAPublicKey pubKey = (RSAPublicKey) KeyFactory.getInstance("RSA").generatePublic(new X509EncodedKeySpec(decoded));
//RSA加密
Cipher cipher = Cipher.getInstance("RSA");
cipher.init(Cipher.ENCRYPT_MODE, pubKey);
String outStr = Base64.encodeBase64String(cipher.doFinal(str.getBytes("UTF-8")));
return outStr;
}
/**
* RSA私钥解密
*
* @param str
* 加密字符串
* @param privateKey
* 私钥
* @return 铭文
* @throws Exception
* 解密过程中的异常信息
*/
public static String decrypt(String str, String privateKey) throws Exception{
//64位解码加密后的字符串
byte[] inputByte = Base64.decodeBase64(str.getBytes("UTF-8"));
//base64编码的私钥
byte[] decoded = Base64.decodeBase64(privateKey);
RSAPrivateKey priKey = (RSAPrivateKey) KeyFactory.getInstance("RSA").generatePrivate(new PKCS8EncodedKeySpec(decoded));
//RSA解密
Cipher cipher = Cipher.getInstance("RSA");
cipher.init(Cipher.DECRYPT_MODE, priKey);
String outStr = new String(cipher.doFinal(inputByte));
return outStr;
}
}
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：csdn
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1.nodejs接收上传的图片主要是使用formidable模块，服务器是使用的express搭建。
引入formidable
var formidable = require('./node_modules/formidable');
拦截请求，设置formidable的常规项
app.post("/image",function (req,res) { var form = new formidable.IncomingForm(); form.encoding = 'utf-8'; form.uploadDir = path.join(__dirname + "/../page/upload"); form.keepExtensions = true;//保留后缀 form.maxFieldsSize = 2 * 1024 * 1024; });
解析图片，重命名图片名称，返回给前端
//处理图片 form.parse(req, function (err, fields, files){ console.log(files.the_file); var filename = files.the_file.name var nameArray = filename.split('.'); var type = nameArray[nameArray.length - 1]; var name = ''; for (var i = 0; i < nameArray.length - 1; i++) { name = name + nameArray[i]; } var date = new Date(); var time = '_' + date.getFullYear() + "_" + date.getMonth() + "_" + date.getDay() + "_" + date.getHours() + "_" + date.getMinutes(); var avatarName = name + time + '.' + type; var newPath = form.uploadDir + "/" + avatarName; fs.renameSync(files.the_file.path, newPath); //重命名 res.send({data:"/upload/"+avatarName}) })
完整代码如下
var path = require("path"); var fs = require("fs"); var express =require("./node_modules/express"); var app=express(); var bodyParser = require('./node_modules/body-parser'); var formidable = require('./node_modules/formidable'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: true})); app.use(express.static(__dirname + "./../page")); app.listen("8083",function () { console.log("服务启动") }); //拦截请求 app.post("/image",function (req,res) { var form = new formidable.IncomingForm(); form.encoding = 'utf-8'; form.uploadDir = path.join(__dirname + "/../page/upload"); form.keepExtensions = true;//保留后缀 form.maxFieldsSize = 2 * 1024 * 1024; //处理图片 form.parse(req, function (err, fields, files){ console.log(files.the_file); var filename = files.the_file.name var nameArray = filename.split('.'); var type = nameArray[nameArray.length - 1]; var name = ''; for (var i = 0; i < nameArray.length - 1; i++) { name = name + nameArray[i]; } var date = new Date(); var time = '_' + date.getFullYear() + "_" + date.getMonth() + "_" + date.getDay() + "_" + date.getHours() + "_" + date.getMinutes(); var avatarName = name + time + '.' + type; var newPath = form.uploadDir + "/" + avatarName; fs.renameSync(files.the_file.path, newPath); //重命名 res.send({data:"/upload/"+avatarName}) }) });
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
PM2是node进程管理工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，而且使用非常简单。
全局安装
npm install -g pm2
挑express应用来举例。一般我们都是通过npm start启动应用，其实就是调用node ./bin/www。那么，换成pm2就是
注意，这里用了–watch参数，意味着当你的express应用代码发生变化时，pm2会帮你重启服务(长时间监测有可能会出现问题，这时需要重启项目)
pm2 start ./bin/www –watch
参数说明：
–watch：监听应用目录的变化，一旦发生变化，自动重启。如果要精确监听、不见听的目录，最好通过配置文件。
-i –instances：启用多少个实例，可用于负载均衡。如果-i 0或者-i max，则根据当前机器核数确定实例数目。
–ignore-watch：排除监听的目录/文件，可以是特定的文件名，也可以是正则。比如–ignore-watch=”test node_modules “some scripts”“
-n –name：应用的名称。查看应用信息的时候可以用到。
-o –output ：标准输出日志文件的路径。
-e –error ：错误输出日志文件的路径。
–interpreter ：the interpreter pm2 should use for executing app (bash, python…)。比如你用的coffee script来编写应用。
完整命令行参数列表：地址
pm2 start app.js –watch -i 2
pm2 restart app.js
停止特定的应用。可以先通过pm2 list获取应用的名字（–name指定的）或者进程id。
pm2 stop app_name|app_id
如果要停止所有应用，可以
pm2 stop all
pm2 stop app_name|app_id
pm2 stop all
pm2 list
pm2 start app.js –watch
*这里是监控整个项目的文件
除了可以打开日志文件查看日志外，还可以通过pm2 logs来查看实时日志。
pm2 logs
pm2 save # 记得保存进程状态
npm install pm2 -g
pm2 update
附pm2命令：
$ npm install pm2 -g # 命令行安装 pm2 $ pm2 start app.js -i 4 # 后台运行pm2，启动4个app.js # 也可以把'max' 参数传递给 start # 正确的进程数目依赖于Cpu的核心数目 $ pm2 start app.js --name my-api # 命名进程 $ pm2 list # 显示所有进程状态 $ pm2 monit # 监视所有进程 $ pm2 logs # 显示所有进程日志 $ pm2 stop all # 停止所有进程 $ pm2 restart all # 重启所有进程 $ pm2 reload all # 0 秒停机重载进程 (用于 NETWORKED 进程) $ pm2 stop 0 # 停止指定的进程 $ pm2 restart 0 # 重启指定的进程 $ pm2 startup # 产生 init 脚本 保持进程活着 $ pm2 web # 运行健壮的 computer API endpoint (http://localhost:9615) $ pm2 delete 0 # 杀死指定的进程 $ pm2 delete all # 杀死全部进程
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者.免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
首先
了解chattr命令：
Linux chattr命令用于改变文件属性。
这项指令可改变存放在ext2文件系统上的文件或目录属性，这些属性共有以下8种模式：
a：让文件或目录仅供附加用途。
b：不更新文件或目录的最后存取时间。
c：将文件或目录压缩后存放。
d：将文件或目录排除在倾倒操作之外。
i：不得任意更动文件或目录。
s：保密性删除文件或目录。
S：即时更新文件或目录i。
u：预防意外删除。
我们主要用的是 i 的模式
第二：
切换到 .user.ini 目录
第三：
使用命令 chattr -i .user.ini 解除文件不可更动属性，之后就可以修改/删除.user.ini这个文件了
第四：
chattr +i .user.ini 重新恢复文件不可更动属性
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：csdn
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这里用到的 等于(=)， 还有更多的条件 大于(>)、小于(<)、大于等于(>=)、小于等于(<=)、不等于(!=)....
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：csdn
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
需要对应的js代码和css样式，大家可以通过www.htmldrive.net平台下载，也可以在我文章的底部下载。对应的资源如下，将资源引入页面（别忘了JQuery）：
注意：jQuery最好使用1.3版本的，有些版本行不通，亲测1.8版本不行
HTML代码：
js代码：
-
$(".test").imgbox({
-
'speedIn': 500,
-
'speedOut': 500,
-
'alignment': 'center',
-
'overlayShow': true,
-
'allowMultiple': false,
-
'autoScale': true
-
});
效果：
讲解：
以上例子中，我们只用了一行js代码“$(".test").imgbox();”，就实现了图片弹出放大效果。这是因为在jquery.imgbox.js中imgbox()函数有默认的参数。当我们调用函数但没有传递参数时，会加载默认的参数，显示默认效果和样式。
如果觉得默认样式不合适，有两种方式进行修改：1、修改jquery.imgbox.js中imgbox()函数的默认参数；2、调用imgbox()函数时，给参数赋值。
-
//在jquery.imgbox.js中，默认参数如下，可以修改：
-
$.fn.imgbox.defaults = {
-
padding : 10,
-
alignment : 'auto', // auto OR center
-
allowMultiple : true,
-
autoScale : true,
-
speedIn : 500,
-
speedOut : 500,
-
easingIn : 'swing',
-
easingOut : 'swing',
-
zoomOpacity : false,
-
overlayShow : false,
-
overlayOpacity : 0.5,
-
hideOnOverlayClick : true,
-
hideOnContentClick : true
-
};
参数的含义：
padding：弹窗中图片的边框，0为没有边框。
alignment：弹窗的位置，“auto”或“center”，默认情况下，它从缩略图所在方向扩展弹窗
allowMultiple：如果选true，允许多个弹出窗口同时打开
autoScale：如果为true，弹窗会自适应窗口的大小
speedIn、speedOut:打开弹窗和关闭弹窗的速度，单位：毫秒
zoomOpacity：如果为true，会在弹窗缩放时改变透明度
overlayShow：如果为true，会有遮罩层（默认为false；遮罩层的颜色在css中设置）
overlayOpacity:遮罩层的透明度（取值范围0~1）
hideOnOverlayClick：当点击遮罩层时，关闭弹窗
hideOnContentClick：当点击图片时，关闭弹窗
转载自：https://blog.csdn.net/kangnan00/article/details/72518352
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：csdn
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
uni-app 代码
选择图片代码（uniapp 代码示例）
uni.chooseImage({ success: (chooseImageRes) => { const tempFilePaths = chooseImageRes.tempFilePaths; } });
tempFilePaths 为选择图片res 里面的其中一个对象
注意：uniapp 上传图片不能上传选中的File 文件（tempFiles这个数组的东西不能够上传） 要上传（tempFilePaths）读取图片后数组的 此数组可以用来浏览，上传
选择图片加上传图片代码
*多图上传注意 files 数组 对象不能直接传 tempFilePaths这个数组 必须要更改
let img = []; for (let i = 0; i < tempFilePaths.length; i++) { let obj = new Object(); obj.name = `file` + i; obj.uri = tempFilePaths[i]; img.push(obj); obj = null; }
uni.chooseImage({ count: 9, success: (res) => { //上传文件的临时路径 const tempFilePaths = res.tempFilePaths; let img = []; for (let i = 0; i < tempFilePaths.length; i++) { let obj = new Object(); obj.name = `file` + i; obj.uri = tempFilePaths[i]; img.push(obj); obj = null; } const tempFilePaths = res.tempFilePaths; console.log(res); uni.uploadFile({ url:'http://192.168.88.15:8978/Mailbox/'+that.api.pudatefiles, filePath: tempFilePaths[0], files: img , name: 'file', success: (uploadFileRes) => { console.log(uploadFileRes) uni.hideLoading(); if (back.status == "0") { console.log(that.host + back.filepath[0]) that.editorCtx.insertImage({ src: that.host + back.filepath[0], alt: '图像', success: function() {} }) } else { console.log(back.msg); } }, fail: () => { uni.hideLoading(); console.log('图片上传失败，请联系开发'); } }); } })
var express = require("express"); //Express框架 const multer = require("multer"); // multer中间件上传图片 接收文件post数据 // 设置文件上传的地方 let storage = multer.diskStorage({ destination: (req: any, file: any, cb: Function) => { cb(null, "./StaticResource/pudate/"); }, filename: (req: any, file: any, cb: Function) => { cb(null, Date.now() + "-" + file.originalname); }, }); let multerObj = multer({ dest: "./StaticResource/pudate/", storage }); //存放上传的文件 app.use(multerObj.any()); // 存放所有的类型文件 //设置跨域访问 app.all("*", (req: any, res: any, next: Function) => { res.header("Access-Control-Allow-Origin", "*"); res.header( "Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild" ); res.header( "Access-Control-Allow-Headers", "content-type,SelfSummerHeader,Authorization" ); //自定义请求头 res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By", "3.2.1"); res.header("Content-Type", "application/json;charset=UTF-8"); res.header("Content-Type", "text/xml"); if (req.method === "OPTIONS" || req.url === "/favicon.ico") { // 拦截请求 return res.send(); } next(); }); app.listen(COMPort, (err: Error) => { if (err) { console.log('启动错误', err) } console.table({ 端口: COMPort, IP: systemOs.IP(), 服务地址: `http://${systemOs.IP()}:${COMPort}/Mailbox`, 静态资源: `IP端口地址加上文件名`, 描述: `Node服务已启动成功`, "swagger-ui": `http://${systemOs.IP()}:${COMPort}/api (ts代码转为js代码可以正常使用)`, }); // 挂载自定义中间件 app.use(middleware_router.bodyData); }); router.all( "/pudatefiles", (req: { files: { path: string }[] }, res: any, next: any) => { let data: Array<string> = []; console.log(req.files); req.files?.forEach((item: any) => { let url = item?.path.replace(/\\/g, "/"); data.push(url?.replace("StaticResource", "")); }); res.sendSuccess(data, "上传成功"); } );
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：csdn
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
本文出自 “旋木的技术博客” 博客，请务必保留此出处http://mrxiong.blog.51cto.com/287318/1651098
一.数值类型
Mysql支持所有标准SQL中的数值类型，其中包括严格数据类型(INTEGER,SMALLINT,DECIMAL,NUMBERIC)，以及近似数值数据类型(FLOAT,REAL,DOUBLE PRESISION),并在此基础上进行扩展。
扩展后增加了TINYINT,MEDIUMINT,BIGINT这3种长度不同的整形，并增加了BIT类型，用来存放位数据。
整数类型 字节 范围（有符号） 范围（无符号） 用途
TINYINT 1字节 (-128，127) (0，255) 极小整数值
SMALLINT 2字节 (-32 768，32 767) (0，65 535) 小整数值
MEDIUMINT 3字节 (-8 388 608，8 388 607) (0，16 777 215) 中整数值
INT或INTEGER 4字节 (-2 147 483 648，2 147 483 647) (0，4 294 967 295) 大整数值
BIGINT 8字节 (-9 233 372 036 854 775 808，9 223 372 036 854 775 807) (0，18 446 744 073 709 551 615) 极大整数值
FLOAT 4字节 (-3.402 823 466 E+38，1.175 494 351 E-38)，0，(1.175 494 351 E-38，3.402 823 466 351 E+38) 0，(1.175 494 351 E-38，3.402 823 466 E+38) 单精度浮点数值
DOUBLE 8字节 (1.797 693 134 862 315 7 E+308，2.225 073 858 507 201 4 E-308)，0，(2.225 073 858 507 201 4 E-308，1.797 693 134 862 315 7 E+308) 0，(2.225 073 858 507 201 4 E-308，1.797 693 134 862 315 7 E+308) 双精度浮点数值
DECIMAL 对DECIMAL(M,D) ，如果M>D，为M+2否则为D+2 依赖于M和D的值 依赖于M和D的值 小数值
INT 类型:
在 MySQL 中支持的 5 个主要整数类型是 TINYINT，SMALLINT，MEDIUMINT，INT 和 BIGINT。这些类型在很大程度上是相同的，只有它们存储的值的大小是不相同的。
MySQL 以一个可选的显示宽度指示器的形式对 SQL 标准进行扩展，这样当从数据库检索一个值时，可以把这个值加长到指定的长度。例如，指定一个字段的类型为 INT(6)，
就可以保证所包含数字少于 6 个的值从数据库中检索出来时能够自动地用空格填充。需要注意的是，使用一个宽度指示器不会影响字段的大小和它可以存储的值的范围。
万一我们需要对一个字段存储一个超出许可范围的数字，MySQL 会根据允许范围最接近它的一端截短后再进行存储。还有一个比较特别的地方是，
MySQL 会在不合规定的值插入表前自动修改为 0。
UNSIGNED 修饰符规定字段只保存正值。因为不需要保存数字的正、负符号，可以在储时节约一个“位”的空间。从而增大这个字段可以存储的值的范围。
ZEROFILL 修饰符规定 0（不是空格）可以用来真补输出的值。使用这个修饰符可以阻止 MySQL 数据库存储负值。
FLOAT、DOUBLE 和 DECIMAL 类型
MySQL 支持的三个浮点类型是 FLOAT、DOUBLE 和 DECIMAL 类型。FLOAT 数值类型用于表示单精度浮点数值，而 DOUBLE 数值类型用于表示双精度浮点数值。
与整数一样，这些类型也带有附加参数：一个显示宽度指示器和一个小数点指示器。比如语句 FLOAT(7,3) 规定显示的值不会超过 7 位数字，小数点后面带有 3 位数字。
对于小数点后面的位数超过允许范围的值，MySQL 会自动将它四舍五入为最接近它的值，再插入它。
DECIMAL 数据类型用于精度要求非常高的计算中，这种类型允许指定数值的精度和计数方法作为选择参数。精度在这里指为这个值保存的有效数字的总个数，
而计数方法表示小数点后数字的位数。比如语句 DECIMAL(7,3) 规定了存储的值不会超过 7 位数字，并且小数点后不超过 3 位。
忽略 DECIMAL 数据类型的精度和计数方法修饰符将会使 MySQL 数据库把所有标识为这个数据类型的字段精度设置为 10，计算方法设置为 0。
UNSIGNED 和 ZEROFILL 修饰符也可以被 FLOAT、DOUBLE 和 DECIMAL 数据类型使用。并且效果与 INT 数据类型相同。
二.字符串类型
MySQL 提供了8个基本的字符串类型,分别:CHAR、VARCHAR、BINARY、VARBINARY、BLOB、TEXT、ENUM 各SET等多种字符串类型。
可以存储的范围从简单的一个字符到巨大的文本块或二进制字符串数据。
字符串类型 字节大小 描述及存储需求
CHAR 0-255字节 定长字符串
VARCHAR 0-255字节 变长字符串
TINYBLOB 0-255字节 不超过 255 个字符的二进制字符串
TINYTEXT 0-255字节 短文本字符串
BLOB 0-65535字节 二进制形式的长文本数据
TEXT 0-65535字节 长文本数据
MEDIUMBLOB 0-16 777 215字节 二进制形式的中等长度文本数据
MEDIUMTEXT 0-16 777 215字节 中等长度文本数据
LOGNGBLOB 0-4 294 967 295字节 二进制形式的极大文本数据
LONGTEXT 0-4 294 967 295字节 极大文本数据
VARBINARY(M) 允许长度0-M个字节的定长字节符串，值的长度+1个字节
BINARY(M) M 允许长度0-M个字节的定长字节符串
CHAR 和 VARCHAR 类型
CHAR 类型用于定长字符串，并且必须在圆括号内用一个大小修饰符来定义。这个大小修饰符的范围从 0-255。比指定长度大的值将被截短，而比指定长度小的值将会用空格作填补。
CHAR 类型可以使用 BINARY 修饰符。当用于比较运算时，这个修饰符使 CHAR 以二进制方式参于运算，而不是以传统的区分大小写的方式。
CHAR 类型的一个变体是 VARCHAR 类型。它是一种可变长度的字符串类型，并且也必须带有一个范围在 0-255 之间的指示器。CHAR 和 VARCHGAR 不同之处在于 MYSQL 数据库处理
这个指示器的方式：CHAR 把这个大小视为值的大小，不长度不足的情况下就用空格补足。而 VARCHAR 类型把它视为最大值并且只使用存储字符串实际需要的长度
(增加一个额外字节来存储字符串本身的长度)来存储值。所以短于指示器长度的 VARCHAR 类型不会被空格填补，但长于指示器的值仍然会被截短。
因为 VARCHAR 类型可以根据实际内容动态改变存储值的长度，所以在不能确定字段需要多少字符时使用 VARCHAR 类型可以大大地节约磁盘空间、提高存储效率。
VARCHAR 类型在使用 BINARY 修饰符时与 CHAR 类型完全相同。
TEXT 和 BLOB 类型
对于字段长度要求超过 255 个的情况下，MySQL 提供了 TEXT 和 BLOB 两种类型。根据存储数据的大小，它们都有不同的子类型。这些大型的数据用于存储文本块或图像、
声音文件等二进制数据类型。
TEXT 和 BLOB 类型在分类和比较上存在区别。BLOB 类型区分大小写，而 TEXT 不区分大小写。大小修饰符不用于各种 BLOB 和 TEXT 子类型。
比指定类型支持的最大范围大的值将被自动截短。
三.日期和时间类型
在处理日期和时间类型的值时，MySQL 带有 5 个不同的数据类型可供选择。它们可以被分成简单的日期、时间类型，和混合日期、时间类型。
根据要求的精度，子类型在每个分类型中都可以使用，并且 MySQL 带有内置功能可以把多样化的输入格式变为一个标准格式。
类型 大小(字节) 范围 格式 用途
DATE 4 1000-01-01/9999-12-31 YYYY-MM-DD 日期值
TIME 3 '-838:59:59'/'838:59:59' HH:MM:SS 时间值或持续时间
YEAR 1 1901/2155 YYYY 年份值
DATETIME 8 1000-01-01 00:00:00/9999-12-31 23:59:59 YYYY-MM-DD HH:MM:SS 混合日期和时间值
TIMESTAMP 4 1970-01-01 00:00:00/2037 年某时 YYYYMMDD HHMMSS 混合日期和时间值，时间戳
DATE、TIME 和 TEAR 类型
MySQL 用 DATE 和 YEAR 类型存储简单的日期值，使用 TIME 类型存储时间值。这些类型可以描述为字符串或不带分隔符的整数序列。如果描述为字符串,
DATE 类型的值应该使用连字号作为分隔符分开，而 TIME 类型的值应该使用冒号作为分隔符分开。
需要注意的是，没有冒号分隔符的 TIME 类型值，将会被 MySQL 理解为持续的时间，而不是时间戳。
MySQL 还对日期的年份中的两个数字的值，或是 SQL 语句中为 TEAR 类型输入的两个数字进行最大限度的通译。因为所有 TEAR 类型的值必须用 4 个数字存储。
MySQL 试图将 2 个数字的年份转换为 4 个数字的值。把在 00-69 范围内的值转换到 2000-2069 范围内。把 70-99 范围内的值转换到 1970-1979 之内。
如果 MySQL 自动转换后的值并不符合我们的需要，请输入 4 个数字表示的年份。
DATETIME 和 TIMESTAMP 类型
除了日期和时间数据类型，MySQL 还支持 DATETIME 和 TIMESTAMP 这两种混合类型。它们可以把日期和时间作为单个的值进行存储。
这两种类型通常用于自动存储包含当前日期和时间的时间戳，并可在需要执行大量数据库事务和需要建立一个调试和审查用途的审计跟踪的应用程序中发挥良好作用。
如果我们对 TIMESTAMP 类型的字段没有明确赋值，或是被赋与了 null 值。MySQL 会自动使用系统当前的日期和时间来填充它。
复合类型
MySQL 还支持两种复合数据类型 ENUM 和 SET，它们扩展了 SQL 规范。虽然这些类型在技术上是字符串类型，但是可以被视为不同的数据类型。
一个 ENUM 类型只允许从一个集合中取得一个值；而 SET 类型允许从一个集合中取得任意多个值。
ENUM 类型
ENUM 类型因为只允许在集合中取得一个值，有点类似于单选项。在处理相互排拆的数据时容易让人理解，比如人类的性别。ENUM 类型字段可以从集合中取得一个值或使用 null 值，
除此之外的输入将会使 MySQL 在这个字段中插入一个空字符串。另外如果插入值的大小写与集合中值的大小写不匹配，MySQL 会自动使用插入值的大小写转换成与集合中大小写一致的值。
ENUM 类型在系统内部可以存储为数字，并且从 1 开始用数字做索引。一个 ENUM 类型最多可以包含 65536 个元素，其中一个元素被 MySQL 保留，用来存储错误信息，
这个错误值用索引 0 或者一个空字符串表示。
MySQL 认为 ENUM 类型集合中出现的值是合法输入，除此之外其它任何输入都将失败。这说明通过搜索包含空字符串或对应数字索引为 0 的行就可以很容易地找到错误记录的位置。
SET 类型
SET 类型与 ENUM 类型相似但不相同。SET 类型可以从预定义的集合中取得任意数量的值。并且与 ENUM 类型相同的是任何试图在 SET 类型字段中插入非预定义的值都会使
MySQL 插入一个空字符串。如果插入一个即有合法的元素又有非法的元素的记录，MySQL 将会保留合法的元素，除去非法的元素。
一个 SET 类型最多可以包含 64 项元素。在 SET 元素中值被存储为一个分离的“位”序列，这些“位”表示与它相对应的元素。“位”是创建有序元素集合的一种简单而有效的方式。
并且它还去除了重复的元素，所以 SET 类型中不可能包含两个相同的元素。
希望从 SET 类型字段中找出非法的记录只需查找包含空字符串或二进制值为 0 的行。
通过对每种数据类型的用途，物理存储，表示范围等有一个概要的了解。这样在面对具体应用时，就可以根据相应的特来来选择合适的数据类型，使得我们能够争取在满足应用的基础上，
用较小的存储代价换来较高的数据库性能。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：csdn
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一般调用axios接口都是这样的格式。
this.$axios.post('api/xxxx/xxxxx', this.$qs.stringify({ username: 'qwerqw', password: '123456' })).then(res => { ... ... }).catch(error => { ... ... })
这样的格式要想获取到返回值的话，就要将代码都写在then中，阅读代码的时候不是很清晰。于是网上各种搜，最后觉得这种方法能解决我的强迫症。
login: async function() { // result的值就是res.data let result = await new Promise((resolve,reject) => { this.$axios.post('api/xxxx/xxxxx', this.$qs.stringify({ username: 'qwerqw', password: '123456' })).then(res => { resolve(res.data) }).catch(error => { console.log(error) }) }) ... ... }
按照这种方式去获取到后端的返回值，就可以将剩下的逻辑放在axios请求外面了。
我的理解是，axios是一种异步请求方法，需要用await关键词修饰，等到获取到返回值后再执行后面的代码。在使用await时，需要再function前添加async关键词。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：csdn 作者：灰羊驼
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
**
**
setTimeout只在指定时间后执行一次，代码如下：
<script>
//定时器 异步运行
function hello(){
alert("hello");
}
//使用方法名字执行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
window.clearTimeout(t1);//去掉定时器
</script>
setInterval以指定时间为周期循环执行，代码如下：
//实时刷新时间单位为毫秒
setInterval('refreshQuery()',8000);
/* 刷新查询 */
function refreshQuery(){
$("#mainTable").datagrid('reload',null);
}
一般情况下setTimeout用于延迟执行某方法或功能，
setInterval则一般用于刷新表单，对于一些表单的实时指定时间刷新同步
**
**
HTML代码
<div class="father">
<ul>
<li>{{one}}<span>:</span></li>
<li>{{two}}<span>:</span></li>
<li>{{three}}</li>
</ul>
<el-button type="primary" @click="startHandler">开始</el-button>
<el-button type="primary" @click="endHandler">暂停</el-button>
</div>
JAVASCRIPT代码
<script>
export default {
name: 'HelloWorld',
data(){
return {
flag: null,
one : '00', // 时
two : '00', // 分
three : '00', // 秒
abc : 0, // 秒的计数
cde : 0, // 分的计数
efg : 0, // 时的计数
}
},
props: {
msg: String
},
mounted() {
},
methods:{
// 开始计时
startHandler(){
this.flag = setInterval(()=>{
if(this.three === 60 || this.three === '60'){
this.three = '00';
this.abc = 0;
if(this.two === 60 || this.two === '60'){
this.two = '00';
this.cde = 0;
if(this.efg+1 <= 9){
this.efg++;
this.one = '0' + this.efg;
}else{
this.efg++;
this.one = this.efg;
}
}else{
if(this.cde+1 <= 9){
this.cde++;
this.two = '0' + this.cde;
}else{
this.cde++;
this.two = this.cde;
}
}
}else{
if(this.abc+1 <= 9){
this.abc++;
this.three = '0' + this.abc;
}else{
this.abc++;
this.three=this.abc;
}
}
},100)
},
// 暂停计时
endHandler(){
this.flag = clearInterval(this.flag)
}
}
}
</script>
效果如下：
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：csdn 作者：rock_23
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com