博客

  • mysql创建数据库建表字段实例

    mysql案例 mysql笔记

    参考看《mysql数据库笔记

    数据库字符集的修改设置《解决php输出文本出现乱码

    mysql数据库存储过程

    php和mysql交互 https://sdeno.com/?p=5456

    链接数据库

    mysql.exe -h地址 -u用户名 -p密码

     

    1,创建数据库

    CREATE DATABASE `liuyan`
    CHARACTER SET 'utf8'  //听说utf8mb4 才是真正的utf8
    COLLATE 'utf8_general_ci';

    2,选择数据库(选择后才能创建表和字段)

     use liuyan;

    3,设置字符集

    set names utf8;

    4,创建表和字段

    CREATE TABLE `liuyan_user` (
    `id` INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
    `liuyan_username` varchar(40) NOT NULL default '',
    `liuyan_userpass` char(40) NOT NULL default '',
    `liuyan_prompt` varchar(40) NOT NULL default '',
    `liuyan_answer` varchar(40) NOT NULL default '',
    `liuyan_sex` varchar(4) NOT NULL default '',
    `liuyan_pic` varchar(40) NOT NULL default '',
    `liuyan_email` varchar(40) NOT NULL default '',
    `liuyan_qq` varchar(20) NOT NULL default '',
    `liuyan_url` varchar(40) NOT NULL default ''
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
    
    
    写多读少选InnoDB
    读多写少选MyISAM //默认是这个
    
    
    

     

     

    对数据的增、删、改、查。

     

    增:

    创建库
    CREATE DATABASE `test2`;
    
    创建数据库,并且防止报错
    create database if not exists 数据库名;
    
    创建字符集编码为gbk的数据库
    create database if not exists 数据库名 character set gbk;
    
    创建库(推荐)
    CREATE DATABASE `liuyan`
    CHARACTER SET 'utf8'
    COLLATE 'utf8_general_ci';
    创建数据库以及防止出现乱码的注意事项:《解决php输出文本出现乱码》
    
    插入数据
    insert into 表 valus(‘值1′,’值2′,’值3′,..);
    insert into 表(字段1,字段2,字段3,..) values (‘字段1值’,’字段2值’,’字段3值’,..);
    
    添加表
    alter table 表名 add 字段名 varchar(30) not null;
    
    在字段名2的后面插入字段名1
    alter table 表名 add 字段名1 varchar(30) not null after 字段名2;
    
    最前面插入
    alter table 表名 add 字段名 varchar(30) first;
    
    复制表
    CREATE table 新表名 LIKE 被复制的表; //复制表的结构不含内容
    create table 新表名 select * from 被复制的表; //完全复制包括内容
    create table 新表名 select 字段1,字段2 from 被复制的表; //只复制指定字段

     

    删:

    drop database 库名; //删除库
    
    drop database if exists 数据库名; //删除库,并且防止报错
    
    drop table 表名; //删除表名
    
    alter table 表名 drop 删除的字段名; //删除字段名
    
    delete from 表 where id=2; //删除id是2的那条数据
    
    DELETE FROM 表 WHERE id IN (1,2,3,4); //批量删除id为1,2,3,4的数据
    
    truncate table 表名;  或者  delete from 表名; //清空表内容

     

    改:

    改字段内容
    什么条件找到那条数据去修改指定的内容(键可以根据id或者其他字段名当做搜索条件)
    update 表 set 字段="修改内容",字段="修改内容" where 键=值;
    
    改表名
    alter table 原表名 rename as 改表名;
    
    改字段名
    ALTER TABLE 表名 CHANGE 旧字段名 新字段名 新数据类型;
    
    改字段类型
    alter table 表名 modify 字段名 要修改的类型;
    
    改表字符集
    ALTER TABLE 表名 CONVERT TO CHARACTER SET gbk COLLATE gbk_chinese_ci;
    ALTER TABLE 表名 CONVERT TO CHARACTER SET utf8 COLLATE utf8_general_ci;
    
    修改数据库字符集编码
    alter database 数据库名 character set = utf8;
    
    改顺序
    SELECT * FROM 表名 ORDER BY `时间的字段` DESC; //按照时间倒序排列数据(正序ASC)
    
    
    批量修改某字段为统一内容
    update 表 set 字段='2222';
    
    批量替换指定字符串
    UPDATE 表名 SET 指定字段 = replace (指定字段, '想要替换的字符串', '替换成的字符串') WHERE 条件;

     

    查:

    SHOW DATABASES; //查看全部数据库
    SELECT DATABASE(); //查看当前选中的哪个数据库
    SHOW TABLES; //查看当前选中数据库的表
    SELECT * FROM 表名; //查看整张表字段内容
    DESCRIBE 表名; //查看整张表字段类型信息
    
    
    SELECT * FROM 表名 WHERE 字段名='筛选内容';//筛选指定条件的所有数据
    SELECT * FROM 表名 ORDER BY `时间的字段` DESC; //按照时间倒序排列数据(正序ASC)
    SELECT * FROM 表名 LIMIT 0,10 //从第一条开始查找前10条数据
    
    例子:select * from users where bonus=0 order by id desc limit 0,10;
    SELECT COUNT(*) FROM 表 //查询表有多少条数据
    
    查看mysql版本
    select version();
    
    当前时间
    select now();
    
    当前是哪个用户登录的
    select user();
    
    查看创建这个数据库的字符集编码
    show create database 数据库名;
    SHOW VARIABLES LIKE 'character%'; //同上
    
    查看当前操作的数据库名
    select database();
    
    查看其他库的所有表
    show tables from 数据库名;
    
    /查看表的数据结构
    show columns from 表名;

     

     

    计算

    加、减、乘、除

    mysql> SELECT 3+4;
    mysql> SELECT 3/4;

     

     

    //整数进一位
    mysql> SELECT CEIL(3.01);  //4
    
    //相反
    mysql> SELECT FLOOR(3.99); //3

     

    //取整
    mysql> SELECT 3 DIV 4;  //0
    
    //取余
    mysql> SELECT 3 DIV 4; //3

     

    //四舍五入
    mysql> SELECT ROUND(3.652,2); //3.65
    
    mysql> SELECT ROUND(3.652,1); //3.7

     

    //截取
    SELECT TRUNCATE(125.89,2);  //125.89
    SELECT TRUNCATE(125.89,1);  //125.8
    SELECT TRUNCATE(125.89,0);  //125
    SELECT TRUNCATE(125.89,-1); //120

     

     

    备份:

    mysqldump -u 帐号 -p -h地址 数据库 >备份后名称.sql

    还原:

    1,先创建一个空的数据库

    CREATE DATABASE `test2`;  //接着右键如下图

    mysql_2

     

    mysql结合php实例

    phpforex

     

     http://mp.weixin.qq.com/s?__biz=MjM5NzA1MTcyMA==&mid=208499295&idx=4&sn=33c0caeb3903b39c4ac7d72fbdf13f1f&scene=1#wechat_redirect

  • addEventListener 的用法示例介绍

    这篇文章主要介绍了addEventListener 的用法,需要的朋友可以参考下

    (要注意的是div必须放到js前面才行)

     

    addEventListener中的第三个参 数是useCapture, 一个bool类型。当为false时为冒泡获取(由里向外),true为capture方式(由外向里)。

     

    一般情况下,如果给一个dom对象绑定同一个事件,只有最后一个会生效,比如: 

    复制代码代码如下:
    document.getElementById(“btn”).onclick = method1;
    document.getElementById(“btn”).onclick = method2;
    document.getElementById(“btn”).onclick = method3;


    那么将只有method3生效。 

    如果是Mozilla系列,用addEventListener可以让多个事件按顺序都实现,比如: 

    复制代码代码如下:
    var btn1Obj = document.getElementById(“btn1”);
    //element.addEventListener(type,listener,useCapture);
    btn1Obj.addEventListener(“click”,method1,false);
    btn1Obj.addEventListener(“click”,method2,false);
    btn1Obj.addEventListener(“click”,method3,false);


    执行顺序为method1->method2->method3 

    如果是ie系列,用attachEvent可以让多个事件按顺序都实现,比如: 

    复制代码代码如下:
    var btn1Obj = document.getElementById(“btn1”);
    //object.attachEvent(event,function);
    btn1Obj.attachEvent(“onclick”,method1);
    btn1Obj.attachEvent(“onclick”,method2);
    btn1Obj.attachEvent(“onclick”,method3);


    执行顺序为method3->method2->method1 

    ======================================================= 

    Mozilla中: 

    addEventListener的使用方式 

    target.addEventListener(type,listener,useCapture); 

    target: 文档节点、document、window 或 XMLHttpRequest。 
    type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。 
    listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 
    useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById(“testText”).addEventListener(“keydown”, function (event) { alert(event.keyCode); }, false); 

    IE中: 

    target.attachEvent(type, listener); 
    target: 文档节点、document、window 或 XMLHttpRequest。 
    type: 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。 
    listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 例如:document.getElementById(“txt”).attachEvent(“onclick”,function(event){alert(event.keyCode);}); 

    W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下: 

    removeEventListener(event,function,capture/bubble);     //这里要注意,这里的function必须是同一个this作用域,否则不能移除之前绑定的事件

    Windows IE的格式如下: 

    detachEvent(event,function); 

    DOM2 的进化: 

    DOM 0 Event DOM 2 Event
    onblur() blur
    onfocus() focus
    onchange() change
    onmouseover() mouseover
    onmouseout() mouseout
    onmousemove() mousemove
    onmousedown() mousedown
    onmouseup() mouseup
    onclick() click
    ondblclick() dblclick
    onkeydown() keydown
    onkeyup() keyup
    onkeypress() keypress
    onsubmit() submit
    onload() load
    onunload() unload



    新的DOM2 用法可以addEventListener()这个函数来观察到: 

    复制代码代码如下:
    addEventListener(event,function,capture/bubble);


    参数event如上表所示, function是要执行的函数, capture与bubble分别是W3C制定得两种时间模式,简单来说capture就是从document的开始读到最后一行, 再执行事件, 而bubble则是先寻找指定的位置再执行事件. 
    capture/bubble的参数是布尔值, True表示用capture, False则是bubble.Windows Internet Explorer也有制定一种EventHandler, 是 attachEvent(), 格式如下: 

    复制代码代码如下:
    window.attachEvent(”submit”,myFunction());


    比较特别的是attachEvent不需要指定capture/bubble的参数, 因为在windows IE环境下都是使用Bubble的模式.

    如何判断是否支持哪种监听呢?如: 

    复制代码代码如下:
    if (typeof window.addEventListener != “undefined”) {
    window.addEventListener(”load”,rollover,false);
    } else {
    window.attachEvent(”onload”,rollover)
    }


    上述的 typeof window.addEventListener != “undefined” 程序代码可以判断使用者的浏览器是否支持AddEventListener这个事件模型, 如果不支持就使用attachEvent. 

    W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下: 

    W3C格式: 

    removeEventListener(event,function,capture/bubble); 

    Windows IE的格式如下: 

    detachEvent(event,function);

    http://www.jb51.net/article/49858.htm

  • swipe.js手机移动端滑动插件支持上下左右滑动

    关键词:手机幻灯片 手机 手势 上下左右 滑动

    兼容IE8以上

    swipe.js是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚动间隔,返回回调函数等。经常可见使用在移动前端开发中。

    使用方法

    下面是一个比较简单的使用例子,添加适当的HTML代码和js代码即可。

    <div id='slider' class='swipe'>
      <div class='swipe-wrap'>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    window.mySwipe = Swipe(document.getElementById('slider'));
    .swipe {
      overflow: hidden;
      visibility: hidden;
      position: relative;
    }
    .swipe-wrap {
      overflow: hidden;
      position: relative;
    }
    .swipe-wrap > div {
      float:left;
      width:100%;
      position: relative;
    }

    设置选项

    • startSlide Integer (default:0) – 开始滚动的位置
    • speed Integer (default:300) – 动画滚动的间隔(秒数)
    • auto Integer – 开始自动幻灯片(以毫秒为单位幻灯片之间的时间)
    • continuous Boolean (default:true) – 创建一个无限的循环(当滑动到所有动画结束时是否循环滑动)
    • disableScroll Boolean (default:false) – 当滚动滚动条时是否停止幻灯片滚动
    • stopPropagation Boolean (default:false) – 是否停止事件冒泡
    • callback Function – 幻灯片运行中的回调函数
    • transitionEnd Function – 动画运行结束的回调函数

    实例

    window.mySwipe = new Swipe(document.getElementById('slider'), {
      startSlide: 2,
      speed: 400,
      auto: 3000,
      continuous: true,
      disableScroll: false,
      stopPropagation: false,
      callback: function(index, elem) {},
      transitionEnd: function(index, elem) {}
    });

    注意

    1、原始的Swipe JS,当你用点击或者手势控制了之后,轮播图就不会自动滚动了,目前sina.cn网页也是这个设计逻辑,但是有些客户不给他自动滚动心理就不舒服,解决办法是修改原swipe.js的stop函数如下:

    function stop() {
        //delay = 0;
        delay = options.auto > 0 ? options.auto : 0;
        clearTimeout(interval);
      }

    mobile_slide

    mobile_slide2
    演示地址1:https://sdeno.com/zp/mobile_slide/
    演示地址2:https://sdeno.com/zp/mobile_slide2/

  • JavaScript跨域总结与解决办法

    JavaScript跨域总结与解决办法

    本文来自网络(http://f2e.me/200904/cross-scripting/,该网址已不能访问),仅作个人读书笔记之用,并稍作修改和补充。

    什么是跨域

    JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:

    首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表:

    URL 说明 是否允许通信
    http://www.a.com/a.js
    http://www.a.com/b.js
    同一域名下 允许
    http://www.a.com/lab/a.js
    http://www.a.com/script/b.js
    同一域名下不同文件夹 允许
    http://www.a.com:8000/a.js
    http://www.a.com/b.js
    同一域名,不同端口 不允许
    http://www.a.com/a.js
    https://www.a.com/b.js
    同一域名,不同协议 不允许
    http://www.a.com/a.js
    http://70.32.92.74/b.js
    域名和域名对应ip 不允许
    http://www.a.com/a.js
    http://script.a.com/b.js
    主域相同,子域不同 不允许
    http://www.a.com/a.js
    http://a.com/b.js
    同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问)
    http://www.cnblogs.com/a.js
    http://www.a.com/b.js
    不同域名 不允许
    特别注意两点:
    第一,如果是协议和端口造成的跨域问题“前台”是无能为力的,
    第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
    “URL的首部”指window.location.protocol +window.location.host,也可以理解为“Domains, protocols and ports must match”。

    接下来简单地总结一下在“前台”一般处理跨域的办法,后台proxy这种方案牵涉到后台配置,这里就不阐述了,有兴趣的可以看看yahoo的这篇文章:《JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls

    1、document.domain+iframe的设置

    对于主域相同而子域不同的例子,可以通过设置document.domain的办法来解决。具体的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上document.domain = ‘a.com’;然后通过a.html文件中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况,如果你异想天开的把script.a.com的domian设为alibaba.com那显然是会报错地!代码如下:

    www.a.com上的a.html

    document.domain = 'a.com';
    var ifr = document.createElement('iframe');
    ifr.src = 'http://script.a.com/b.html';
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    ifr.onload = function(){
        var doc = ifr.contentDocument || ifr.contentWindow.document;
        // 在这里操纵b.html
        alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
    };

    script.a.com上的b.html

    document.domain = 'a.com';

    这种方式适用于{www.kuqin.com, kuqin.com, script.kuqin.com, css.kuqin.com}中的任何页面相互通信。

    备注:某一页面的domain默认等于window.location.hostname。主域名是不带www的域名,例如a.com,主域名前面带前缀的通常都为二级域名或多级域名,例如www.a.com其实是二级域名。 domain只能设置为主域名,不可以在b.a.com中将domain设置为c.a.com。

    问题:
    1、安全性,当一个站点(b.a.com)被攻击后,另一个站点(c.a.com)会引起安全漏洞。
    2、如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain。

    2、动态创建script

    虽然浏览器默认禁止了跨域访问,但并不禁止在页面中引用其他域的JS文件,并可以自由执行引入的JS文件中的function(包括操作cookie、Dom等等)。根据这一点,可以方便地通过创建script节点的方法来实现完全跨域的通信。具体的做法可以参考YUI的Get Utility

    这里判断script节点加载完毕还是蛮有意思的:ie只能通过script的readystatechange属性,其它浏览器是script的load事件。以下是部分判断script加载完毕的方法。

    js.onload = js.onreadystatechange = function() {
        if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
            // callback在此处执行
            js.onload = js.onreadystatechange = null;
        }
    };

    3、利用iframe和location.hash

    这个办法比较绕,但是可以解决完全跨域情况下的脚步置换问题。原理是利用location.hash来进行传值。在url: http://a.com#helloword中的‘#helloworld’就是location.hash,改变hash并不会导致页面刷新,所以可以利用hash值来进行数据传递,当然数据容量是有限的。假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息,cs1.html首先创建自动创建一个隐藏的iframe,iframe的src指向cnblogs.com域名下的cs2.html页面,这时的hash值可以做参数传递用。cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据(由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值,所以要借助于a.com域名下的一个代理iframe;Firefox可以修改)。同时在cs1.html上加一个定时器,隔一段时间来判断location.hash的值有没有变化,一点有变化则获取获取hash值。代码如下:

    先是a.com下的文件cs1.html文件:

    function startRequest(){
        var ifr = document.createElement('iframe');
        ifr.style.display = 'none';
        ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo';
        document.body.appendChild(ifr);
    }
    
    function checkHash() {
        try {
            var data = location.hash ? location.hash.substring(1) : '';
            if (console.log) {
                console.log('Now the data is '+data);
            }
        } catch(e) {};
    }
    setInterval(checkHash, 2000);

    cnblogs.com域名下的cs2.html:

    //模拟一个简单的参数处理操作
    switch(location.hash){
        case '#paramdo':
            callBack();
            break;
        case '#paramset':
            //do something……
            break;
    }
    
    function callBack(){
        try {
            parent.location.hash = 'somedata';
        } catch (e) {
            // ie、chrome的安全机制无法修改parent.location.hash,
            // 所以要利用一个中间的cnblogs域下的代理iframe
            var ifrproxy = document.createElement('iframe');
            ifrproxy.style.display = 'none';
            ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata';    // 注意该文件在"a.com"域下
            document.body.appendChild(ifrproxy);
        }
    }

    a.com下的域名cs3.html

    //因为parent.parent和自身属于同一个域,所以可以改变其location.hash的值
    parent.parent.location.hash = self.location.hash.substring(1);

    当然这样做也存在很多缺点,诸如数据直接暴露在了url中,数据容量和类型都有限等……

    4、window.name实现的跨域数据传输

    文章较长列在此处不便于阅读,详细请看 window.name实现的跨域数据传输

    5、使用HTML5 postMessage

    HTML5中最酷的新功能之一就是 跨文档消息传输Cross Document Messaging。下一代浏览器都将支持这个功能:Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 。 Facebook已经使用了这个功能,用postMessage支持基于web的实时消息传递。

    otherWindow.postMessage(message, targetOrigin);
    otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性;window.open的返回值;通过name或下标从window.frames取到的值。
    message: 所要发送的数据,string类型。
    targetOrigin: 用于限制otherWindow,“*”表示不作限制

    a.com/index.html中的代码:

    <iframe id="ifr" src="b.com/index.html"></iframe>
    <script type="text/javascript">
    window.onload = function() {
        var ifr = document.getElementById('ifr');
        var targetOrigin = 'http://b.com';  // 若写成'http://b.com/c/proxy.html'效果一样
                                            // 若写成'http://c.com'就不会执行postMessage了
        ifr.contentWindow.postMessage('I was there!', targetOrigin);
    };
    </script>

    b.com/index.html中的代码:

    <script type="text/javascript">
        window.addEventListener('message', function(event){
            // 通过origin属性判断消息来源地址
            if (event.origin == 'http://a.com') {
                alert(event.data);    // 弹出"I was there!"
                alert(event.source);  // 对a.com、index.html中window对象的引用
                                      // 但由于同源策略,这里event.source不可以访问window对象
            }
        }, false);
    </script>

    参考文章:《精通HTML5编程》第五章——跨文档消息机制https://developer.mozilla.org/en/dom/window.postmessage

    6、利用flash

    这是从YUI3的IO组件中看到的办法,具体可见http://developer.yahoo.com/yui/3/io/
    可以看在Adobe Developer Connection看到更多的跨域代理文件规范:ross-Domain Policy File SpecificationsHTTP Headers Blacklist

  • jquery ajax跨域

    跨域案例下载:https://sdeno.com/?p=4815

    JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问

    方法一: jsonp之 getJSON

    js

    var url = "http://localhost/mytest/jsonp_php.php?callback=?";
    $.getJSON(url, {
     "age": 21,
     "name": "kitty"
    }, function (data) {
     alert("name:" + data.name + ", age:" + data.age);
    });

    php

    <?php 
     $age=$_GET["age"];
     $name=$_GET["name"];
     $jsondata = "{age:$age, name:'$name'}"; 
     echo $_GET['callback'].'('.$jsondata.')'; 
    ?>
    

    关于jquery $.getJSON()跨域请求一些细节:https://sdeno.com/?p=3247

    二jsonp之$.ajax

    js

    $.ajax({
     type: 'GET',
     url: 'http://localhost/mytest/jsonp_php.php',
     dataType: "jsonp",
     jsonp: "callback5",
     jsonpCallback:"flightHandler",
     data: {
     "age": 21,
     "name": "kitty"
     },
     success: function (data) {
     alert("name:" + data.sd + ", age:" + data.aa)
     }
     })
    

    php

    <?php 
     $age=$_GET["age"];
     $name=$_GET["name"];
     $ary=array("sd"=>"sdfg","aa"=>23);
     $jsondata=json_encode($ary);
     echo $_GET['callback5'].'('.$jsondata.')'; 
    ?>

    http://www.cnblogs.com/breakdown/archive/2012/04/27/2473586.html