- 博客(24)
- 收藏
- 关注
RSS订阅原创 vsCode软件常用模板代码设置
Vue模板代码块{ "vue_template": { "prefix": "vue", "body": [ "<template>", "\t<div class=\"vue_template_wrapper\">", "\t\t", "\t</div>", "</template>", "<script>", "export default {", "\tdata() {", .
2022-04-01 10:22:07
1027
1
原创 基于React的图片裁剪组件
一. 需求：最近项目中遇到要进行图片裁剪的需求，采用了cropperjs进行二次图片裁剪组件封装。在这里记录下二次封装过程。二. 二次封装代码：import React, { useState, MouseEvent, FunctionComponent } from 'react';import styles from './index.less';import Cropper from 'cropperjs';import { Button } from '@pyramid-kit/mo
2020-12-11 17:38:28
886
原创 React父组件调用（触发）表单子组件实例或方法
一. 需求：最近在做项目的时候遇到这样一个需求。表单页可重复使用，即把表单页单独写为公共组件，但是在调用该子组件的父组件需要触发表单子组件的保存数据和校验提交表单数据的方法，表单子组件采用的是React高阶form组件构成，而子组件暴露方法给调用父组件需要使用useImperativeHandle，这是需要React.forwardRef进行Ref的传递，以方便父组件获取实例触发方法。这个时候问题就出来了，当导出此组件时使用了高阶函数createForm封装，再怎么使用React.forwardRef封装呢
2020-12-10 09:58:16
1838
2
原创 基于React的垂直选项卡（含锚点定位功能）
需求：类似于美团的商家页面，左边是可点击选择的商品品类，右边是按各商品品类分类的商品列表。点击左边某品类时，右边商品列表自动滚动定位到该品类下商品第一个；滚动右边商品列表时，当滚动到某个品类名时自动定位高亮相对应的左边的品类名列表。所用到的插件：基于滚动插件better-scroll完成。用之前需要先了解一下better-scroll文档。所遇到的问题：在实际运用中，但商品品类和商品列表数据量特别大的时候，尤其是商品列表项目中有图片加载和事件绑定时，右侧的商品列表滚动会非常的卡顿。解决问题思路：
2020-12-09 20:59:27
1749
原创 基于React的图片预览组件
需求：最近项目中遇到要进行图片预览的需求，在网上找了一大圈可用的图片预览组件，起初选择react-wx-images-viewer作为预览组件二次开发，但后来发现虽然这个组件在Git上113个star，但这个组件用起来并不给力。切换图片时有种要飞的感觉，而且支持的功能也不是特别丰富，所以果断放弃了react-wx-images-viewer。然后在网络上继续寻找，最后发现一个开源预览组件非常好用，动画效果体验较好，支持的功能比较丰富，在这里记录下二次封装过程。采用的图片预览组件：react-photo-
2020-12-09 19:49:08
5234
原创 Echarts常用图表
1.折线图：(1).代码：const self = thislet chart = echarts.init(self.$refs.chart)// 数据let date = ['1-22', '1-23', '1-24', '1-25', '1-26', '1-27', '1-28', '1-29', '1-30', '1-31', '2-1', '2-2', '2-3', '2...
2020-02-05 14:59:55
1430
原创 Vue.js组件内路由守卫钩子beforeRouteEnter
beforeRouteEnter：路由跳转进入页面前进行的操作，可接收to、from、next参数，此守卫钩子中还不能获取到Vue.js组件实例，但是可通过next(vm => {})获取当前组件实例。例如：beforeRouteEnter (to, from, next) {next(vm => { // 此处的vm相当于this consol...
2020-01-22 09:50:03
785
原创 会话级sessionStorage的使用
sessionStorage： sessionStorage属性允许开发者访问一个 sessionStorage对象。它与localStorage相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页...
2020-01-22 09:34:12
263
1
原创 Git常用命令
1.git pull说明：从远程仓库将代码更新到本地。2.git push "分支名"说明：从本地将代码上传至远程仓库。3.git branch说明：查看当前分支。4.git branch -a说明：查看所有分支。5.git checkout "分支名"说明：切换分支。6.git merge "分支名"说明：合并某分支代码至当前分支。...
2020-01-19 09:28:53
272
原创 Echarts图表自适应
1.基础方法（必须）/** * @param {Function} func * @param {number} wait * @param {boolean} immediate * @return {*} */function debounce(func, wait, immediate) { let timeout, args, context, timestamp, ...
2020-01-18 12:14:45
450
原创 Echarts在一个容器中绘制多张横向条形统计图
今天做项目中的一个图表统计时遇到一个问题 ：这个图表有3个横向的条形统计图组成，起初是写了3个容器分别在里面绘制各自的横向条形统计图，用模拟的动态数据时没有任何问题，当接入后台数据后发现，如果有两个图表的数据都为空时(尤其是第二个和第三个图表数据同时为空时)，数据更新后重新配置并绘图，会存在后两个图表Echarts实例丢失问题，也就是后两个容器中并不会绘图出来。所以，转变思路，在一个容器一个图层上...
2020-01-18 10:26:56
2099
原创 JavaScript(Vue.js应用+React.js应用)、css及常用解决方案整理
1.JavaScript常用方法： (1).计算百分比（保留两位小数） /** * 计算百分比（保留两位小数） * @param {Number} num 分子 * @param {Number} total 分母 * @return {String} 百分比字符串 */getPercentileNumber(num, total) { // 求百分比 num...
2020-01-10 10:41:15
321
转载 Nginx跨域配置
server{ listen 8400; #server_name api.invest.modeling.ai; access_log logs/api_modeling_access.log main; error_log logs/api_modeling_error.log; add_header Access-Control-Allow-...
2019-12-05 15:40:09
202
原创 Vue.js动态绑定的Style样式变化后DOM未更新
今天进行前端基础组件开发过程中遇到一个坑，找了一个下午的原因没能解决，去请教了公司的大神，终于明白这个问题是怎么来的了。在博客中记录一下，免得以后忘了又得浪费时间~ 一、问题描述： 在一个<div></div>标签中动态绑定了style样式，如<div :style="item.labelStyle" class="img...
2019-10-31 17:49:50
8303
3
转载 MyBatis学习
目录 总结jdbc出现的问题 mybatis介绍 mybatis入门程序 占位符#{}与字符串拼接符${}区别 mybatis框架的原理 别名配置与映射文件加载方式 mybatis与hibernate的比较 一、总结jdbc出现的问题 &nb...
2019-10-29 10:05:30
159
转载 Spring Boot注解
使用注解的优势： 1.采用纯java代码，不在需要配置繁杂的xml文件 2.在配置中也可享受面向对象带来的好处 3.类型安全对重构可以提供良好的支持 ...
2019-10-25 15:58:41
108
原创 vue-cli 3.10.0版本问题
vue-cli更新至3.10.0后启动项目端口为随机的5位数字，在配置文件中重新配置后也不生效解决方法：运行命令npm install portfinder@1.0.21原因：最新版本portfinder有bug，回退安装旧版本的就OK了...
2019-08-19 17:18:53
537
原创 （配置二）加权轮询规则的负载均衡
配置实例代码：...upstream backend #配置后端服务器组{ server 192.168.110.10 weight=5; server 192.168.110.11 weight=2; server 192.168.110.12; #默认权重weight为1}server{ ...
2019-08-08 15:30:45
225
原创 （配置一）一般轮询规则的负载均衡配置
配置实例代码：...upstream backend #配置后端服务器组{ server 192.168.110.10; server 192.168.110.11; server 192.168.110.12; #默认权重weight为1}server{ listem 80; ...
2019-08-08 15:02:37
380
原创 负载均衡及Nginx服务器负载均衡配置
一、什么是负载均衡？ 网络负载均衡技术大致原理为：利用一定的分配策略将网络网络负载平衡的分摊到网络集群的各个操作单元上，使得单个重负载任务能够分担到多个单元上并行处理，或者使得大量并发访问或数据流量分担到多个单元上分别处理，从而减少用户的等待响应时间。 在实际的应用中，负载均衡会根据网络的不同层次（一般按照OSI七层参考模型）进行划分。现代的负载均衡技术主要实现和作...
2019-08-08 14:53:38
152
原创 Spring Boot热部署配置过程
1.引入依赖： 首先，在pom.xml中引入spring-boot-devtools模块，然后新增<fork>配置项，修改其值为true开启热部署。具体过程如下图1-1所示。 图 1...
2019-03-28 15:21:34
123
原创 Spring Boot项目搭建总结
1.Spring Boot介绍： Spring Boot是一个由Pivotal 团队研发的全新Web框架，它默认配置了很多其它常用框架的使用方式，就像Maven整合了所有的Jar包一样Spring Boot整合了其它框架。其目的是为了简化Spring项目搭建时的配置，使得开发人员专注于应用程序的开发过程。2.IDEA构建Spring Boot项目过程： ...
2019-03-27 15:15:21
277
转载 Vue中监听键盘事件
Vue中监听键盘事件 在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题：我们必须知道某个按键的keyCode值才能完成匹配，使用起来十分不便。 keyCode 实际键值...
2019-03-14 15:37:42
465
原创 Vue.js项目中使用jQuery动态添加html并绑定click事件，事件无法触发methods中方法的解决办法
首先，明确问题点。 在Vue.js项目中，引入jQuery，然后使用 $('#xxxxxxx').append(xxxxxxx)动态添加html语句。动态拼接的html语句中绑定了click事件，当鼠标点击时触发methods中某方法进行处理，但是，发现鼠标点击并没有触发该方法！ 该问题在实际开发过程中遇到过一次，但今天遇到后，忘记了之前是怎么处理的，又浪费...
2019-03-14 14:36:21
11136
8
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人