- 博客(30)
- 收藏
- 关注
RSS订阅原创 若依管理系统启动笔记
1.下载代码:https://gitee.com/y_project/RuoYi-Vue2.准备环境软件2.1 idea(官网直接下载的最新版本)、redis(Redis-x64-3.0.504)、Navicat for MySQL、phpstudy3.修改截图修改redisimage.png修改数据库配置项image.png导入若依sql文件后的截图i...
2023-08-03 17:18:30
187
1
原创 ios移动端底部弹窗pop中切换输入表单页面闪屏
一、问题描述:底部弹窗弹起切换输入框页面回滚导致闪屏二、问题产生截图:image.png三、问题定位:mui.js源码监听了输入框聚焦滚动问题四、问题定位截图:image.png五、处理办法:image.png...
2023-03-30 10:19:44
219
原创 react/vue+dav+roadhog 分割代码
一、项目介绍项目技术:react+roadhog+dav+antd版本号介绍react:15.4.0roadhog:1.1.1二、操作流程执行npm i react-loadable@5.5.0src/router.js代码编写 路由页面配置import React from 'react';import { Router, Route } from 'dva/router...
2023-02-07 18:05:53
278
原创 react+sku 实现商品属性组合
##前言公司商城业务需把原本的统一属性分割为单商品的属性值,在编写的过程中,困难度很大,借鉴了很多案例,最终实现,现分享出来,供大家参考。##实现效果图##数据格式对照图##utils.js//商品属性组合算法 笛卡尔积算法export function calcDescartes(){ return Array.prototype.reduce.call(arguments,function(a, b) { let ret = []; a.forEach(function(a
2021-05-24 09:49:29
1015
原创 企业微信 + react
###业务需求:关联企业微信,展示公司及部门信息(tx的文档写的很混乱,也很少有相关的案例)##一、在index.html文件中引入sdk<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script><script src="//open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>##二、封装wx配置方法//企业微
2021-05-24 09:49:09
1091
1
原创 canvas生成海报案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div sty
2021-05-24 09:48:36
223
原创 react+xlsx+antd 封装导入表格实现数据展示的方法
业务需求:要求前端实现excel导入自动展示在table中##封装核心代码import XLSX from "xlsx";export function importFile(file,params){ return new Promise((resolve)=>{ let files = file.file; let fileName = files.name.split('.'); fileName = fileName[fileName.le
2021-05-24 09:48:09
1115
原创 react+antd+react-cropper裁剪图片组件封装
tip：之前写了一个裁剪 但是有bug（参考之前的文章） 现在又遇见这个功能 终究是躲不过了 现已解决之前出现的bug 整理代码并封装成了组件 供大家参考使用 避免踩雷notice：react版本：15.4.0（博主使用版本，版本的不同，代码可稍作修改）###1.Cropper.jsimport React, { Component } from 'react'import { Button, message,Icon} from 'antd';import Cropper from 'reac
2021-05-24 09:47:40
600
原创 逻辑算法总结
1.场景：两个数组A和B，并且A包含B，A和B都是对象数据，如何找出A在B中不存在的项，并且改变这个不存在项的某个属性值。let A = [{id:'1',status:'1'},{id:'2',status:'1'},{id:'3',status:'1'},{id:'4',status:'1'}];let B = [{id:'1',status:'1'},{id:'2',status:'1'}];//分析步骤//1.先循环A和B两个数组 把数组中的对象唯一属性id值存入定义好的数组中let aI
2021-05-24 09:46:56
331
原创 实时通信socket封装及使用
###使用场景–实时通信1.封装socket//socket连接export function connectSocket(data){ return new Promise(function(resolve){ let that = this; let ws = new WebSocket('xxxxx');//通信地址 ws.onopen = function (e) { // 登录socket所需的参数 ws.send(xxxxx); } ws.onmessag
2021-05-24 09:46:30
503
1
原创 h5端如何使用webrtc
1.无意中接触到webrtc，了解到的就是直播过程中延迟很短，控制在1-2s左右，开发过程中发现关于webrtc的参考案例很少，就把demo贴出来，也顺便把遇到的问题和如何解决的也贴出来。<!DOCTYPE html><html><head> <title>CDN Demo</title> <meta charset="utf-8"> <meta content="width=device-width, init
2021-05-21 08:50:28
3485
1
原创 oss上传封装及使用
oss在项目中好多地方会用到，不想每次都重复写这一段代码，所以进行了封装，在调用过程中，有什么新的需求再进行修改即可。###封装代码export function uploadOss(file,params){ //file为传过来的文件内容 params为额外参数 return new Promise(function(resolve){ let ossConfig; const UID = getUid(); //对上传内容做尺寸大小限制 cons
2021-05-21 08:49:53
512
原创 react+quill封装的富文本编辑器(附带转接oss上传图片)
ps:老早之前写了一个simditor富文本，但是在实际的使用中bug很多，故重新寻觅了新的富文本，使用效果有待考量，但是功能自己感觉比simditor要好很多，可以自定义的内容比较开放。###效果图###1.js文件 npm i quill 本文使用的版本是"quill": “^1.3.7”import React, { Component } from 'react';import Quill from "quill";import $ from "jquery";import co
2021-05-21 08:49:09
693
原创 前端实现视频直链下载
来源：前端点击直链会单独打开页面并进行播放，但是不会实现直接下载。###1.主要代码 downVideo (url, name){ var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'arraybuffer'; // 返回类型blob xhr.onload = function () { if (xhr.readyState === 4 && x
2021-05-21 08:48:26
2579
2
原创 ts学习笔记第一更
1.基本类型1.1布尔值let isDone: boolean = false;1.2数字let a: number = 1;1.3字符串let b: string = 'a'; let c: string = `hello ${b}`;1.4数组let d: number[] = [1,2,3]; let e: Array<number> = [1,2,3];1.5元组 Tuple定义:元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同;注意:当访
2021-05-21 08:47:55
135
原创 react+antd的Upload上传文件至oss(上传文档转图片)
又来码字了,公司需求要上传文件到阿里的oss上,之前没有做过,这次踩了两天的坑才爬出来,我太难了…还好最后完成,特此记录帮助以后的有需要的小伙伴们少走弯路…还有就是阿里的demo真的是写的太lan了…把我看得云里雾里…最后还是参考网上的写法完成了需求…##主要代码import { Upload} from 'antd';<Upload name="file" action="" onChange={this.uploadFile} headers={conf
2021-05-21 08:47:20
1575
1
原创 react+antd的Table实现拖拽排序(非antd推荐的方法)
###1.使用的方式:sortablejs(缘由:我的react版本是15.的,使用antd推荐的不兼容下载的npm包,费了一些时间才找到解决办法)ps:个人觉得比antd推荐的方法要简单很多 代码量也很少 “sortablejs”: “^1.7.0”##DOM结构<div className="goodsTable" ref={this.sortableGoods}> <Table dataSource={goods} columns={columns}
2021-05-21 08:46:45
1272
1
原创 react+腾讯云上传视频(封装signature函数)
###1.上传的组件是基于antd的Upload 上前端页面 采用手动上传的方式<Upload action='' onChange={this.uploadVideo} headers={{'Content-Type': 'application/json'}} beforeUpload={this.beforeUpload} showUploadList={{showRemoveIcon: false}}>
2021-05-21 08:44:53
883
原创 jquery/React/Vue验证码插件
pp：今天在项目中遇到写拖动图片进行验证的需求，网上查找的插件库都需要有偿下载，所以就自己动手写了一个，放上来供有需要的人做参考，有疑问也欢迎留言，乐于做一个奉献的前端小傻狗~##1、先上预览图#####1.1 最开始的样子#####1.2拖动滑块 图片显示#####1.3把滑块拖动到相应位置 图片隐藏##2、代码结构图 ps：此插件用到字体文件 不知道怎么插入文件 所以把名字放上来自己去下载 也可发邮箱转发给你##3、html代码<!DOCTYPE html><
2021-05-21 08:44:28
740
1
原创 react+antd实现图片上传并且剪裁（请参照最新文章，此案例有bug）
###代码详情 (存在的bug:只有第一次上传剪裁是正确的,在不刷新页面的情况下再次进行剪裁会出现错误,目前没有找到解决办法.)解决办法:点击上传按钮完成上传之后,按钮变为不能点击的状态,阻止bug的发生.用户再次刷新可进行上传剪裁.import React, { Component } from 'react';import { Button, Switch, Upload, Input, message,Modal,Icon } from 'antd';import styles from '.
2021-05-21 08:43:16
598
原创 react实现拖拽排序(菜单+视频+图片等)
###DOM结构部分{/* 拖动菜单部分 */} <div className="configLeft" id="setSubMenu"> <div className="topMenuSection" ref={this.sortableSubMenu}> { menuList.length > 0 &a
2021-05-20 09:03:18
1488
原创 react+Simditor封装的富文本编辑器
##Notice：此富文本编辑器一点都不好用 bug很多 推荐使用quill 可参考我写的另一篇【react+quill封装的富文本编辑器(附带转接oss上传图片)】##效果图展示##SimditorTextarea组件封装import React from 'react';import Simditor from "simditor";import $ from "jquery";import config from '../../config.js';require("sim
2021-05-20 09:02:36
171
原创 es6数组的解构赋值中案例解析
##1、案例function* fibs() { var a = 0; var b = 1; while (true) { yield a; [a, b] = [b, a + b]; }}var [first, second, third, fourth, fifth, sixth] = fibs();sixth // 5##2、个人见解####概念解释yield是什么yield是ES6的新关键字，使生成器函数执行暂停，yield关键字后面的表达式的值返回
2021-05-20 09:01:48
175
原创 react中解决跨域（在开发环境下）
先附上package.json文件{ "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "antd": "^3.20.6", "axios": "^0.19.0", "babel-plugin-import": "^1.12.0", "crypto-js": "^3.1.9-1", "echarts": "^4.2.1", "http-proxy-
2021-05-20 09:01:01
699
原创 基于react-admin-antd 的简易数据管理后台
操作：npm i —下载依赖项（项目中的依赖包版本或有更新 建议执行 cnpm i）npm run dev ----运行项目npm run build ----打包项目项目运行预览图首页技术栈：react+antd+promise+axios项目中提供了前端在开发环境下解决跨域的情况 如有不懂欢迎提问 谢谢~~项目地址：https://github.com/PnaQnai/react-admin-antd-axios...
2021-05-20 09:00:18
463
原创 react中父子组件互相传值
#1、父----->子import React from 'react'//父组件class Parent extends React.Component{ constructor(){ super() this.state = { pamsg:'我是父组件的数据：哇哈哈' } } render(){ return ( <div>
2021-05-20 08:59:22
119
1
原创 vue封装可滑动的导航条
#1、template<div class="info-nav" v-if="!isSetTop"> <swiper :options="infoNavOption" ref="infoSwiper"> <!-- slides --> <swiper-slide v-for="(slide,index) in newsNav" :key="index"> <p :class="['marquee-txt
2021-05-20 08:58:33
232
原创 vue倒计时封装组件
#1、结构<template> <div> <p v-if="msTime.show"> <!--<span v-if="tipShow">{{tipText}}:</span>--> <!--<span v-if="!tipShow">{{tipTextEnd}}:</span>--> <span>{{msTime.hour}}</
2021-05-20 08:57:48
424
原创 for循环中嵌套定时器
1、案例for(var i=0;i<5;i++){ setTimeout(()=>{ console.log(i) },100*i)}//打印结果 依次打印五个52、修整 打印0，1，2，3，4依次打印 使用es6 letfor(let i=0;i<5;i++){ setTimeout(()=>{ console.log(i) },100*i)}//打印结果 依次打印0,1,2,3,43、使用匿名函数for(var
2021-05-20 08:56:41
658
原创 vue实现滚动到某一位置元素进行吸顶操作
1、创建一个空白的元素和要进行吸顶的元素样式一样 进行占位操作2、监测滚动事件handleScroll: function(e) {var scrollTop = this.$refs.scroll.scrollTop;var scrollTop = document.querySelector(".vue-slim-better-scroll__wrapper") .scrollTop;//导航条距离var scrollTopTab = Math.abs(e.y)console.
2021-05-20 08:55:13
871
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人