一桶浆糊的博客

标签 - github 共找到结果 4 条

Gogs 设置Git钩子实现项目自动部署

博客每次修改代码需要上传到 git仓库 - nuxt-express-blog,查看了一下 Gogs 使用文档 发现有 web钩子 这个选项，然后发现了本地可实现的 Git钩子.

1.png

有三种状态分别是： pre-receive,update,post-receive分别对应接收前,接收时,接收后三种状态，希望push代码后实现更新部署则会用到post-receive：

2.png

这里用到的shell命令是：

#!/bin/bash
unset $(git rev-parse --local-env-vars);
cd /usr/share/nginx/vue-blog
git pull origin master &&  npm i && npm run build

当然，项目运行需要的进程守护进程是pm2，由于nuxt使用npm run build会在本地生成build文件夹，就直接用pm2监听build的改动了：

{
  "name": "blog",
  "script": "/usr/local/bin/npm",
  "args": "start",
  "cwd": "./",
  "watch": [
    "build"
  ],
  "ignore_watch": [
    "node_modules"
  ],
  "watch_options": {
    "followSymlinks": false
  }
}

然后就可以尝试使用git push看看是否会执行Gogs的post-receive钩子事件

相关链接：

阅读全文

基于Vue + Vue.Draggable实现自定义表单控件

新项目需要用到工作流设定 + 自定义表单控件，这里列出了自定义表单控件的代码实现,可实现自定义表单控件,可拖拽排序，自定义属性

项目 UI 组件库为 iView, Element UI 可根据项目内代码进行适当修改达到适用

效果预览

image

image

image

运行使用

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

文件目录

.
├── README.md
├── build
├── config
├── dist
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   │   ├── custom_form             //自定义表单组件
│   │   │   ├── FormList.js         //表单列表    
│   │   │   ├── ItemIcon.js         //表单图标配置
│   │   │   ├── Render.js           //表单列表渲染
│   │   │   ├── components          //表单公用组件
│   │   │   │   └── Uploads         //上传组件
│   │   │   │       └── upload.vue
│   │   │   ├── config              //配置文件
│   │   │   │   ├── area.js         //地区配置
│   │   │   │   └── trigger.js      //表单验证触发事件
│   │   │   ├── control             //表单控件列表
│   │   │       ├── Address.js      //地区选择
│   │   │       ├── Cascader.js     //多级联动
│   │   │       ├── CheckBox.js     //多选框
│   │   │       ├── DatePicker.js   //时间选择器
│   │   │       ├── Hr.js           //hr标签
│   │   │       ├── Input.js        //输入框
│   │   │       ├── P.js            //p标签
│   │   │       ├── Radio.js        //单选框
│   │   │       ├── Select.js       //下拉选择框
│   │   │       ├── Text.js         //文本域
│   │   │       ├── Title.js        //标题
│   │   │       └── Uploads.js      //上传控件
│   │   │   └── index.js            //控件注册
│   │   ├── index.vue               //自定义表单页面
│   │   └── render.vue              //表单渲染,数据回填页面
│   ├── main.js                     //入口文件
│   └── router                      //路由配置
│       └── index.js
└── static                          //静态数据模版
    ├── label.1.json
    ├── label.12.json
    ├── label.14.json
    ├── label.17.json
    ├── label.19.json
    ├── label.3.json
    ├── label.5.json
    ├── label.8.json
    └── label.json

相关代码：

相关链接：

阅读全文

基于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

代码已上传至:

阅读全文

gitlab/github 多账户下设置 ssh keys

公司之前版本控制工具一直用的是SVN,自己的代码放在github,结果新项目需要用到公司搭建的gitlab,生成的sshkey覆盖了原本我github的秘钥,之前还没发现,一次在github查看push日志突然发现提交人不对了: 后来在网上找到解决办法:

1. 进行公司账号的设置:

ssh-keygen -t rsa -C "注册的gitlab邮箱",就用默认密钥名称,密码的话直接跳过吧,然后在~/.ssh能找到id_rsa和id_rsa.pub 把id_rsa.pub的内容添加到到gitlab账户的的SSH Keys中即可

2. 生成github秘钥:

终端执行命令：ssh-keygen -t rsa -C "注册的github邮箱"，这次一定要注意，对生成定的秘钥进行重命名,我这里命名的是id_rsa_github,同样不设置密码。可以看到生成的公私秘钥已经分别被重命名为id_rsa_github.pub和id_rsa_github。

将id_rsa_github.pub的内容拷到github的SSH Keys里

3. 配置config:

终端运行:touch config,输入:

Host gitlab
HostName 192.168.13.21
IdentityFile ~/.ssh/id_rsa
Host github
HostName github.com
IdentityFile ~/.ssh/id_rsa_github

其中Host对应的名称是一个别名，命名可以随意，用来进行远程连接，当然使用真实的主机名称也是可以的。HostName和IdentityFile就是各自主机名称以及对应的秘钥文件了~ 这样配置之后，两份秘钥也就对应到各自相应的仓库上了。通过设置别名，也就可以设置任意多的账户了~

4. 最后利用别名检测下配置是否成功:

4.1 检测github连接:

4.2 检测gitlab连接:

不报错的话，就说明设置成功了！

参考地址:

阅读全文