一桶浆糊的博客

必应(Bing)每日图片获取API

Bing每日壁纸介绍:作为一款搜索引擎，必应首页图片给人一种焕然一新的感觉，相较于其它搜索引擎仅在节日或纪念日才更换首页LOGO或背景图，每日一换的必应首页美图让人记忆尤新,bing网站每天会更新一张不同的精选图片.

blog.mrabit.com/bing/today 会自动同步更新 http://cn.bing.com 网站每天更新的图片,提供必应每日壁纸预览.

图片地址设置为: //blog.mrabit.com/bing/today

必应每日图片

即可

图片来源: http://cn.bing.com

阅读全文

基于iView-Cascader的多选级联选择器

一次Vue项目中需求本来是单选的级联选择器,本来很简单因为iView组件里有,结果产品更改需求到要求实现Vue多选级联选择器,先在网上找了一下想偷个懒结果发现没有,所以这算奇葩需求吗 hah

cascader-multi

基于iView-Cascader的多选级联选择器

效果预览

install 安装

npm i cascader-multi --save

use 使用

在main.js中写入下面的代码

import cascaderMulti from "cascader-multi";
Vue.use(cascaderMulti);

接下来，你就可以在页面中使用cascader-multi了

<template>
    <cascaderMulti @on-change="array => end_code = array" :data="end_codes" placeholder="状态码"></cascaderMulti>
</template>
<script>
    export default {
        data () {
            return {
                end_code: [],
                end_codes: []
            }
        }
    }
</script>
属性 说明 类型 默认值
data 用于渲染页面的数据 Array 无
value 默认已选择数据项 Array 无
multiple 是否支持多选 Boolean false
filterable 是否支持搜索 Boolean true
disabled 是否禁用选择器 Boolean false
clearable 是否支持清除 Boolean true
size 输入框大小，可选值为large和small或者不填 String -
transfer 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 Boolean false
placeholder 输入框占位符 String -
element-id 给表单元素设置 id，详见 iView-Form 用法。 String -
name 给表单元素设置 name，详见 iView-Form 用法。 String -
事件 说明 返回值
on-change 选择完成后的回调，返回值此时已选的数据数组 data

补充说明

  • 传入data数据格式如下：
    [
  {
    value: 1000,
    label: "接通",
    children: [{
      label: "已报价",
      value: 1100,
      children: [],
      multiple: true //可忽略项，当为true时该项为多选
    }]
  }
]

文件目录

.
├── README.md
├── dist
│   ├── cascader-multi.js
│   └── cascader-multi.js.map
├── package-lock.json
├── package.json
├── src
│   ├── index.js
│   └── lib
│       ├── components
│       │   ├── cascader-multi-panel.vue
│       │   ├── cascader-multi.vue
│       │   └── index.js
│       └── utils
│           └── index.js
└── webpack.config.js

代码已上传至:

阅读全文

Centos 搭建 Gogs 版 Git 服务

一直想搭建一个属于自己的Git服务,之前看好GitLab结果自己的渣渣服务器运行不了,于是退而求其次选择了Gogs. 之前mysql版本是5.6结果安装出错,升级了5.7后正常安装: Centos7 mysql5.6升级至5.7

Gogs官网是: Gogs

1.新建用户:

groupadd git
useradd git -g git

2.下载预编译二进制打包:

其他安装方式详见: 安装 Gogs 切换到git用户并进入~文件夹:

wget http://7d9nal.com2.z0.glb.qiniucdn.com/0.11.34/linux_amd64.zip
unzip linux_amd64.zip

3.运行安装

在 Gogs 目录的 scripts/mysql.sql 文件是数据库初始化文件。执行 mysql -u root -p < scripts/mysql.sql （需要输入密码）即可初始化好数据库。

#执行gogs文件启动服务
./gogs web -port 8899

然后访问 http://服务器IP:8899/ 来进入安装页面

4.nginx配置

server {
	listen       80;
	server_name  绑定的域名地址;

	location /{
		proxy_pass http://127.0.0.1:8899;
	}
}

5.gogs开机自启

scripts 目录中带有一个开箱即用的 systemd 配置文件,部分需要根据自己的需求更改,详细配置可见 systemd-服务 需要copy到/etc/systemd/system目录

