前端学习经历
见证学习历程
sunyv1
现在正在努力学习。
展开
-
web项目服务器部署Spring boot、vue、linux
后端spring boot,前端vue,系统环境linux,数据库mysql、mongoDB、redis。原创 2022-08-08 17:03:08 · 525 阅读 · 1 评论 -
bootstrapTable固定头固定列之后的对齐问题
首先有条件的话,换吧!!!下面组件指的是bootstrapTable1、固定列之后出现行不对齐,行越多越明显主要原因是因为固定的列行高和内容行高不一样,这里举个例子: 固定列加粗了字体, 内容没有加粗. 反之同理. 其余的自己找原因2、固定头之后表格滚动起来,出现列不对齐这里会说两个原因1、误差表头的宽度设置是获取下面第一行列的宽度设置的, 由于每列的宽度是自适应的, 所以实际宽度会出现小数, 但是jQuery获取的时候是整数, 这就会造成误差, 列越多误差就越大2、滚动条固定列肯定是因为原创 2022-03-29 14:51:51 · 2891 阅读 · 0 评论 -
记录前端js获取浏览器信息与判断是否为移动端
执行下面方法将获取所有信息const _browser = (function(){ let userAgent = navigator.userAgent, ua = userAgent.toLowerCase(), browserList = { msie : /(?:msie\s|trident.*rv:)([\w.]+)/i, firefox : /Firefox\/([\w.]+)/i,原创 2022-03-15 14:23:28 · 1330 阅读 · 0 评论 -
uni-app自定义v-model失效问题
export default { props: { value: { type: String, default: "" } }, model: { prop: "value", event: "input" }, methods: { valueChange(val) { this.$emit("input", val) } }}直接上代码了,问题不想深究了,定义model的时候用value和input,不要自定义,就这样。...原创 2022-02-14 17:05:55 · 2923 阅读 · 4 评论 -
uni-app使用u-charts
写下这篇文章是因为自己在使用它的时候踩了很多坑,记录一下也许会对其它开发者有些帮助。下面说下我的使用方法首先到gitee上把项目代码下载下来 gitee地址这个是国内的下载比较快,也是官网推荐的这里以uni的为例,如下目录是uni示例 uCharts/示例项目/UNIAPP在开发工具直接运行,可以直接运行到浏览器,只是显示效果,毕竟微信开发者工具有点笨重下图是我随便点开了一个示例,最上面就是页面路径,到项目里找就行了下面是对应的代码片段<view class="qiun-colu原创 2022-01-12 11:31:05 · 3177 阅读 · 0 评论 -
vue更新dom之后整个页面刷新jquery,bootstrap
记录自己遇到的坑,使用技术如标题所示具体原因没找到,也没时间去找使用场景是动态生成输入框,也就是用了bootstrap的表单,用vue的v-for循环form-group,删除什么的都好说,就是增加数据的时候,往数组里push新的对象,整个页面就回刷新。解决方案不要使用form,直接用div...原创 2021-12-17 10:53:35 · 930 阅读 · 0 评论 -
在iframe嵌套页面使用layui里面的layer弹窗最大化时候父页面会滚动到顶部
在iframe嵌套页面使用layui里面的layer弹窗最大化时候父页面会滚动到顶部原创 2021-12-07 11:07:12 · 1183 阅读 · 0 评论 -
解决浏览器切换其它窗口最小化定时器失效方案:多线程webWorker
业务场景一个考试系统,需要在用户切换窗口或者最小化的时候依然保持倒计时正常进行技术webWorker多线程工具代码function createWorker(f) { var blob = new Blob(['(' + f +')()']); var url = window.URL.createObjectURL(blob); var worker = new Worker(url); return worker;} export const createWorker原创 2021-05-21 09:38:31 · 3698 阅读 · 5 评论 -
cesium显示动态线条或区域通过纹理
文章参考别人代码,在这里记录下过程防止忘记1.创建纹理export const createTexture = (params) => { if (!params) params = {} const { img = '/img/flow_line.png', second = 5000 } = params function PolylineTrailLinkMaterialProperty(color, duration, d) { this._definitionChan原创 2021-01-28 17:18:51 · 1363 阅读 · 0 评论 -
去掉img自带的拖动效果以及给div等标签加上拖动效果
禁止图片拖动<img class="item-avatar" draggable="false" :src="...." />拖动div<div class="card-item" draggable></div>原创 2021-01-19 20:27:03 · 1088 阅读 · 0 评论 -
cesium学习记录
可绑定事件 static constant Cesium.ScreenSpaceEventType.LEFT_CLICK //表示鼠标左键单击事件。 static constant Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK //表示鼠标左键双击事件。 static constant Cesium.ScreenSpaceEventType.LEFT_DOWN //表示鼠标左键按下事件。 static constant Cesium.ScreenS原创 2021-01-13 16:36:15 · 126 阅读 · 0 评论 -
网页页面打印方案二
工具代码const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom) === "string") { this.dom = document.querySelector原创 2021-01-05 15:18:23 · 222 阅读 · 0 评论 -
微信小程序canvas使用
我的项目是基于uni-apptemplate我也不知道为何,只有行内样式生效,小程序限制还是太大<canvas canvas-id="shareCanvas" id="shareCanvas" style="width: 330px;height: 410px;"></canvas>js部分async draw({text,name,title,cla,cover}){ const coverPath = await this.getImageInfo(cover);原创 2020-12-26 20:25:08 · 636 阅读 · 0 评论 -
小程序生成分享二维码
记录下我在做小程序分享保存发朋友圈的二维码踩过的坑主要是通过getAccessToken和getUnlimited获取二维码,然后通过canvas画出来保存。首先获取凭证(getAccessToken)这个是获取二维码的凭证,必须先获取,这里只需要传三个参数,第一个是固定写法,后面的是secret和appid,这些也是固定的。获取到的数据是有过期时间的。一般是7200s,到期需要重新获取。 async getAccessToken() { const result = await clie原创 2020-12-26 17:17:43 · 2277 阅读 · 0 评论 -
在vue中使用qqmap腾讯地图
在index.html的head里引入依赖 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=76HBZ-BH5CX-FZF4G-7VDJB-QP3KH-LBBFU&libraries=drawing,geometry"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.co原创 2020-12-22 16:12:31 · 3822 阅读 · 5 评论 -
在vue基础上实现原生拖动事件draggable
先上代码 <div class="test-view"> <div ref="from" class="from"> <div class="item" draggable @dragstart="itemDragStart" :style="{backgroundColor:item.color}" v-for="item in fromData" :key="item.name">{{item.name}}</div> &l原创 2020-12-07 20:02:57 · 1494 阅读 · 0 评论 -
前端css卡片card多行排列自适应布局
一直寻找card排列的完美解决方案,之前是用js实现老是会出bug,这里介绍一种纯css实现这里感谢好好叶叶孤城提供的方法先放代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> .test { float: left; width: 25%; box-sizi原创 2020-09-24 14:24:43 · 6813 阅读 · 0 评论 -
简单介绍两种常用的数据去重方法普通和对象
首先接常规数组的类似 [0,1,2,3,1,2]这种const newArr = [...new Set(arr)]然后是数组里是对象类似 [ {name:“jack”},{name:“jone”},{name:“jack”} ]const obj = {};const newArr = arr.reduce((result,item)=>{ obj[item.name] ? "" : obj[item.name] = true && result.push(item)原创 2020-09-17 14:04:29 · 129 阅读 · 0 评论 -
vue导入xlsx-style组件报错Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx
官方给出了解决方案,我们只需要修改一下配置vue2x版本就是有webpack配置就是在webpack.base.conf.js中加入下面这段module.exports = { externals: { './cptable': 'var cptable' }}vue3x版本在根目录下的vue.config.js(没有的话自己创建一个)加入下面的代码module.exports = { configureWebpack: { externals: {原创 2020-09-15 16:09:20 · 5207 阅读 · 4 评论 -
js事件穿透上层触发下层事件
我是在做一个带遮罩边框时候需要用到下面是效果图可以看到边边有个边框,这是用一个img实现的,直接宽高一样盖在上面。虽然看上去是透的实际上上面有一层img只是透明而已,这个时候要是需要触发底层swiper事件就没办法css里有一个专门屏蔽事件的属性pointer-events: none;默认是是触发,写上这个之后就不会触发事件了这样就能正常触发swiper的事件了...原创 2020-09-13 19:46:07 · 2167 阅读 · 0 评论 -
简单实现socket.io后端主动给前端发请求
下面的使用到的技术栈是vue+node(express)后端npm install socketio express express-static// oryarn add socketio express express-staticconst express = require('express');const http = require('http');const socketIo = require('socket.io');const app = express();con原创 2020-08-22 15:26:11 · 2366 阅读 · 0 评论 -
vue鼠标滚轮进行横向滚动
我是在vue项目里使用的其他的也同理页面部分<div id="nav"> ...这里是你的滚动元素...</div>js部分 methods: { // 初始化与绑定监听事件方法 scrollInit() { // 获取要绑定事件的元素 const scrollDiv = document.getElementById("nav"); // document.addEventListener('DOMMouseScro原创 2020-08-21 19:30:03 · 2785 阅读 · 0 评论 -
简单封装一个基于vue的日历组件calendar
这是效果直接上代码<template> <div class="calendar"> <div class="title"> <h2>日历</h2> <div class="checks"> <span @click="onCheckDate('reduction','year')" class="check-item"><<</sp原创 2020-08-21 09:20:15 · 819 阅读 · 0 评论 -
mac下的常用启动命令
1.redisredis-server //启动2.mongosudo mongod3.MySQLmysql.server start // 启动mysql.server restart // 重启mysql.server stop // 停止4.nginxnginx //启动nginx -s stop //停止nginx -s reload //重启原创 2020-08-03 19:01:00 · 377 阅读 · 0 评论 -
微信小程序中获取页面的实际宽高和rpx的关系getSystemInfoSync
小程序提供了一个方法叫getSystemInfoSync,通过它可以获取当前屏幕信息const info = wx.getSystemInfoSync();const 与rpx的比值 = 750 / systemInfo.windowWidth;const 屏幕宽度 = info.screenWidth;const 屏幕高度 = info.screenHeight;const 状态栏高度 = info.statusBarHeight;const 可用窗口宽度 = info.windowWidth原创 2020-08-03 14:02:54 · 1317 阅读 · 0 评论 -
uni-app微信小程序全屏拖拽组件,控件
首先放上下载地址这里在对应的页面里引入就可以了<template> <touch-move @onClick="switchLanguage"> <!-- 这里放上自己的内容 --> </touch-move></template><script> import TouchMove from './TouchMove'; export default { components: {TouchMove}原创 2020-07-15 16:56:34 · 2341 阅读 · 0 评论 -
html中table的样式设置
因为用到了一个自定义的表格所以这里记录一下样式写法这里的样式基本上指的是边框了先说明一下设置边框的方式设置table的border属性,如下。当然样式我就不说了不建议这么干<table border="1"></table>之后的两种都是用css实现的,这里先说一种//边框什么的自己写吧table{ //主要用到的就是这个属性,这个属性可以让边框重叠,就是让两个边框加一起没那么宽了 //实际上并不好使,因为涉及到重叠问题,坑就不说了 border-col原创 2020-07-13 14:39:42 · 8765 阅读 · 0 评论 -
js导出excel表格csv格式
自己封装了一个js导出表格的js工具稍后在这里放上文件链接下面是使用方法首先这个封装依赖以下插件yarn add xlsx xlsx-style file-saver//npm装也一样然后将文件放到合适的位置去到启动配置文件webpack.base.conf.js(我是在vue项目中使用)//在module.exports={}里加加上下面这个externals: { './cptable': 'var cptable'}之后在项目里引用import { exportD原创 2020-07-08 19:57:35 · 2817 阅读 · 0 评论 -
Dockerfile配置说明写法
1 FROM指明构建的新镜像是来自于哪个基础镜像,例如:FROM centos:62 MAINTAINER指明镜像维护着及其联系方式(一般是邮箱地址),例如:MAINTAINER Edison Zhou不过,MAINTAINER并不推荐使用,更推荐使用LABEL来指定镜像作者,例如:LABEL maintainer="edisonzhou.cn"3 RUN构建镜像时运行的Shell命令,例如:RUN ["yum", "install", "httpd"]RUN yum insta原创 2020-07-05 15:49:08 · 382 阅读 · 0 评论 -
利用canvas做图片裁剪并下载
需求:将一张图片分割成多个图片,并下载下来实现:页面部分:<input id="file" type="file">主要代码部分:class SplitImage { constructor(options) { this.options = { col: 3, row: 3, inputEle: '' } this.options = Object.assign({}, this.optio原创 2020-07-02 16:14:03 · 384 阅读 · 0 评论 -
css 滤镜 filter 属性
本文转载至这里filter:blur(4px);//模糊filter:brightness(2);//亮度,默认是1。可以使用百分比也可以使用小数表示。filter:contrast(2);//对比度,默认是1。可以使用百分比也可以使用小数表示。filter:drop-shadow(2px 10px 0 rgba(255,0,0,0.5));//投影,(x偏移 y偏移 模糊范围 颜色)filter:grayscale(0.5);//灰度,0~1,0%~100%filter:hue-ro转载 2020-06-30 22:10:08 · 306 阅读 · 0 评论 -
html和css中input输入的样式调整
先说下基础样式,直接加class明就可以修改的<input class="name" placeholder="请输入名字" type="text" />先看下原来的样子开始调整:.name { width: 200px; height: 30px; border: 1px solid #139be1; border-radius: 5px; color: blue; font-size: 15px; font-原创 2020-06-30 13:23:29 · 15442 阅读 · 0 评论 -
css 元素设置滚动条overflow:auto的样式
1、首先说明滚动条样式是通过css的选择器来修改的,需要用到的选择器大概有下面几种:::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的::-webkit-scrollbar-button 滚动条两端的按钮::-webkit-scrollbar-track 外层轨道::-webkit-scrollbar-track-piece 内层滚动槽::-webkit-scrollbar-thumb 滚动的滑块::-webkit-scrollbar-corner 边角::-web原创 2020-06-30 10:23:36 · 5996 阅读 · 2 评论 -
个人常用但是记不住的东西记录
这篇文章是写给自己的1.小程序或是uni修改placeholder样式有一个叫做placeholder-class的属性,就像这个样子,然后去写class对应的样式就行了<input placeholder-class="placeholder" class="input2" type="text" placeholder="请输入您的手机号或邮箱(以便于我们及时反馈)" />2.超出文本以省略号显示有的时候因为文本太长但是显示范围有限,需要用到省略号,自己做计算太麻烦,所以用css原创 2020-06-10 20:04:16 · 161 阅读 · 0 评论 -
在vue中将网页保存成pdf并解决html2canvas生成截图不全问题
首先引入两个工具,这里借用两个工具生成工具在index.html中引入(全局引入)<script src="https://cdn.bootcss.com/jspdf/1.5.3/jspdf.debug.js"></script><script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2c...原创 2020-05-04 15:54:52 · 3398 阅读 · 6 评论 -
Mac电脑配置oh-my-zsh环境变量
1.先说明一下苹果自带的zsh和oh-my-zsh不一样。网上搜索好多的教程都是说去修改.bash_profile文件。其实这个是给苹果自带的用的,oh-my-zsh有自己的环境配置文件 .zshrc2.我也懒得麻烦,所以先说一个兼容配置法。就是在.zshrc文件里加入source ~/.bash_profile这句话。就表示把.bash_profile拿来用。这样你在.bash_profile...原创 2020-05-01 14:37:42 · 2497 阅读 · 0 评论 -
解决微信页面跳转传入特殊字符串乱码问题
1.通过路由传入的参数只能是字符串。常见的用法是用 JSON.stringify() 方法把数组或对象转成字符串,再由url传入const listData = JSON.stringify(array);wx.navigateTo({ url: `/pages/child?listData=${listData}`})然后再child页面的onLoad里接收,用 JSON.pars...原创 2020-04-29 15:27:50 · 662 阅读 · 0 评论 -
vue路由的传参方法方式有三种
今天给大家介绍vue中使用路由跳转的传参方法1.用动态绑定路由配置{ path: 'child/:id', name: "child", component: () => import('./index.vue')}传参页面this.$router.push({ path: `/child/${id}` // 动态传的参数});获取页面const par...原创 2020-04-25 15:57:27 · 616 阅读 · 0 评论 -
在vue中使用树形组件
因为很多项目都会用到树形组件。所以自己做了一个树形组件,现在和大家分享一下源码太多就不贴上来了,下面是链接:https://github.com/sunyv1/vue-tree使用方法<template> <div id="app"> <jz-tree :isOpen="true" :isCheck="true" ...原创 2020-04-22 15:25:22 · 602 阅读 · 0 评论 -
vue create 新项目 vue-cli 3.4x版本以后新建项目修改端口号
个人也是百度找了好久,都不知道怎么想的一个个都是什么找到config下修改index。要是有我还百度。。。。翻了好久终于让我找到蛛丝马迹1、打开node_modules/@vue/cli-service/lib/options.js顺着目录找到这个文件打开翻到最下方有这么一段devServer: { /* open: process.platform === 'darwin',...原创 2020-04-21 15:27:46 · 1057 阅读 · 2 评论