![](https://img-blog.csdnimg.cn/20190927151026427.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 80
Vue相关的教程
Python私教
收徒弟,接私活,有直播课和私教课,可以做家教和川渝线下教学,包教会 18010070052。
展开
-
前端图表库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 · 660 阅读 · 0 评论 -
zdppy+onlyoffice+vue3解决文档加载和文档强制保存时弹出警告的问题
参考的是官方的 https://github.com/ONLYOFFICE/document-server-integration/releases/latest/download/Python.Example.zip 基于Django的Python代码。通过上面的代码我们发现,它的返回的类型不是JSON类型,而我们原本的返回类型是JSON类型,所以做了一个尝试,将我们的返回类型改成了纯文本类型。这次排查,确保我们的回调地址是能用的,返回的也是 {“error”: 0},但是没用!必须要返回纯文本类型!原创 2024-07-08 22:00:24 · 807 阅读 · 0 评论 -
vue3+antd 实现点击按钮弹出对话框
【代码】vue3+antd 实现点击按钮弹出对话框。原创 2024-07-07 15:46:10 · 947 阅读 · 0 评论 -
vue3+antd 实现文件夹目录右键菜单功能
【代码】vue3+antd 实现文件夹目录右键菜单功能。原创 2024-07-07 13:59:06 · 331 阅读 · 0 评论 -
zdppy + vue3 + antd 实现一个表格编辑行,批量删除功能
编辑单元格和多选的功能首先是编辑单元格的功能,点击编辑按钮,可以直接在表格中队内容进行编辑,点击保存以后能够同步到数据库。其次是多选的功能,点击每行前面的多选框按钮,我们可以选中多行。完整后端代码:import apiimport uploadimport timeimport amcommentimport envimport mcrudimport amuserdetailsave_dir = "uploads"env.load(".env")db = mcrud.new原创 2024-07-07 09:36:55 · 398 阅读 · 0 评论 -
FastAPI+vue3+Primeflex教学20240706,渲染阶乘案例
子绝父相相对定位是相对于自己原本的位置定位。绝对定位,如果父元素设置了相对定位,则相对于父元素进行绝对定位,否则相对于最近的设置了相对定位的元素进行绝对定位,或者相对于根元素进行绝对定位。定位有四个方向,分别是top上,bottom下,left左,right右。如果bottom是0,left是0,则在左下角,如果right是0,top是0,则在右上角。<script setup>import axios from "axios";import {ref} from "vue";原创 2024-07-06 21:59:40 · 671 阅读 · 0 评论 -
vue3+antd 实现表格可编辑行的功能
基本实现<script setup>import {cloneDeep} from 'lodash-es';import {reactive, ref} from 'vue';const columns = [ { title: 'name', dataIndex: 'name', width: '25%', }, { title: 'age', dataIndex: 'age', width: '15%', }, {原创 2024-07-06 19:38:06 · 837 阅读 · 0 评论 -
zdppy+vue3+antd 实现表格单元格编辑功能
初步实现<template> <a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleAdd">Add</a-button> <a-table bordered :data-source="dataSource" :columns="columns"> <template #bodyCell="{ column, text, record原创 2024-07-06 18:32:39 · 778 阅读 · 0 评论 -
解决onlyoffice警告的一些思路
2、检查如何在警告的回调函数中,返回某个值,或者阻止事件的继续传播,以解决出现警告弹窗的问题。1、监听出现警告的事件:已经实现。原创 2024-07-06 17:06:15 · 908 阅读 · 0 评论 -
docker部署onlyoffice,开启JWT权限校验Token
虽然上面的方案解决了Token校验的问题,但是,我们一开始的目标并没有实现。那就是我们想要解决文件下载失败和保存文件失败的问题。这两个错误实际上都是警告,不是严格错误。而且,我们的文档最终也都被成功的加载或者是保存了,实际上并没有发生错误,而我docserver文档服务发出的警告。如果要提高用户的体验,我们还是得想办法就这两个警告给禁止掉或者解决掉。后面继续研究。原创 2024-07-06 16:45:30 · 478 阅读 · 0 评论 -
lodash-es 基本使用
cloneDeep方法文档:https://www.lodashjs.com/docs/lodash.cloneDeep#_clonedeepvalue。参考掘金文章:https://juejin.cn/post/7354940462061715497。npm地址:https://www.npmjs.com/package/lodash-es。github地址:https://github.com/lodash/lodash。中文文档:https://www.lodashjs.com/原创 2024-07-06 13:28:38 · 916 阅读 · 0 评论 -
vite+vue3整合less教程
2、定义全局css变量文件 src/assets/css/global.less。4、配置vite vite.config.js。3、引入less src/main.js。5、使用 src/App.vue。原创 2024-07-06 13:16:58 · 444 阅读 · 0 评论 -
antd通过监听change方法实现表格分页查询功能
【代码】antd通过监听change方法实现表格分页查询功能。原创 2024-07-06 12:09:51 · 435 阅读 · 0 评论 -
zdppy+vue3+antd 实现表格数据渲染
【代码】zdppy+vue3+antd 实现表格数据渲染。原创 2024-07-06 10:31:53 · 970 阅读 · 0 评论 -
antd实现简易相册,zdppy+vue3+antd实现前后端分离相册
【代码】antd实现简易相册,zdppy+vue3+antd实现前后端分离相册。原创 2024-07-05 10:31:48 · 258 阅读 · 0 评论 -
vite+vue3+nginx配置统一公共前缀
我们通过在 vite.config.js 中添加base前缀,能够控制vue3静态资源访问进制走的是base配置的公共路径。同时,我们又在nginx的配置中,配置了这个路径的重定向,所以最终,我们实现了通过同一个 /music 前缀,既能够访问到前端页面,也能够访问到前端的静态资源。在方案1中,我们虽然能够实现 通过 /music/ 访问到根路由对应的网页,但是在vue的内部访问机制中,静态资源,访问的十不通过 /music/ 前缀的。原创 2024-07-04 22:18:29 · 324 阅读 · 0 评论 -
vue-router拆分音乐播放界面实战
【代码】vue-router拆分音乐播放界面实战。原创 2024-07-03 10:57:19 · 215 阅读 · 0 评论 -
zdppy_api+vue3+antd前后端分离开发,使用描述列表组件渲染用户详情信息
【代码】zdppy_api+vue3+antd前后端分离开发,使用描述列表组件渲染用户详情信息。原创 2024-07-02 20:40:45 · 278 阅读 · 0 评论 -
使用zdppy_api+onlyoffice word文档在线共同编辑,附完整的vue3前端代码和python后端代码
我们在共同编辑的时候,每个用户可以打开不同的文档,也可以打开同一个文档。A用户输入ctrl+s保存的时候,文档会被实时保存。当A用户和B用户先后重新加载文档的时候,看到的都是实时保存之后的文档。经过实际的测试,A用户编辑文件的时候,B用户能够实时的看到文档的编辑结果,并且能够查看到是哪个用户在对文档做编辑。另外一个问题:如何使得加载同一个文档,但是用户不一样?原创 2024-07-01 21:51:32 · 1014 阅读 · 0 评论 -
zdppy_api+vue3+antd开发前后端分离的预加载卡片实战案例
【代码】zdppy_api+vue3+antd开发前后端分离的预加载卡片实战案例。原创 2024-07-01 13:19:17 · 269 阅读 · 0 评论 -
zdppy_api+vue3+antd开发前后端分离的tab卡片
【代码】zdppy_api+vue3+antd开发前后端分离的tab卡片。原创 2024-07-01 13:13:27 · 347 阅读 · 0 评论 -
antd组件库如何实现中文日历组件
【代码】antd组件库如何实现中文日历组件。原创 2024-07-01 11:44:19 · 165 阅读 · 0 评论 -
primeflex overflow样式类相关的用法和案例
文档地址:https://primeflex.org/overflow。原创 2024-06-30 21:59:36 · 330 阅读 · 0 评论 -
fastapi+vue3前后端分离开发第一个案例整理
cors跨域是浏览器的问题,只要使用浏览器,不同IP或者不同端口之间通信,就会存在这个问题。文档地址:https://fastapi.tiangolo.com/zh/tutorial/first-steps/5、在vue3中,使用axios请求fastapi开发的接口,并将接口的返回数据,渲染到vue3开发的页面中。文档:https://fastapi.tiangolo.com/zh/tutorial/cors/文档:https://primeflex.org/修改 src/App.vue。原创 2024-06-30 21:16:58 · 1104 阅读 · 0 评论 -
zdppy_api+vue3实现前后端分离的登录功能
实现思路1、准备zdppy的开发环境2、使用amauth提供的低代码接口,直接生成login登录接口3、使用之前开发的登录模板渲染登录界面4、给登录按钮绑定点击事件5、给用户名和密码的输入框双向绑定数据6、使用axios在登录按钮点击的时候,携带用户数据发送POST登录请求7、处理登录接口的响应完整代码后端代码.envZDPPY_MCRUD_HOST=127.0.0.1ZDPPY_MCRUD_PORT=3306ZDPPY_MCRUD_USERNAME=rootZDPPY_MCRU原创 2024-06-30 08:46:21 · 620 阅读 · 0 评论 -
onlyoffice官方文档中打开文件示例的相关测试
结论:建议不用,因为如果我们想要对onlyoffice做更细致的学习的话,不可能避免的要经常查阅官方文档,而官方文档中提供的都是js代码,不便于测试。另外,我们经过对官方文档的详细学习以后,封装出适合自己的组件,会更有价值。所以可以推断出,即使不安装这个组件依赖,我们照样能够通过官方文档中,提供的js相关的代码,进行文档的渲染。通过上面的测试,我们可以得出结论,使用vue组件库和不使用,在效果上来说是类似的,几乎没有什么区别?这里的重点是,如果我们移除了vue的组件依赖以后,是否还能够正常渲染?原创 2024-06-26 21:37:09 · 493 阅读 · 0 评论 -
onlyoffice实现在单页面加载文档的功能
基本原型是,有个按钮,没有点击按钮的时候,页面显示的时普通的内容。当点击这个按钮的时候,页面加载文档并渲染到普通内容原本的位置进行替换。这里我们的样式库使用的是Tailwindcss,我们的前端UI组件库使用的是Ant Design Vue。下面的代码进行了基本的实现,但是遗留了一个问题,就是没有动态的加载文档。// 设置语言 en / zh-CN。怎么动态的加载文档呢?原创 2024-06-26 21:13:40 · 592 阅读 · 0 评论 -
onlyoffice实现打开文档的功能
如果要解决点击按钮以后,根据key渲染不同的文档,还需要额外做一些操作。4、通过vue-router自带的路由跳转,实现点击跳转页面。上面的方案,没办法解决动态渲染不同文档的问题。有个按钮,点击这个按钮,打开指定的文档。// 设置语言 en / zh-CN。// 设置语言 en / zh-CN。3、定义document文档页面。1、引入vue-router。3、点击按钮跳转到文档页面。2、定义index首页。2、首页里面有个按钮。原创 2024-06-26 20:38:04 · 715 阅读 · 0 评论 -
zdppy_api+vue3实现批量上传文件的功能
【代码】zdppy_api+vue3实现批量上传文件的功能。原创 2024-06-26 15:39:31 · 108 阅读 · 0 评论 -
zdppy_api+vue3+antd实现批量上传文件的功能
在文件上传成功以后,我们提取上传文件的唯一标识,追加到了要回显的文件列表中。在这个版本中,能够实现文件上传以后,通过文件列表的链接点击以后进行回显。但是有个问题,那就是文件的状态一直是加载中。这个版本中,简化了前端的代码。原创 2024-06-26 14:24:16 · 628 阅读 · 0 评论 -
zdppy_api+vue3+antd实现文件上传功能
因为zdppy框架是一个低代码框架,所以后端接口是特别简单的一句话就能搞定。经过大量的尝试以后,前端代码最终以自定义请求方法的形式成功了。原创 2024-06-26 13:01:47 · 270 阅读 · 0 评论 -
AntDesignVue 的开关禁用状态案例
通过按钮绑定点击事件,这样当我们点击的时候,就会自动触发切换禁用状态的功能。// 切换禁用状态的方法。// 开关的选中状态。// 开关的禁用状态。原创 2024-06-25 11:12:10 · 269 阅读 · 0 评论 -
Vue3整合Tailwindcss实现渲染动态类
【代码】Vue3整合Tailwindcss实现渲染动态类。原创 2024-06-25 08:53:50 · 641 阅读 · 0 评论 -
fastapi+vue3+primeflex前后端分离开发项目第一个程序
响应式变量,指的是,我们在程序运行过程中,动态修改了变量的值以后,页面中的渲染效果也会自动跟着改变的变量。如果我们在页面中,反向修改了响应式变量的值,内存中真实的响应式变量的值也会跟着修改。有点抽象,直接看代码:// 处理成功情况 console . log("response" , response);// 处理错误情况 console . log(error);// 总是会执行 });import// 处理成功情况 console . log("response" , response)原创 2024-06-22 21:56:59 · 840 阅读 · 0 评论 -
fastapi+vue3+primeflex前后端分离开发项目环境搭建
使用Pycharm打开文件夹,然后配置python解释器为venv虚拟环境。项目名叫frontend,编程语言选择JavaScript。然后使用webstorm打开项目,并配置npm快捷启动。浏览器访问:http://localhost:5173/编写第一个程序:main.py。原创 2024-06-22 20:39:06 · 315 阅读 · 0 评论 -
AntDesignVue Rate 评分 实现五星好评功能
支持给出四星半,三星半之类的半颗星的评价。原创 2024-06-18 10:20:00 · 833 阅读 · 0 评论 -
AntDesign Vue Radio 单选框
【代码】AntDesign Vue Radio 单选框。原创 2024-06-18 09:50:08 · 591 阅读 · 0 评论 -
input输入框的前缀和后缀
"value变化了:""value变化了:""value变化了:"原创 2024-06-17 20:35:21 · 358 阅读 · 0 评论 -
antd vue 输入框基础案例
通过鼠标或键盘输入内容,是最基础的表单域的包装。原创 2024-06-17 20:26:42 · 406 阅读 · 0 评论 -
axios打通fastapi和vue,实现前后端分类项目开发
axios是一个前后端交互的工具,负责在前端代码,调用后端接口,将后端的数据请求到本地以后进行解析,然后传递给前端进行处理。我现在,想要把message的内容,在前端进行展示,这个时候就需要使用到axios了。原创 2024-06-15 21:59:14 · 933 阅读 · 0 评论