- 博客(19)
- 收藏
- 关注
原创 画布拖拽主流框架对比
bpmn.js之前做过一个项目也还行,LogicFlow也有bpmn的效果。节点由自己进行绘制,样式自言可控,灵活度高。如果做到跟byai一样,需要在已开源的组件基础上,二次开发。数据驱动的可视化和与Ant Design生态系统的集成。数据驱动的可视化和与Ant Design生态系统的集成。自研的话,可以选择基于jsplumb或者x6开发。免费,并根据MIT许可证提供。下载框架, 也可以通过npm安装。图表项目和连接的参数精细可控。
2024-08-22 10:52:39
305
原创 富文本编辑器ckeditor5的配置及二次扩展
在主入口文件ckeditor.ts导入 ,注释掉原有包导入,引入二次扩展包。本地运行 sample/index.html ,查看效果。目标:实现支持用户自定义上传的功能,增加上传按钮。npm下载该包,放入src/plugins目录下。打包运行生成打包文件。
2024-08-22 10:48:39
335
原创 vue3集成prismjs
vue3集成prismjs1.下载# prismjs npm i prismjs -S# prismjs 类型npm i @types/prismjs -D# vitenpm install vite-plugin-prismjs -D2.配置vite.config.tsimport { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import { resolve } from "pat
2022-05-20 16:18:22
1869
7
原创 vue2 集成prismjs
vue2 集成prismjs1.下载npm install prismjs -Snpm install babel-plugin-prismjs -D2.配置babel.config.jsmodule.exports = { presets: ['@vue/app'], plugins: [ [ 'prismjs', { languages: ['javascript', 'cs
2022-05-20 16:17:46
603
1
原创 Vue3 - setup script
前言Vue3其中比较大的一个特性就是setup方法,可以让我们非常直观和方便的组合我们的业务逻辑和hooks。在setup里面返回的变量可以直接在template里面使用。大多数情况下,我们的大部分逻辑都集中在setup方法里面,所以官方提供了一个实验性的写法,直接在script里面写setup的内容,即:setup script。使用我们之前的组件可能是这样的:<template> <div class="flex items-center justify-center h-
2021-10-20 10:25:35
720
原创 Vue SSR 指南(三)
Vue SSR 指南(三)根据官网按步骤实现Vue SSR搭建过程新建一个项目,使用vue-cli3脚手架搭建,vue create ssr-demo根据自己需求选择,项目结构如下:路由和代码分割1.router.js类似于 createApp,我们也需要给每个请求一个新的 router 实例,所以文件导出一个 createRouter 函数import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)expor
2021-04-23 14:56:00
293
原创 Vue SSR 指南(二)
Vue SSR 指南(二)根据官网按步骤实现Vue SSR搭建过程使用 webpack 的源码结构(vue-cli3)新建一个项目,使用vue-cli3脚手架搭建,vue create ssr-demo 根据自己需求选择,项目结构如下:1.main.jsmain.js 是我们应用程序的「通用 entry」。在纯客户端应用程序中,我们将在此文件中创建根 Vue 实例,并直接挂载到 DOM。但是,对于服务器端渲染(SSR),责任转移到纯客户端 entry 文件。main.js 简单地使用 expor
2021-04-23 11:18:42
566
原创 Vue SSR 指南(一)
Vue SSR 指南(一)根据官网按步骤实现Vue SSR搭建过程命令构建项目初始化 : 新建一个文件夹 ssrcd ssrnpm init -ynpm install vue vue-server-renderer express --save 或者yarn add vue vue-server-renderer express --save渲染一个 Vue 实例1.新建文件server1.js// 1、创建一个vue实例const Vue = require('vue')cons
2021-04-23 10:08:53
708
原创 Vue路由递归加载菜单 ,单点登录
1.概述背景 目前参与项目共有三个平台,每个平台都有工作台,工作台都有快速应用栏,用户登录其中一个平台,另外的平台都可以进入。(单点登录)![在这里插入图片描述](https://img-blog.csdnimg.cn/20200819134933902.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEwNzQ2ODg=,size_16
2021-04-13 11:52:11
456
原创 利用腾讯地理服务解析IP所在的国家地区
1、概要近期做的电商项目,因为有不同国家对应尺码的选择,要根据ip地址解析对应的国家位置信息。刚开始查找资料,大多是调用搜狐、新浪、腾讯等接口,要不服务暂停,要不信息不完整。最后使用的腾讯位置服务的api。2、腾讯位置服务1、需注册 ------->创建应用-------->生成秘钥2、https://lbs.qq.com/service/webService/webServiceGuide/webServiceIp 接口地址说明3、截图3、代码及效果截图//根据IP地址解析设
2021-04-13 11:47:03
633
原创 读取SVG文件内容转vue-awesome数据格式展示
1、概要根据美工提供的svg文件,提取文件内容组装成vue-awesome插件所需的数据格式。主要实现利用第三方插件实现图片本地化访问。解决性能问题。2、效果3、数据svg内容<?xml version="1.0" encoding="UTF-8"?><svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:x
2020-10-12 17:27:07
863
原创 AntD Button 图标集成 iconfont
1、概述近期,前端项目在做优化,优化点:Button组件图标加载。问题描述:图片资源来自服务端返回的结果,虽然目前实现异步加载,但避免不了多次请求服务端就会造成性能问题,所以,就考虑到前端本地化资源存储,一种是存储成xml文件,一种是svg格式文件。要求:现请研究图片集成方式,避免多次请求(注:美工的切图都是彩色图,颜色大于2种)解决方案:按钮集成iconfont库2、步骤1.首页登录 https://www.iconfont.cn/home/index 注册(GitHub账号第三方登录)2
2020-09-23 09:47:43
3867
原创 json可视化树
1、概要近期项目需要集成第三方webservice服务,前端界面需要将第三方请求json,返回json的可视化展示。2、效果借用第三方插件展示 vue-json-viewer利用Reflect递归查找赋值3、数据请求数据{"type":"object","properties":{"header":{"type":"object","properties":{"AuthHeader":{"type":"object","properties":{"User":{"description":
2020-09-14 17:02:49
1877
原创 Vue 使用 jsonlint 处理前端分布式唯一ID精度丢失
1.概要在项目(vue+antD)开发过程中,遇到获取后端分布式唯一ID精度丢失的问题。原因: javascript 的 Number 类型最大长度是17位;mysql 使用bigint 类型长度是20位,传递到前端会被浏览器用原始的那个json parse方法转换丢失部分数据,浏览器中的Preview上会看到错误结果数据。解决方案:1、调用第三方插件加工数据,jsonlint.js(已用于生产环境)2、前端转换成string类型(最终没采用)2.代码第一种: 定义工具方法 jsonlint
2020-08-19 11:25:21
4015
4
原创 WebSocket使用,实现长连接,组件间通信
1.概述前端使用vue+antdesign,应用的场景,用户二次登录踢下线。2.代码<template> <a-locale-provider :locale="locale"> <!-- <a-spin :spinning="showLoading"> --> <div id="app"> <router-view /> </div> <!-- </a-s
2020-08-14 15:36:31
760
原创 XLSX从第几行数读取excel内容,去除换行符,两端空格,保持日期格式,加密软件提示,null赋值为空字符串
XLSX从第几行数读取excel内容,去除换行符,两端空格,保持日期格式,加密软件提示,null赋值为空字符串1.概述 浏览器读取excel内容,可根据第几行读取,自动去除换行符,单元格的两端空格,保持日期格式,加密软件提示,null赋值为空字符串。2.代码如下 readWorkbookFromLocalFile(file, callback) { var reader = new FileReader() reader.onload = (e) => {
2020-08-14 15:06:26
786
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人