分类:学学技术

phpStudy 升级 MySQL 到最新版 MySQL 8.0

在阿里香港服务器折腾两天宝塔,因为服务器配置1G内存,达不到把MySQL升级到MySQL5.7以上版本,就在本地安装了phpStudy集成环境,但集成环境的MySQL版本只是5.5,我需要5.7以上的版本,干脆就一步到位,升级到MySQL8.0,毕竟是新一代产品,一定要尝试一下。 1、下载安装包,下载地址:mysql8.0.12  。如果你想要下载其它版本可以选择:mysql历史版本。 2、下载好MySQL8.0之后,复制原来MySQL目录中的my.ini配置文件,下步备用。备份重要数据之后,删除phpStudy目录中的MySQL目录。 3、然后把下载的新版本的MySQL8.0解压到这个目录里,我放在E盘分区根目录的,对应的位置是:E:\phpStudy\PHPTutorial\MySQL 4、编辑my.ini配置文件,建议用vscode之类的编辑软件,尽可能不用记事本。下面是我在用的配置代码: [mysql] 设置mysql客户端默认字符集 default-character-set=utf8mb4 [mysqld] 设置3306端口 port =3306 设置mysql的安装目录 basedir=D:\phpStudy\PHPTutorial\MySQL\ 存放数据的目录 datadir=D:\phpStudy\PHPTutorial\MySQL\data 允许最大连接数 max_connections=20 服务端使用的字符集默认为8比特编码的latin1字符集 character-set-server=utf8mb4 collation-server = utf8mb4_unicode_ci 创建新表时将使用的默认存储引擎 default-storage-engine=MyISAM 认证方式(如果这里不修改,会新版的密码认证,会连接不了数据库的,并且要放到mysqld下) default_authentication_plugin = mysql_native_password 5、启动MySQL8.0: 以管理员身份运行cmd命令工具,把当前目录切换到MySQL目录: C:\Users\Administrator>cd E:\phpStudy\PHPTutorial\MySQL\bin E:\phpStudy\PHPTutorial\MySQL\bin>mysqld initialize console 如果安装顺利,即可出现以下代码,里面包括MySQL新密码: 2018-11-22T02:35:05.464644Z 5 [Note] [MY-010454] [Server] A temporary password is generated for root@localhost: BUDWCY5ws&hhiy 上面的 “BUDWCY5ws&hhiy” 即是MySQL新密码。 然后继续安装 mysqld install 启动服务器 net start mysql 启动成功后,输入密码登陆 E:\phpStudy\PHPTutorial\MySQL\bin>mysql -u root -pEnter password: 登陆成功后,会看到mysql信息 Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 16 Server version: 8.0.12 MySQL Community Server GPL 还没结束,直接把密码改为你想要的,同时保证navicat或phpMyAdmin可以正常连接,因为MySQL8.0的密码加密方式跟之前的保存方式不一样。 mysql> ALTER USER root@localhost IDENTIFIED WITH mysql_native_password BY yourpassword; 上面的yourpassword改为你要的密码,回车后直接生效,没有提示框。 完成以上过程,MySQL8.0就配置好了。 既然是与phpStudy一起玩,还是把服务的启动由phpStudy来管理更方便一些。 在cmd命令窗口输入sc delete MySQL按回车来清除之前的MySQL服务就可以了. C:\Users\Administrator>sc delete MySQL 至此,你的phpStudy中已经完美集成了MySQL8.0,快去体验吧!

Simple Lightbox – jQuery Lightbox插件

