Yrainly's Blog

选择部署到 Gitee 上的原因是访问速度比 Github 快速，且Gitee 是国内的码云平台 新建 Gitee 仓库如果没有注册的话，就去 Gitee 官网 注册一个哦，注册成功后创建仓库。仓库的名称可以随便写，但是仓库的路径要和用户名（个人空间地址）一致这样访问地址就不会生成二级域名了 在 Gitee 中添加 SSH 公钥检查是否已有 SSH在本地打开 git bash 命令行窗口，输入以下命令 $ cd ~/.ssh 如果没有，显示 bash: cd: /c/Users/Administrator/.ssh: No such file or directory 否的话，标识本地已经有创建过的 SSH key 了，可以跳过 2.2 节，直接 2.3 节 $ cd ~/.ssh$ lsid_rsa id_rsa.pub known_hosts 创建 SSH key最后一个参数替换为自己的 Gitee 注册邮箱 $ ssh-keygen -t rsa -C "your_email@example.com"Generating public/private rs ...

Gitee 图床搭建快速上手 下载安装 PicGo 安装 Gitee 图床插件 创建 Gitee 图床存储仓库 设置 Gitee 私人令牌 配置 PicGo + Gitee 图床信息 下载安装 PicGo点击下载PicGo，选择 (.exe) 文件下载后安装即可 安装 Gitee 图床插件在 PicGo 界面的插件设置中搜索 gitee 的插件，两个插件都可以选择，这里选择第二个插件安装使用 创建 Gitee 图床存储仓库登录个人 Gitee 账号，创建一个图床仓库注意：一定要勾选使用Readme文件初始化这个仓库，会自动帮你生成 master 分支（否则后期上传图片报错404） 设置 Gitee 私人令牌在 Gitee 的设置中，找到 私人令牌，点击新增生成新令牌即可点击提交即可生成（注意：令牌生成后，记得保存哦，关闭窗口就无法查看了） 配置 PicGo + Gitee 图床信息在 PicGo 界面找到 图床设置 -> gitee 注意两个必填项即可 repo：仓库(一般采用Git用户名/仓库名) branch：分支(一般使用master) token：私人令牌(将上一步 ...

如果在编辑流程图的过程中，需要对图中元素的动作进行监听，比如： shape.added 新增一个 shape 之后触发 shape.removed 删除一个 shape 之后触发 connect.end 连线完成后触发 官网提供了很多其他事件接下来一起来测试一下吧 监听 nodeler并绑定事件还是在之前项目 vue-bpmn 的基础上，在 views 文件夹下新增 event.vue 文件在 success() 函数中添加上监听事件的函数 <script>... success () { console.log('创建成功') this.addModelerListener() }, // 监听 modeler addModelerListener () { const bpmnjs = this.bpmnModeler const that = this // 这里用 forEach 给 modeler 上添加要绑定的事件 const ...

如果你的需求中需要将流程图编辑汉化，那你可以往下看看啦！ 这篇文章还是基于之前创建的项目 vue-bpmn ，我们先在 views 文件夹下新建 chinese.vue 文件，然后把之前写好的 panel.vue 的内容复制一份到 chinese.vue 文件中 bpmn.js 汉化准备汉化文件bpmn官网给了一个翻译的例子可以参考我们需要的文件是 translationsGerman.js 和 customTranslate.js ，官网例子中也有这两个文件，如果没有找到合适的汉化文件的话，可以直接复制下面的文件使用我们把这两个文件放到 utils 文件夹下translationsGerman.js export default { // Labels 'Activate the global connect tool' : '激活全局连接工具', 'Append {type}': '添加 {type}', 'Add Lane abov ...

之前使用的是本地写死的 xml 字符串来渲染流程图，实际开发中肯定不满足我们的需求，那么我们应该如何解决这个问题呢？ 常用的做法是：前端发送 axios 请求，获取到 xml 的字符串，然后使用 bpmn.js 中的 importXML 的方法将 xml 字符串转换为图形在页面上渲染出来。 接下来进入正题啦~ bpmn.js在vue中发送http请求通过http请求获取并渲染数据还是在之前创建好的项目 vue-bpmn 的基础上添加代码 先在项目中安装 axios 用于发送 http 请求 npm i axios --save-D 然后在 views 文件夹下新建 axios.vue 的文件，并配置好路由规则 // axios.vue<template> <div class="container"> <template v-if="loading"> <div class="loading"> Loading </div ...

前提：项目中需要绘制流程图的需求，涉及到Activiti和Bpmn.js的使用，接下来就来看看如何在Vue中使用Bpmn.js绘制在线流程图吧。 额，bpmn.js是什么？是一个实验BPMN2.0渲染工具包和web建模器，可以使画流程图的功能在前端来完成。如果你不了解它的话，可以来这初体验一下，看看它是否满足你的需求吧。vue 中集成 Bpmn.js 实现在线绘图，导出 xml、svg、在线保存等操作 bpmn.js界面内容介绍 接下来进入正题啦！首先先创建一个 vue 项目，并安装好路由 vue create vue-bpmncd vue-bpmnnpm i vue-router -S 项目搭建完成后，配置好路由相关部分，我们在views文件夹下新建一个basic.vue的文件 vue中使用bpmn.jsbpmn.js 基础其实这部分主要是将 xml 格式的 bpmn 内容解析为图片显示出来 安装相关依赖 npm i bpmn-js --save-D 添加 Bpmn 流程图模板 xml 文件（这个文件可以自己绘图构建）在 mock 文件夹下新建 xmlStr.js 文件 ex ...

iconfont首页 iconfont 获取 可以先在首页搜索你想要的图标，然后添加到购物车中，然后把购物车中的图标添加到项目中，如果没有项目的话可以新建一个项目。 生成在线链接 点击 font class 按钮直接就可以生成链接了 复制生成的链接地址，在浏览器窗口查看 引入字体样式可以选择直接把字体样式下载引入到博客中，或者直接把刚才的链接引入，这里我就先选择下载到本地 把刚才查看的 css 代码另存为 /themes/Butterfly/source/css/ 中，命名为 iconfont.css 在 _config.butterfly.yml 中引入样式文件# 插入代码到头部 </head> 之前 和 底部 </body> 之前inject: head: # - <link rel="stylesheet" href="/xxx.css"> <link rel="stylesheet" href="/css/iconfont.css" ...

Hexo 生成博客文章的链接时，默认格式 permalink: :year/:month/:day/:title/ ，即按照 年：月：日：标题的格式来生成的。如果标题中含中文的话，复制URL链接的话中文字符就会是一大串编码字符。如果想为每一篇文章生成唯一 ID 的话，推荐使用 hexo-abbrlink 或 hexo-uuid hexo-abbrlink博客根目录下安装 npm install hexo-abbrlink --save config.yml 中修改 permalink: posts/:abbrlink/ hexo clean -> hexo g -> hexo s 在本地查看，博客文章链接如 https://dulily.gitee.io/posts/28872/hexo-abbrlink 官方文档中还介绍了其他配置，可以自行修改哦 hexo-uuid博客根目录下安装 npm install hexo-uuid --save config.yml 中修改 permalink: posts/:uuid/ hexo clean -> hexo g -& ...

默认的 Hexo 主题为 landscape，我选择了 Butterfly 作为博客主题 Butterfly 主题使用Butterfly 安装Git 安装在博客的根目录执行 git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly 安装完成后可在 根目录/themes/butterfly 查看主题文件夹 应用主题修改博客根目录的配置文件 _config.yml，把主题改为 butterfly theme: butterfly 安装插件如果你没有 pug 和 stylus 的渲染器，需要安装 npm install hexo-renderer-pug hexo-renderer-stylus --save 升级建议把主题文件夹中的 _config.yml 复製到 Hexo 根目录里，同时重新命名为 _config.butterfly.yml。以后只需要在 _config.butterfly.yml进行配置就行。 Hexo会自动合并主题中的_config.yml和 ...

主要使用 artitalk.js LeanCloud 的相关准备 建议使用国际版的 LeanCloud因为国际版的 leancloud 不需要配置 serverurl，所以推荐使用国际版，速度没有区别，如> 果使用国内版的 leancloud 别忘了填写 serverurl 即可 前往 LeanCloud 国际版，注册账号。 注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。 绑定完成之后点击创建应用，应用名称随意，接着在结构化数据中创建 class，命名为 shuoshuo。 在你新建的应用中找到结构化数据下的用户。点击添加用户，输入想用的用户名及密码。 回到结构化数据中，点击 class 下的 shuoshuo。找到权限，在 Class 访问权限中将 add_fields 以及 create 权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将 delete 和 update 也设置为跟它们一样的权限。 然后新建一个名为atComment的class，权限什么的使用默认的即可。 点击 class 下的 _User 添加列，列名称为 img ...