刚刚好ā-CSDN博客

CryptoJS是标准安全加密算法的JavaScript实现，运行速度快，接口简单，见名知意。文档说明可参考：CryptoJS文档说明。版权声明：本文为CSDN博主「凌波漫步&」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。CryptoJS的实现主要有哈希算法，HMAC、加密算法、以及常用编解码算法。哈希算法，如MD5、SHA-1、SHA-2等。编解码算法，如Base64、Hex16等。加密算法，如AES、DES等。一、安装crypto-js。

2023-03-24 18:33:27 2688

转载 vue页面嵌入脚本开发代码块vue-prism-editor的实现(可编辑代码，有格式化)

vue页面嵌入脚本开发代码块vue-prism-editor的实现(可编辑代码，有格式化)

2022-12-22 18:49:07 1068

转载标准文档流、脱离文档流及脱离文档流的3种方式

1、如果元素不再满足浏览器的默认布局排版，也就是说将元素从默认的布局排版中拿走，此时这个元素不再占有它在标准流中的位置。那么这时这个元素就脱离了文档标准流，此时就是脱离文档流了。2、元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。3、脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。既要实现既要并排，又要设置宽高，此刻就要脱离标准流。

2022-09-07 16:37:22 4254 1

转载 CSS中的BFC详解：定义、触发方式及应用场景

BFC就是一个css的一个布局概念，是一个独立的区域，是一个环境。Block Formatting Context：块级格式化上下文。W3C的官方解释：它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用，当涉及到布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。BFC的目的：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。

2022-09-07 16:12:59 287

转载 Vue中的scoped实现原理和样式穿透方法及原理

当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。

2022-09-07 15:59:47 288

原创 js中截取字符串substring()\slice()、截取特殊字符前后的字符串及将字符串全部转化为小写、字符串首字母转化为大写

1.substring()：提取字符串中两个指定的索引号之间的字符start,stop)startstop可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。2.substr()：从起始索引号提取字符串中指定数目的字符.substr(start,length)startlength3.slice()：提取字符串的片断，并在新的字符串中返回被提取的部分。

2022-09-07 15:18:24 953

原创 vue js中使用typeof和Object.prototype.toString.call()判断类型（超详细），浅析call()和apply()的区别

vue js中使用typeof和Object.prototype.toString.call()判断类型（超详细），浅析call()和apply()的区别

2022-08-02 14:56:07 4747

原创 el-table中加入el-input框和el-input-number框，实现el-table的可编辑功能

在需要加入el-input和el-input-number的列使用template即可。

2022-07-29 16:58:30 3412 3

原创 vue中el-table的行拖拽和el-dialog中表格的行拖拽

以上行拖拽的方法适用于实现效果的第一种情况，即根据querySelector('.el-table__body-wrappertbody')可找到页面中的el-table实现拖拽。（2）页面中有el-table，el-table中点击出现弹框，弹框中有el-table，实现弹框中的表格拖拽。5.vue页面中使用mounted挂载行拖拽的方法，使其页面加载即可调用。3.使用el-table需有唯一的key值，如id。（1）el-table的行拖拽（可整行拖拽）这样就实现了el-table的行拖拽功能。...

2022-07-29 16:42:33 5444 3

原创 element+vue 消息提示设置为不重复出现的方法（局部即单个页面实现）

现在需设置element中Message消息提示不重复出现，即对现在点击时是否出现message进行判断，若存在则不重复出现，否则出现消息提示。代码解释对目前的el-message是否出现进行判断若没出现进行消息提示，若出现则关闭消息提示。...

2022-07-29 15:39:39 773

原创 vue中使用el-table设置排名前三用金银铜的图标展示，其余排名正常展示

实现效果：实现方式：<el-table :data="tableData" :header-cell-style="{ color: 'rgba(255,255,255,1)', textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" > <el-table-column label="排名" type="index" width="57px">

2022-05-26 10:22:29 4534 4

原创 Cesium中el-tree点击其勾选框对应数据上球，点击球上部分出现弹窗和高亮，取消勾选球上数据消失

实现目标：点击el-tree中的勾选框，对应的数据渲染至地球上，点击地球上的对应数据，该处出现高亮及弹框信息。取消勾选框后，高亮和弹框信息均消失。实现方法：vue

2022-05-20 14:49:16 713 1

原创 vue前后端实现WebSocket的连接，数据库变化后后端推送的消息在前端主动推送，同时实现页面的部分更新

