草庐IT

Vue-Router

全部标签

在vue2项目中使用vue-quill-editor实现富文本编译器

1安装npminstallvue-quill-editor--save 2引入有两种引入方式(1)全局引入(main)import VueQuillEditorfrom'vue-quill-editor'//调用编辑器//样式import'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'import'quill/dist/quill.bubble.css'Vue.use(VueQuillEditor)(2)局部引入import{quillEditor}from'vue-quill-editor'exportdefault{c

Vue3使用axios的配置教程详解

1.安装npminstall--saveaxiosvue-axios2.在src根目录创建service文件夹。然后创建axios.js2.1在axios.js添加拦截器,请求拦截:initAxios.interceptors.request;响应拦截:initAxios.interceptors.responseimportaxiosfrom"axios";constinitAxios=axios.create({timeout:1800000//数据响应过期时间})//请求拦截器initAxios.interceptors.request.use((config)=>{//在发送之前做点什

Vue3和SpringBoot集成SocketIO(WebSocket)

目录前言一、SocketIO和WebSocket是什么?二、使用步骤1.SocketIO2.WebSocket总结前言由于公司业务需要,需要使用WebSocket发送消息提示,但一开始的技术选型是使用SocketIO,但由于SocketIO独占一个端口,所以就放弃了,但是换原生WebSocket之前已经把SocketIO全部测试ok了,所以今天就把SocketIO和WebSocket一起过一遍。使用的过程也都参考其他文章,这里主要记录一下自己的使用思路以及方法。下面开始我们今天的学习吧!一、SocketIO和WebSocket是什么?WebSocket实现了服务端和客户端之间的实时事件以及消息

vue3 插槽详解

一、插槽的应用场景    在某些场景中,封装组件,我们可能想要为子组件传递一些模板片段,让子组件在它们的组件中渲染这些片段。由此出现了插槽二、插槽的内容与出口1、出口封装的组件代码如下图所示://出口2、内容页面对封装组件的应用按钮importmyButtonfrom"./components/myButton.vue";注意:为插槽默认指定内容,代码如下图所示封装组件的代码:提交应用组件代码:importmyButtonfrom"./components/myButton.vue";运行结果如下图所示: 图一 插槽赋值 图二 插槽默认值 三、插槽的分类1、一般插槽只有插槽的出口以及内容(赋值

vue中加载使用cesium加载3dTileset以及三维模型移动(1.108版本)

cesium加载3dTileset代码如下palaceTileset=awaitCesium.Cesium3DTileset.fromUrl("url",{skipLevelOfDetail:true,baseScreenSpaceError:1024,skipScreenSpaceErrorFactor:16,skipLevels:1,immediatelyLoadDesiredLevelOfDetail:false,loadSiblings:false,cullWithChildrenBounds:true,progressiveResolutionHeightFraction:1,dyn

vue3 开启 https

1、安装mkcert证书创建器npmimkcert-g2、检验是否安装成功mkcert--version有版本好出现则成功3、创建证书颁发机构mkcertcreate-ca会在当前目录生成,ca.crt和ca.key两个文件4、创建证书mkcertcreate-cert会在当前目录生成,cert.crt和cert.key两个文件 5、将生成的ca.crt安装到Windows电脑6、在vue3中 vite.config.js使用import{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";importfsfrom"fs";imp

在线聊天室(Vue+Springboot+WebSocket)

实现了一个简单的在线聊天室的前后端。前端用Vue实现,后端用Springboot实现。一、项目描述1.整体功能描述        在线聊天室的功能包括创建用户和显示在线用户列表、发送消息和显示消息列表、用户和消息列表实时更新这几点。以下是整体功能的活动图:2.实现思路用户身份    进入聊天室的用户需要有一个身份,为了简便,只需要一个唯一的id和一个用户名即可。用户名由用户自定义,id由服务端分配。    客户端通过将id和用户名记录在sessionStorage来保存用户信息,而服务端通过用户的id及session来区分用户,为此,服务端需要维护一个在线用户列表,来记录用户的信息。    如

直接在*.vue文件(SFC)中使用JSX/TSX渲染函数,真香!

前言在日常开发中vue的模版语法在大多数情况都能够满足我们的需求,但是在一些复杂的业务场景中使用模版语法就有些麻烦了。这个时候灵活的JSX/TSX渲染函数就能派上用场了,大多数同学的做法都是将*.vue文件改为*.tsx或者*.jsx文件。其实我们可以直接在*.vue文件中直接使用JSX/TSX渲染函数。什么场景需要使用JSX/TSX渲染函数假设我们现在有这样的业务场景,在我们的页面中有个list数组。我们需要去遍历这个数组,根据每一项的item去渲染不同的组件。如果tem的数据满足条件A,那么就渲染组件A。如果item的数据满足条件B,那么就渲染组件B。如果item的数据满足条件C,那么就渲

直接在*.vue文件(SFC)中使用JSX/TSX渲染函数,真香!

前言在日常开发中vue的模版语法在大多数情况都能够满足我们的需求,但是在一些复杂的业务场景中使用模版语法就有些麻烦了。这个时候灵活的JSX/TSX渲染函数就能派上用场了,大多数同学的做法都是将*.vue文件改为*.tsx或者*.jsx文件。其实我们可以直接在*.vue文件中直接使用JSX/TSX渲染函数。什么场景需要使用JSX/TSX渲染函数假设我们现在有这样的业务场景,在我们的页面中有个list数组。我们需要去遍历这个数组,根据每一项的item去渲染不同的组件。如果tem的数据满足条件A,那么就渲染组件A。如果item的数据满足条件B,那么就渲染组件B。如果item的数据满足条件C,那么就渲

Spring boot + vue 实现图片(头像)的上传等操作

   老实说,一开始觉得这个图片的上传没那么复杂,刚开始自己的构思是前端传来图片文件,后端接收,先将文件存在本地的一个文件里面,然后根据前端传来的图片名称,结合后端所存的图片地址路径,拼凑出一个web访问的url地址,把这个地址存在数据库中,需要回显的时候就从数据库中查询出这个url,结合前端标签的src属性将请求后端获取的url地址填上去,就能将图片显示出来。    起初,是这样子设想,只是落实到代码的时候要考虑的细节就比较多了。现在我只是做的一个头像的更换。这里面的细节还是挺多的。所以在此就记录一下,也方便以后自己查看。    先看看效果吧,前端写的不太好看,不过也够用了。