Web前端入门第 85 问:JavaScript 一个简单的 IndexedDB 数据库入门示例
在前端风风雨雨的混了多年,从没在项目中实际使用过 IndexedDB 这个浏览器端的数据库,所以今天就摸了下 MDN 的后门,写一个简单的入门示例。
页面大概长这样:
源码:
以下代码包含了一个数据库所有的 CRUD (增删改查)操作。
<div>
<button id="js_add_btn">添加书籍</button>
</div>
<div>
<input type="text" nam ...
vue table 甘特图 vxe-gantt 实现多个表格的任务互相拖拽数据
vue table 甘特图 vxe-gantt 实现多个表格的任务互相拖拽数据
对于需要实现多表数据互相拖拽的场景就非常有用了,实现方式非常简单
查看官网:https://vxeui.com
Github:https://github.com/x-extends/vxe-gantt
Gitee:https://gitee.com/x-extends/vxe-gantt
效果
代码
通过参数 row-drag-config.isCrossTableDrag 启用 ...
vue 如何使用 vxe-table 来实现跨表拖拽,多表联动互相拖拽数据
vue 如何使用 vxe-table 来实现跨表拖拽,多表联动互相拖拽数据
row-drag-config.isCrossTableDrag 启用跨表格、多表格互相拖拽;跨表拖拽需要确保数据主键不重复,通过 row-config.keyField 指定主键字段名
查看官网:https://vxetable.cn
gitbub:https://github.com/x-extends/vxe-table
gitee:https://gitee.com/x-ext ...
记录---vue3打印解决方案:Vue-Plugin-HiPrint
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
Vue-Plugin-HiPrint 是一个Vue.js的插件,旨在提供一个简单而强大的打印解决方案。通过 Vue-Plugin-HiPrint,您可以轻松地在Vue.js应用程序中实现高度定制的打印功能。但是本文只简单介绍 Vue-Plugin-HiPrint 在vue3中如何使用固定模板打印的使用方法,以便可以快速集成并使用 ...
Node.js环境和antd初始化项目
Node.js 环境准备
为了方便切换 Node.js 版本, 在 Ubuntu 下使用 nvm 做 Node.js 的版本管理, 在 Windows 10 下使用 fnm 做 Node.js 的版本管理
Ubuntu 22.04 Node.js 环境准备
以下操作使用 Ubuntu 22.04 环境
访问 Node.js 下载说明页 https://nodejs.org/en/download
安装 nvm
nvm 的作用类似于 conda, 可以在用户目录下 ...
vxe-gantt 实现实现多行日期轴、按季度进行查询数据渲染
vxe-gantt 实现实现多行日期轴、按季度进行查询数据渲染
查看官网:https://vxeui.com
Github:https://github.com/x-extends/vxe-gantt
Gitee:https://gitee.com/x-extends/vxe-gantt
实现按季度选择日期后,调用接口查询数据渲染任务
代码
<template>
<div>
<vxe-date-picker v-model="selectValue" type="quarte ...
监控神器!一款易于使用的自托管服务监控工具!
大家好,我是 Java陈序员。
在数字化时代,无论是个人开发者的独立产品,还是企业的业务系统,一旦出现故障,都可能造成用户流失或业务损失。因此,搭建一套可靠的监控告警系统是十分必要的。
今天,给大家介绍一款监控神器,开源自托管!
关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算 ...
上下margin无法生效的一种情况-行内元素
问题描述
在学udemy的html&css课的时候,challenge2有一部分是给超链接添加margin-top/bottom,添加后浏览器devtool的样式中显示margin已生效,但是在页面中却无法显示。
解决过程
搜索margin不生效的几个原因可以总结为
parent box 放不下
上下相邻的块产生margin折叠
但是前者一般对parent中头尾的child产生影响,后者 ...
vue vxe-gantt 甘特图自定义任务条样式模板 table 自定义插槽模板
vue vxe-gantt 甘特图自定义任务条样式模板 table 自定义插槽模板
当需要渲染自定义内容模板是,就可以通过插槽来实现,非常灵活
查看官网:https://vxeui.com
Github:https://github.com/x-extends/vxe-gantt
Gitee:https://gitee.com/x-extends/vxe-gantt
代码
通过自定义插槽 task-bar 来实现
<template>
<div>
...
在Vue3+ElementPlus前端中,使用watch监控对象变化,实现字典列表的级联更新处理
在Vue3+ElementPlus前端中,有时候一些字典的关联显示,需要使用级联,因此一般使用watch监控对象变化,实现字典列表的级联更新。本篇随笔介绍基于实际案例来实现多级关联的处理操作,以供参考。
1、省市区的级联案例
在很多实际业务项目中,往往都可能涉及到级联显示的场景。比如有 省份 -> 城市 -> 区县 的字典数据,用户 ...
如何在DHTMLX Scheduler中实现带拖拽的任务待办区(Backlog)
为了满足 DHTMLX Scheduler 用户的实际业务需求,本文将展示如何在 JavaScript 日程组件中实现“带拖拽的任务待办区(Backlog)”。这一功能让用户可以像物业管理系统那样,通过简单的拖拽操作将任务分配到时间轴上的合适位置,大幅提升排程效率与体验。
DHTMLX Scheduler 试用下载,请联系DHTMLX官方授权代理商 ...
记录---vue3项目实战 打印、导出PDF
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
vue3项目实战 打印、导出PDF
一 维护模板
1 打印模板:
<template>
<div class="print-content">
<div v-for="item in data.detailList" :key="item.id" class="label-item">
<!-- 顶部价格区域 - 最醒目 -->
&n ...
Web前端入门第 84 问:JavaScript sessionStorage 那些容易踩坑的地方
sessionStorage 与 localStorage 差不多可以算作一对兄弟,它俩的暴露的 API 方法一模一样。
但两者也有不同点:
1、sessionStorage 存入的数据在页面关闭后,会自动清除。
2、相同 URL 的每个 tab 页签的 sessionStorage 会被隔离,互不影响。也就是说相同的链接,在 A 标签页打开和在 B 标签打开,A 写入的 sessionStorag ...
vue vxe-gantt 甘特图实现子任务拖拽排序
vue vxe-gantt 甘特图实现子任务拖拽排序
通过 row-config.drag 和列设置 drag-sort 启用行拖拽排序功能
查看官网:https://vxeui.com
Github:https://github.com/x-extends/vxe-gantt
Gitee:https://gitee.com/x-extends/vxe-gantt
<template>
<div>
<vxe-gantt v-bind="ganttOptions" v-on= ...
记录---自动生成前端路由最佳实践
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
自动生成前端路由最佳实践
概述
本文档介绍如何使用 vite 和 vite-plugin-pages 在前端项目中自动生成前端路由,通过文件系统结构自动映射为路由配置,减少手动维护路由的工作量。
安装必要依赖
首先需要安装用于自动生成路由的插件:
npm install vite-p ...
【前端开发】iconfont 阿里巴巴免费矢量图标库超级实用!
🚀 个人主页 极客小俊
✍🏻 作者简介:web开发者、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步!
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注
前言
之前我介绍过一款非常好用的前端开发图标字体库FontAwesome
但是除了它还有一款非常好用并且也是免费的图标字体库也是非常不错,并且我自己开发时也是经常 ...
vue vxe-gantt 甘特图的使用
vue vxe-gantt 甘特图的使用
查看官网:https://vxeui.com
Github:https://github.com/x-extends/vxe-gantt
Gitee:https://gitee.com/x-extends/vxe-gantt
npm install vxe-pc-ui@4.8.19 vxe-table@4.16.0 vxe-gantt@4.0.0
// ...
import VxeUIAll from 'vxe-pc-ui'
import 'vxe-pc-ui/es/style.css'
import VxeUITab ...
基于Vant4+Vue3+TypeScript的H5移动前端
本H5移动前端项目使用最新的 `Vue3.5`、`Vite6`、`Vant4`、`Pinia`、`TypeScript`、`UnoCSS`、`Vue-i18n` 等主流技术开发,结合我们《SqlSguar开发框架》后端的功能接口,实现了相关的框架基础功能和一些业务案例的功能。另外集成了 `Axios`、`ECharts`、`IconSvg`、`mockjs`、`qrcode`、`dayjs` 等等一些优秀的第三方 ...
格式转换全能王!一个开源自托管的文件转换神器
大家好,我是 Java陈序员。
在日常工作生活中,常常需要对一些文件进行转换,如不同格式的照片进行转换,还有 Office 各文档之间的转换等。但常常找不到趁手的工具,使用在线工具又担心隐私泄漏。
今天,给大家介绍一个开源自托管的文件转换神器,支持超多种文件格式转换,可以说是格式转换全能王!
关注微信公众号:【Jav ...
记录---为什么你写的 `position: sticky` 不工作?99% 的前端都踩过这个坑
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
前端世界里有很多看似“直白”的属性,比如 position: sticky,听起来像是“粘住某个位置”——只要设置好就能吸附在页面某个位置上,滚动时一动不动。
结果实际开发中你可能经历过以下崩溃三连:
设置了 position: sticky; top: 0;,元素依然随页面滚动;
控制台一 ...