实现目标：前后端通过WebSocket建立连接，当数据库发生变化后后端向前端推送消息，前端将展示后端推送的消息，同时实现页面部分数据的更新。实现方法：vue文件中：data中：wsUrl: 'xxxx/ws/xxxx/ws/dem/',methods中：// ---- WebSocket连接start ---- initWebSocket() { let randomNum = Math.round(Math.random() * 100) //初始化weosoc

2022-05-19 07:45:00 3454

原创 vue前端登录接口对接

实现目标：实现登录接口的对接，并将接口返回的token存至本地localStorage中。接口信息：api的js文件中：import axios from 'axios';export function loginD(params) { return axios.get(`${g_config.base__URL}/xxxx/${params.username}/${params.password}`);}其中，g_config.base__URL已在global.co

2022-05-18 16:44:31 1813

原创利用for循环和flex布局同时做多个样式大致相同内容不同的div盒子，:style=“`background: url(${item.img})`“添加盒子的不同背景图片

实现目标：采用for循环取数组中的数据，结合flex布局生成多个盒子，减少代码冗余。实现效果：实现方法：1.template中：这里涉及到图片的添加，直接采用img标签，以及背景图片的添加，是采用:style="`background: url(${item.img})`"的形式。<div class="box"> <div class="box-content" v-for="(item, index) in statistic" :key="index" :

2022-05-11 14:06:41 704

原创 Cesium中将wkt数据转化为geoJSON格式后渲染至地球上

实现目标：点击显示按钮，调用后端传递来的接口接收wkt数据，在vscode中将wkt数据转化为geoJSON格式，并渲染至地球上。点击关闭按钮，渲染效果移除。实现方法：一.调用后端接口1.后端Swagger中：2.api的js文件中：export function getAllData() { return request({ url: '/xxxx/xxxx/all', method: 'get', });}3.vue文件中：

2022-05-10 17:16:38 2006

原创 vue中文件的上传功能el-upload的实现，新增和编辑中实现文件上传，文件格式只能为word和pdf，且上传功能与后端接口对接

实现目标：1.新增文件：点击新增按钮，出现弹窗，点击上传文件，选择文件后，点击确定按钮，实现文件的上传，且限制文件格式只能为word和pdf格式。2.编辑文件：点击重新上传按钮，出现弹窗，点击上传文件，选择文件后，点击确定按钮，实现文件的上传，且限制文件格式只能为word和pdf格式。实现效果：1.新增文件：2.编辑文件：实现方法：1.后端的swagger中：2.api的js文件中：上传文件：（新增接口必须与该接口结合使用）exp...

2022-05-08 08:30:00 9333

原创 vue中文件下载功能通过与后端对接接口实现