简介 Simple Lightbox 是一款基于 jQuery 的 Lightbox 插件,它具有以下特点: 响应式设计 触控/触摸友好 提供多项配置 图像预加载 支持 iOS / Android / Windows phone 使用 CSS3 过度效果,并回退兼容旧浏览器 支持 jQuery 1.x 和 2.x 版本 支持键盘控制 浏览器兼容 IE9+ ✔ Chrome ✔ Firefox ✔ Opera ✔ Safari ✔ 使用方法 1、引入文件 <link rel=stylesheet href=css/simplelightbox.min.css> <script src=js/jquery.min.js></script> <script src=js/simple-lightbox.min.js></script> 2、HTML <div class=dowebok>     <a href=images/image1.jpg>         <img src=images/thumbs/thumb1.jpg alt= title=第一张图片描述>     </a>     <a href=images/image2.jpg>         <img src=images/thumbs/thumb2.jpg alt= title=第二张图片描述>     </a>     <a href=images/image3.jpg>         <img src=images/thumbs/thumb3.jpg alt= title=第三张图片描述>     </a>     … </div> 3、JavaScript $(function(){     $(.dowebok a).simpleLightbox(); }); 配置 选项 名称 类型 默认值 说明 overlay 布尔值 true 显示遮罩 spinner 布尔值 true 显示 Loading 效果 nav 布尔值 true 显示左右导航 navText 数组 [‘&larr;’,’&rarr;’] 左右导航的文本 captions 布尔值 true 显示标题/描述 captionsData 字符串 title 标题/描述来源,可指定 title 或 data-title close 布尔值 true 显示关闭按钮 closeText 整数 123456 关闭按钮的文本 fileExt 正则表达式 ‘png|jpg|jpeg|gif’ 限制图片格式 animationSpeed 整数 250 动画过度时间 preloading 布尔值 true 预加载图片 enableKeyboard 布尔值 true 键盘支持,方向键控制,Esc 退出 loop 布尔值 true 循环 docClose 布尔值 true 点击空白处关闭 swipeTolerance 整数 50 移动设备上滑动多少像素开始切换 className 字符串 simple-lightbox 添加 class widthRatio 浮点数 0.8 图像宽度于屏幕宽度的的比例 heightRatio 浮点数 0.9 图像宽度于屏幕高度的的比例 自定义事件 名称 说明 show.simplelightbox Lightbox 开启前的事件 shown.simplelightbox Lightbox 开启后的事件 close.simplelightbox Lightbox 关闭前的事件 closed.simplelightbox Lightbox 关闭后的事件 例如: $(.dowebok a).on(open.simplelightbox, function(){     alert(准备开启 Simple Lightbox); }); 公共方法 名称 说明 open 开启 Lightbox close 关闭 Lightbox next 显示下一个 prev 显示上一个 destroy 销毁 Lightbox 例如: var $dowebok = $(.dowebok a).simpleLightbox(); $dowebok.next(); 官方主页:http://andreknieriem.de/simple-lightbox/ GitHub 地址:https://github.com/andreknieriem/simplelightbox

Google 推出绘画黑科技 AutoDraw 灵魂画师快来迎接救星

Google AutoDraw

今晚尝试了一下Google的新产品 AutoDraw,这款产品估计能给不懂画画的灵魂画师们一个惊喜,你可以使用AutoDraw随意画出你想要的样子,AutoDraw就可以给你列出最接近你的想法的图像,让你那没有艺术感的作品变成优美的艺术创作。 果不其然,谷歌又推出一个很好玩的AI画图工具。 这款AI画图工具能叫做AutoDraw。正像名称说的那样,它能自动识别用户画出的草图,让用户粗陋的草图瞬间变成精美的简笔画。先看下它神奇的效果: Google 推出AutoDraw 黑科技 灵魂画师有救了,下面是基本操作界面,操作起来非常简单。 谷歌推出的这款软件可以在电脑、手机端上方便运行,用户画出潦草的线条,它就可以自动识别,并且在提供一系列图形,通过点击替换就可以获得更美观也更加形象具体的图形(下图为动图,请在PC端查看)。 Google 推出AutoDraw 黑科技 灵魂画师有救了 这个工具现在并不完美。很多时候它会显示一些奇怪的替代图形。比如说,写一下英文“Verge”,它推荐的替代图形会出现脚、脚趾或者瑜伽姿势。相信未来它会更加的完美! 你可能也知道谷歌有太多富有创意、脑洞大开的产品,有些成功了,很多也流产了,但这种什么都要试一下的理想主义还是很好的。你可以不喜欢,但是这个世界需要这样的角色。 科比有一个很著名的广告。他在里面说: “爱我或者恨我,只能选择一样,过去现在都是如此。恨我的比赛,恨我的傲慢,恨我的消沉,恨我的饥渴,恨我是个老手,是个冠军,用你的心恨我吧,并且恨我因为同样的原因而被爱。” 谷歌也是这样,因为同样的原因被热爱,或者被吐槽。它不辜负热爱它的人期待,也不辜负吐槽的人的嘲讽。 访问地址:https://www.autodraw.com/

