首页

MYSQL 修改语句(数据)

前端达人

修改数据(UPDATE)


   如果你失忆了，希望你能想起曾经为了追求梦想的你。


我们玩QQ、微信、淘宝等等，都会有一个操作：修改信息

淘宝常用的嘛，新增了收货地址，也可以修改它，微信/QQ修改昵称、密码、签名等，这些数据都是保存在数据库里的，那么，需要操作数据库里的数据，修改它，就要用到：UPDATE(update)

控制上一篇文章留下的数据库、表及数据：
表数据：



第四条数据(id为4的)，它没有 性别和年龄的数据，那么我们用 UPDATE来修改。注意：这里是修改，并非添加(INSERT INTO)

基本语句：UPDATE cs_user SET gender = '男' WHERE id = 4
看图：



修改后的效果：




使用UPDATE(update)需注意：
1.请使用 WHERE 进行过滤筛选，若没有筛选，它会把整个列(字段)全部改变，请看：



效果：



2.SET后面可以跟多个字段和新数据，以逗号隔开，实例：UPDATE cs_user SET age = 18 , gender = '女' WHERE id = 4
效果：



3.UPDATE(修改)和 INSERT INTO(新增) 不同，新增只需加数据，会一行一行的增加，而UPDATE修改，是需要条件过滤的，否则就会改动整个表的数据了。UPDATE不算是新增数据，即时刚开始 第四条数据，他没有 gender、age的数据，我加入进去了新数据，那也算是修改，并非添加，就是说：我把他空的数据，修改成了非空数据。

4.WHERE(过滤条件)：条件，就好比你去某个班级，找男生帮忙搬东西，进去之后，发现男生太多了，你只需要10个男生，你就会给出条件：“来10个最强壮的”，那么这就是条件，过滤了剩下的男生，他们不会被选中。

这里用到的 等于(=)， 还有更多的条件 大于(>)、小于(<)、大于等于(>=)、小于等于(<=)、不等于(!=)....





蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源：csdn   

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(3485)

jQuery插件——imgbox（点击图片查看大图）

前端达人

需要对应的js代码和css样式，大家可以通过www.htmldrive.net平台下载，也可以在我文章的底部下载。对应的资源如下，将资源引入页面（别忘了JQuery）：

注意：jQuery最好使用1.3版本的，有些版本行不通，亲测1.8版本不行

HTML代码：

 

 

js代码： 


    
    

        
  1. 

            
    

                
    

                
    

            
    

            
    

                
    
                    $(".test").imgbox({
                
    

            
    

        
    2. 

        
  2. 

            
    

                
    

                
    

            
    

            
    

                
    
                    'speedIn': 500,
                
    

            
    

        
    3. 

        
  3. 

            
    

                
    

                
    

            
    

            
    

                
    
                    'speedOut': 500,
                
    

            
    

        
    4. 

        
  4. 

            
    

                
    

                
    

            
    

            
    

                
    
                    'alignment': 'center',
                
    

            
    

        
    5. 

        
  5. 

            
    

                
    

                
    

            
    

            
    

                
    
                    'overlayShow': true,
                
    

            
    

        
    6. 

        
  6. 

            
    

                
    

                
    

            
    

            
    

                
    
                    'allowMultiple': false,
                
    

            
    

        
    7. 

        
  7. 

            
    

                
    

                
    

            
    

            
    

                
    
                    'autoScale': true
                
    

            
    

        
    8. 

        
  8. 

            
    

                
    

                
    

            
    

            
    

                
    
                    });
                
    

            
    

        
    9.


效果：

 

 

讲解：

以上例子中，我们只用了一行js代码“$(".test").imgbox();”，就实现了图片弹出放大效果。这是因为在jquery.imgbox.js中imgbox()函数有默认的参数。当我们调用函数但没有传递参数时，会加载默认的参数，显示默认效果和样式。

