- 博客(23)
- 收藏
- 关注
RSS订阅原创 路由放在前端意味着什么？
vue-router和 react-router都同时依赖了一个第三方库 Path-to-RegExp进行路由解析，源码很短小，收获很多，有兴趣可以看下，下面通过分析 path-to-regexp 1.8 版本的源码来理解路由是如何被解析的。单页面应用指的是应用只有一个主页面，通过动态替换DOM内容并同步修改url地址，来模拟多页应用的效果，切换页面的功能直接由前台脚本来完成，而不是由后端渲染完毕后前端只负责显示。默认情况下，当地址栏的 URL 发生变化时，浏览器会向服务端发起新的请求。
2024-12-13 16:32:10
1022
原创 画布拖拽主流框架对比
bpmn.js之前做过一个项目也还行，LogicFlow也有bpmn的效果。节点由自己进行绘制，样式自言可控，灵活度高。如果做到跟byai一样，需要在已开源的组件基础上，二次开发。数据驱动的可视化和与Ant Design生态系统的集成。数据驱动的可视化和与Ant Design生态系统的集成。自研的话，可以选择基于jsplumb或者x6开发。免费，并根据MIT许可证提供。下载框架， 也可以通过npm安装。图表项目和连接的参数精细可控。
2024-08-22 10:52:39
865
原创 富文本编辑器ckeditor5的配置及二次扩展
在主入口文件ckeditor.ts导入 ，注释掉原有包导入，引入二次扩展包。本地运行 sample/index.html ，查看效果。目标：实现支持用户自定义上传的功能，增加上传按钮。npm下载该包，放入src/plugins目录下。打包运行生成打包文件。
2024-08-22 10:48:39
704
原创 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
1999
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
777
2
原创 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
1029
原创 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
333
原创 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
626
原创 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
757
原创 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
516
原创 利用腾讯地理服务解析IP所在的国家地区
1、概要近期做的电商项目，因为有不同国家对应尺码的选择，要根据ip地址解析对应的国家位置信息。刚开始查找资料，大多是调用搜狐、新浪、腾讯等接口，要不服务暂停，要不信息不完整。最后使用的腾讯位置服务的api。2、腾讯位置服务1、需注册 ------->创建应用-------->生成秘钥2、https://lbs.qq.com/service/webService/webServiceGuide/webServiceIp 接口地址说明3、截图3、代码及效果截图//根据IP地址解析设
2021-04-13 11:47:03
785
原创 读取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
929
原创 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
4094
原创 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
1946
原创 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
4169
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
853
原创 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
902
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人