GitHub上传下载更新代码教程

有了GitHub,终于写代码不受地区限制,团队协同写代码也更方便,但作为新学习者,会觉得无从下手,下面根据我所经历的过程,写一篇入门级的GitHub上传下载文件教程,希望对大家有用。 第一:下载github客户端地址https://desktop.github.com​​ 第二:先不运行那个引导文件,进入控制面板-Internet选项-安全-受信任站点-点击站点-点击“添加” https://github-windows.s3.amazonaws.com/ ;或者去除复选框“对该区域中的所有站点要求服务器验证(https:)”的钩,直接加入 github-windows.s3.amazonaws.com 。详细步骤见:http://jingyan.baidu.com/article/fd8044fa924e8f5031137ac6.html​ 第三:点击运行下载好的文件,这样应该就能下好,不过速度很慢,毕竟是外网,耐心点,切记做第二步,不要像我一样下了N久,到最后都GG了! 第四:安装好之后我们就能见到非常纯洁的桌面版了。接着就是create或者clone一个库到本地用来与网页版的进行上传更新等操作了,附图 (建议:库的地址不要设置在系统盘,新建一个单独文件夹来装) 第五:在本地建好库之后就可以把要上传的文件粘贴到库文件夹中,点击客户端的syn将本地库同步到github上,在网页上看看是否同步成功了,如果在网页上进行了更新等操作,点击syn将网页说白了就是服务器上的同步到本地库。​ 第六:如何生成项目演示页面?在github网页端点击Settings-Options-Github pages下的Github pages配置演示页面模板,配置成功后再Code下的Branch中就会增加一个gh-pages分支,附图​ 有gh-pages分支后说明已经具备了展示页面了,那么演示地址呢?回到Settings下的gh-pages你会发现一个属于你的网址出来了,有木有很兴奋啊!这个分支中的index.html就是演示页面,通过修改它可以转到多个页面(如:我写的百度前端任务http://zombiesir.github.io/baidu_task,当然前提是gh-pages下要有这些页面。同样的syn之后在github客户端中的branch下也会有gh-pages分支,点击这个分支,本地库会自动转到这个库的目录,这个库目录名是和你创建的库名相同。 第七:在github网页端新建一个文件夹,在输入框中输入:新建文件夹名+“/”,在客户端上只要在本地库新建文件夹或者粘贴文件夹,注意客户端上的Changes可能会出错,删掉文件夹重新粘贴即可。

实用的 Table CSS 样式

搞过了很多前端,用过不少的表格优化代码,今天整理的这段代码可以说是最实用的一段,喜欢的可以拿去用。本文代码可以实现效果如下: 如果你喜欢上面的样式,就可以动手复制下面的代码了。 <! Javascript goes in the document HEAD > <script type=text/javascript> function altRows(id){ if(document.getElementsByTagName){ var table = document.getElementById(id); var rows = table.getElementsByTagName(tr); for(i = 0; i < rows.length; i++){ if(i % 2 == 0){ rows[i].className = evenrowcolor; }else{ rows[i].className = oddrowcolor; } } } } window.onload=function(){ altRows(alternatecolor); } </script> <! CSS goes in the document HEAD or added to your external stylesheet > <style type=text/css> .altrowstable table { width:96%; text-align:center; } .altrowstable table th { border-width: 1px; text-align:center; padding: 8px; border-style: solid; border-color: #a9c6c9; } .altrowstable table td { border-width: 1px; padding: 8px; border-style: solid; border-color: #a9c6c9; } .oddrowcolor{ background-color:#fff; } .evenrowcolor{ background-color:#e2efda; } </style> <! Table goes in the document BODY > <div class=altrowstable id=alternatecolor> <table> <tr> <th>Info Header 1</th> <th>Info Header 2</th> <th>Info Header 3</th> </tr> <tr> <td>Text 1A</td> <td>Text 1B</td> <td>Text 1C</td> </tr> <tr> <td>Text 2A</td> <td>Text 2B</td> <td>Text 2C</td> </tr> </tr> <tr> <td>Text 3A</td> <td>Text 3B</td> <td>Text 3C</td> </tr> <tr> <td>Text 4A</td> <td>Text 4B</td> <td>Text 4C</td> </tr> <tr> <td>Text 5A</td> <td>Text 5B</td> <td>Text 5C</td> </tr> </table> </div>

Bootstrap 生成5栏技巧及代码

玩Bootstrap的同学们都知道,Bootstrap默认是以12为总宽度,我们能做的栏目数只能是被12整除的数字,比如:1栏、2栏、3栏、4栏、6栏。。。但想来个5栏的布局就没办法了,下面是代码,直接拿去用吧。 把下面代码加入到 bootstrap.min.css文件中。 .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } 适应多种设备: .col-xs-15 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } } 在前端代码里这么搞: <div class=row> <div class=col-md-15 col-sm-3> … </div> </div> 爽不爽?用了才知道。

