- 博客(103)
- 收藏
- 关注
RSS订阅
原创 Vue 项目实战
前言为了练习Vue，写了一个小项目，主要内容是答题。项目简介ElementUI框架无后端，数据来源为本地JSON文件也可以改造成有后端的，查找题目种类就在后端完成比较原生，适合刚刚接触Vue，想做练习的同学笔者水平有限，如有不严谨之处请多多批评预览图主页/开始页答题页正文1. 初始化项目使用脚手架创建项目，cli3.x，选择router即可添加element，详见在vue中使用elementUI安装axios2. 在views文件夹中创建如下目录3. 写
2021-03-12 16:55:03
15263
8
原创 实训-利用HTML和CSS制作一个网页界面
项目介绍学习HTML和CSS有一段时间了，笔者做完了一个相对练习而言较为复杂的网页，纽曼官网首页，上一下效果图：这个网页相对来说还是比较有练习意义的，包含导航栏，轮播图，大量的浮动和弹性布局以及一些细小却重要的知识点。需求分析自顶向下，先整体在局部，我们慢慢分析。1.Header：头部比较简单，左侧有一个图片logo，右侧一个横向导航栏，每个单元有悬停效果。最右侧有个语言切换标志。2.Body：一个轮播图，有图片计数器和前进后退控制器。接下来有四个大部分，四部分均有一个标题及说明，再接具体
2020-09-29 18:48:24
30714
22
转载 Git报错 Permission to A/BestoneGitHub.git denied to B
今天和同事在弄github的时候，遇到了点小麻烦，在全球最大的中文网上一搜，果然不出所料，找不到写解决方案，于是自己在stackOverFlower上看了好几篇，总结了一下，终于找到解决方案！报错如下：初看知道大概是没有权限，导致不能从远程仓库读取，后来询问才知道我同事的电脑的SSH公钥已经绑定了他自己的GitHub 账号，我就不能再用他的公钥了，具体的请看stackoverflow网友所说的：上面说的话很清楚，就是你不能有多个账号添加了同一个公钥，一旦那样github就不能区分到底是哪个用户在安全登陆网站
2022-06-07 16:41:25
349
转载 React Hooks 与 setInterval
笔者在写一个简单的定时器样例时，遇到了一个闭包问题。百度一番后，找到答案。在此记录一下，该文章非常多的干货。原文链接
2022-05-30 15:49:56
201
原创 vue 搜索框添加历史搜索记录
笔者vue项目有一个需求，搜索框添加历史搜索记录。想着很久没更新博客了，记录一下吧。PS：pinia+vue3+vant+ts，或许你在使用vue2的语法，不要紧，可以根据自己的需求简单改改。效果图正文搜索框的逻辑就不介绍了，今天这个问题其实是vue操作localStorage。笔者先写了一个工具类来完成对缓存的操作：export class CacheManager { static getHomeSearchHistoryWords() { return localStorage
2022-05-05 17:47:37
4278
原创 React 开发错误记录
长期更新正文1. Error: Rendered fewer hooks than expected. This may be caused by an accidental early return state…hooks函数的调用问题，简单来说，不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。2....
2021-12-14 18:26:19
2011
原创 React 学习笔记
前言一段时间前开始学习react，本地笔记不知不觉已经几万字了。今日分享一部分有价值的笔记，希望与大家共勉。正文1. jsx语法虚拟dom标签中混入js表达式要用{}样式类名不能使用class，应用className内联样式，用style={{key:value,key:value…}}，外层花括号为混入js表达式，内层是js中包裹键值对的对象只能有一个根标签任何标签都要闭合，即使是单标签也要写成自闭合标签首字母小写，则去找有无对应的html标签，无则报错大写
2021-12-14 18:03:20
836
原创 idea中配置prettier
1.全局安装prettiernpm i prettier -g如果是mac系统，安装全局插件时需要sudo权限，在最前面加上即可。2. idea安装ctrl+，打开首选项，找到Plugins，选中Marketplace，搜索prettier，点击install，重启idea即可。如果想要修改快捷键,找到 首选项 >Keymap>Plug-ins>prettier，右键添加快捷键即可。...
2021-11-26 16:43:09
4426
原创 git 学习
1. linux一些命令pwd 显示当前路径ls 列出当前文件夹下所有文件rm 删除文件rm -r 删除文件夹touch 创建文件mkdir 创建文件夹cd 切换目录clear 清屏history 查看命令历史# 注释exit 退出2. git命令git config --global -l #显示当前登录的用户信息git config --global user.name #配置用户，必须要配置git config --global user.email#配置用户，必须要
2021-11-25 18:58:45
474
原创 flutter 组件——展示更多
介绍笔者自己封装的一个flutter组件，用于展示网格数据。可以传入默认展示的数目，网格的列数，展开和收起时显示的文字等。需注意的是，该组件需要传入一个itemBuilder函数，这个函数有context和index两个参数，即网格的子项构造函数。还需要传入一个包含所有网格数据的数组。网格的子项宽高比childAspectRatio也是可以传入的。效果图源码import 'package:flutter/material.dart';class MoreData extends Statef
2021-11-09 18:00:25
2037
原创 flutter页面内跳转——锚点效果的实现
问题描述点击一个按钮，跳转到页面对应的内容区域，类似于HTML中的target跳转，也就是锚点标签。在HTML中，此种效果的实现是不需要手动计算元素高度的，所以我在flutter实现的首先原则为不手动计算组件高度。解决方法一. 第三方插件1. indexed_list_view该组件需要创建controller，使用controller中的方法，根据索引值来跳转到ListView组件中的某一项。缺点是没有属性shrinkwrap，布局时需要注意。在其git社区，也有很多人请求官方加入这个属性。
2021-11-02 17:26:51
2637
原创 flutter GestureDetector添加点击效果
做法为把GestureDetector替换为InkWell，一个带onTap和child属性的组件，然后就有点击效果了。如果child是有背景色/图片的Container，可以将其替换为Ink，一个和Container用法类似的组件。原文链接
2021-10-27 12:23:14
3001
1
原创 json_mapper 自定义类型的List
问题笔者现在做的flutter项目，json序列化用到的插件是dart_json_mapper。当我在需要序列化的类中定义了一个字段：List<PayModel>? pays，编译运行，这个插件就报了错，错误信息大意为某某类型不是某某类型的子类型，或者不认识某某类型。查阅了官方文档，发现了这段话。大意为不能在需要序列化的类中定义自定义类型的List，如果必须这么做则需要手动转换。你可以定义如List<String>的基本类型列表。解决方法文档中同样也给出了解决方法。一种是
2021-10-26 18:18:37
484
原创 TabBarView 在 Column 中 报错
原因TabBarView组件占用父组件尽可能大的空间，这种布局一般外层都是可滚动的，类似SingleChildScrollView，而在Column中没有一个明确的高度约束，也就是说无限高，故报错。解决方法1. 定高直接了当地解决问题，但是有一个很大的缺点，TabBarView加载的组件可能是不同高度的，故预定的高度要取他们的最大高度，布局不好看。SingleChildScrollView( child: Column( children: [ MyTabBar(),
2021-10-26 18:00:11
894
原创 Flutter 中圆角按钮，渐变色按钮
如图所示思路ElevatedButton组件，我在网上没有找到直接设置的圆角和渐变色背景的属性。笔者的思路是，将按钮的背景色和阴影去除，在其外包裹Container，设置外层容器的圆角和背景色即可。代码Container( width: 340, height: 49, //在此设置 decoration: BoxDecoration( borderRadius: BorderRadius.circular(9), gradient: const Lin
2021-10-22 15:30:55
2817
原创 Flutter 上滑加载以及下拉刷新
实现下拉刷新flutter中，已经给出了实现，咱们只需要给出回调即可。很多解释都在注释中，请不要忽略。如果你想要直接看到全部代码，请拉到最后。import 'dart:async';import 'package:dio/dio.dart';import 'package:flutter/material.dart';import 'package:flutter_demo/base/view.dart';import 'package:flutter_demo/common/my_f
2021-09-07 16:10:15
1010
2
原创 前端工作周报8.30
正文initState() 是一个无返回值的函数，如果要在这里请求数据，不能在这个函数中添加async/await。重新定义一个async函数，在其中调用即可。在两个文件中定义两个写法完全相同的类，这两个类的实例在相互赋值时报错，说明类不同。不是说无状态的widget里面不能定义属性，而是无状态中的属性不能随着页面操作变化。Column 的宽度，取子组件中宽度最大值如果导入没有null safe的package，则flutter2.x报错。需要找到支持null safe的版本
2021-08-30 10:08:12
495
原创 flutter中的EventBus
插件地址：event_bus用法定义事件类型，通常来说是定义类，可以在类中定义属性来传参class LoginSuccessEvent {}class WarningEvent { String msg; WarningEvent(this.msg);}在需要监听事件的页面initState阶段添加监听 void initState() { // TODO: implement initState super.initState(); bus.on
2021-08-26 12:28:29
262
原创 前端工作周报 8.16 & 8.23
本应两周写两个周报，但在上周主管和我说不用干vue了，需要学习dart->flutter。这两周主要是在学习，这个博客会贴很多平时联系的代码。8.16 - 8.17Dart 安装下载SDK配置环境helloworld学习笔记PS：很多与js相同的语法默认忽略//void可选，表示无返回值void main(){ var str = '你好'; //var 会自动类型推断 var num = 1234; String str1 = '世界'; i
2021-08-23 14:16:37
934
原创 前端工作周报8.9
记录下前端实习工作的问题和收获。正文1. javaScript相关即使 null 和 undefined 有关系，它们的用途也是完全不一样的。永远不必显式地将变量值设置为 undefined 。但 null 不是这样的。任何时候，只要变量要保存对象，而当时又没有那个对象可保存，就要用 null 来填充该变量。这样就可以保持 null 是空对象指针的语义，并进一步将其与 undefined 区分开来。由于javaScript浮点数值的精度问题，永远不要用浮点数之和等于某个浮点数来作为判断条件最 小
2021-08-09 10:33:55
1874
原创 js 字符串转数值 的常用方法和对比
话不多说，直接正文。正文常用方法为这三种~~按位取反再取反，作用是把字符串变为整数数值。Number(str) 会保留小数点parseInt(str) 化为整数数值console.log(Number("121"));console.log(parseInt("121"));console.log(~~"121");console.log(Number("-121"));console.log(parseInt("-121"));console.log(~~"-121");这三
2021-08-09 10:30:30
818
原创 前端工作周报8.2
记录工作中的收获正文1. 样式问题文字超出容器显示省略号，必须设置三个属性：white-space: nowrap;text-overflow: ellipsis;overflow: hidden;除此之外，容器的display需为block/inline-blockMargin负值不生效的话，考虑display，考虑vertical-align默认值（baseline）会让垂直方向的margin负值失效El-tab-pane 想要改变label的样式，可以使用插槽 slot=“l
2021-08-02 10:42:43
200
原创 JavaScript两个数组的数据处理
来自思否的一个问答。原文链接正文问题提问者大概需求为将下面的两个数组，经过处理后变为预期的数组原数组const arr1 = [{ uid: 2 }, { uid: 3 }, { uid: 4 }];const arr2 = [ { text: '随便1', children: [{ uid: 1 }, { uid: 2 }], }, { text: '随便2', children: [{ uid: 3 }, { uid: 4 }], }, { text: '随便
2021-07-30 14:18:08
288
原创 element tab选项卡标签样式
前言今天工作时有一个需求，大致是把elementUI的选项卡标签样式修改修改。起初是想直接重写element样式类，但是需求中还需对标签中的数字特殊处理，这种方式就行不通了。百度找了很久，终于在一个偏僻的角落找到了答案。正文使用插槽其实这个解决方式，也是我第一时间想到的，但是查阅官网后，发现并没有对label的插槽。但是看着那位老哥的写法，试了试果然成功了。现在整理整理，发出来与大家共勉。原始的代码以及效果图<template> <el-tabs v-model="acti
2021-07-27 17:31:53
4287
原创 前端工作周报
实习期，记录一些工作中遇到的问题正文一. 关于watch更新列表的话，就用watch监听变化的部分，不要再变动之后的callback中逐一处理，如在增加或删除列表项时，再给本地列表进行加减，笨方法。watch监听的越具体越好。案例：由于刚来公司，对现在着手的项目不熟悉，watch监听了整个列表，只要列表变动，则重新load列表。这种方法是很蠢的，导致了watch无限循环加载列表，因为当我第一次修改了列表，列表重新加载后，则又触发了watch，又重新load列表…二. 父子组件之间的一些问题
2021-07-23 11:10:02
1864
原创 JavaScript前端面试题整理
前言本博客所有题目都来自B站UP主峰华前端工程师笔者觉得有些题目不错，记录一下。正文运行结果是？const a = (b)=>{ return b instanceof Function ? b() : b}console.log(a) console.log(a(()=>'hello'))console.log(a('world'))......答案：a函数本身，“hello”，“world”运行结果是？const myFunc = str=
2021-05-29 15:57:58
223
1
原创 nodejs 中 token 的使用
前言token 验证，在设计登录注册和一些权限接口时发挥作用。以nodejs为例，谈一谈jsonwebtoken的使用。正文一. 安装$ npm i jsonwebtoken二. 使用首先，需要提供一个密匙，也就是一个字符串，用于token的生成和验证。这个密匙一般会声明为全局变量，也就是在启动文件app.js中，方便在各个路由板块中共同使用。//将变量挂载到app上，app.get是取变量app.set('secret', 'zedhello99')在路由文件中，引入jsonw
2021-04-17 11:30:33
2467
1
原创 better-scroll 在vue3
前言最近在vue3中研究了一下移动端常用的插件better-scroll，方便确实是很方便，不过也是踩了不少的坑。共勉。PS：本文着重说明笔者遇到的坑点正文一. 安装$ npm i better-scroll二. 引入在你需要的组件进行局部引入import Bscroll from 'better-scroll'三. 使用创建实例在setupAPI中，需将创建实例的过程放入onMounted函数中。因为实例的创建需要寻找DOM元素，而在挂载完数据的onMounted周期，就可以完
2021-04-14 11:40:16
3636
2
原创 vue3.x + typeScript 知识点
前言不知不觉已经记录了这么多的知识点，更新一下吧。可能比较杂乱，请谅解。正文ref()和reactive()函数都是定义响应式数据的函数，ref更倾向于定义简单类型和数组，reactive定义对象es6语法解构reactive所定义的响应式对象，会让其失去响应式。应用...toRefs方法基本写法<script lang="ts">import {defineComponent, ref} from 'vue';export default defineComponent
2021-04-11 17:04:17
252
1
原创 js错误处理
正文try catch在 JavaScript 中进行错误处理，最常见的方式就是使用try catch语句。将容易出错的代码段放入try块中，即可捕获错误，程序便至少不会因为一个错误而崩溃。1. catch(error)所有浏览器都支持error.message属性，它包含了错误的基本必要信息。而且在error对象中，基本也就该属性比较有用。所以，最好还是只用message属性。2. finally如果你加入了finally子句，那么它其中的代码无论如何都会执行，即使在try或catch中使用r
2021-03-23 16:08:52
220
原创 typeScript 基础
part1函数参数只能对照形参个数，不能多也不能少数组定义方式：let arr: number[] = [1, 23, 4, parseInt('1')]let arr2: Array<number> = [1, 2, 3]枚举类型 enumenum Gender { Male, Female}let man: number = Gender.Malelet woman: string = Gender[1]console.log(man)co
2021-03-19 18:13:51
128
原创 数组排序算法
数组排序算法排序的稳定性：相等的两个值在排序后，不会更改相对的前后位置排序算法分为比较排序和非比较排序，本文介绍的是前者1. 冒泡排序相邻的两个元素比较，前面的元素如果大于后面的元素，则换位置。最大的元素最先排序到数组后面稳定排序function bubbleSort(arr) { const len = arr.length let flag = false if (len < 2) { return arr } for (let i
2021-03-15 15:43:00
96
原创 Promise 模拟实现
前言最近很想研究一下Promise的原理，通过查阅资料写出了这篇博客，文章有借鉴参考文档。正文本文主要实现的是两个点，基本的Promise和then的链式调用。代码的所有解释都在注释中定义状态//定义状态const FULFILLED = 'fulfilled'const REJECTED = 'rejected'const PENDING = 'pending'构造函数function MyPromise(handle) { //this.value 是resolve或re
2021-03-04 17:01:31
520
1
原创 js 知识点备忘
长期更新…前言有太多知识点，其篇幅不值得写一篇博客，那么就把它们汇总吧，干脆做一个备忘。如果你阅读了这篇博客，请先了解有些知识点可能是不准确的，甚至是不正确的，因为我随时都会修改，我会尽力保证准确性知识点复杂琐碎，各种类型都有正文setTimeout(callback, delay, ...args)第三个参数不限定个数，且会把这些参数传给第一个参数callback函数当做他的参数稀疏数组，索引长度大于元素个数map()不会遍历空的项，很多数组的操作都会跳过这些间隙
2021-03-03 16:04:32
88
1
原创 call，apply，bind 实现
正文call实现this指向绑定传参返回值，看了很多的实现例子，都没有写这个。如果缺少返回值，那么对很多函数的模拟实现call就不会成功，尤其是函数具有返回值的时候，比如Object.prototype.toString.call()thisArg为null或者undefined时，会指向全局对象Function.prototype.myCall = function (thisArg) { const globalObj = typeof window === 'undefi
2021-03-03 14:12:36
94
原创 手动实现一些函数的封装
正文reverse不改变原数组版，如果想要改变，那么不要deepClone即可Array.prototype.myReverse = function () { const length = this.length const arr = deepClone(this) for (let i = 0; i < Math.floor(length / 2); i++) { let temp = arr[i] arr[i] = arr
2021-03-01 22:14:56
158
2
原创 深拷贝的实现
正文注意： 拷贝之后，两个对象中的函数是一个函数，也就是说两个函数名都指向一个函数对象第一种写法function deepClone(sourceObj, resultObj) {resultObj = resultObj ? resultObj : {}for (let key in sourceObj) { //这是属性得是自己有的，不是继承过来的 if (sourceObj.hasOwnProperty(key)) { //得是个引用类型的数据，才去递归啊，也不
2021-02-28 18:34:09
205
1
原创 一道经典的 js 面试题
原题目在浏览器环境下，判断程序输出的结果是？ var foo = 'window的foo' let obj = { foo: 'obj的foo', func() { let self = this console.log(this.foo) console.log(self.foo) ;(function () { consol
2021-02-27 15:50:59
141
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人