如果觉得默认样式不合适，有两种方式进行修改：1、修改jquery.imgbox.js中imgbox()函数的默认参数；2、调用imgbox()函数时，给参数赋值。 


    
    

        
  1. 

            
    

                
    

                
    

            
    

            
    

                
    
                    //在jquery.imgbox.js中，默认参数如下，可以修改：
                
    

            
    

        
    2. 

        
  2. 

            
    

                
    

                
    

            
    

            
    

                
    
                    $.fn.imgbox.defaults = {
                
    

            
    

        
    3. 

        
  3. 

            
    

                
    

                
    

            
    

            
    

                
    
                    padding : 10,
                
    

            
    

        
    4. 

        
  4. 

            
    

                
    

                
    

            
    

            
    

                
    
                    alignment : 'auto', // auto OR center
                
    

            
    

        
    5. 

        
  5. 

            
    

                
    

                
    

            
    

            
    

                
    
                    allowMultiple : true,
                
    

            
    

        
    6. 

        
  6. 

            
    

                
    

                
    

            
    

            
    

                
    
                    autoScale : true,
                
    

            
    

        
    7. 

        
  7. 

            
    

                
    

                
    

            
    

            
    

                
    
                    speedIn : 500,
                
    

            
    

        
    8. 

        
  8. 

            
    

                
    

                
    

            
    

            
    

                
    
                    speedOut : 500,
                
    

            
    

        
    9. 

        
  9. 

            
    

                
    

                
    

            
    

            
    

                
    
                    easingIn : 'swing',
                
    

            
    

        
    10. 

        
  10. 

            
    

                
    

                
    

            
    

            
    

                
    
                    easingOut : 'swing',
                
    

            
    

        
    11. 

        
  11. 

            
    

                
    

                
    

            
    

            
    

                
    
                    zoomOpacity : false,
                
    

            
    

        
    12. 

        
  12. 

            
    

                
    

                
    

            
    

            
    

                
    
                    overlayShow : false,
                
    

            
    

        
    13. 

        
  13. 

            
    

                
    

                
    

            
    

            
    

                
    
                    overlayOpacity : 0.5,
                
    

            
    

        
    14. 

        
  14. 

            
    

                
    

                
    

            
    

            
    

                
    
                    hideOnOverlayClick : true,
                
    

            
    

        
    15. 

        
  15. 

            
    

                
    

                
    

            
    

            
    

                
    
                    hideOnContentClick : true
                
    

            
    

        
    16. 

        
  16. 

            
    

                
    

                
    

            
    

            
    

                
    
                    };
                
    

            
    

        
    17.

参数的含义：

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设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源：csdn   

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(3243)

uni-app uni.uploadFile 多图上传 Node.js后端接收

前端达人

uni-app 代码

选择图片代码（uniapp 代码示例）

选择图片代码以及文档 

uni.chooseImage({ success: (chooseImageRes) => { const tempFilePaths = chooseImageRes.tempFilePaths; } }); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    •

在这里插入图片描述

上传图片以及文档

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; } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    •

uniapp 全部代码 

 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('图片上传失败，请联系开发'); } }); } }) 

    

    
  • 
        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
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    •

在这里插入图片描述

Node后端

  1. npm install multer
  2. npm i express

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设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源：csdn    

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


评论(0) 浏览(5664)

mysql数据类型

前端达人

本文出自 “旋木的技术博客” 博客，请务必保留此出处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设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源：csdn    

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(2408)

axios请求获取到返回值

前端达人

axios请求获取到返回值


最近在学习Vue，碰到一个问题就是需要从后端获取到某个返回值之后再运行后面的代码。

一般调用axios接口都是这样的格式。 

this.$axios.post('api/xxxx/xxxxx', this.$qs.stringify({ username: 'qwerqw', password: '123456' })).then(res => { ... ... }).catch(error => { ... ... }) 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    •

这样的格式要想获取到返回值的话，就要将代码都写在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) }) }) ... ... } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    •

按照这种方式去获取到后端的返回值，就可以将剩下的逻辑放在axios请求外面了。

我的理解是，axios是一种异步请求方法，需要用await关键词修饰，等到获取到返回值后再执行后面的代码。在使用await时，需要再function前添加async关键词。



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源：csdn     作者：灰羊驼

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(5052)

使用vue写一个计时器

前端达人

**

首先我们要知道setTimeout和setInterval的区别

**
setTimeout只在指定时间后执行一次，代码如下： 

<script>  
//定时器 异步运行  
function hello(){  
alert("hello");  
}  
//使用方法名字执行方法  
var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法  
window.clearTimeout(t1);//去掉定时器  
</script> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    •