实现目标：点击下载按钮，浏览器下方出现下载的文件，word文件将下载为word文件格式，不会进行pdf的转换。实现效果：实现方法：1.后端swagger中：2.api的js文件中：export function planDownloadById(param) { return request({ url: '/xxxx/xxxx/download', method: 'post', data: param, .

2022-05-07 19:00:00 2492 1

原创 vue文件以pdf的形式展现预览功能实现，与后端接口对接实现预览功能

实现目标：点击预览按钮，浏览器出现新的窗口，展示为附件的pdf的格式呈现，此功能与后端进行接口对接。实现效果：实现方法：（与后端对接口实现，后端将word格式转化为pdf格式）1.后端的swagger中2.api的js文件中export function previewFileById(param) { return request({ url: '/xxxx/xxxx/preview', method: 'post', .

2022-05-07 14:09:54 1606

原创 vue中新增和编辑两个功能共用一个弹窗和弹窗确定按钮，调用接口的处理方式（一）--- 同一个vue页面

实现目标：点击新增和编辑按钮时出现同一个弹窗，但展示信息不同，分别对接新增和编辑接口。直观效果：前端页面中的新增和编辑按钮点击新增按钮出现的弹框：点击编辑出现的弹框：新增和编辑均是通过确定按钮来对接接口。后端swagger：api下的js文件：// 新增export function insertMaterial(param) { return request({ url: '/xxxx/xxxxx/insert', .

2022-04-20 18:00:32 8790 3

原创 vue 利用$on和$emit进行页面间的跨组件传值和调用

实现目标：两个vue页面没有任何关联，其中vue1页面要调用vue2中的方法。实现代码：中间存储实体：在utils下新建dataCenterBus.js文件import Vue from 'vue';export default new Vue();vue1页面：（调用vue2页面中的方法）首先引入中间实体文件import dataCenterBus from '@/utils/dataCenterBus';在需要调用所需方法处采用$emit引用引号中为两个vue文

2022-04-15 20:34:13 2281 1

原创 Cesium光照效果添加，且添加倾斜摄影后实现日照阴影效果

实现效果：实现光照效果的代码：全局定义inter，便于后续的使用。let inter = null此时的光照效果为当前时间的光照效果。viewer.scene.globe.enableLighting = true viewer.shadows = true viewer.terrainShadows = Cesium.ShadowMode.RECEIVE_ONLY //viewer.shadowMap.softShadows = true vi..

2022-04-12 15:51:10 6646 6

原创 vue全局设置ajax请求拦截hookAJAX()

设置Cookie进行统一拦截，使全局都携带Cookie，便于系统中权限的控制展示。在系统的main.js文件中设置：其中this.setRequestHeader的Authorization为cookie中存储的token。在cookie中存储token的具体方法详见：/*全局设置ajax请求拦截*/hookAJAX()function hookAJAX () { XMLHttpRequest.prototype.nativeOpen = XMLHttpRequest.prototy

2022-04-11 19:30:00 1274

原创 vue在Cookie和对localStorage的封装中存储登录用户的token、用户名等信息

在系统登录后将用户登录的token、用户名信息分别存储至Cookie和localStorage中，便于系统后续不同用户权限的控制。一、存储在Cookie中的文件封装在src的utils中新增auth.js文件，文件代码为：import Cookies from 'js-cookie';const TokenKey = 'Authorization';export function getToken () { return Cookies.get(TokenKey);}expor

2022-04-11 14:53:58 3042

原创 vue点击按钮出现盒子再次点击关闭盒子，以及两次点击提示不同信息的方法

实现效果：点击按钮出现盒子提示‘盒子出现’，再次点击盒子消失提示‘盒子消失’。按钮的样式：<el-button type="text" @click="btnShow">点击这个按钮</el-button> <div v-show="open">这是盒子内容</div>data中的默认值：open：false点击方法：btnShow() { this.open = !this.open },这样就实现了点击按钮展

2022-03-31 06:15:00 1782

原创 el-tree设置利用setCheckedNodes/setCheckedKeys默认勾选节点，以及通过setChecked新增勾选指定节点

实现目标：在生成el-tree时，默认勾选其中某几个选项；或在进行某个选项的选中时，同时勾选上另一个选项。实现效果：在生成树结构时，默认勾选其中的两个选项。在勾选其中一个选项时，另一个选项也被同时勾选。实现方法：<el-tree :data="data" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps"&

2022-03-30 14:08:34 31312

原创 el-tree通过接口获取数据，并给所有叶子节点添加icon图标

实现目标：与后端对接接口，后端对返回的el-tree数据的叶子节点进行了标识，即leaf为true时代表为叶子结点，leaf为false时为非叶子节点。现要实现将所有的叶子节点前加icon图标。实现效果：实现方法：vue文件中： <el-tree :data="dataTree" node-key="id" default-expand-all > <span slot-scope="{ node, data }"> &lt

2022-03-30 11:22:25 1900 1

原创生成el-tree，勾选叶子节点后cesium在地球上同时添加多个图标，点击图标出现对应弹窗，与后端对接获取相应数据（并设置了只有叶子节点可以勾选）

实现目标：获取监控树，其中监控树只有叶子节点才有多选框，点击多选框在地球上添加多个图标，左击不同的图标出现对应的实时监控画面。监控树的数据以及实时监控的画面都是通过与后端对接接口获取的。添加一个图标上图并点击出现弹窗可参考：Cesium添加图标后点击该图标出现弹窗的具体实现方法_刚刚好ā的博客-CSDN博客_cesium同时添加多个图标的重点是：获取到数组后，将数组传递给cesium添加图标的方法，并对其进行处理，获取对应的经纬度，进而上图。vue文件的template中：监控树：&l

2022-03-19 11:15:00 885 1

原创 el-tree只有叶子节点才显示勾选框vue-element

实现效果：template中：引用element的el-tree，其中show-checkbox为显示勾选框，选择true，默认所有节点均有勾选框。<el-tree class="tree" :check-strictly="true" :data="datatree" :render-content="eventRender" :show-checkbox="true" /.

2022-03-18 17:33:37 3270

原创 div或button添加鼠标悬浮提示信息的多种方法小结vue

1.利用elementUI组件里的Tooltip 文字提示实现原始页面：实现效果：当鼠标悬浮在上左按钮时，出现提示信息实现代码：<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start"> <el-button>上左</el-button></el-tooltip>参数说明：参数说明类

2022-03-18 17:19:55 26044 1

中间件技术简介

空空如也