coralime的博客

【加解密】前后端接口交互使用AES加解密。接口数据加解密是前后端分离开发非常常见的应用场景。

CSS flex经典布局 顶部固定底部固定 中间内容自动撑开

【代码背景】最近写了10+表，上线以后时不时要改需求，一旦改动就是10+的工作量，所以决定把表格抽离出来单独写个组件，方便以后复用修改，这应该是写过最复杂的组件封装了，特此记录，小白一枚，接触vue也没多久，欢迎大家学习交流哦。开发环境：vue + element ui【准备工作】封装组件的目的是方便复用，也就是多个地方引用相同或相似的组件功能，所以在封装之前一定要弄清楚，针对目前的Table需要封装哪些功能，有哪些共性可以抽离出来。这部分的思考非常重要，是影响组件封装质量的重要权衡点，所以

【背景小记】el-table的el-table-column如果不指定width的话，会自动设定一个宽度，表格内容会自动换行，对强迫症用户来说非常不友好，为了追求完美用户体验，所以这里需要实现两个效果：1. 强制表格内容不换行显示2. 实现表格列宽自适应撑开【代码实现】<template> <el-table ref="tableRef" v-loading="loading" :data="tableDat

传统用户名+密码+验证码的登录模式已经令人厌烦了，手机APP扫码登录才是顺应潮流，原本以为很复杂，查了一些资料，后来发现其实实现逻辑很简单，特此记录一下，以后可能会经常用到。

【需求描述】最近有一批报表需要同期更换日期选择框的逻辑及样式，之前为了偷懒都是在单页面独自写的，更换起来甚是麻烦，于是重写了日期组件，方便复用，这说明偷的懒总有一天要还回来的。现在通过这个小组件来复习一下组件的复用吧。【代码实现】#1#-> /components下创建子组件DateRangeSelect/index.vue<template> <div> <el-date-picker v-model="start_date

【问题描述】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..

想做一个最简单的展示投票结果页面，大致像下面这样实现很简单，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 === '

【代码背景】有这样一个业务需求场景，有大概十几张表归属于某个类别，用户希望在同一个页面，通过选择不同的查询指标展示不同的表格，这些表的表头样式类似但是又不完全相同，怎么做呢？ 到目前为止所有基于Element UI的表格样式都是直接在页面写死的，像官方这样：<el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" wid...

【代码背景】前端工作中经常需要用到相似的功能模块，例如对话框，大量重复单个页面的做法虽然简单粗暴但既不符合代码复用的指导原则也不利于后期维护，更重要的是浪费时间且不优雅，因此可以把大量的重复功能模块封装成一个组件，要使用的时候直接引用就可以了。【代码目标】 实现两个页面：HomePage.vue和NavBar.vue共用一个修改用户密码的对话框ModifyPswd.vue，并实现父->子以及子->父的双向传值。【代码实现】ModifyPswd.v...

<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" .

#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...

html<template> <div> <el-col :span="8"> <el-form> <el-form-item label="演练开始日期" prop="startTime" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]"> &l

[项目基本情况]本地测试：tomact环境发布：weblogic环境[部署流程]#1-> 前端打包vue项目根目录下新建 vue.config.js 指定静态资源访问地址module.exports = { publicPath: './'}其他路径方式可参考：https://www.jb51.net/article/184694.htm修改 main.js 中axios指定的默认url请求地址，把本地测试接口改为正式发布接口地址// 本地测试接口axi