setInterval以指定时间为周期循环执行，代码如下： 

//实时刷新时间单位为毫秒  
setInterval('refreshQuery()',8000);   
/* 刷新查询 */  
function refreshQuery(){  
   $("#mainTable").datagrid('reload',null);  
} 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    •

一般情况下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> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    •

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> 

    

    
  • 
        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
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    • 

    
  • 
        45
    
    • 

    
  • 
        46
    
    • 

    
  • 
        47
    
    • 

    
  • 
        48
    
    • 

    
  • 
        49
    
    • 

    
  • 
        50
    
    • 

    
  • 
        51
    
    • 

    
  • 
        52
    
    • 

    
  • 
        53
    
    • 

    
  • 
        54
    
    • 

    
  • 
        55
    
    • 

    
  • 
        56
    
    • 

    
  • 
        57
    
    • 

    
  • 
        58
    
    • 

    
  • 
        59
    
    • 

    
  • 
        60
    
    • 

    
  • 
        61
    
    • 

    
  • 
        62
    
    • 

    
  • 
        63
    
    • 

    
  • 
        64
    
    • 

    
  • 
        65
    
    •

效果如下：
在这里插入图片描述




蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源：csdn     作者：rock_23

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(2879)

VueJs里利用CryptoJs实现Md5加密和3Des加密及解密

前端达人

前言

前我们介绍的用于vue用于数据签名的操作，《【干货】Vue TypeScript根据类生成签名字符串》，其目的就是用于生成这个再转MD5加密的模式进行校验，原来我们在C#和Android里面已经实现这些方式，因为前端准备用Vue来做，所以加密这块少不了也需要实现的。

安装Crypto

Crypto里面可以把md5和3des都一起做了，所以我们直接安装这个比较方便

找到我们的程序目录，按住Shift加鼠标右键，选择在此处打开Powershell窗口

然后在cmd窗口里面输入npm install crypto-js -save-dev 

安装完成后可以看到红框下面标注着成功了。


代码演示


MD5加密

我们还是用上次签名的那个项目里面，首先要先引用Crypto-js


getmd5，我们再写一个GetMd5的方法，传入的字符串直接生成MD5的字符返回，


接下来再定义一个双向绑定的字符串，在点击签名的时候同时生成md5的字符串显示的页面上

运行后的效果



3DES加密、解密

核心代码

加密

   Encrypt3Des(str: string, aStrKey: string, ivstr: string): string {
        const KeyHex = CryptoJS.enc.Utf8.parse(aStrKey);
        const encrypted = CryptoJS.TripleDES.encrypt(str,
            KeyHex,
            {
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7,
                iv: CryptoJS.enc.Utf8.parse(ivstr)
            });
        let hexstr = encrypted.ciphertext.toString().toUpperCase();
        console.log(hexstr);
        return hexstr;
    }

一般网上的加解密最后红框这里我们直接是输出 return encrypted.tostring()，但是因为我们自己的C#和Android的3Des的加解密都是最后输出的16进制的字符串，所以我们改为红框这里输出的样式。


解密

    Decrypt3Des(str: string, aStrKey: string, ivstr: string): string {
        const KeyHex = CryptoJS.enc.Utf8.parse(aStrKey);
        //因为我们加密的时候用到的16进制字符串，需要进行转换
        //第一步把16进制字符串转为WordArray格式
        const WordArray = CryptoJS.enc.Hex.parse(str);
        //第二步把WordArray再转为base64的字符串
        const base64str = CryptoJS.enc.Base64.stringify(WordArray);
        //第三步再进行解密
        const decrypted = CryptoJS.TripleDES.decrypt(base64str,
            KeyHex,
            {
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7,
                iv: CryptoJS.enc.Utf8.parse(ivstr)
            });

        return decrypted.toString(CryptoJS.enc.Utf8);
    }

这里比较重要就是红框里面，因为我们的加密最后输出的是16进制的字符串，所以我们解密的时候首先要把16进制字符串转为WordArray格式，再转换为BASE64的字符串，最后再进行解密。因为我也是个前端小白，就是这个问题我也是研究了一下午才搞明白。

最后下面的黄框要注意输出的字符要转为Utf8。



其余设置

