- 博客(80)
- 收藏
- 关注
RSS订阅
原创 JS中对象 Json的互相转换
在JS中 对象转json字符 , json转对象的操作方法**JSON.stringify（） **可以将对象转成json字符进行操作JSON.parse()方法可以将json转成对象，可以使用对象的操作方法；将JSON字符串转换为JS中的对象，在Js中，为我们提供了一个工具类，就叫JSON，这个对象可以帮助我们将一个JSON转换为Js对象，也可以将一个js对象转换为JSON，有时候在js中不能直接通过对象来处理数据，可以将它转化成json字符，在不同的场景进行不同的操作。...
2021-02-24 21:53:45
2302
原创 编写一个函数，输入n为偶数时，调用函数求1/2+1/4+...+1/n,当输入n为奇数时，调用函数求1+1/3+...+1/n 循环和递归
编写一个函数，输入n为偶数时，调用函数求1/2+1/4+…+1/n,当输入n为奇数时，调用函数求1+1/3+…+1/n 循环和递归循环function fn(n){ if(n%2 ===0){ // 如果n跟2取余等于零 var sum = 0; // 一个计数器 for(var i=2; i<=n;i+=2){ // 输入的偶数起始是2 每次循环都要加2 sum +=1/i;
2020-12-21 16:43:31
4871
原创 vue3 中关于对象和数组直接整个赋值页面不生效
一、使用reactive函数声明数组如何正确赋值 需求：将接口请求到的列表数据赋值给响应数据 arrayconst arr = reactive([]);const load = () => { const res = [2, 3, 4, 5]; //假设请求接口返回的数据 // 方法1 失败，直接赋值丢失了响应性 // arr = res; // 方法2 这样也是失败 // arr.concat(res); // 方法3 可以，但是很麻烦 res.forEach(
2022-05-18 16:55:52
10667
3
原创 web端的弹幕插件 easy-danmaku-js (vue，react )
easyDanmaku License介绍A Danmaku plugin for the web,一个用于web端的弹幕插件特点支持TypeScript、使用简单、使用css3过渡动画实现，弹幕流畅不卡顿、核心代码压缩后仅7kb。安装LINK<script src="https://pprory.github.io/easyDanmaku/demo/easy-Danmaku.js"></script><!-- 压缩后编译成es5版本 --><s
2022-04-19 17:05:49
2557
原创 Mac电脑 zsh: command not found: vue
Mac电脑npm下载脚手架或者是插件然后去查询全局命令可能会报出这个错误：类似于vue-cli脚手架zsh: command not found: vue先检查npm全局安装路径npm root -g如果命令框提示路径 /usr/local/lib/node_modules说明没问题，如果是其它路径需要去更改npm地址指定npm路径npm config set prefix /usr/local 然后再下载对应npm包，查看对应版本vue -V...
2022-03-31 15:11:09
2591
原创 常用的Vscode插件
常用的Vscode插件code --install-extension One Dark Procode --install-extension Error Lenscode --install-extension abusaidm.html-snippetscode --install-extension christian-kohler.path-intellisensecode --install-extension Compulim.indent4to2code --install-ex
2022-03-28 15:31:03
418
原创 React动态创建绑定多个ref
// React动态创建ref const [refArr, setRefArr] = useState<React.RefObject<HTMLDivElement>[]>([]); const dataList = [1, 2, 3, 4, 5]; // 创建一个新的数组来存储ref const arr: React.RefObject<HTMLDivElement>[] = []; // 动态创建ref for (let i = ..
2022-03-23 18:40:43
5773
原创 Immer.js 实现更优雅的深拷贝
Immer.js 库的使用JS 里面的变量类型可以分为 基本类型 和 引用类型 。在使用过程中，引用类型经常会产生一些无法意识到的副作用，所以在现代 JS 开发过程中，有经验的开发者都会在特定位置有意识的写下断开引用的不可变数据类型。 import produce from 'immer'; const data = { done: false, val: 'string', } const newData = produce(data, (draft) => {
2022-03-16 17:26:43
790
原创 css3隐藏滚动条
css3隐藏滚动条 .box{ display: flex; gap: 20px; width: 500px; overflow-x: scroll; /* 隐藏滚动条*/ -webkit-overflow-scrolling: touch; &::-webkit-scrollbar { display: none; } }...
2022-02-07 15:59:17
872
原创 Antd组件库Table表格动态合并
antd表格//columns{ title: "Tel", dataIndex: "tel", render(value, { rowSpan }) { return { children: value, props: { rowSpan } }; } },const dataList = formatList( data, 'tel' )// dataList 就是传
2021-11-17 20:31:40
1288
1
原创 git - 实战场景使用指令
克隆指定远程仓库的指定分支：git clone -b <指定分支名> <远程仓库地址>当远程master分支更新了最新的代码本地当前分支同步远程master分支：git pullgit merge origin/master将远程git仓库里的指定分支拉取到本地（本地不存在的分支）git checkout -b 本地分支名 origin/远程分支名示例: git checkout -b dev origin/dev这个将会自动创建一个新的本地分支，并与指定的
2021-11-13 17:50:15
354
原创 git安装克隆提示Cloninginto项目...remote:HTTPBasic:Accessdenied
git安装克隆提示 Cloning into ‘项目’… remote: HTTP Basic: Access denied，看到这个问题，我以为这我的帐号没有分配克隆权限呢解决问题：生成自己帐户私匙，配置到git上面git安装克隆提示Cloninginto项目git clone [email protected]:yys926/tp.git创建用户git config --global user.name “名称”git config --global user.email “邮箱”git 生成秘钥
2021-10-08 11:15:59
6988
原创 react - umi 项目约定式路由配置
约定式路由除配置式路由外，Umi 也支持约定式路由。约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。如果没有 routes 配置，Umi 会进入约定式路由模式，然后分析 src/pages 目录拿到路由配置。. └── pages ├── index.tsx └── users.tsx会得到以下路由配置，[ { exact: true, path: '/', component: '@/pages/index' },
2021-09-27 16:45:43
1412
1
原创 react - dva - umi 项目搭建
Umi的环境安装npm install umi -gumi搭建项目npm create umi选择umi项目创建类型选择APP选择是否使用TypeScript选择需要的功能dva+antd创建成功使用Ant 组件库 找到.umirc文件，修改如下配置项：export default { treeShaking: true, plugins: [ // ref: https://umijs.org/plugin/umi-plugin-react.html [
2021-09-26 13:51:06
394
原创 dva - webpack - require 自动引入 model 文件
const context = require.context('./', false, /\.js$/);// 参数1：要搜索的文件夹目录 // 参数2：是否还应该搜索它的子目录// 参数3：匹配文件的正则表达式export default context.keys() // ["./i.js", "./index.js"] "测试"//参数：要返回其枚举自身属性的对象//返回值：一个表示给定对象的所有可枚举属性的字符串数组.filter(item => item
2021-09-24 16:52:32
258
原创 react - dva - connect 的详解
1. 先创建models 里面是存储的状态和操作状态的方法models 文件export default{ namespace: 'product', state:{ productList: [{ name:"牛逼" },{ name:"卢本伟" }], }, reducers:{ upData(*state*, *action*){ let currentProductList
2021-09-22 23:18:16
1299
原创 react - dva - model 详解
import { useSelector, useDispatch } from ‘dva’;const { fileList } = useSelector((models) => models.userModel);useDispatch == dispatch用来接收一个函数 默认接受一个参数 当前所有的models 命名视图 根据命名视图来获取数据put 类似于 dispatchcall 执行异步的方法export default { namespace: 'user
2021-09-22 09:38:20
414
原创 react Ant组件库的高阶组件Form
Form 组件class Login extends Component { ... }const WrapperForm = Form.create ( )( Login )利用Form.create （）包装Form组件成一个新组件新组件会像form组件传递一个属性 form属性对象Form的create 是个函数 执行这个函数 这个函数的返回值也是一个函数 执行并传入Login 组件参数export default WrapperFormconst form =
2021-09-16 22:22:43
463
原创 react Ant 组件库操作字段render Table添加按钮
// 设置列的数据const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Age', dataIndex: 'age', }, { title: 'Address', dataIndex: 'address', }, { title: '操作', dataIndex: 'operation', key: 'operation',.
2021-09-09 14:53:05
1294
原创 【vue踩坑记录】“Error in render: “TypeError: Cannot read property ‘0‘ of undefined“”渲染错误问题
见文之意：这里的意思就是模板在渲染时候，读取对象中的某个对象的属性值时，这个对象不存在，说通俗点就是三层表达式a.b.c，在对象a中没有对象b，那么读取对象a.b.c中的值，自然会报错。如果是两层表达式a.b则不会报错，返回的是undefined。原因：因为初次渲染的时候请求的数据是异步，所以初始渲染的时候拿不到它的属性解决方法： 在渲染的外部Box增加一个判断，v-if//条件判断，初次没数据就不渲染v-if="dataListe.length"...
2021-09-09 10:32:19
1298
原创 javascript查找字符串中出现最多的字符以及出现了几次
var str = 'abaasdffggghhjjjkkgfddsssss3444343'; var obj = {}; for(var i = 0; i < str.length; i++){ var chars = str.charAt(i); if(obj[chars]){//判断对象中有没有这个属性 如果有 让这个值 ++ obj[chars]++;//同时让他是这个对象的属性名
2021-09-08 09:44:28
102
原创 Failed to compile. Failed to compile. ./src/App.js Line 9: ‘React‘ must be in scope when using
这里报错，因为组件没有引入React 或者 React 小写 导致，补充修正就会正常运行import React from 'react';
2021-09-07 13:14:42
652
原创 React按需加载Ant Design Mobile
安装#npm install antd-mobile --save入口页面 (html 或 模板) 相关设置：<!DOCTYPE html><html><head> <!-- set `maximum-scale` for some compatibility issues --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-s
2021-09-02 16:59:23
240
原创 vue 实现标签云效果 全码
vue实现标签云<template> <div class="tagcloud-all" ref="tagcloudall" @click="infClick"> <a v-for="(item, index) in tagList" :key="index" class = "judge" rel="external nofollow" :style="'color:' + item.color +
2021-09-01 14:30:45
1820
原创 React中Redux 的详解和使用
下载react脚手架，创建项目Redux + Plain JS templatenpx create-react-app my-app --template reduxRedux + TypeScript templatenpx create-react-app my-app --template redux-typescript下载reduxIf you use npm:npm install react-reduxOr if you use Yarn:yarn add react
2021-08-16 11:31:02
417
原创 React中Hook详解
React中Hooks是什么？Hook是React 16.8.0版本新增的新特性/新语法可以让你在函数组件中使用state以及其它的React特性import React,{use...} from 'react'常用Hook：useState ：接受一个参数: 就是初始化state的状态 声明一个数组: 第一个: state的状态 第二个: 修改state的方法export default function Test (){ const [count, s
2021-08-16 09:43:16
645
原创 原生JS调用移动端相机
<div> <input type="file" id="myimg" onchange="imgChange(this)" accept="image/*" capture="camera"> < img width="300px" alt=""></div>var maxSize = 1024*1024*50; function imgChange(img) {
2021-08-12 17:01:21
1306
1
原创 cookie，localStorage 和 sessionStorage
cookie：cookie：可以设置失效时间，默认关闭浏览器后失效。cookie：每次都会携带在 HTTP 头中，如果使用 cookie 保存过多数据会带来性能问题localStorage 和 sessionStorage：sessionStorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。localStorage：除非被手动清除，否则将会永久保存。localStorage 和 sessionStorage： 仅在客户端（即浏览器）中保存，不参与和服务器的通信..
2021-08-09 15:21:46
50
原创 js中的奇技 * 巧
js中的奇技 * 巧函数设置参数的默认值let a = "如果没传我是a"function fn(str=a){ console.log(str)}fn("我传了，所以我是b")从对象解构出数据 let obj = {a: 11, b: 12} let {a} = obj console.log(b)export default导出对象有如下特点：可不必须指定函数名、类名等在一个文件或模块中，export、import 可以有多个，export def
2021-08-07 13:54:03
199
原创 React—Uncaught Error: Objects are not valid as a React child (found: object with keys {type, data})
这个问题是渲染了对象导致的，根本解决方式就是修改渲染对象的部分。
2021-08-07 10:44:20
366
原创 React —— 路由
下载 npm install react-router-dom -Sreact-router-dom 提供的子组件1.BrowserRouter 跳转模式 vue中的history模式 属性： 类型{ 1.basename 字符 basename= "/react" 在所有位置的基本URL后面添加/react 2.forceRefresh 布尔 forceRefresj = true 是否调整时强制刷新}2.HashRouter 约定跳转模式，为hash
2021-08-04 18:03:54
253
原创 g6中changeSize（）适配视图
window.addEventListener("resize", () => { let container = document.getElementById("mountNode"); let height = container.offsetHeight; let width = container.offsetWidth; graph.changeSize(width, height); graph....
2021-07-27 09:46:22
1215
原创 echarts中无法动态改变数据，残留上一次操作数据的画布的解决方案
echarts中清空图画 默认如果不手动清楚画布原来的数据，会将你改变后的数据进行替换，如果你默认没有原来数据对应字段的话，就会出现当前你要的字段 和 原来的字段出现在同一画布上。解决： myChart.clear() 清楚上一次的画布 async getOpenstes(ele) { if (ele) { 再次判断当前如果动态传参就是就改变原来的画布数据 let Evaluat = await getEvaluat(ele); this.Evaluats = Ev
2021-07-11 15:27:19
2184
原创 vue px2rem插件的使用
安装 postcss-px2rem及px2rem-loadernpm install postcss-px2rem px2rem-loader --save在根目录src中新建utils目录下新建rem.js等比适配文件// rem等比适配配置文件// 基准大小const baseSize = 16// 设置 rem 函数function setRem () { // 当前页面屏幕分辨率相对于 1920宽的缩放比例，可根据自己需要修改 const scale = document.
2021-06-18 09:40:57
1971
原创 Vue + element 实现课程表
<template> <div class='class-table'> <div class='table-wrapper'> <div class='tabel-container'> <table> <thead> <tr>
2021-06-17 14:31:25
3337
1
原创 HTML 设置动态 图片
HTML 设置动态 图片<video src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/9177d79224b5679e279379728d9dfa54_preview.mp4" muted="muted" loop="loop" autoplay="autoplay" x5-video-player-type="h5" style="opacity: 0
2021-06-10 17:58:22
5355
原创 前端JS 方法 将时间戳转换格式 2021-6-1
服务端给前端返回时间戳 2021-6-1 时间戳转化为 这种格式// 通过时间戳获取正常的时间显示 参数1： 时间数据 ， 参数2 ：类型 比如 Y 自我选择可删除 少传参function getTime(data,type){ var _data = data; if (String(data).length == 13) { _data = data } else { _data = data*1000 } const time = new Date
2021-06-10 15:29:07
1926
原创 typeScript的语法类型
类型断言，可以用来解析变量的实际的类型语法 as 类型tsc 文件名.ts 启动Ts转换JSany 任意类型 可以是任意类型的数据let aq = truelet ad: any;ad = "12345" 可以将自己的类型赋值给其它变量的的类型aq = adconsole.log(typeof aq)unknown 表示未知类型的变量unknown 类型的变量 不能直接辅助给其它变量let as: unknown;as = 10 ;as =
2021-06-02 21:03:40
243
原创 Cannot read property ‘getAttribute‘ of null“
通过$refs获取不到 el-dialog对话框中的子组件对象，document.getElementById("#") 返回的都是null，这也就导致了上图的错误。查看div id名 或者 ref 名设置是否正确 " " 里面包含空格 如果多余空格也是获取不到 this.$nextTick(function () { });...
2021-05-31 11:28:27
283
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人