sxmfendou的博客

原创 根据文件路径跳转到对应的文件的vscode插件

原创 技术革命的阵痛：程序员在裁员浪潮中如何立于不败之地

在这个过程中，程序员需要不断提升自己的技能，保持对新技术的敏感度，以应对市场的变化。最后，对于未来，程序员们需要展望技术行业的趋势，了解新技术的发展方向。在这种情况下，程序员们需要时刻保持对新技术和工具的学习状态，不仅仅是为了应对裁员风险，更是为了保持职业竞争力。总的来说，程序员在技术变革中所面临的裁员风险是一项巨大的挑战，但也是一个充满机遇的时刻。然而，裁员不仅仅是职业层面的挑战，还可能对个体的心理健康产生负面影响。然而，随着技术的不断变革，裁员风险也逐渐升温，给程序员们带来了前所未有的职业挑战。

原创 CSS让图片置灰

背景图片置灰加上样式：background-blend-mode: hue;image图片置灰，给图片加样式.img{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; opa.

原创 uniapp移动端——企业微信H5调用jssdk实现扫一扫，通过weixin-java-cp获取ticket签名，配置config

代码最终部署到服务器上，将服务器的IP配置到白名单里，这样调试就不会提示IP不在白名单范围内，此界面在系统管理员界面有。后端使用的是https://github.com/binarywang/的weixin-java-cp开发工具。（3）新增QywxService，使用weixin-java-cp中的WxCpServiceImpl生成签名。此时获取的url可以是域名重定向后的带端口的，但是此url需要在企业微信上进行可信域名登记。（2）在main.js全局引入weixin-js-sdk。

原创 vue-drag-resize-rotate 拖拉拽旋转

【代码】vue-drag-resize-rotate 拖拉拽旋转。

原创 前端开发代码规范工具

前端工程化的常见代码规范工具有：ESLint: 一个用于 JavaScript、JSX 等语言的可配置的代码检查工具。Stylelint: 一个 CSS/Less/Sass 等样式代码的 linter。Prettier: 支持多种语言的代码格式化工具。Husky: 一个流行的用于配置 git hooks 的工具。lint-staged: 对提交到暂存区的文件进行检查的工具。EditorConfig: 统一不同编辑器配置的工具。commitlint: 检查提交消息是否符合规范。

原创 vscode 点击import引用的组件直接跳转方法

window点击ctrl 进入 import引入的文件，方法等等跳转到所在文件。在根目录新建文件 jsconfig.json并添加一下代码。

原创 uni-app跨域解决方案

2.配置uni-app 中 manifest.json->h5->devServer。这样请求webpack会解析为请求。

原创 uni-app中设置radio和switch的大小

由于radio和switch组件不支持width和height属性设置，所以使用transform属性可解决大小问题。

原创 前端开发者必备的Nginx知识

* 反向代理**（Reverse Proxy）方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。如上面的图，前面是众多的服务窗口，下面有很多用户需要服务，我们需要一个工具或策略来帮助我们将如此多的用户分配到每个窗口，来达到资源的充分利用以及更少的排队时间。将请求优先分配给压力较小的服务器，它可以平衡每个队列的长度，并避免向压力大的服务器添加更多的请求。

转载 一名【合格】前端工程师的自检清单

下面我会把我的自检清单分享给大家，你可以按照清单上的知识检测自己还有哪些不足和提升，我也建议大家建自己的知识体系，这样工作或者学习甚至面试时，你能快速定位到知识清单中的点，如果你有哪些我没归纳到的点，欢迎在评论区告诉我。其实在这个信息发达的时代最不缺的就是资源，如何从众多的资源中获取到真正精华的部分，是非常重要的，资源在于精不在于多，强烈建议在保证深度的情况下再保证广度。据我了解的大部分前端对这部分知识有些欠缺，甚至抵触，但是，如果突破更高的天花板，这部分知识是必不可少的，而且我亲身经历——非常有用！

原创 前端代码质量-圈复杂度原理和实践

圈复杂度(Cyclomatic complexity) 是一种代码复杂度的衡量标准，也称为条件复杂度或循环复杂度，它可以用来衡量一个模块判定结构的复杂程度，数量上表现为独立现行路径条数，也可理解为覆盖所有的可能情况最少使用的测试用例数。简称 CC。其符号为 VG 或是 M。圈复杂度在 1976 年由 Thomas J. McCabe, Sr. 提出。圈复杂度大说明程序代码的判断逻辑复杂，可能质量低且难于测试和维护。程序的可能错误和高的圈复杂度有着很大关系。

原创 ECharts合集

地址：http://ppchart.com/#/地址：http://chartlib.datains.cn/echarts地址：https://www.isqqw.com/地址：https://www.makeapie.cn/echarts地址：http://chart.365api.cn/#/

原创 ios时间转换时间戳问题

uniapp

原创 火狐浏览滚动条设置颜色以及宽度

火狐浏览滚动条设置颜色以及宽度

原创 gif混合模式

mix-blend-mode: screen;

原创 uni-app:使用uni.downloadFile下载文件并保存到手机

在uni-app中下载文件需要先获取文件的临时路径，然后再进行保存，才算下载成功：// #ifdef APP-PLUS const downloadTask = uni.downloadFile({ url: 'http://xxxxxxxx.com.cn/'+url, //仅为示例，并非真实的资源 success: (res) => { if (res.statusCode === 200) { console.log('下载

转载 使用 WebSocket 连接 MQTT 服务器

近年来随着 Web 前端的快速发展，浏览器新特性层出不穷，越来越多的应用可以在浏览器端通过浏览器渲染引擎实现，Web 应用的即时通信方式 WebSocket 也因此得到了广泛的应用。WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 通信协议于2011年被 IETF 定为标准 RFC 6455，并由 RFC 7936 补充规范。WebSocket API 也被 W3C 定为标准。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客

转载 2021-04-20

vue监听浏览器返回监听返回mounted () { if (window.history && window.history.pushState) { // 向历史记录中插入了当前页 history.pushState(null, null, document.URL); window.addEventListener('popstate', this.goBack, false); }},destroyed

原创 vuepost方式文件下载

<el-buttonstyle="margin-right:0.1rem;"@click="exportFile"size="small"type="primary">导出模板</el-button>exportFile(){constreq=newXMLHttpRequest();...

转载 vue-calendar基于vue的日历插件

vue-calendar-component基于 vue 2.0 开发的轻量，高性能日历组件 占用内存小，性能好，样式好看，可扩展性强 原生 js 开发，没引入第三方库效果Install npm i vue-calendar-component --save cnpm i vue-calendar-component --save //国内镜像 1 2Usage //vue文件中引入 import Calendar from 'v..

原创 element 走马灯实现图片轮播

<template><div id="banner"><!--动态将图片轮播图的容器高度设置成与图片一致--><el-carousel :height="bannerHeight + 'px'"><!--遍历图片地址,动态生成轮播图--><el-carousel-item v-for="item in imgList":key="item">...

原创 css渐变写法 从左到右渐变三种颜色示例

background: linear-gradient(to right,#061aa8,#2bafc2,#fd2a15);实现效果：

原创 vue-echarts使用以及 tooltip不显示问题解决

第一种是像普通js一样引入Echarts； 第二种是使用VueCharts；vue-echarts使用方法1. npm install echarts vue-echarts2. 在main.js 里面 按需引入模块，比如我需要折线图，代码如下：import Vue from 'vue'import ECharts from 'vue-echarts'import 'echarts/lib/chart/line'遇到问题1.图表初始化后渲染出来也不报错：...

原创 Vue刷新页面的三种方式

我们在写项目的时候，经常会遇到，用户执行完某个动作，改变了某些状态，需要重新刷新页面，以此来重新渲染页面。如：用户登录成功、增加、删除、更新等。1.原始方法：location.reload();2.vue自带的路由跳转：this.$router.go(0);用过的人都知道，前两者都是强制刷新页面，会出现短暂的闪烁，用户体验效果不好。所以，我们选择第三种方式：3. 首先在App里面写下如下代码：<template> <div id="app"> ...

原创 element table固定表头，表的高度自适应解决方法

主要是通过在mounted生命周期中，改变tableHeight的值，来让表格的高度自适应。标签：<el-table ref="table" :data="tableData" :height="tableHeight"></el-table>vue中的ref解释第一种JS处理方式：export default { data(){ ...

原创 elementUI实现前端分页(2)

data() { return { //return定义 listQuery: { name: undefined, limit: 10, page: 1, value:'' }, total: null, tableData:...

原创 vue表单中遍历表单中操作按钮的显示隐藏

1. 第一步先在data中定义数组data () { return { show: [], // 保存和取消的显示隐藏 } };}2.页面中使用 <div class="name" v-if="show[index]">3.重要的一步，push到数组中this.checkList = res.data.data; thi...

原创 vue+element实现前端分页及前端搜索功能

页面布局 <template> <div> <el-row> <el-col :span="6"> <el-input v-model="name" placeholder="输入名称搜索">></el-input> ...

转载 CodeMirror使用说明

1.首先要先安装vue-codemirror在npm的官网我找到了vue-codemirrorhttps://www.npmjs.com/package/vue-codemirrornpm install vue-codemirror --save接着在main.js里使用import { codemirror } from 'vue-codemirror'import 'code...

原创 js-yaml使用

首先安装js-yamlnpm install js-yamllet content='kind: StoqweqrageClasqwesapiVersion: qwe.k8sqwe.io/v1metadata: name: locaqwel resourceVersion: 'qwe' annotations: kubectl.kubernetes.io/las...

原创 elementUI实现前端分页

按照他的文档来写分页，最主要的是el-table里面展示的数据怎么处理<el-table :data="datatable.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%"> 最主要就是上面标红这一块的处理：　　datatable是后台取得数据，curr...

原创 vue在IE浏览器下运行空白页（ES6在IE下不兼容的问题）

近期遇到了项目是vue做的，在IE浏览器下打不开，显示空白问题，解决方案如下：打不开的原因是因为少了babel-polyfill处理器，所以第一步需要下载：npm install babel-polyfill --save-dev第二步在package.json文件中显示：第三步引入babel-polyfill：在main.js文件中引入babel-polyfill，也就是...

原创 vue-route的history模式下刷新不显示CSS的问题

只需要将index.html中的<link rel="stylesheet" href="./static/cdn/iconfont/iconfont.css">改为<link rel="stylesheet" href="/static/cdn/iconfont/iconfont.css">

原创 在vue中，beforeRouteEnter()和beforeRouteLeave()的函数解释!

1、beforeRouteEnter(to, from, next){要执行的代码操作next();}beforeRouteEnter：进入路由之前执行的函数。next();--》 必须有这个，相当于一个按钮开启一样。2、beforeRouteLeave(to, from, next){要执行的代码操作next();}beforeRouteLeave：...

原创 Map集合循环遍历的几种方式

package cn.jdbc.test;import java.util.HashMap;import java.util.Iterator;import java.util.Map;import java.util.Map.Entry;/** * Map 集合的循环遍历 * @data XXXX-XX-XX * */public class TestMap {    ...

转载 vue2.0 子组件和父组件之间的传值

Vue是一个轻量级的渐进式框架，对于它的一些特性和优点在此就不做赘述，本篇文章主要来探讨一下Vue子父组件通信的问题首先我们先搭好开发环境，我们首先得装好git和npm这两个工具(如果有不清楚的同学请自行百度哦)环境搭建步骤：打开git ，运行 npm install --global vue-cli 这是安装vue的命令行vue init webpack vue-demo

转载 webstorm设置修改文件后自动编译并刷新浏览器页面

转载：http://www.cnblogs.com/ssrsblogs/p/6155747.html重装了 webstorm ，从10升级到了2016一升不要紧，打开老项目，开启webpakc-dev-server，然后改代码，发现浏览器不会自动刷新了！！！这可急死我了，各种卸载webpack、webpack-dev-server，安装各种版本，调试。各种查资料查文档，都讲

转载 NodeJS安装配置步骤(windows版本)

参考菜鸟教程学习nodeJS，碰到npm安装express，一直提示缺少xx文件之类的，终于找到解决方案了，原来要提前配置好环境变量的。原文章棒棒哒，下面粘贴一下，以免链接失效~1、windows下的NodeJS安装是比较方便的（v0.6.0版本之后，支持windows native），只需要登陆官网（http://nodejs.org/），便可以看到首页的“INSTALL”按

原创 input 上传图片显示预览、调用摄像头，ios和Android的兼容性解决

html代码：　　                       注意：IOS和Android有兼容性问题，IOS只能拍照，不能从相册选择解决：$(function () {//解决上传图片时capture="camera"在安卓与IOS的兼容性问题（在IOS只能拍照，不能选相册）var ua = navigator.userAgent.toLow