HELLO_小仙女~-优快云博客

原创前端vue项目中使用sql-formatter结合codemirror实现sql编辑器中的SQL代码格式化功能、自动匹配大小写功能、高亮功能

vue实现codemirror代码编辑器中的SQL代码格式化功能、自动匹配大小写功能、高亮功能前几天公司项目需要做个类似HUE的sql编辑器，需要实现sql语句的格式化功能、自动匹配大小写、代码高亮等功能。现部门是做大数据的，所以各种数据各种sql各种hive，对于我一个纯前端妹子来讲对什么后台呀什么sql语句呀一点也不感兴趣，更是完全不懂。头大~~原本领导说是让我研究HUE源码，提取js，b...

2020-03-26 18:01:13 20591 66

原创 vue实现横向时间轴组件

前言：项目中有需要用到横向时间轴，网上大部分组件不满足功能需要，于是自己写了一个。先上简单的demo。功能：默认获取初始数据显示对应的时间轴和时间点。当超出屏幕后，滑动滚动条加载更多页，类似分页加载。某个大的时间轴节点鼠标放入需要显示相关信息。某两个大节点之间会有子节点出现。每个子节点会有对应的内容展示...

2022-04-08 14:05:29 14368

原创 iview 填坑之Tag点击事件

iview 填坑之Tag点击事件在用到iview Tag组件时，使用@click触发点击事件并没有任何效果。去查iView官网发现只是看到了on-close关闭事件。解决方法：使用@click.native处理<Tag type="border" v-for="(item, index) in designerData.designerLabel" :key="index" @click.native="addDesignerTag(item)">{{item.name}}</Tag

2021-12-01 15:06:25 1504

原创解决iview模态框modal在使用@on-ok事件时，校验失败时也会关闭模态框

问题场景：iview踩坑之modal模态框使用@on-ok事件后，即使校验失败也会关闭模态框。解决方案：使用中的自定义插槽slot来自定义写底部按钮，然后通过v-model控制模态框的显示与隐藏。<Modal v-model="modifyImgModel"> <div slot="footer" align="center"> <Button class="btn" size="default" type="default" @click="cancel

2021-11-18 15:59:34 3165 2

原创 webpack打包提示: The following entrypoint(s) combined asset size exceeds the recommended limit

webpack打包时会出现：原因是因为webpack打包提示文件体积过大导致报错。优化方案：module.exports = { configureWebpack: config => { // 开发环境时生效 if (process.env.NODE_ENV === 'production') { config['performance'] = { // 警告 webpack 的性能提示 hints: 'warning',

2021-10-18 17:43:41 1066

原创 webpack优化之productionSourceMap设置

webpack中有一项productionSurceMap设置，productionSourceMap是什么？是打包后是否让每个js文件都生成一个.map文件？true代表生成，false代表不生成。那么.map文件作用是什么？因为打包后代码都是经过压缩加密的，如果出现报错情况，输出错误信息，不会知道是哪里代码有问题，.map就行没有加密一样，能准确输出哪一行出错了。下面让我们看下设置前后变化：查看下打包后的dist文件下js文件，每个文件都会生成.map文件：再让我们看下dist包的大小：

2021-10-18 17:02:05 6577 1

原创 Flutter如何引用第三方库

Flutter使用第三方库步骤：以english_words为例1.您可以在pub.dartlang.org上搜索english_words软件包以及其他你想使用到的开源软件包：2.在pubspec.yaml中添加第三方库名称及版本号：3.在控制台拉取第三方库到本地：4.在代码中使用，在文件顶部引入：import 'package:english_words/english_words.dart';...

2021-03-29 14:08:59 1898

原创在Windows上搭建Flutter开发环境及在VScode和android studio中运行

Flutter环境安装和配置android studio 配置功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细

2021-03-24 17:07:16 497

转载常见的web漏洞及其防范

十大常见web漏洞一、SQL注入漏洞SQL注入攻击（SQL Injection），简称注入攻击、SQL注入，被广泛用于非法获取网站控制权，是发生在应用程序的数据库层上的安全漏洞。在设计程序，忽略了对输入字符串中夹带的SQL指令的检查，被数据库误认为是正常的SQL指令而运行，从而使数据库受到攻击，可能导致数据被窃取、更改、删除，以及进一步导致网站被嵌入恶意代码、被植入后门程序等危害。通常情况下，SQL注入的位置包括：（1）表单提交，主要是POST请求，也包括GET请求；（2）URL参数提交，主要

2020-09-11 15:43:43 1149

原创 vue双向数据绑定原理、vue2和vue3原理的不同点

受疫情影响，今年各行业不景气，各岗位的跳槽形势也不是很高。所以趁此机会好好蓄力，复习面试题吧。现在中高级前端面试时都会被面试官问道原理性的知识。有些人就是实践很好，但就是理论知识不行。不过要想拿高薪，理论和实践还是要双结合的。Vue数据双向绑定原理在这里是需要区分vue2和vue3的，它们底层是不同的。（一）Vue2双向数据绑定原理简单理解：vue2数据双向绑定是由数据劫持结合发布-订阅的模式实现的，通过object.defineProperty()来劫持对象属性的getter和setter操作，

2020-07-30 11:49:56 2135 3

原创 React-Native安装配置环境搭建（夜神模拟器中运行）

React-Native环境搭建一.安装JAVA JDKJava和React Native没有直接关系.他们是两个不同的东西. React Native允许您仅使用JavaScript构建移动应用程序.它可以让您为Android设备构建移动应用程序。Android设备使用基于Java平台的SDK。所以我们先下载java jdk1.首先去官网下载JDK：JAVA JDK下载（注意，下载时需要登录Oracle账号，这个不需要用自己邮箱去注册，注册了也不能用，直接百度搜索下就能找到能使用的账户和.

2020-07-21 18:01:59 1198

原创解决vue-cli2和vue-cli3项目分别打包后dist文件中index.html出现空白

是不是遇到过在vue项目在开发环境下一切正常，但在npm run build之后，打开dist文件中的index.html页面却是一片空白，打开控制台发现报错：Failed to load resource: net::ERR_FILE_NOT_FOUND出现这个问题的话，需要查看自己使用的是vue-cli2还是vue-cli3，他们处理方式不一样。一.vue-cli2处理方式：项目中找到config/index.js文件，将assetPublicPath的路径改为“./”即可。二.

2020-07-08 11:18:06 2411 2

原创通过JS动态设置meta标签，根据手机屏幕分辨率自动缩放适配各手机（包括适配华为、oppo大屏幕手机、钉钉、微信）

JS动态添加meta标签，根据手机屏幕分辨率自动缩放适配各手机（包括适配华为、oppo大屏幕手机、钉钉、微信进入）5月28晚上周四下班接了一个急活，一个面向国外的国际官方网站，三方适配+兼容。说是月底上线，mama呀，加上周六日也只有3天时间，这不是明摆着让我加班到天亮么。开发进度相对顺利，星期天测试同学在家测试也相对顺利，因为手机有限，也一直没测试出什么bug，周一到公司借用了一些同事的手机，发现从微信里面打开，钉钉打开，oppe和华为部分手机打开都不能适配手机屏幕。解决办法想到了使用动态加载meta标

2020-06-03 18:36:09 3272

Mini_小仙女的博客