Vue
文章平均质量分 79
Vue相关的教程
Python私教
收徒弟,接私活,有直播课和私教课,可以做家教和川渝线下教学,包教会 18010070052。
展开
-
zdppy+vue3+onlyoffice文档管理系统实战 20240905 上课笔记 权限校验中间件开始
k8s的配置文件基本都是yaml格式的。而配置文件中,又可以配置环境变量,这个环境变量实际上就是我们在env中配置的环境变量。我们现在想要把jwt_key和jwt_expired做成配置信息,主要就是使用这两种格式。而我们对env最为熟悉,所以我们采用env去进行配置。原创 2024-09-06 00:13:42 · 488 阅读 · 0 评论 -
zdppy+vue3+onlyoffice文档管理系统实战 20240903 上课笔记 登录功能完成
拦截器是 Axios 中非常强大的功能,它们允许你在请求发送之前和响应返回之后统一处理逻辑。这在处理认证、日志记录、错误处理等场景中非常有用。通过设置拦截器,你可以避免在每个请求和响应中重复相同的代码,从而使代码更加简洁和易于维护。原创 2024-09-03 22:52:58 · 1066 阅读 · 0 评论 -
vue3 + antv x6 实现修改节点的大小和颜色
节点的属性:内置节点:修改节点属性的核心方法:source.prop('size', { width: 120, height: 50 }) // 修改 x 坐标source.attr('rect/fill', '#ccc') // 修改填充色,等价于 source.prop('attrs/rect/fill', '#ccc')在React中的用法:change = (command: string) => { const nodes = this.graph.getNodes()原创 2024-09-03 09:08:13 · 1066 阅读 · 0 评论 -
antv x6 的画布大小设置
在实例化 Graph 对象的时候,可以通过设置 width 和 height 固定画布大小,如果不设置,就会以画布容器大小初始化画布。我们可以使用 autoResize 配置来解决上述问题。height100%</</在下面的示例中,我们可以用鼠标拖动灰色的区域,来改变容器大小,可以通过背景颜色看到,三块画布的大小是自适应的。原创 2024-09-03 08:32:35 · 898 阅读 · 0 评论 -
vue3整合antv x6实现图编辑器快速入门
例如:在上面节点基础上,我们有一个新的需求:给节点加上右键菜单。X6 支持使用 SVG、HTML 来渲染节点内容,在此基础上,我们还可以使用 React、Vue 组件来渲染节点,这样在开发过程中会非常便捷。X6 支持 JSON 格式数据,该对象中 nodes 代表节点数据,edges 代表边数据,可以使用 attrs 属性来定制节点和边的样式(可以类比 CSS)。// body 是选择器名称,选中的是 rect 元素。// 目标节点,会建立从开始节点到目标节点的连线。原创 2024-09-03 08:06:32 · 1033 阅读 · 0 评论 -
zdppy+vue3+onlyoffice文档管理系统实战 20240902 上课笔记 登录功能优化
确保你的 Vue 项目已经正确设置,并且你使用的是 Vue 3 的版本。如果你使用的是 Vue 2,绑定键盘事件的方式会有所不同,因为 Vue 2 使用了不同的事件处理和修饰符系统。前端也有自己的缓存对象,叫做localstorage,这个专门帮我们将数据存储在浏览器中,哪怕浏览器关闭了重新打开也还在。所以,它适合用来存储一些和安全不相关的数据,或者加密的数据。同时,它们都是独立的,可以根据需要在不同的脚本或组件中调用。Vue 3 引入了事件修饰符的简写,使得绑定特定键的事件更加简洁。原创 2024-09-02 23:19:47 · 1852 阅读 · 0 评论 -
FastAPI+Vue3零基础开发ERP系统项目实战课 20240819上课笔记 元组集合分支语句
1、元组,固定长度的数组,不能增加元素和删除元素2、集合,无序的数组,且元素不可以重复,具有自动去重功能3、if语句,有三种分支,单分支if,双分支if-else,多分支if-elif-else4、一些练习假设我们现在想要根据输入月份,判断是哪个季节,怎么做呀?输入1:一月,12月,1月,2月是冬季输入8:八月,夏季作为思考题,有时间就做一下,下节课开始我们先讲这个。原创 2024-08-19 23:58:06 · 1155 阅读 · 0 评论 -
zdpvue_primeadmin 登录相关界面的代码梳理和优化,一款Vue3开发的后台管理系统模板
当前首页概述当我们开发后台管理系统的时候,不可避免的会使用到登录和注册相关的功能,所以我决定将这两个功能对应的页面进行整理和优化。目前的登录界面点击登录:跳转到登录页面。优化方向1、改成账号密码登录2、文字都变成中文的代码中对应的页面修改之前的完整代码<script setup>import FloatingConfigurator from '@/components/FloatingConfigurator.vue';import { ref } fro原创 2024-08-18 11:12:59 · 381 阅读 · 0 评论 -
zdppy+vue3+onlyoffice文档管理系统项目实战 20240812上课笔记
zdppy框架有一个非常强大的权限组件模块,提供完整登录,注册,权限管理等相关的功能,我们不需要重新编写接口,只需要引入并使用即可。1、增加新建和导入按钮,有按钮了,但是还没有完善,图标还不对,需要解决。加一个vue文件,然后在vue-router中注册,浏览器访问。tb_user拆成基本信息和详细信息两张表。先分析要做什么,怎么做?原创 2024-08-12 22:07:36 · 1385 阅读 · 0 评论 -
zdppy+vue3+onllyoffice开发文档管理系统项目实战 20240808 上课笔记
单机部署文档:https://github.com/data-infra/cube-studio/wiki/%E5%B9%B3%E5%8F%B0%E5%8D%95%E6%9C%BA%E9%83%A8%E7%BD%B2。机器学习平台,QQ音乐的开源项目,https://github.com/tencentmusic/cube-studio,能不能使用zdppy框架进行改造?虽然实现了删除的功能,但是,我们的数据在删除之后不会自动刷新。1、增加新建和导入按钮,有按钮了,但是还没有完善,图标还不对,需要解决。原创 2024-08-08 22:27:17 · 1096 阅读 · 0 评论 -
FastAPI+Vue3工程项目管理系统项目实战私教课 上课笔记20240808 课程和学习计划制定
3、项目+录播课,私教课的时候讲项目,你下来之后利用业余时间,学习相关录播课程,自己练习,有问题再交流。11、项目信息跟材料信息发生联动,项目需要什么材料需要采购价,利润评估(较难)13、项目过程中,每天人员考勤的管理,材料的把控,定期提材料单(较复杂,较难)11、项目信息跟材料信息发生联动,项目需要什么材料需要采购价,利润评估(较难)13、项目过程中,每天人员考勤的管理,材料的把控,定期提材料单(较复杂,较难)4、人员信息的管理、新增人员,修改人员,查询所有人员,删除人员。原创 2024-08-08 20:05:20 · 923 阅读 · 0 评论 -
Go语言项目实战班04 Go语言课程管理系统项目实战 20240807 课程笔记和上课代码
预览课程特色本教程录制于2024年8月8日,使用Go1.22版本,基于Goland2024进行开发,采用的技术栈比较新。每节课控制在十分钟以内,课时精简,每节课都是一个独立的知识点,如果有遗忘,完全可以当做字典来查询,绝不浪费大家的时间。整个课程从两行代码实现注册登录API接口讲起,以一个课程系统为实战,结合Vue3开发的前端,实现一个基本的前后端分离的课程管理系统,层层递进,学习路径平缓。Golang是当前国内越来越多的企业正在全面转的一门系统级别的高性能的编程语言,比C语言写法更加的简单,比原创 2024-08-08 12:17:22 · 793 阅读 · 0 评论 -
zdpy+vue3+onlyoffice文档系统实战上课笔记 20240805
1、最近文档表格完善2、实现登录功能3、新建文件,复制文件,删除文件4、其他1、在名称前面,渲染这个文档的图标2、大小的基本的单位是kb,超过1024kb则换成mb,主要是这两个单位3、数据按照最近访问时间倒序4、给文件名价格链接,实现和编辑按钮相同的功能5、实现编辑的功能6、实现删除的功能7、分享的功能暂时往后放,因为目前没有用户,等有了用户之后再考虑做准备svg图片资源渲染svg图片效果预览参考文章:https://blog.csdn.net/qq_37703224/art原创 2024-08-05 22:07:47 · 834 阅读 · 0 评论 -
Go语言加Vue3零基础入门全栈班15 gin+gorm+vue3用户管理系统实战录播课 2024年08月04日 课程笔记
如果您没有Golang的基础,应该学习如下前置课程。01 Golang零基础入门课_20240726_149元02 Golang面向对象编程_20240727_199元03 GoWeb基础_20240728_169元04 Go语言开发RESTAPI接口_20240728_239元05 Go语言操作MySQL开发用户管理系统API教程_20240729_289元06 Redis零基础快速入门_20231227_168元。原创 2024-08-04 11:11:56 · 749 阅读 · 0 评论 -
python+vue3+onlyoffice在线文档系统实战20240726笔记,左侧菜单实现和最近文档基本实现
latest_view_time:最近访问时间。点击文件夹,可能会出现很多个子文件夹。我的文档,既包括文件夹也包括文件。解决方案:去掉右侧顶部和底部。根据文件类型,渲染不同的图标。category:文档类型。共享文档,别人分享给我的。原创 2024-07-26 22:05:37 · 414 阅读 · 0 评论 -
vue3+g2plot之旭日图
概述旭日图(Sunburst Chart)是一种现代饼图,它超越传统的饼图和环图,能表达清晰的层级和归属关系,以父子层次结构来显示数据构成情况。旭日图中,离远点越近表示级别越高,相邻两层中,是内层包含外层的关系。在实际项目中使用旭日图,可以更细分溯源分析数据,真正了解数据的具体构成。而且,旭日图不仅数据直观,而且图表用起来特别炫酷,分分钟拉高数据汇报的颜值!很多数据场景都适合用旭日图,基础旭日图效果预览:核心代码:import { Sunburst } from '@antv/g2plot';原创 2024-07-26 10:54:12 · 639 阅读 · 0 评论 -
vue3+g2plot之直方图
本教程讲解了vue3+g2plot如何绘制直方图,完整代码如下。打赏3元即可获取完整源码。人生苦短,我用Python,我是您身边的Python私教~原创 2024-07-26 08:37:20 · 462 阅读 · 0 评论 -
python+vue3+onlyoffice在线文档系统实战20240725笔记,首页开发
解决遗留问题内容区域的高度没有生效,会随着菜单的高度自动变化。解决方案:给侧边加上一个最小高度。首页设计另一种设计:进来以后,是所有的文件夹和最近的文件。有一张表格,类似于Windows目录详情,先展示所有的目录,再接着展示所有的文件。顶部不要了,所有菜单放左侧。最近文档,纯粹文档我的文档,既包括文件夹也包括文件共享文档,别人分享给我的文件夹需要支持子文件夹吗?不需要,一级就够了!!!得到结论:布局改为左右布局菜单项:最近文档,我的文档,共享文档先改布局效果预览原创 2024-07-25 21:57:16 · 818 阅读 · 0 评论 -
uniapp开发精选短视频视频小程序实战笔记20240725,实现顶部轮播图和热门短剧
本教程讲解了uniapp开发短视频小程序的入门教程,主要讲解了如何配置底部导航,如何开发顶部轮播图以及热门短视频。打赏20元即可获取本套教程的全部源码。人生苦短,我用Python,我是您身边的Python私教~原创 2024-07-25 20:50:48 · 1227 阅读 · 1 评论 -
vue3+g2plot实现词云图
效果预览:data,},return {},});本教程主要讲述了vue3怎么结合g2plot开发词云图并实际演示了6个实战案例。完整代码如下:打赏6元即可获取完整源码。本教程还配套了完整的视频教程:人生苦短,我用Python。我是您身边的Python私教,有任何Python问题请随时留言,我愿意献上绵薄之力,为您排忧解难,助您Python编程能力更上一层楼!原创 2024-07-25 16:31:52 · 1007 阅读 · 0 评论 -
vue3+g2plot之瀑布图
基础瀑布图 - 每月收支情况效果预览:核心代码:import { Waterfall } from '@antv/g2plot';const data = [ { type: '日用品', money: 120 }, { type: '伙食费', money: 900 }, { type: '交通费', money: 200 }, { type: '水电费', money: 300 }, { type: '房租', money: 1200 }, { type: '商场消费原创 2024-07-25 14:47:23 · 964 阅读 · 0 评论 -
vite5+vue3开发阅读APP实战笔记20240725
修改src/page/home/index.vue,使用组件和API。注意,这里无论是组件还是API,都不需要我们手动引入,我们配置了自动导入以后,vite会帮我们自动导入。创建 src/page/home/index.vue。修改 vite.config.js。修改vite.config.js。修改 src/main.js。修改src/App.vue。原创 2024-07-25 11:12:43 · 690 阅读 · 0 评论 -
vue3如何实现分面漏斗图
参考网址:https://g2plot.antv.antgroup.com/zh/examples/more-plots/funnel/#facet-transpose。这里我选择采用Vue3+g2plot进行实现。原创 2024-07-25 00:00:33 · 317 阅读 · 0 评论 -
vue3实现在新标签中打开指定的网址
我希望点击查看按钮的时候,能够在新的标签页面打开这个文件的地址进行预览,该如何实现呢?最终就实现了这个功能!原创 2024-07-24 23:58:09 · 527 阅读 · 0 评论 -
python+vue3+onlyoffice在线文档系统实战20240723笔记,项目界面设计和初步开发
模板这个事儿本身并不复杂,但是我们第一个版本的目标是内部使用,所以我们可以不打开对话框,而是直接新建一个空白的文档,并跳转到文档编辑页面。虽然功能依然比较少,但是我们已经基本实现了文档管理最核心的功能,而且我们有个非常大的优势,就是支持多人同时在线协同编辑。当我们新建了文档,并选择了保存以后,我们回到首页,应该能够在一个表格中,看到我最近创建或者更新的文档列表。上面首页的布局我们是要重点的参考的,其他的就可以从简,我们直接跳转到onlyoffice的编辑页面即可。当我们点击新建的时候,会弹出一个下拉菜单。原创 2024-07-23 22:12:26 · 1051 阅读 · 0 评论 -
python+onlyoffice+vue3项目实战20240722笔记,环境搭建和前后端基础代码
先尝试从浏览器直接访问文件:http://127.0.0.1:18888/dist/test.docx。修改 src/page/document/index.vue。初步推测,是我们的文档服务,无法被docserver访问到。新增src/page/document/index.vue。运行项目,现在有无法下载文档的问题和没有撑满屏幕的问题。新建 src/page/index/index.vue。新建 src/router/index.js。修改 src/main.js。修改 src/App.vue。原创 2024-07-22 21:59:37 · 1544 阅读 · 0 评论 -
vite vue3实现前端cors跨域
【代码】vite vue3实现前端cors跨域。原创 2024-07-22 21:31:10 · 172 阅读 · 0 评论 -
primeflex教学笔记20240720, FastAPI+Vue3+PrimeVue前后端分离开发
定义一个接口,接收两个整数,将这两个数相加的结果返回。改写上面的练习,通过接口获取结果并实时渲染。原创 2024-07-20 21:59:09 · 1066 阅读 · 1 评论 -
g2plot如何实现面积图和折线图的动态切换?
一开始的时候显示的是面积图:当我点击折线图的时候,要变成折线图:当我再点击面积图的时候,还要变回面积图:要实现这个功能,得知道g2plot几个重要的API。参考文档如下:https://g2plot.antv.antgroup.com/api/plot-api第一个是render方法:第二个是update方法:第三个是destory方法:另外,我们还需要知道vue的监听器是什么,怎么使用的。这里说一下我的思路:1、页面挂载的时候加载数据,渲染画布,默认使用面积图2、监听图原创 2024-07-17 21:50:29 · 411 阅读 · 0 评论 -
g2plot 如何实现动态切换图表类型的需求
如图:当我点击阶梯折线图的时候,显示的是阶梯折线图,但是当我点击折线图的时候我希望显示的是折线图。核心思路是是在图表类型变化的时候,调用update方法,核心代码如下:const renderChart = async () => { if (!chart.value){ chart.value = new Line('container', { data: data.value, xField: 'year', yField: 'value'原创 2024-07-15 13:51:41 · 999 阅读 · 0 评论 -
g2plot 多折线图相关示例
【代码】g2plot 多折线图相关示例。原创 2024-07-15 08:31:02 · 419 阅读 · 0 评论 -
g2plot 基础折线图相关示例
,});active() {// items: 数组对象,当前 tooltip 显示的每条内容== -1;});});原创 2024-07-15 08:22:47 · 354 阅读 · 0 评论 -
zdppy+onlyoffice实现重命名文件的功能
参考文档:https://api.onlyoffice.com/zh/editors/config/events。接下来参考文档:https://api.onlyoffice.com/zh/editors/command。参考官方文档:https://api.onlyoffice.com/zh/editors/command。参考文档:https://api.onlyoffice.com/zh/editors/rename。文档管理器 将文档的新名称发送到 文档存储服务,在这里软件集成商重命名文档。原创 2024-07-13 17:59:11 · 393 阅读 · 0 评论 -
onlyoffice如何实现占满整个屏幕的宽高?
解决思路:既然元素本身无法实现达到完整的屏幕高度,那么我们就加一个父盒子,让这个父盒子占据屏幕高度,再给onlyoffice的height设置为100%,从而达到跟随父元素高度,也占满整个屏幕高度的目的。问题:我们通过给onlyoffice的配置的height参数值为100vh,没法实现达到屏幕高度的效果。场景:目前已经有antd,vue3,vite,Tailwindcss相关的依赖。原创 2024-07-13 17:11:05 · 971 阅读 · 0 评论 -
Nginx部署Vite打包的带前缀的项目
之前有篇文章,需要参考一下:https://zhangdapeng.blog.csdn.net/article/details/140388105。再通过浏览器访问:http://192.168.234.138/g2plot/#/home。也就是说,我一个Nginx服务,可以通过目录挂载的方式,同时挂载多个web项目。在这篇文章的基础之上,我测试了Vite打包的项目。原创 2024-07-12 20:53:39 · 677 阅读 · 0 评论 -
Ubuntu使用Nginx部署uniapp打包的项目
浏览器访问:http://192.168.234.138/h5/原创 2024-07-12 20:45:08 · 249 阅读 · 0 评论 -
vue3+antd+g2plot快速入门
选择vue和JavaScript。原创 2024-07-12 12:20:36 · 1201 阅读 · 0 评论 -
如何在函数中使用return返回axios的请求结果
使用场景:在添加学生上课记录的时候,需要先获取学生的剩余课时,需要通过接口获取。所以需要封装一个方法,能够通过接口获取学生的课时数量。解决方案:通过异步解决。原创 2024-07-11 16:02:45 · 996 阅读 · 0 评论 -
关于前端数据库可视化库的选择,vue3+antd+g2plot录课计划
现在:g2plot https://g2plot.antv.antgroup.com/manual/introduction。后面按照上面的顺序录制课程,穿插一些实战案例。原创 2024-07-10 20:59:01 · 463 阅读 · 0 评论 -
前端图表库G2快速上手
后续主要使用的antv文档:https://g2-v4.antv.vision/zh/docs/manual/getting-started。在npm上找到3.x较新的版本地址如下:https://www.npmjs.com/package/@antv/g2/v/3.5.19。文档地址:https://g2-v3.antv.vision/zh/docs/manual/getting-started。决定换个版本:https://g2-v4.antv.vision/zh。// 编码 x 通道。原创 2024-07-09 22:02:21 · 1091 阅读 · 0 评论