我们在test.ts里面定义了两个字符串，一个des3encryptstr的加密后的字符串，一个des3decryptstr是解密后的字符串，然后又加上了两个方法，一个是加密的方法btnencrypt，一个是解密的方法btndecrypt，分别调用的就是我们刚才写的两段核心代码。


然后在test.vue.html里面加上双向绑定显示以及一个加密按钮和一个解密按钮。


页面效果

未加密的效果

点击加密后的效果

点击解密后的效果


蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源：https://my.oschina.net/u/4582134/blog/4582375

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(5138)

手把手教你利用js给图片打马赛克

前端达人

文章目录

效果演示

在这里插入图片描述

Canvas简介

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）

不过， 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性

本手册提供完整的 getContext(“2d”) 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等

标记和 SVG 以及 VML 之间的差异：

标记和 SVG 以及 VML 之间的一个重要的不同是， 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。

这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。

要从同一图形的一个 标记中移除元素，往往需要擦掉绘图重新绘制它。
在这里插入图片描述

知识点简介

  • 利用js创建图片 
let img = new Image() //可以给图片一个链接 img.src = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=826495019,1749283937&fm=26&gp=0.jpg' //或者本地已有图片的路径 //img.src = './download.jpg' //添加到HTML中 document.body.appendChild(img)  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    •
  • canvas.getContext(“2d”)

语法：
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API 

let ctx = Canvas.getContext(contextID)  

    

    
  • 
        1
    
    •
  • ctx.drawImage()

JavaScript 语法 1：
在画布上定位图像： 

context.drawImage(img,x,y);  

    

    
  • 
        1
    
    •

JavaScript 语法 2：
在画布上定位图像，并规定图像的宽度和高度： 

context.drawImage(img,x,y,width,height);  

    

    
  • 
        1
    
    •

JavaScript 语法 3：
剪切图像，并在画布上定位被剪切的部分： 

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);  

    

    
  • 
        1
    
    •
  • ctx.getImageData()

JavaScript 语法
getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：
R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)
color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中 

var imgData=context.getImageData(x,y,width,height);  

    

    
  • 
        1
    
    •
  • ctx.putImageData()

putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。

接下来跟着我一步一步做完这个小功能叭~
在这里插入图片描述

step-by-step

准备好我们的图片，并添加上我们的方法 

<body> <img src="./download.jpg"> <button onclick="addCanvas()">生成Canvas</button> <button onclick="generateImg()">生成图片</button> </body>  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    •

在这里插入图片描述
接下来写addCanvas方法 

