草庐IT

前后端分离项目(十):实现"改"功能(前后端)

好家伙,本篇介绍如何实现"改"我们先来看看效果吧 (这可不是假数据哟,这是真数据哟) (忘记录鼠标了,这里是点了一下刷新) FirstOfAll 我们依旧先来理一下思路:首先在"管理"页面中,我能看到所有的书本信息,随后,在每一个信息后都有对应的"修改按钮"当我点击这个按钮时,我要①拿到这个这条数据的id($router传参)然后②跳转到"信息修改界面",(这个界面会像书本添加的那个界面一样,有两个输入框,一个提交按钮,一个重置按钮)这时,我向后端③请求到当前这条"id"的相关数据(举例:{id:1,name:三体1,auther:刘慈欣})将它展示到"信息修改界面"的输入框中,随后,你可以将

如何使用 Ajax 实现上传图片时预览及上传进度效果

一、引言  继上次实现文件上传功能后,产品经理又提出了新的需求:上传图片预览及进度条效果。本次就来搞定这个功能,这次开发基于上次的随笔,需要的小伙伴们自取--如何使用Ajax实现简单的文件上传。二、了解原理  要想实现文件预览效果,这里使用的是FileReader对象。使用它的readAsDataURL方法将图片内容转化为URL格式的Base64字符串,然后就可以在其onload事件中用src属性将图片渲染到页面进行预览了。  要想实现文件上传进度效果,这里使用的是xhr(XMLHttpRequest)的progress事件。在此方法中我们可以获取到文件的总大小以及已经发送的大小,进而计算得到

JS中URLSearchParams的基本用法

本章将和大家分享JS中URLSearchParams的基本用法。话不多说,下面我们直接来看代码。一、JS中URLSearchParams的基本用法DOCTYPEhtml>htmllang="en">head>metacharset="UTF-8">metahttp-equiv="X-UA-Compatible"content="IE=edge">metaname="viewport"content="width=device-width,initial-scale=1.0">title>JS中URLSearchParams的基本用法title>scriptsrc="/lib/vue.js">s

基于SqlSugar的开发框架循序渐进介绍(11)-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结

随着Vue3和TypeScript的大浪潮不断袭来,越来越多的Vue项目采用了TypeScript的语法来编写代码,而Vue3的JS中的Setup语法糖也越来越广泛的使用,给我们这些以前用弱类型的JS语法编写Vue代码的人不少冲击,不过随着大量的学习和代码编写,经历过一段难熬的时间后,逐步适应了这种和之前差别不小的写法和冲击。本篇随笔介绍总结了Vue3中一些常见的基于TypeScript的Setup语法与组合式API的处理代码案例。TypeScript(简称ts)是微软推出的静态类型的语言,相比于js,TypeScript拥有强类型、编译器严谨的语法检查、更加严苛的语法,TypeScript是

如何使用 Ajax 实现上传图片时预览及上传进度效果

一、引言  继上次实现文件上传功能后,产品经理又提出了新的需求:上传图片预览及进度条效果。本次就来搞定这个功能,这次开发基于上次的随笔,需要的小伙伴们自取--如何使用Ajax实现简单的文件上传。二、了解原理  要想实现文件预览效果,这里使用的是FileReader对象。使用它的readAsDataURL方法将图片内容转化为URL格式的Base64字符串,然后就可以在其onload事件中用src属性将图片渲染到页面进行预览了。  要想实现文件上传进度效果,这里使用的是xhr(XMLHttpRequest)的progress事件。在此方法中我们可以获取到文件的总大小以及已经发送的大小,进而计算得到

JS中URLSearchParams的基本用法

本章将和大家分享JS中URLSearchParams的基本用法。话不多说,下面我们直接来看代码。一、JS中URLSearchParams的基本用法DOCTYPEhtml>htmllang="en">head>metacharset="UTF-8">metahttp-equiv="X-UA-Compatible"content="IE=edge">metaname="viewport"content="width=device-width,initial-scale=1.0">title>JS中URLSearchParams的基本用法title>scriptsrc="/lib/vue.js">s

基于SqlSugar的开发框架循序渐进介绍(11)-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结

随着Vue3和TypeScript的大浪潮不断袭来,越来越多的Vue项目采用了TypeScript的语法来编写代码,而Vue3的JS中的Setup语法糖也越来越广泛的使用,给我们这些以前用弱类型的JS语法编写Vue代码的人不少冲击,不过随着大量的学习和代码编写,经历过一段难熬的时间后,逐步适应了这种和之前差别不小的写法和冲击。本篇随笔介绍总结了Vue3中一些常见的基于TypeScript的Setup语法与组合式API的处理代码案例。TypeScript(简称ts)是微软推出的静态类型的语言,相比于js,TypeScript拥有强类型、编译器严谨的语法检查、更加严苛的语法,TypeScript是

CSS之行内元素排列之间的缝隙问题及解决方案

1DOCTYPEhtml>2htmllang="en">3head>4metacharset="UTF-8"/>5metahttp-equiv="X-UA-Compatible"content="IE=edge"/>6metaname="viewport"content="width=device-width,initial-scale=1.0"/>7title>Documenttitle>8style>9*{10margin:0;11padding:0;12}13#wrap{14background-color:pink;15width:500px;16height:400px;17text

需求:vue 动态添加el-input

一、效果图二、实现逻辑将需要动态添加的表单项项的绑定值存为一个数组以循环的方式展示form表单点击`+`按钮触发事件,向数组中新加一个item点击`-`按钮触发事件,根据循环的得到的index来删除数组中相对应位置的item三、代码实现template>div>el-button@click="isDilogShow=true"plain>动态添加inputel-button>el-dialogtitle="特工安排":visible.sync="isDilogShow":close-on-click-modal="false"width="400px">el-formref="form":m

需求:vue+element-ui+sortable.js表格行和列拖拽(宽度自定义)

一、效果图二、代码实现注:需要安装依赖  pnpmisortablejs-Stemplate>divstyle="padding:15px">h3style="text-align:left;padding:10px;background:#ccc">vue+element-ui+sortable.js表格行和列拖拽h3>属性border可实现单元格拖拽获得字段宽度的改变--`@header-dragend`具体参考官网的方法-->el-tableref="dataTable":data="customColumnList"class="customer-table"borderrow-key