WordPress短代码实现移动设备上内容不可见

许多人也都开始对自己的站点进行了移动设备适配/优化,也有大部分朋友但考虑到有一些适合PC端读者阅读的内容可能不适合移动端读者,所以给大家提供一个WordPress 短代码实现移动设备上内容不可见的方法。 利用下面的短代码,可以实现发布的内容在移动设备不可见。 function hide_mobile_shortcode($atts, $content = ) { if (wp_is_mobile() === true) { $content = ; } return $content; } add_shortcode(hm, hide_mobile_shortcode); 将代码添加到主题functions.php中,发表文章时,插入短代码: [hm]隐藏的内容[/hm] 这样当用移动浏览器查看时被隐藏的内容将不可见。当然有些其他的WordPress条件判断标签也同样适用做成短代码。

条件注释判断浏览器版本,助前端做IE兼容

<![if !IE]><!> 除IE外都可识别 <!<![endif]> <![if IE]> 所有的IE可识别 <![endif]> <![if IE 6]> 仅IE6可识别 <![endif]> <![if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]> <![if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]> <![if IE 7]> 仅IE7可识别 <![endif]> <![if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]> <![if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]> <![if IE 8]> 仅IE8可识别 <![endif]> <![if IE 9]> 仅IE9可识别 <![endif]> 项目 范例 说明 ! [if !IE] The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression. NOT运算符。这是摆立即在前面的功能,操作员,或子表达式扭转布尔表达式的意义。 lt [if lt IE 5.5] The less-than operator. Returns true if the first argument is less than the second argument. 小于运算符。如果第一个参数小于第二个参数,则返回true。 lte [if lte IE 6] The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument. 小于或等于运算。如果第一个参数是小于或等于第二个参数,则返回true。 gt [if gt IE 5] The greater-than operator. Returns true if the first argument is greater than the second argument. 大于运算符。如果第一个参数大于第二个参数,则返回true。 gte [if gte IE 7] The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument. 大于或等于运算。如果第一个参数是大于或等于第二个参数,则返回true。 ( ) [if !(IE 7)] Subexpression operators. Used in conjunction with boolean operators to create more complex expressions. 子表达式运营商。在与布尔运算符用于创建更复杂的表达式。 & [if (gt IE 5)&(lt IE 7)] The AND operator. Returns true if all subexpressions evaluate to true AND运算符。如果所有的子表达式计算结果为true,返回true | [if (IE 6)|(IE 7)] The OR operator. Returns true if any of the subexpressions evaluates to true. OR运算符。返回true,如果子表达式计算结果为true。 <![if lt IE 9]> 加载CSS1 <![else]> 加载CSS2 <![endif]> 这样有效是有效,但是用HTML VALIDATOR里,报错,因为这个不符合XHTML 1.1的规范, 如果把ELSE语句去掉,则正确. 方法1: 加载CSS2 <![if lt IE 9]> 加载CSS1(可以把要重写的写在这里). <![endif]>

谷歌字体本地化CDN加速教程

Google被墙是大家都知道的,痛哭流涕也没有人同情,还是自己动手建个本地谷歌字体本地化CDN加速吧。 打开它就会看见里面加载了哪些字体,把它们全部下载到本地; 然后将这个页面保存为google-font.css文件; 接下来我要把字体上传到自己服务器上面,我选择了img.5yun.org这个主机它做了七牛CND加速用了一段时间挺理想; 不过上传前要修改google-font.css加载字体路径 当然大家也可以结合我上次提到的使用插件 WP Acceleration for China 来实现加速效果,对于玩WordPress的站长,后台也需要屏蔽Google Fonts,一段代码屏蔽谷歌字体,加载WordPress后台加载速度。