function addCanvas() { let bt = document.querySelector('button') let img = new Image(); //1.准备赋值复制一份图片 img.src = './download.jpg'; img.onload = function() { //2.待图片加载完成 let width = this.width let height = this.height let canvas = document.createElement('canvas') //3.创建画布 let ctx = canvas.getContext("2d"); //4.获得该画布的内容 canvas.setAttribute('width', width) //5.为了统一，设置画布的宽高为图片的宽高 canvas.setAttribute('height', height) ctx.drawImage(this, 0, 0, width, height); //5.在画布上绘制该图片 document.body.insertBefore(canvas, bt) //5.把canvas插入到按钮前面 } }  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    •

成功在画布上得到图片：
在这里插入图片描述

嗯，我们已经成功走出了成功的一小步，接下来是干什么呢？…嗯，我们需要利用原生的onmouseup和onmousedown事件，代表我们按下鼠标这个过程，那么这两个事件添加到哪呢？

没错，既然我们要在canvas上进行马赛克操作，那我们必然要给canvas元素添加这两个事件

考虑到我们创建canvas的过程复杂了一点，我们做一个模块封装吧！ 

function addCanvas() { let bt = document.querySelector('button') let img = new Image(); img.src = './download.jpg'; //这里放自己的图片 img.onload = function() { let width = this.width let height = this.height let { canvas, ctx } = createCanvasAndCtx(width, height) //对象解构接收canvas和ctx ctx.drawImage(this, 0, 0, width, height); document.body.insertBefore(canvas, bt) } } function createCanvasAndCtx(width, height) { let canvas = document.createElement('canvas') canvas.setAttribute('width', width) canvas.setAttribute('height', height) canvas.setAttribute('onmouseout', 'end()') //修补鼠标不在canvas上离开的补丁 canvas.setAttribute('onmousedown', 'start()') //添加鼠标按下 canvas.setAttribute('onmouseup', 'end()') //添加鼠标弹起 let ctx = canvas.getContext("2d"); return { canvas, ctx } } function start() { let canvas = document.querySelector('canvas') canvas.onmousemove = () => { console.log('你按下了并移动了鼠标') } } function end() { let canvas = document.querySelector('canvas') canvas.onmousemove = null }  

    

    
  • 
        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
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    • 

    
  • 
        45
    
    • 

    
  • 
        46
    
    •

测试一下我们的start()和end()是否生效了
在这里插入图片描述
嗯，目前来看，我们的代码依然如我们所愿的正常工作

接下来的挑战更加严峻，我们需要去获取像素和处理像素，让我们再重写start()函数 

 function start() { let img = document.querySelector('img') let canvas = document.querySelector('canvas') let ctx = canvas.getContext("2d"); imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight); canvas.onmousemove = (e) => { let w = imgData.width; //1.获取图片宽高 let h = imgData.height; //马赛克的程度，数字越大越模糊 let num = 10; //获取鼠标当前所在的像素RGBA let color = getXY(imgData, e.offsetX, e.offsetY); for (let k = 0; k < num; k++) { for (let l = 0; l < num; l++) { //设置imgData上坐标为(e.offsetX + l, e.offsetY + k)的的颜色 setXY(imgData, e.offsetX + l, e.offsetY + k, color); } } //更新canvas数据 ctx.putImageData(imgData, 0, 0); } } //这里为你提供了setXY和getXY两个函数，如果你有兴趣，可以去研究获取的原理 function setXY(obj, x, y, color) { var w = obj.width; var h = obj.height; var d = obj.data; obj.data[4 * (y * w + x)] = color[0]; obj.data[4 * (y * w + x) + 1] = color[1]; obj.data[4 * (y * w + x) + 2] = color[2]; obj.data[4 * (y * w + x) + 3] = color[3]; } function getXY(obj, x, y) { var w = obj.width; var h = obj.height; var d = obj.data; var color = []; color[0] = obj.data[4 * (y * w + x)]; color[1] = obj.data[4 * (y * w + x) + 1]; color[2] = obj.data[4 * (y * w + x) + 2]; color[3] = obj.data[4 * (y * w + x) + 3]; return color; }  

    

    
  • 
        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
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    • 

    
  • 
        45
    
    • 

    
  • 
        46
    
    • 

    
  • 
        47
    
    • 

    
  • 
        48
    
    • 

    
  • 
        49
    
    •

嗯，我们离成功不远拉，最后一步就是生成图片

好在canavs给我们提供了直接的方法，可以直接将画布导出为Base64编码的图片： 

function generateImg() { let canvas = document.querySelector('canvas') var newImg = new Image(); newImg.src = canvas.toDataURL("image/png"); document.body.insertBefore(newImg, canvas) }  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    •

最终效果：
在这里插入图片描述

是不是无比轻松呢~，来看看你手写的代码是否和下面一样叭：

完整代码 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <body> <img src="./download.jpg"> <button onclick="addCanvas()">生成Canvas</button> <button onclick="generateImg()">生成图片</button> </body> <script> function addCanvas() { let bt = document.querySelector('button') let img = new Image(); img.src = './download.jpg'; //这里放自己的图片 img.onload = function() { let width = this.width let height = this.height let { canvas, ctx } = createCanvasAndCtx(width, height) ctx.drawImage(this, 0, 0, width, height); document.body.insertBefore(canvas, bt) } } function createCanvasAndCtx(width, height) { let canvas = document.createElement('canvas') canvas.setAttribute('width', width) canvas.setAttribute('height', height) canvas.setAttribute('onmouseout', 'end()') canvas.setAttribute('onmousedown', 'start()') canvas.setAttribute('onmouseup', 'end()') let ctx = canvas.getContext("2d"); return { canvas, ctx } } function start() { let img = document.querySelector('img') let canvas = document.querySelector('canvas') let ctx = canvas.getContext("2d"); imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight); canvas.onmousemove = (e) => { let w = imgData.width; //1.获取图片宽高 let h = imgData.height; //马赛克的程度，数字越大越模糊 let num = 10; //获取鼠标当前所在的像素RGBA let color = getXY(imgData, e.offsetX, e.offsetY); for (let k = 0; k < num; k++) { for (let l = 0; l < num; l++) { //设置imgData上坐标为(e.offsetX + l, e.offsetY + k)的的颜色 setXY(imgData, e.offsetX + l, e.offsetY + k, color); } } //更新canvas数据 ctx.putImageData(imgData, 0, 0); } } function generateImg() { let canvas = document.querySelector('canvas') var newImg = new Image(); newImg.src = canvas.toDataURL("image/png"); document.body.insertBefore(newImg, canvas) } function setXY(obj, x, y, color) { var w = obj.width; var h = obj.height; var d = obj.data; obj.data[4 * (y * w + x)] = color[0]; obj.data[4 * (y * w + x) + 1] = color[1]; obj.data[4 * (y * w + x) + 2] = color[2]; obj.data[4 * (y * w + x) + 3] = color[3]; } function getXY(obj, x, y) { var w = obj.width; var h = obj.height; var d = obj.data; var color = []; color[0] = obj.data[4 * (y * w + x)]; color[1] = obj.data[4 * (y * w + x) + 1]; color[2] = obj.data[4 * (y * w + x) + 2]; color[3] = obj.data[4 * (y * w + x) + 3]; return color; } function end() { let canvas = document.querySelector('canvas') canvas.onmousemove = null } </script> </body> </html>  

    

    
  • 
        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
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    • 

    
  • 
        45
    
    • 

    
  • 
        46
    
    • 

    
  • 
        47
    
    • 

    
  • 
        48
    
    • 

    
  • 
        49
    
    • 

    
  • 
        50
    
    • 

    
  • 
        51
    
    • 

    
  • 
        52
    
    • 

    
  • 
        53
    
    • 

    
  • 
        54
    
    • 

    
  • 
        55
    
    • 

    
  • 
        56
    
    • 

    
  • 
        57
    
    • 

    
  • 
        58
    
    • 

    
  • 
        59
    
    • 

    
  • 
        60
    
    • 

    
  • 
        61
    
    • 

    
  • 
        62
    
    • 

    
  • 
        63
    
    • 

    
  • 
        64
    
    • 

    
  • 
        65
    
    • 

    
  • 
        66
    
    • 

    
  • 
        67
    
    • 

    
  • 
        68
    
    • 

    
  • 
        69
    
    • 

    
  • 
        70
    
    • 

    
  • 
        71
    
    • 

    
  • 
        72
    
    • 

    
  • 
        73
    
    • 

    
  • 
        74
    
    • 

    
  • 
        75
    
    • 

    
  • 
        76
    
    • 

    
  • 
        77
    
    • 

    
  • 
        78
    
    • 

    
  • 
        79
    
    • 

    
  • 
        80
    
    • 

    
  • 
        81
    
    • 

    
  • 
        82
    
    • 

    
  • 
        83
    
    • 

    
  • 
        84
    
    • 

    
  • 
        85
    
    • 

    
  • 
        86
    
    • 

    
  • 
        87
    
    • 

    
  • 
        88
    
    • 

    
  • 
        89
    
    • 

    
  • 
        90
    
    • 

    
  • 
        91
    
    • 

    
  • 
        92
    
    • 

    
  • 
        93
    
    • 

    
  • 
        94
    
    • 

    
  • 
        95
    
    • 

    
  • 
        96
    
    • 

    
  • 
        97
    
    • 

    
  • 
        98
    
    • 

    
  • 
        99
    
    • 

    
  • 
        100
    
    • 

    
  • 
        101
    
    • 

    
  • 
        102
    
    • 

    
  • 
        103
    
    • 

    
  • 
        104
    
    • 

    
  • 
        105
    
    • 

    
  • 
        106
    
    • 

    
  • 
        107
    
    • 

    
  • 
        108
    
    • 

    
  • 
        109
    
    • 

    
  • 
        110
    
    • 

    
  • 
        111
    
    • 

    
  • 
        112
    
    • 

    
  • 
        113
    
    • 

    
  • 
        114
    
    • 

    
  • 
        115
    
    • 

    
  • 
        116
    
    •

当然，你可以做更多创作，比如上面打的马赛克是正方形的，你可以利用你的数学知识让其变为圆形，以圆心为鼠标中心扩散

你也可以选择完善一些过程，例如马赛克位置打错了，可以选择将画布清空然后重新开始~
或者做一些善后处理，导出图片后隐藏canvas画布
点个赞吧

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源：csdn   作者： VGtime

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


评论(0) 浏览(3398)

Slick.js使用方法——幻灯片

前端达人

  
和Swiper.js一样

简介

slick 是一个基于 jQuery 的响应触摸式幻灯片插件，支持IE8+，Chrome, Firefox, and Safari，具有以下特点：

  • 支持响应式
  • 浏览器支持 CSS3 时，则使用 CSS3 过度/动画
  • 支持移动设备滑动
  • 支持桌面浏览器鼠标拖动
  • 支持循环
  • 支持左右控制
  • 支持动态添加、删除、过滤
  • 支持自动播放、圆点、箭头、回调等等

兼容

浏览器兼容：兼容 IE7+ 及其他主流浏览器，若要兼容 IE7，需修改 CSS（slick.css）。

jQuery兼容：兼容 1.7 及以上版本。

使用方法

1、引入文件 

  
    

        <link rel="stylesheet" href="style/slick.css">
    


    

        <script src="script/jquery.min.js"></script>
    


    

        <script src="script/slick.min.js"></script>

注意：需jQuery 1.7

2、HTML 

  
    

        <div class="slick">
    


    

            <div><a href="http://www.dowebok.com"><img src="images/1.jpg" alt=""></a></div>
    


    

            <div><a href="http://www.dowebok.com"><img src="images/2.jpg" alt=""></a></div>
    


    

            <div><a href="http://www.dowebok.com"><img src="images/4.jpg" alt=""></a></div>
    


    

            <div><a href="http://www.dowebok.com"><img src="images/3.jpg" alt=""></a></div>
    

    <div><a href="http://www.dowebok.com"><img src="images/5.jpg" alt=""></a></div>
    

        </div>

3、JavaScript 

  
    

        $(function(){
    


    

            $('.slick').slick({
    


    

                dots: true
    


    

        });
    


    

        });

参数

参数 类型 默认值 说明
accessibility 布尔值 true 启用Tab键和箭头键导航
autoplay 布尔值 false 自动播放
autoplaySpeed 整数 3000 自动播放间隔
centerMode 布尔值 false 中心模式
centerPadding 字符串 ’50px’ 中心模式左右内边距
cssEase 字符串 ‘ease’ CSS3 动画
customPaging function n/a 自定义分页
dots 布尔值 false 指示点
draggable 布尔值 true 启用桌面拖动
easing 字符串 ‘linear’ animate() fallback easing
fade 布尔值 false 淡入淡出
arrows 布尔值 true 左右箭头
infinite 布尔值 true 循环播放
lazyLoad 字符串 ‘ondemand’ 延迟加载，可选 ondemand 和 progressive
onBeforeChange(this, index) method null 开始切换前的回调函数
onAfterChange(this, index) method null 切换后的回调函数
onInit(this) method null 第一次初始化后的回调函数
onReInit(this) method null 再次初始化后的回调函数
pauseOnHover 布尔值 true 鼠标悬停暂停自动播放
responsive object null 断点触发设置
slide 字符串 ‘div’ 滑动元素查询
slidesToShow 整数 1 幻灯片每屏显示个数
slidesToScroll 整数 1 幻灯片每次滑动个数
speed 整数 300 滑动时间
swipe 布尔值 true 移动设备滑动事件
touchMove 布尔值 true 触摸滑动
touchThreshold 整数 5 滑动切换阈值，即滑动多少像素后切换
useCSS 布尔值 true 使用 CSS3 过度
vertical 布尔值 false 垂直方向

方法

方法 Argument 说明
slick() options : object 初始化 slick
unslick()   销毁 slick
slickNext()   切换下一张
slickPrev()   切换上一张
slickPause()   暂停自动播放
slickPlay()   开始自动播放
slickGoTo() index : int 切换到第 x 张
slickCurrentSlide()   返回当前幻灯片索引
slickAdd() element : html or DOM object, index: int, addBefore: bool Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String
slideRemove() index: int, removeBefore: bool Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
slickFilter() filter : selector or function Filters slides using jQuery .filter syntax
slickUnfilter()   Removes applied filter
slickSetOption(option,value,refresh) option : string(option name), value : depends on option, refresh : 布尔值 Sets an option live. Set refresh to true if it is an option that changes the display

演 示 下 载



GitHub：https://github.com/kenwheeler/slick


蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源：csdn   作者：cc蒲公英

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(3661)

vue电商后台管理系统保姆级教程（八）——角色列表结构功能

前端达人

8、角色列表

8.1 通过路由展示角色列表组件

在power中新建一个roles.vue(角色列表）初始化基本结构：
在这里插入图片描述

在路由中加载导入：
在这里插入图片描述
在这里插入图片描述

8.2 绘制基本布局结构并获取列表数据

效果图：
在这里插入图片描述
面包屑导航：
在这里插入图片描述
卡片视图：
在这里插入图片描述
API：
在这里插入图片描述
渲染数据：
定义数据date：
在这里插入图片描述
生命周期函数：
在这里插入图片描述

8.3 渲染角色列表数据

先渲染索引列：
在这里插入图片描述
优化样式：
在这里插入图片描述

在索列之前加和 展开列：
在这里插入图片描述

8.4 说明角色列表需要完成的功能模块

现在还没有具体的样式，后面会写
角色信息的添加，删除功能前面做了，所以这里就不写了
点击对应按钮出现对应的弹出层，然后执行对应的操作。

8.5 分析角色下权限渲染的思路

在展开行中拿到渲染的数据
在请求数据列表中返回了数据children，通过作用域插槽来拿
在这里插入图片描述
实现效果：
在这里插入图片描述
拿到数据之后通过三层for循环渲染出对应的ui结构

8.6 通过第一层for循环渲染一级权限

先做一下栅格布局，区分出三个区域用来放三层for循环：

scope.row是当前对象的数据。 .children 是一级权限的数据， ：key每次循环绑定一个唯一的key值，通过插值表达式渲染出数据
在这里插入图片描述
放在el-tag标签中美化样式
在这里插入图片描述

8.7 美化一级权限

思路：
每行之间隔开距离，给每行放一个buttom的边框，第一行放一个top边框（这里使用三元表达判断） 加图标
在这里插入图片描述
每行都放buttom，利用三元表达式，如果i1===0.则bdtop否则空
在这里插入图片描述

8.8 通过二层for循环渲染二级权限

使用栅格布局分出2级权限和3级权限，，方法和之前的一样。
在这里插入图片描述
添加边框 线（上边框）第一个不添加，利用三元表达式判断：
在这里插入图片描述
动态绑定class类，然后判断
在这里插入图片描述
最终效果：
在这里插入图片描述

8.9 通过第三层for循环渲染三级权限

栅格布局：
注使用item2的children
在这里插入图片描述
通过作用域插槽拿到数据 children 拿到子组件数据，通过栅格分隔样式，动态绑定边框值。

8.10 美化角色权限下的UI结构

设置最小宽度：
设置body的最小宽度为1366px
在这里插入图片描述

角色列表设置居中：
定义一个类：哪里用到往哪里加
在这里插入图片描述
最后把代码插槽删了

8.11 点击删除权限按钮弹出确认提示框

使用element组件中的可移除标签属性：
在这里插入图片描述
closable属性：
在这里插入图片描述
绑定点击事件：
removeRightById：
在这里插入图片描述
定义事件：
在这里插入图片描述
然后弹框提示用户是否要删除，使用的还是element组件L

在这里插入图片描述
catch捕获错误：在这里插入图片描述
结果判断用户操作：
在这里插入图片描述
这里只是打印了结果，没有向后端发起请求。

8.12 完成删除角色下指定权限的功能

上一节点击了删除按钮后需要向后端发起删除的请求，删除用户在数据库中的权限：
API：
在这里插入图片描述
发起delect请求：
先把item3.id传进去：
在这里插入图片描述
在处理函数的形参中j接收一下：
在这里插入图片描述
然后再发起delect请求的时候用之前的参数字符串拼接
然后进行判断：
在这里插入图片描述
有个缺点：删除之后展开栏就被关闭了 解决办法：
在这里插入图片描述
把close权限赋值给一级标签二级标签
在这里插入图片描述



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源：csdn   作者：十九万里

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(2687)

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档