Web前端
关注
分享
扫一扫
文章平均质量分 68
Vue、纯html，好看的样式、动效都有
繁华尽头满是殇
万丈高楼平地起
展开
-
Springboot 配合 Vue 保存前端上传的文件
Springboot 配合 Vue 保存前端上传的文件前言一、后端代码二、前端前言新建一个 Springboot 项目，前端我使用原生 html 来演示上传，你们用 element 或者其他什么的比较方便。一、后端代码@RequestMapping("/upload")public void upload(MultipartFile multipartFile) throws IOException { //获取前端上传的文件 String fileName = multipa原创 2022-02-25 10:42:49 · 943 阅读 · 0 评论 -
Springboot 配合 Vue 让用户下载文件
Springboot 配合 Vue 让用户下载文件前言一、后端二、前端接收下载前言创建一个 Springboot 项目，也可以是普通 Java 项目，前端用 Vue 的 axios 接收下载一、后端解析都在注释里@RequestMapping("/download") public void download(HttpServletResponse response) throws Exception { //这里写要让前端下载的文件的路径 File file原创 2022-02-25 08:49:41 · 3299 阅读 · 4 评论 -
解决 Vue 使用 $ref 调用子组件方法时的控制台报错
解决 Vue 使用 $ref 调用子组件方法时的控制台报错报错原因解决办法报错原因代码和控制台报错this.$refs.chatting.getMessageLib()上述报错大多出现在操作弹窗子组件的页面元素的情景中，原因是子组件还未渲染到父组件的 DOM 中，就开始对子组件的元素进行操作了解决办法解决办法是把 ref 方法放到 vue 的内置函数中，$nextTick 可以等待 DOM 渲染完成后在调用里面的方法，这样控制台就不会出现报错了。this.$nextTick(() =&原创 2022-02-16 21:59:29 · 3135 阅读 · 3 评论 -
Springboot 引入 EasyExcel 写入数据到流 直接让前端下载（Vue + axios请求）
EasyExcel 写入表让前端下载（Vue + axios请求）一、Springboot 引入 EasyExcel 依赖二、后端代码三、前端代码一、Springboot 引入 EasyExcel 依赖如果你在网上看到还要引入 poi 什么的依赖，那是针对旧版 easyexcel ，现在的版本不需要引入其他依赖，就下面的就可以了。<dependency> <groupId>com.alibaba</groupId> <artifactId&g原创 2022-01-17 08:49:12 · 6646 阅读 · 3 评论 -
Vue和Springboot实现SM4加密和解密（前、后端均可）
网站配置 https 比较麻烦，所以为了我们的用户账户安全，密码在从前端传输到后端的过程中，最好加密一下，选用 SM4 有两个原因，一是国产加密算法，二是这个国密算法是对称的，只要加密和解密的 key 和 vi 相同，可以很容易的解密，同时需要匹配 key 和 vi 又兼顾了安全。我下面会提供前端的 SM4 加密 js 文件，vue 项目也可以使用，还有 Java 的 SM4 加密和解密文件。可实现前端加密传输到后端解密，存到数据库，后端也可以解密传输到前端进行明文的显示。原创 2021-12-24 17:00:05 · 28581 阅读 · 89 评论 -
Vue+Springboot上传图片将 Base64 码转换为图片保存在指定文件夹
整体思路：vant插件默认的图片从前端上传到后端，是以 base64 码的形式传输的，而 base64 码很长很长，有几千个字符，存入数据库会占用空间，每次读取都传输 base64 的话也很消耗带宽和流量，所以后端接收以后要转化 base64 为图片存到硬盘或服务器，而数据库只保存图片的物理地址的路径，例如 F:/img/aa.png。原创 2021-12-21 10:37:43 · 11938 阅读 · 7 评论 -
Springboot物理地址映射和Nginx静态资源代理实现前端上传并访问服务器图片
Springboot物理地址映射+Nginx静态资源代理实现前端上传并访问服务器图片前言一、Nginx 静态资源代理配置二、Springboot 物理地址映射配置总结前言为什么要配置物理地址映射：因为前端的 <img :src="">或者 :style="background-img(url)"这些，如果要给这些标签动态赋值，从后端传来的路径必须是 url 形式，也就是说带冒号的动态src或者url不支持绝对路径的物理地址。 所以要配置物理地址映射把图片的的物理地址映射为 url 地址传给原创 2021-12-20 11:08:40 · 6732 阅读 · 4 评论 -
Vue使用alibaba的iconfont矢量图标
Vue引入并使用alibaba阿里巴巴的iconfont矢量图标原创 2021-11-30 20:35:11 · 1271 阅读 · 0 评论 -
Vuex.Store里mutations和actions的区别，并实现异步加载的延时计数器
Vuex.Store里mutations和actions的区别，并实现异步加载的延时计数器前言先上代码在说话解析运行代码异步加载延时计数器前言mutations和actions都是Vuex.Store里定义函数的方法mutations定义的函数的参数都有一个state，表示store里的整个state数据，同步加载actions定义的函数里的参数是content，代表整个store对象，用于异步加载先上代码在说话便于比较，我把mutations和actions写到了一起<!DOCTYPE原创 2021-05-10 11:55:11 · 2418 阅读 · 2 评论 -
Vue动态路由的Query和Params传参方式
Vue动态路由的Query和Params传参方式一、Query传参二、Params传参两种传参方式的区别QueryParams一、Query传参<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport原创 2021-05-10 11:16:47 · 748 阅读 · 0 评论 -
使用JavaScript实现网页上鼠标点击生成爱心图案
使用JavaScript实现网页上鼠标点击生成爱心图案代码<script> !function(e, t, a) { function r() { for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -原创 2020-06-29 20:25:05 · 1543 阅读 · 0 评论 -
使用CSS实现变色霓虹文字
使用CSS实现变色霓虹文字代码实现效果代码<span class="name">Name</span><style>.name{ font-size:50px; background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #FF512F; font-weight:原创 2020-06-29 19:26:55 · 1007 阅读 · 0 评论 -
使用纯JavaScript实现全网页动态樱花飘落特效
使用纯JavaScript实现全网页樱花飘落特效前言代码实现效果如图前言很多人都喜欢一些花里胡哨的特效，我也挺喜欢，分享给大家代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head&原创 2020-06-29 19:16:10 · 192465 阅读 · 36 评论 -
用纯CSS改变网页滚动条的样式
用纯CSS改变网页滚动条的样式代码如图所示滚动条的样式已改变代码<style> .test{ width: 50px; height: 200px; overflow: auto; float: left; margin: 5px; border: none; } .scrollbar{ width: 30px; height: 300px;原创 2020-06-29 19:07:58 · 374 阅读 · 0 评论