- 博客(90)
- 收藏
- 关注
RSS订阅
原创 【vue】基于ElementUI封装了一个自定义Table组件
【代码背景】最近写了10+表，上线以后时不时要改需求，一旦改动就是10+的工作量，所以决定把表格抽离出来单独写个组件，方便以后复用修改，这应该是写过最复杂的组件封装了，特此记录，小白一枚，接触vue也没多久，欢迎大家学习交流哦。开发环境：vue + element ui【准备工作】封装组件的目的是方便复用，也就是多个地方引用相同或相似的组件功能，所以在封装之前一定要弄清楚，针对目前的Table需要封装哪些功能，有哪些共性可以抽离出来。这部分的思考非常重要，是影响组件封装质量的重要权衡点，所以
2022-03-21 11:45:49
3850
原创 【vue】ElementUI el-table自适应列宽实现
【背景小记】el-table的el-table-column如果不指定width的话，会自动设定一个宽度，表格内容会自动换行，对强迫症用户来说非常不友好，为了追求完美用户体验，所以这里需要实现两个效果：1. 强制表格内容不换行显示2. 实现表格列宽自适应撑开【代码实现】<template> <el-table ref="tableRef" v-loading="loading" :data="tableDat
2022-03-15 15:53:53
45498
12
原创 【vue】使用手机app扫描二维码登录
传统用户名+密码+验证码的登录模式已经令人厌烦了，手机APP扫码登录才是顺应潮流，原本以为很复杂，查了一些资料，后来发现其实实现逻辑很简单，特此记录一下，以后可能会经常用到。
2022-03-08 11:22:42
4181
原创 【vue】组件复用小demo：日期组件
【需求描述】最近有一批报表需要同期更换日期选择框的逻辑及样式，之前为了偷懒都是在单页面独自写的，更换起来甚是麻烦，于是重写了日期组件，方便复用，这说明偷的懒总有一天要还回来的。现在通过这个小组件来复习一下组件的复用吧。【代码实现】#1#-> /components下创建子组件DateRangeSelect/index.vue<template> <div> <el-date-picker v-model="start_date
2022-03-08 09:29:50
487
原创 【vue】element ui 表格优化——解决显示错位问题
【问题描述】ElementUI el-table 动态显示表格的时候，会发生显示错位的情况，拖拽一下又恢复正常了，这是要逼死强迫症【解决办法】1. 给表格添加ref标志 <el-table ref="tableRef" :data="tableData"></el-table>2.doLayout对 Table 进行重新布局具体参看：Element - The world's most popular Vue UI frameworkwa..
2022-02-17 11:38:28
2341
1
原创 【css】关于一个投票结果页面结合进度条的实现
想做一个最简单的展示投票结果页面，大致像下面这样实现很简单，UI框架是VantUI<template><div class="div_parent" v-for="(item) in voted_list" :key="item.id"> <!--默认背景色是#fff--> <van-cell class="css_voted_result_list" v-if="isVoted === '
2021-09-01 15:25:33
722
原创 【vue】基于ElementUI实现动态表格
【代码背景】有这样一个业务需求场景，有大概十几张表归属于某个类别，用户希望在同一个页面，通过选择不同的查询指标展示不同的表格，这些表的表头样式类似但是又不完全相同，怎么做呢？ 到目前为止所有基于Element UI的表格样式都是直接在页面写死的，像官方这样：<el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" wid...
2021-07-30 22:52:06
15380
10
原创 【vue】组件复用：父子组件传值记录
【代码背景】前端工作中经常需要用到相似的功能模块，例如对话框，大量重复单个页面的做法虽然简单粗暴但既不符合代码复用的指导原则也不利于后期维护，更重要的是浪费时间且不优雅，因此可以把大量的重复功能模块封装成一个组件，要使用的时候直接引用就可以了。【代码目标】 实现两个页面：HomePage.vue和NavBar.vue共用一个修改用户密码的对话框ModifyPswd.vue，并实现父->子以及子->父的双向传值。【代码实现】ModifyPswd.v...
2021-07-16 10:19:12
409
2
原创 【SpringBoot】定时任务+Java后台调用Get/Post方法
#->1 定时任务参考：https://www.bilibili.com/video/BV1KW411F7oX?t=563&p=25Service下新建ScheduleService.javapackage com.finance.providerscore.service;import org.springframework.scheduling.annotation.Scheduled;import org.springframework.stereotype.Se
2021-06-23 11:56:13
792
原创 【vue】ElementUI Table控件 可编辑动态增删改查
<template> <el-card> <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddDetails" >添加 </el-button> <el-button type="success" icon="el-icon-delete" .
2021-05-13 17:01:53
944
原创 搭建vue环境 小白安装全记录
#1#-> 安装nvmnvm是一个node.js的版本管理器。Github地址：https://github.com/nvm-sh/nvm下载地址：https://github.com/coreybutler/nvm-windows/releasesnvm-noinstall 免安装版本，需要手动配置一些环境变量nvm-setup 在线引导式安装，推荐这种方式按照引导提示，设置好安装目录后，点击next，直到安装完成。默认安装nvm的地址是[C:\Users...
2021-04-25 14:23:05
300
原创 【vue】基于element-ui 开始日期 结束日期 可选范围控制
html<template> <div> <el-col :span="8"> <el-form> <el-form-item label="演练开始日期" prop="startTime" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]"> &l
2021-04-23 14:41:14
332
原创 【SpringBoot】本地到发布环境的文件上传bug记录
【环境说明】本地测试环境：win10 + tomact发布测试环境：win server 2012 R2 + welogic【代码说明】后端接收前端的文件MultipartFile[] uploadFileList，完成上传操作void UploadUtils(MultipartFile[] uploadFileList, Integer articleID, String pathURL, String type) throws IOException { for..
2021-03-31 11:49:19
223
2
原创 Vue+Spring Boot 前后端分离开发部署步骤
[项目基本情况]本地测试：tomact环境发布：weblogic环境[部署流程]#1-> 前端打包vue项目根目录下新建 vue.config.js 指定静态资源访问地址module.exports = { publicPath: './'}其他路径方式可参考：https://www.jb51.net/article/184694.htm修改 main.js 中axios指定的默认url请求地址，把本地测试接口改为正式发布接口地址// 本地测试接口axi
2021-03-29 16:28:54
378
原创 【vue】前后端分离模式vue + spring boot的文件下载方式
[业务场景]前端上传附件到后端指定文件夹 /static/images中，前端请求下载附件。由于上传附件的名称和真实存放文件名称不一致，前端直接通过文件名请求下载的名字是随机生成的UUID名，对用户非常不友好。因此，应当使用后端以文件流的形式返回下载。[后端] Spring Boot 以文件流的形式返回/* * 根据文件名进行文件下载 * */ @GetMapping("/download") public void fileDownload(St.
2021-03-28 18:04:14
1071
原创 【vue】实现多个路由共享同一个页面
业务需求，多页面业务场景共用同一个模板，换不同路由地址请求，在同一个页面模板上返回不同数据。[index.js]设置多个路由指向同一页面，注意path和name必须具有唯一性 { path: '/column', name: 'column', component: () => import('../components/partycolumn/ColumnPage') }, { path: '/column1', name: 'colu
2021-03-27 13:16:43
10310
原创 【vue】vue项目文件夹移动以后无法正常启动问题
【原因】vue项目复制到其他路径下，无法正常启动，原因是原地址编译后npm会有缓存，而这个缓存新地址的缓存不一致，才会导致编译出错。【解决方法】1. 删除项目里的node_modules文件夹注意没法手动删除node_modules文件夹，需要专门的删除工具辅助安装全局的rimrafnpm install rimraf -g执行删除命令rimraf node_modules2. 执行 npm installcnpm install3. 启动 npm run.
2021-03-26 10:51:38
4192
2
原创 前后端加解密书签集合
js加密后台加密解密以及验证码 - HeavenTang - 博客园https://www.cnblogs.com/heavenTang/p/7306447.htmlVUE和Spring Boot前后端交互报文加密https://www.jianshu.com/p/9a4cb5613b50前后端API交互加密解密（js、Java）https://blog.csdn.net/qq_35250826/article/details/106111767Vue与Sprin...
2021-03-11 14:29:24
111
原创 【sprintboot+vue】前后端分离模式下的登录验证码后端验证实现记录
【项目背景】考虑登录时的验证安全，需要添加验证码验证，纯前端实现的验证码其实没有真正意义上做到安全验证的要求，简单一个网页爬虫就能获取到前端生成的验证码，所以应该由后台生成验证码，并由后台完成校验过程。【实现思路】登录页面初始化的时候，向后台请求返回base64格式的图片流，渲染到验证码控件上，前端用户输入验证码提交到后台进行对比校验。【实现过程】Spring Boot 后端代码#1#-> 先创建一个验证码图片生成类VertifyCodeUtils.javapackag.
2021-03-10 16:01:45
3154
2
原创 【vue】纯前端登录验证码实现记录
【写在前面的话】应项目安全需求，登录验证要新增验证码，下意识觉得是前端的工作，后来才发现前端验证了个寂寞，真正安全的验证码验证工作应该交给后台来做，此是后话，先记录一下纯前端实现的验证码模块。【实现过程】#1#-> 在/componets/下创建一个新的组件，命名为VertifyCode.vue<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWid.
2021-03-10 10:47:18
2128
1
原创 【vue】关于v-html内容中css样式失效解决办法
最近在研究富文本编辑器，要求直接从Excel表格粘贴复制到编辑器中，并成功渲染出表格样式在vue中渲染一段纯HTML一般会采用v-html，但是这种方式下所有样式都会失效<div v-html="this.editorData" class="content-html"></div><style scoped lang="less"> .content-html{ /* table 样式 */ table { border-
2021-03-02 16:45:49
3897
原创 【Vue】Quill-Editor富文本编辑器
基于Vue的Quill-Editor富文本编辑器 #1#-> 在vue项目中安装插件npm install vue-quill-editor --save#2#-> 在项目中引用插件，全局或者单组件引入，具体可参考https://www.jianshu.com/p/a6cba69d6e49https://www.cnblogs.com/zly430/p/10895307.html这里采用的全局引用方式，在main.js中引入插件import VueQuil...
2021-02-25 12:54:36
1420
1
原创 【Vue】去掉默认地址栏的#以及后续问题
启动vue项目后，地址栏会默认带一个#原因是vue-router提供了两种模式，一种Hash模式（默认），一种History模式。vue-router 默认为 hash 模式，当 URL 改变时，页面不会重新加载，只是根据 hash 来更换显示对应的组件，这就是所谓的单页面应用。在Hash模式下路由地址会默认带一个#，修改成History模式就行了。在/router/index.js页面下，修改mode方式const router = new VueRouter({ mode:
2021-02-24 09:52:38
2182
原创 【vue+spring boot】前后端分离的项目部署记录
前端vue+后端spring boot，第一次采用这种分离形式进行开发，最近项目要上线了，需要部署到服务器上，因为自己还是刚刚接触学习这种分离开发的模式，部署的时候遇到了很多问题，最近几天搞这个上线的事情被虐得心态差点崩溃，刚从一个坑里出来立马又被拖进另一个坑，深刻体会到——学海无涯苦作舟，特此记录小结一下，也算是小白踩坑的一个小小纪念吧。下图展示了前端项目和后端项目的基本结构，接下来就是如何编译、打包、最终成功部署到服务器上去。#-> 关于前后端分类项目的部署方式，一般有两种（1）.
2020-09-26 01:41:46
1237
原创 【vue】基于vue框架的圆形进度条ProgressBar
最近在做一个移动端的项目，使用了京东开发的UI框架NutUI，官网地址：http://nutui.jd.com/#/index，统一的京东式电商风格，组件丰富度一般，没有Grid，没有Panel，写一些基础样式还是可以的，但是bug挺多的，没耐心的建议谨慎入坑。有一个需求展示模型得分，当时决定用圆形进度条来表现，官网给的demo如下：但是在本地开发中，浏览器进行模拟调试的时候，显示一切正常，在手机上调试的时候，图中的进度条（红色部分）就显示不出来了，原先还考虑过是不是前端代码对于color渲染格
2020-09-25 22:31:39
4284
原创 【vue】vue-easytable实现字段排序功能
vue-easytable是一款基于vue的简单表格插件 GitHub：https://github.com/huangshuwei/vue-easytable 文档：http://doc.huangsw.com/vue-easytable/app.html#/intro 排序有两种实现方式，一种是前端通过比较字段大小实现，一种是通过请求后台数据接口直接返回排序好的数据，这里采用的是第一种方式，即前端排序。给<v-table>添加三个标签:multiple-sort=
2020-09-18 15:43:45
2201
原创 【Vue】基于Element-UI的文件上传与下载
【项目背景】最近要求做一个Excel表格上传下载的前端页面，第一次学Vue，Element-UI框架真的用起来很方便，封装了各种基础组件，很适合小白入门开发学习。Element-UI：https://element.eleme.cn/#/zh-CN最终效果如下，为降低用户上传错误数据的概率，先提供一下下载模板，然后再让用户上传。【程序结构】#1-> 文件下载下载一般分两种情况，一种是去后台请求接口下载数据流的方式，这种情况适用于需要根据用户自定义需求请求数据库的情况，另一.
2020-09-18 10:54:40
10918
3
原创 【SpringBoot】第一次运行SpringBoot的HelloWorld Demo错误记录
#-> ERROR 1An incompatible version [1.2.12] of the Apache Tomcat Native library is installed, while Tomcat requires version [1.2.14]解决办法：版本不兼容，直接去Apache的官网下载对应版本替换即可解决下载地址：http://archive.apache.org/dist/tomcat/tomcat-connectors/native/1.2.14...
2020-07-07 16:35:50
343
原创 【WeUI】日历控件Calendar动态修改最小日期和最大日期
有这样一种需求，选择[开始时间]和[结束时间]，接待时间自动设置起始时间和终止时间。使用的日历控件是WeUI官方的Calendar。<!--出差时间--><div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">出差时间</label></div> <div class="weui-cell__bd"&...
2020-06-03 11:21:32
4213
2
原创 【WeUI】关于jQuery WeUI和WeUI版本兼容的问题
最近做的一个小demo，在添加Dialog的时候出现了对话框显示的问题，如下左图所示。一开始以为自己的写的CSS文件影响了，注释掉还是这个问题，所以问题指向很明确了，是官方weui.css的问题。但是官方demo里的运行是正常显示的。index.jsp页面引入了weui.css还有jquery-weui.css一般使用jQuery WeUI时也需要依赖weui.css的，所以在jQuery WeUI解压后的dist/lib还会提供对应的weui.css我的demo里用的 w...
2020-06-01 13:26:42
1592
1
原创 【jQuery】jQuery遍历一段具有相同结构里的元素
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>Title</title> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script></he...
2020-05-28 20:40:56
226
原创 【win】WINDOWS10系统自带桌面整理工具
最近强迫症又犯了，所有东西全丢在桌面，感觉桌面乱糟糟的，但是又不想下一堆没用的什么XX桌面整理工具，恰好看到一篇文写的就是win10自带的桌面整理，超级好用，特此记录下来。#1-> 新建一个文件夹，名字自定义，放置位置随意（我不想放系统盘就丢D盘了）#-2-> 自定义文件夹的图标（告诉我...我不是最后一个知道原来系统图标可以换的...>0<）右键文件夹 ->【属性】->【自定义】->【更改图标】除了系统自带的可选图标之外，可以自己.
2020-05-27 11:50:00
19285
1
原创 【JavaWeb】jQuery WeUI框架 地址选择器 City-Picker 自定义demo
jQuery WeUI City-Picker Demo：http://www.jqweui.cn/extends#city-picker官方的city-picker提供了两种样式：（1）省级-市级-区级（2）省级-市级（不显示区级）最近开发的应用有一个新的需求，由于是在湖北省内使用，要求不显示“湖北省”，选择市级-区级，而且地址名称可自定义。city-picker.js 里有按JSON组织的 rawCitiesData ，例如“湖北省-武汉市-武昌区”的组织结构如下所示。
2020-05-26 17:34:07
3058
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人