cp /home/git/gogs/scripts/system/gogs.service /etc/systemd/system/gogs.service
#激活开机自启
systemctl enable gogs
#启动gogs服务
systemctl start gogs

参考地址:

阅读全文

Centos7 mysql5.6升级至5.7

之前记录过怎么使用yum安装mysql5.6:CentOS7 yum安装mysql5.6,由于某些原因需要升级mysql版本,

卸载旧版本mysql

当然要记得备份数据库数据啦

1.查看需要卸载的部分:

rpm -qa |grep -i mysql

2.开始卸载:

yum remove mysql-community-release mysql-community-server mysql-community-common mysql-community-libs mysql-community-client

3.清理文件:

find / -name mysql

接下来是安装新版mysql

1.下载并安装源:

wget http://dev.mysql.com/get/mysql57-community-release-el7-7.noarch.rpm
yum localinstall mysql57-community-release-el7-7.noarch.rpm

2.开始安装:

yum install -y mysql-server

3.安装完成并确认版本:

mysql --version

4.接下来就去恢复数据库数据吧.

遇到的问题

  • 1.MySQL 5.7 在初始安装后（CentOS7 操作系统）会生成随机初始密码，并在 /var/log/mysqld.log 中有记录，可以通过 cat 命令查看，找 password 关键字
grep 'temporary password' /var/log/mysqld.log

不过使用该临时密码登录的时候却出错了.

解决办法:

