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 版本
  • 支持键盘控制

浏览器兼容

IE Chrome Firefox Opera Safari
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就可以给你列出最接近你的想法的图像,让你那没有艺术感的作品变成优美的艺术创作。

Google AutoDraw

果不其然,谷歌又推出一个很好玩的AI画图工具。
这款AI画图工具能叫做AutoDraw。正像名称说的那样,它能自动识别用户画出的草图,让用户粗陋的草图瞬间变成精美的简笔画。先看下它神奇的效果:

Google AutoDraw
Google 推出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 featureoperator, 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后台加载速度