[业务场景]前端上传附件到后端指定文件夹 /static/images中，前端请求下载附件。由于上传附件的名称和真实存放文件名称不一致，前端直接通过文件名请求下载的名字是随机生成的UUID名，对用户非常不友好。因此，应当使用后端以文件流的形式返回下载。[后端] Spring Boot 以文件流的形式返回/* * 根据文件名进行文件下载 * */ @GetMapping("/download") public void fileDownload(St.

业务需求，多页面业务场景共用同一个模板，换不同路由地址请求，在同一个页面模板上返回不同数据。[index.js]设置多个路由指向同一页面，注意path和name必须具有唯一性 { path: '/column', name: 'column', component: () => import('../components/partycolumn/ColumnPage') }, { path: '/column1', name: 'colu

【原因】vue项目复制到其他路径下，无法正常启动，原因是原地址编译后npm会有缓存，而这个缓存新地址的缓存不一致，才会导致编译出错。【解决方法】1. 删除项目里的node_modules文件夹注意没法手动删除node_modules文件夹，需要专门的删除工具辅助安装全局的rimrafnpm install rimraf -g执行删除命令rimraf node_modules2. 执行 npm installcnpm install3. 启动 npm run.

js加密后台加密解密以及验证码 - HeavenTang - 博客园https://www.cnblogs.com/heavenTang/p/7306447.htmlVUE和Spring Boot前后端交互报文加密https://www.jianshu.com/p/9a4cb5613b50前后端API交互加密解密（js、Java）https://blog.youkuaiyun.com/qq_35250826/article/details/106111767Vue与Sprin...

【项目背景】考虑登录时的验证安全，需要添加验证码验证，纯前端实现的验证码其实没有真正意义上做到安全验证的要求，简单一个网页爬虫就能获取到前端生成的验证码，所以应该由后台生成验证码，并由后台完成校验过程。【实现思路】登录页面初始化的时候，向后台请求返回base64格式的图片流，渲染到验证码控件上，前端用户输入验证码提交到后台进行对比校验。【实现过程】Spring Boot 后端代码#1#-> 先创建一个验证码图片生成类VertifyCodeUtils.javapackag.

【写在前面的话】应项目安全需求，登录验证要新增验证码，下意识觉得是前端的工作，后来才发现前端验证了个寂寞，真正安全的验证码验证工作应该交给后台来做，此是后话，先记录一下纯前端实现的验证码模块。【实现过程】#1#-> 在/componets/下创建一个新的组件，命名为VertifyCode.vue<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWid.

最近在研究富文本编辑器，要求直接从Excel表格粘贴复制到编辑器中，并成功渲染出表格样式在vue中渲染一段纯HTML一般会采用v-html，但是这种方式下所有样式都会失效<div v-html="this.editorData" class="content-html"></div><style scoped lang="less"> .content-html{ /* table 样式 */ table { border-

基于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...

启动vue项目后，地址栏会默认带一个#原因是vue-router提供了两种模式，一种Hash模式（默认），一种History模式。vue-router 默认为 hash 模式，当 URL 改变时，页面不会重新加载，只是根据 hash 来更换显示对应的组件，这就是所谓的单页面应用。在Hash模式下路由地址会默认带一个#，修改成History模式就行了。在/router/index.js页面下，修改mode方式const router = new VueRouter({ mode:

前端vue+后端spring boot，第一次采用这种分离形式进行开发，最近项目要上线了，需要部署到服务器上，因为自己还是刚刚接触学习这种分离开发的模式，部署的时候遇到了很多问题，最近几天搞这个上线的事情被虐得心态差点崩溃，刚从一个坑里出来立马又被拖进另一个坑，深刻体会到——学海无涯苦作舟，特此记录小结一下，也算是小白踩坑的一个小小纪念吧。下图展示了前端项目和后端项目的基本结构，接下来就是如何编译、打包、最终成功部署到服务器上去。#-> 关于前后端分类项目的部署方式，一般有两种（1）.

最近在做一个移动端的项目，使用了京东开发的UI框架NutUI，官网地址：http://nutui.jd.com/#/index，统一的京东式电商风格，组件丰富度一般，没有Grid，没有Panel，写一些基础样式还是可以的，但是bug挺多的，没耐心的建议谨慎入坑。有一个需求展示模型得分，当时决定用圆形进度条来表现，官网给的demo如下：但是在本地开发中，浏览器进行模拟调试的时候，显示一切正常，在手机上调试的时候，图中的进度条（红色部分）就显示不出来了，原先还考虑过是不是前端代码对于color渲染格

vue-easytable是一款基于vue的简单表格插件 GitHub：https://github.com/huangshuwei/vue-easytable 文档：http://doc.huangsw.com/vue-easytable/app.html#/intro 排序有两种实现方式，一种是前端通过比较字段大小实现，一种是通过请求后台数据接口直接返回排序好的数据，这里采用的是第一种方式，即前端排序。给<v-table>添加三个标签:multiple-sort=

【项目背景】最近要求做一个Excel表格上传下载的前端页面，第一次学Vue，Element-UI框架真的用起来很方便，封装了各种基础组件，很适合小白入门开发学习。Element-UI：https://element.eleme.cn/#/zh-CN最终效果如下，为降低用户上传错误数据的概率，先提供一下下载模板，然后再让用户上传。【程序结构】#1-> 文件下载下载一般分两种情况，一种是去后台请求接口下载数据流的方式，这种情况适用于需要根据用户自定义需求请求数据库的情况，另一.