1.修改 /etc/my.cnf，在 [mysqld] 小节下添加一行：skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证
2.重启 mysqld 服务：systemctl restart mysqld
3.使用 root 用户登录到 mysql：mysql -u root
4.`切换到mysql数据库,更新user表:
update user set authentication_string = password('新密码'), password_expired = 'N', password_last_changed = now() where user = 'root';
5.退出 mysql，编辑/etc/my.cnf文件，删除skip-grant-tables=1的内容并重启mysqld服务

  • 2.mysql远程连接1130问题可参考之前的文章: CentOS7 yum安装mysql5.6

  • 3.新增用户提示:ERROR 1819 (HY000): Your password does not satisfy the current policy requirements

解决办法:

这个其实与validate_password_policy的值有关。 默认是1，即MEDIUM，所以刚开始设置的密码必须符合长度，且必须含有数字，小写或大写字母，特殊字符。 所以只需要修改值为0:

set global validate_password_policy=0;

再次尝试新建用户即可;

参考地址:

阅读全文

小程序自定义Modal组件的使用

近期手上有个小程序项目，UI妹纸给的对话框效果图需要自定义，因为wx.showModal无法自定义内容，例如icon图标，字体大小之类的，只能自定义一个Modal组件。

下面是自定义组件的文件：

1. dialogModal.js


Component({
  properties: {
    // 模态框 显示/隐藏
    modalHidden: {
      type: Boolean,
      value: false
    }, //这里定义了modalHidden属性，属性值可以在组件使用时指定.写法为modal-hidden，
    showCancel: {
      type: Boolean,
      value: true
    },
    // 模态框title标题
    modalTitle: {
      type: String,
      value: '',
    },
    // 模态框msg内容
    modalMsg: {
      type: String,
      value: ''
    },
    // 模态框状态 1.‘’；2.‘success’；3.‘error’
    modalType: {
      type: String,
      value: ''
    }
  },
  methods: {
    // 防止事件冒泡，阻止page滚动事件
    moveD: () => { },
    // modal取消点击事件
    modal_cancel: function () {
      // 隐藏模态框
      this.setData({
        modalHidden: true,
      })
    },
    // modal确认点击事件
    modal_confirm: function (e) {
      this.modal_cancel();
      var eventDetail = {} // detail对象，提供给事件监听函数
      var eventOption = {} // 触发事件的选项
      this.triggerEvent('handleConfirm');
    }
  }
})

2. dialogModal.json

{
  "component": true,
  "usingComponents": {}
}

3. dialogModal.wxml

<!--components/dialogModal/dialogModal.wxml-->
<view hidden='{{modalHidden}}' class="dialog-modal" catchtouchmove='moveD'>
  <view class='mask_layer' />
  <view class='modal_box'>
    <image bindtap='modal_cancel' src="../../images/modal_close.png" class="modal-close"></image>
    <view class='modal-body'>
      <view>
        <view class="modal-title">
          <image src="../../images/error.png" wx:if="{{modalType == 'error'}}"></image>
          <image src="../../images/success.png" wx:if="{{modalType == 'success'}}"></image>
          <text>{{modalTitle}}</text>
        </view>
        <!-- modal状态为'success',只显示标题 -->
        <view class="modal-content" wx:if="{{modalMsg}}">
          <text>{{modalMsg}}</text>
        </view>
      </view>
    </view>
    <view class='modal-btn'>
      <text wx:if="{{showCancel}}" bindtap='modal_cancel' class='modal-cancel'>取消</text>
      <text bindtap='modal_confirm' class='modal-confirm'>确定</text>
    </view>
  </view>
</view>

4. dialogModal.wxss

/* components/dialogModal/dialogModal.wxss */

.dialog-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mask_layer {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
}

.modal_box {
  position: relative;
  width: 91.4%;
  overflow: hidden;
  z-index: 1001;
  background: #fff;
  border-radius: 3px;
}

.modal-close {
  position: absolute;
  right: 16rpx;
  top: 16rpx;
  width: 20rpx;
  height: 20rpx;
}

.modal-body {
  text-align: center;
  /* margin: 30rpx 0; */
  display: flex;
  overflow-y: scroll; /*超出父盒子高度可滚动*/
  min-height: 228rpx;
  justify-content: center;
  align-items: center;
  padding: 20rpx;
}

.modal-body image {
  width: 44rpx;
  /* vertical-align:-6rpx; */
  height: 44rpx;
  margin-right: 15rpx;
}

.modal-title {
  padding: 20rpx 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: gazure;
  font-size: 32rpx;
  color: #484848;
  letter-spacing: 0.36px;
}

.modal-content {
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #484848;
  letter-spacing: 0.31px;
}

.modal-btn {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  background-color: #fff;
}

.modal-cancel {
  width: 100%;
  padding: 40rpx;
  text-align: center;
  border-top: 1rpx solid #f3f3f3;
  border-right: 1rpx solid #f3f3f3;
  font-size: 28rpx;
  color: #fd5612;
  letter-spacing: 0.31px;
}

.modal-confirm {
  width: 100%;
  padding: 40rpx;
  background-color: #fff;
  text-align: center;
  border-top: 1rpx solid #f3f3f3;
  font-size: 28rpx;
  color: #fd5612;
  letter-spacing: 0.31px;
}

.modal-msg {
  text-align: center;
  margin-bottom: 50rpx;
  display: block;
}

接下来就是在我们的index页面里使用自定义的Modal组件：

1. index.json

{
  "usingComponents": {
    "modal": "../../components/dialogModal/dialogModal"
  }
}

2. index.wxml

<!--index.wxml-->
<view class="container">
  <modal bind:handleConfirm="modalConfirmCallBack" modal-hidden="{{modal.hidden}}" modal-title="{{modal.title}}" modal-msg="{{modal.msg}}" modal-type="{{modal.type}}" data-params="{{modal.params}}"></modal>
  <button bindtap='handleDefaultClick'>default</button>
  <button bindtap='handleSuccessClick'>success</button>
  <button bindtap='handleErrorClick'>error</button>
</view>

3. index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    modal: {
      hidden: true,
      title: '',
      msg: '',
      type: '',
      params: {}
    }
  },
  handleDefaultClick: function () {
    this.setData({
      'modal.hidden': false,
      'modal.title': 'default标题',
      'modal.msg': 'default内容',
      'modal.type': '',
      'modal.params': {
        type: 'default'
      }
    })
  },
  handleSuccessClick: function () {
    this.setData({
      'modal.hidden': false,
      'modal.title': 'success标题',
      'modal.msg': 'success内容',
      'modal.type': 'success',
      'modal.params': {
        type: 'success'
      }
    })
  },
  handleErrorClick: function () {
    this.setData({
      'modal.hidden': false,
      'modal.title': 'error标题',
      'modal.msg': 'error内容',
      'modal.type': 'error',
      'modal.params': {
        type: 'error'
      }
    })
  },
  modalConfirmCallBack: function (e) {
    const params = e.target.dataset.params;
    console.log(params);
  }
})

4. index.wxss

/**index.wxss**/

.container button {
  margin-top: 20rpx;
}

modal {
  z-index: 1024;
}

具体代码在： mrabit/wx_app_component

参考地址：

阅读全文