许......-CSDN博客

复制代码去Echarts的示例里粘贴进去即可看到效果效果图option = { title: { text: 'Stacked Line' }, tooltip: { trigger: 'axis' }, legend: { data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Se...

2023-12-07 17:30:30 330

原创使用CSS3动画属性实现斜线动画 -- 弧线动画 -- 波纹动画 -- 点绕圆旋转动画 -- 浮动动画...

1 动画属性与使用如果示例代码无动画效果属于正常，因为未定义动画开始时间/完成需要时间/运动曲线等等。示例均为连写方式，也可指定动画属性名独立书写1.1 动画属性@keyframes：用于定义动画关键帧的属性，里面是动画在不同时间点的状态。animationName：表示动画的名称；from：定义动画的开头，相当于 0%；percentage：定义动画的各个阶段，为百分比值，可以添加...

2023-12-06 11:10:12 932

原创 Vue+Electron，对官方模板进行改动，并打包为exe文件

红框里的默认菜单可能满足不了需求 / 想用中文菜单，那么就来自定义菜单。在项目根目录创建文件// 创建菜单模板// process.platform 是 Node.js 提供的一个全局变量 'darwin'：表示 macOS 系统 'win32'：表示 Windows 系统 'linux'：表示 Linux 系统label: '文件',submenu: [label: '新建',click () {createWindow() // 新建窗口},

2023-12-01 14:41:21 1389

原创第六步：加入日志功能

第一步：创建一个基础项目第二步：创建写接口的模块，建立moogodb数据库连接，写添加与查询接口第三步：加入Swagger文档第四步：加入请求参数校验第五步：解决跨域问题，返回 token，校验token, 并定义将接收的参数全局存储的方法注：不要关心注释代码，那是属于后面功能的区域。因为随着代码体量加大，功能不再明确，只需按照步骤并参考效果图，把关键代码写入即可，所以下只写关键代码，具体请...

2023-11-21 17:33:09 9

原创第五步：解决跨域问题，返回 token，校验token, 并定义将接收的参数全局存储的方法...

第一步：创建一个基础项目第二步：创建写接口的模块，建立moogodb数据库连接，写添加与查询接口第三步：加入Swagger文档第四步：加入请求参数校验注：不要关心注释代码，那是属于后面功能的区域。因为随着代码体量加大，功能不再明确，只需按照步骤并参考效果图，把关键代码写入即可，所以下只写关键代码，具体请看效果图。项目地址1 解决跨域问题npm i cors1.1 将cros挂到全局...

2023-11-21 16:52:03 14

原创第四步：加入请求参数校验

第一步：创建一个基础项目第二步：创建写接口的模块，建立moogodb数据库连接，写添加与查询接口第三步：加入Swagger文档注：不要关心注释代码，那是属于后面功能的区域。因为随着代码体量加大，功能不再明确，只需按照步骤并参考效果图，把关键代码写入即可，所以下只写关键代码，具体请看效果图。项目地址1 引入管道，并全局启用npm i --save class-validator cla...

2023-11-20 15:07:20 8

原创第三步：加入Swagger文档

第一步：基于node创建一个Nest.js项目第二步：创建写接口的模块，建立moogodb数据库连接，写添加与查询接口注：不要关心注释代码，那是属于后面功能的区域。因为随着代码体量加大，功能不再明确，只需按照步骤并参考效果图，把关键代码写入即可，所以下只写关键代码，具体请看效果图。项目地址1 引入并定义Swagger文档npm install --save @nestjs/swagg...

2023-11-17 15:58:13 11

原创第二步：创建写接口的模块，建立moogodb数据库连接，写添加与查询接口

第一步：基于node创建一个Nest.js项目注：不要关心注释代码，那是属于后面功能的区域。因为随着代码体量加大，功能不再明确，只需按照步骤并参考效果图，把关键代码写入即可，所以下只写关键代码，具体请看效果图。项目地址1 创建写接口的模块1.1 查看快捷命令语句nest g -hname 命令名称 / alias 命令简写 / description 命令描述效果图...

2023-11-17 13:43:40 7

原创 echarts不根据传入参数，自定义 legend 的内容（视觉映射）

注意：以下均来自于echarts官网示例，在示例基础上修改的，如需要看效果，自行复制代码，到示例里运行。效果图option = { legend: {}, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { ...

2023-11-09 11:00:30 12

原创 Vue中tabs标签页实现 --（携带参数界面也支持）

效果图需要运行看效果的访问以下网址(切换到 tabs-router 分支， vue-userList为前端可以看效果的项目 -- 已关闭接口 -- 直接点登录即可)：项目地址主要代码以下代码储存路由信息时会保留路由携带的参数，点击tabs标签页跳转时会携带原本携带的参数。刷新界面后会默认添加当前页的tabs标签页，不会保留刷新前的存储tabs标签页数据，可根据需求考虑要...

2023-09-25 10:20:30 12

原创第一步：基于node创建一个Nest.js项目

第二步：创建写接口的模块，建立moogodb数据库连接，写添加与查询接口1.介绍Nest.jsNest 是一个用于构建高效，可扩展的 Node.js 服务器端应用程序的框架。它使用渐进式 JavaScript，内置并完全支持 TypeScript(但仍然允许开发人员使用纯 JavaScript 编写代码)并结合了 OOP(面向对象编程)，FP(函数式编程)和 FRP(函数式响应编程)的元素。...

2023-08-25 10:02:51 9

原创 el-table 合并表头 -- 合并单元格 -- 表尾合计 -- 修改/拆分合并单元格 -- 动态单元格合并 -- 动态合并单元格...

0 动态合并单元格方法本文写的有点繁琐，以下这篇文章将提供更简单的实现办法el-table 动态合并单元格1 合并表头1.1 合并物品数量与邮件数量的表头<template> <div> <el-table :data="tableData" style="width: 100%" :header-cell-st...

2023-07-31 15:03:06 7

原创 Vue使用echarts渲染地图并根据地区编码展示区域地图

1 功能介绍默认展示主地图，点击某个省市区根据地区编码展示对应的省市区地图，当匹配不到对应的省市区编码则展示主地图。根据地理位置坐标加标记。最终效果图点击省市区展示省市区地图省市区效果如果觉得地名位置歪/想让省市区位置在区域中心位置，则需下载地图JSON地图文件进行手动修改(一般名字的位置为省会坐标点)，具体修改会在 --- 2.3创建echarts地图 --...

2023-07-10 10:54:28 9

原创树级结构转平级结构---平级结构转树级结构---根据最后一级标识查完整层级

1 树级结构转平级结构<template> <div class=""> <el-cascader v-model="value" :options="options" :props="customProps" @change="handleChange" ></el-cascader&...

2023-07-04 09:26:58 1

原创 Vue 根据页面导出word-docx格式文件(仓库地址)

导出word模板功能的Vue项目 -- 两种(里面有文档)注意: docxtemplater 文件夹内是替换字符形式的写法 -- 比较简单 -- 缺点是操作性有限 -- 根据指定的模板对模板进行填充 -- 无需启动node服务docx_js_ 文件内 node_server 为node服务，docx_vue为前端服务(主要使用docx.js包) -- 存在难度 -- 这个扩展性比较强，可根据数据...

2023-04-14 17:24:47 11

原创 Vue支持预览 docx格式，xlsx格式，pdf格式的文件

如需要，请访问以下地址docx-preview, luckyexcel 配置文件与node服务仓库地址1 预览docx格式文档配置文件存放位置1.1 引入相关配置文件docx预览会使用 docx-preview如果直接使用npm包，当解析时出现如下错误的话，就使用下面的方法，如果没报错，就正常引入使用即可，不需要把打包后的代码引入到入口文件里。效果图直...

2023-03-09 16:26:34 11

原创基于node返回文件的可读流（文件流）|| express

下我们启动本地服务器所依赖的包npm i express创建最基本的本地服务器，例如服务器文件名为app.js那么启动服务器命令就为node .\app.jsconst express = require('express');const app = express();// 启动服务器app.listen(80, () => { console.log('express...

2022-12-19 10:40:11 12

原创根据条件循环生成并模块化echarts图表

此次将循环生成多个图表，每个图表根据条件展示不同的图表，并将echarts的每个配置项抽离出来，进行灵活配置。1.循环生成echarts图表并根据条件生成不同的图表1.1 准备需要展示图表的模型<template> <div class="echarts-body"> <div class="echarts-form" v-for="ite...

2022-10-31 15:09:02 6

原创在Vue项目中渲染SVG图，并做简单的操作等(附拖拽指令/放大缩小功能)

本次将说明如何在项目中使用SVG图，并做一些简单的操作等，毕竟SVG图相对于图片具有可操作性，对图像进行放大不会失真。SVG什么意思：SVG是一种可缩放矢量图形(英语：Scalable Vector Graphics，SVG)是基于可扩展标记语言(XML)，用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。简单的理解，它是图形的另一种格式例如它和常见的图片格式.png、.jp...

2022-07-03 20:47:27 10

原创 HTML界面点击按钮打开电脑客户端软件

如果你有用过百度网盘下载过别人的东西的话，相信你肯定体验过点下载时会出来一个提示是否打开 xxx.exe应用程序，就像这样：接下来尝试实现类似的功能，点击按钮打开客户端的软件，看起来是不是一模一样，等我去百度一番发现，很多文章都在说去修改注册表，那么就先看看百度网盘是怎么通过注册表实现的此时打开注册表，经过一番查找，会发现一个叫Baiduyunguanjia的文件，这个文件应...

2022-05-22 10:43:58 4

原创下载接口返回的数据流格式文件

1 使用downloadjs1.1 下载npm install downloadjsimport download from 'downloadjs';download(data, filename, mimeType);// data 是要下载的文件内容，可以是 Blob、Buffer、ArrayBuffer、URL、字符串等；// filename 是要保存的文件名；// ...

2022-05-21 17:26:59 7

原创基于node操作数据库进行删查改写 || express(二)

1 . 构建基本的服务器与接口const express = require('express');const cors = require('cors');const app = express();// 处理跨域中间件app.use(cors())// 处理JSON表单格式中间件app.use(express.json());// 处理application/x-www-fo...

2022-04-30 11:21:29 6

原创基于node书写一个接口 || express(一)

本篇利用node.js来写基于本地服务的接口，并使其调用成功1 . 首先需要安装node.js如果希望通过 Node.js 来运行 Javascript 代码，则必须在计算机上安装 Node.js 环境才行。安装包可以从 Node.js 的官网首页直接下载，进入到 Node.js 的官网首页(https://nodejs.org/en/)，点击绿色的按钮，下载所需的版本后，双击直接安装即...

2022-04-17 21:01:15 8

原创使用iframe实现一页展示两个界面，点击左边界面改变右边界面页面（附点击后右侧页面无变化解决办法）...

首先使用iframe实现一页展示两个界面，点击左边界面改变右边界面页面这是此次想要的效果，但你会发现点击左侧界面后，右侧界面毫无变化，但你点击刷新界面后右侧界面才发生了改变。文章最后会附本地测试的项目文章地址，方便自己进行改造/理解下面将会先实现一页展示两个界面的功能，再处理点击左侧界面右侧界面无变化的问题注意：此次项目宽度为6000px,高度为2160px,记得缩放浏览器哦1 . 实...

2022-04-04 15:44:20 15

原创使用node搭建本地服务运行并测试打包好的项目文件或demo||基于express

此文章构建node服务主要用于运行并测试项目打包后的文件，通过访问本地服务可以直观看到打包后项目的运行情况，没听错，就是运行测试打包压缩后的项目。1 . 创建node服务1.1 创建一个文件夹(名字自己随意)1.2 配置文件在终端运行npm init -y生成package.json文件在平级区域创建app.js文件1.3 创建node服务 (在app.js文件里写)下载e...

2022-04-02 23:35:18 8

原创将SVG格式图片转换成字体图标，并使用链接方式访问（支持个性化图标样式改变）...

有时组件库提供的字体图标满足不了业务需求，就算拿图片修修改改也占用资源，本文将讲述如何将SVG格式图片上传到在线图标库，利用链接方式进行使用，并对其个性化改变。一. 将素材转换成SVG格式的图片在线工具网址：https://www.aconvert.com/cn/image/png-to-svg/二. 制作字体图标在这里我推荐使用：https://www.iconfont.cn/(阿里的...

2022-03-13 22:19:43 2

原创 Vue中使px自动转rem配置（使用第三方包）|| 用js配置+Vscode扩展处理适配问题

以下方法为px自动转换rem，顾名思义，配置完成后，不用再关心rem换算等等，只需按照设计稿的px值写入即可，当你保存后PostCSS插件会自动将px转换成所配置的rem值，并且你在浏览控制台观测界面时你会发现你在代码里写的是px单位，在控制台被转换成了rem单位。postcss 一种对css编译的工具，本身不会对css一顿操作，它通过插件实现功能。1. 使用amfe-flexible +...

2022-02-26 10:29:43 7

原创 Vue中使用wangeditor富文本编辑器，生成的图片数据支持v-html解析后点击图片跳转超链接...

个人觉得wangeditor富文本编辑器非常好用，官方文档也写的很详细易懂，虽然wangeditor富文本编辑器支持图片添加超链接点击跳转，但那也仅限于你在wangeditor富文本编辑器编辑器里面支持，如果你用wangeditor富文本编辑器进行了各种编辑操纵并保存了值，别的地方需要用v-html去解析(例如移动端)，此时你就会发现我的图片怎么点击没反应？，因为wangeditor富文本编辑器...

2022-01-23 21:31:10 20

原创 Vue中this.$set与this.$nextTick()的使用

最近写代码碰到了数据响应式丢失的问题，刚开始还以为是值绑定错了/代码逻辑写错了，结果是由于数据是额外添加导致的，这次就记录下错误出现原因，加深下印象。1. this.$set1.1 Vue响应式的局限性对于对象：Vue 无法检测对象元素的添加或移除。由于 Vue 会在初始化实例时对对象元素执行 getter/setter 转化，所以对象元素必须在 data 对象上存在才能让 Vu...

2022-01-15 12:21:27 5

原创开发中的移动端项目在真机上观测效果

虽然浏览器自带的手机模拟器香滴很，但手机品牌跟型号也是真滴多，兼容性适配性一直都是头疼的问题，但我觉得最大的问题就是那些不起眼的样式，一般我们都用375的界面进行适配，但手机屏幕大小不一等等因素，可能手机模拟器满足不了我们的需求。不要说不可能，因为我就碰见过，图片在模拟器好好的，到了测试那就说图片被拉伸了，失真了什么有点歪啥的。1. 使电脑跟手机建立在一个链接：打开手机热点，让电脑连接上即可2...

2022-01-01 22:23:51 1

空空如也

空空如也