- 博客(164)
- 收藏
- 关注
RSS订阅原创 前端解决跨域问题
前端解决跨域问题1. 为什么会出现跨域问题浏览器的同源策略浏览器规定非同源网站不能相互发送ajax请求假设A、B网站不同源，A向B发送ajax请求，其实请求时发送过去了，只不过浏览器拒绝了B发送过来的响应，然后报错同源：网站拥有相同的：协议、端口号、域名，三者有一个不一样就不是同源2. 解决办法JSONPJSONP只支持GET方法利用script标签的src属性src有发送请求的功能且不是同源策略的影响将非同源服务器端请求的地址写在src属性上<script src
2022-05-18 07:37:10
386
原创 toString()
toString() 方法可把一个 Number 对象转换为一个字符串，并返回结果。忽略点: 没有注意到其实toString()方法是有参数的语法：toString(radix)radix可以省略，他表示数字的基数，使 2 ~ 36 之间的整数。省略默认为10跟前面一样，意思就是可以根据radix将数字转为用某个进制表示的字符串，比如let num = 6;let res10 = num.toString(); // 转换为10进制表示的字符串，结果为'6'let..
2022-05-13 07:04:12
499
原创 split()和join()
忽略点：印象中记得这两个是对数组还有字符串进行分割的，但是记得不是很清楚到底是哪个是对字符串/数组进行分割的，对于里面参数的使用也不是很明确查看官方文档split()是一个对字符串进行处理的函数 - String.split()，join()就是一个数组的方法 - Array.join()split()用于把一个字符串分割为字符串数组语法：stringObject.split(separator,howmany) - `separator`: 必需。字符串或正则表达式，从该参数指定.
2022-05-13 07:02:30
563
原创 parseInt()
做题时遇到的，对于输入的一组数字，需要求出这组数字里偶数的二进制，并将其二进制反转得到一个新的数字这里面需要解决两个问题：1. 将可能是字符串的元素值转为整数；2. 求二进制对应的整数以上两个问题都可以通过parseInt()解决，parseInt()可解析一个字符串，并返回一个整数。parseInt()有两个参数string：必需。要被解析的字符串。radix：可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。对parseInt疑惑的点之前一直不太熟悉p..
2022-05-13 07:01:59
1287
原创 switch语句
switch可以通过设置break在判断完某个条件后跳出循环，这个是可以自由定义的也可以通过default对不符合条件的情况进行处理忽略点：未注意到在没有使用break跳出循环时，当某个点符合条件执行了这个语句后，他后面的case条件都会执行比如下面的代码，flag存在并且值为11，那么就进入case 11:这里，执行完后，由于case 11:里没有用break来跳出循环，那么就会把case 11:后面的语句都执行一遍，最终得到month的值为93let month = 0;let flag .
2022-05-13 07:01:19
133
原创 输入一组以空格分隔的数字，把数字中偶数的二进制反转，再输出为二进制，最后得到一组新的数字
let readline = '1 6 5'let lines = readline.split(' ');let arr = [];for(let i = 0; i < lines.length; i++){ let a = parseInt(lines[i]); if(a%2 == 0){ let binary = a.toString(2); let str = binary.split(''); let res = ''; for(
2022-05-13 05:51:19
186
原创 根据日期获取某日是当年的第几天
let date = new Date('2020-4-2');let day = date.getDate();let month = date.getMonth();let monthnums = 0;let a = date.getUTCFullYear()let year = date.getFullYear();switch(month){ case 12: monthnums += 31; case 11: monthnums += 3
2022-05-13 05:13:37
241
原创 pip更新失败
pip更新失败的解决办法前提试过一下三种方法均不成功python -m pip install --upgrade pippython -m pip install -U --force-reinstall pippip install --user --upgrade pip解决办法更新时加上清华源镜像pip install --user --upgrade pip -i http://pypi.douban.com/simple --trusted-host pypi.do
2022-04-30 00:42:27
1233
原创 uniapp使用socketio刷新后socketId失效的问题
服务端// 使用express框架搭建服务器const express = require('express');const app = express();const server = require('http').createServer(app);const port = 3001; // 端口号// socket.ioconst io = require('socket.io').listen(server);const { det..
2022-04-28 13:37:00
966
1
原创 每日小知识 - JS中的for...in...和for...of...
for...in...for...in...以任意顺序迭代一个对象（除了Symbol对象）的可枚举属性，包括继承来的可枚举属性for in是ES5标准，遍历key语法for (variable in object){}variable：在每次迭代时，variable会被赋值为不同的属性名object：非Symbol类型的可枚举属性被迭代的对象在Array数组中的使用for...in...不适合用于遍历一个关注索引顺序的数组原因：遍历得到的index索引是字
2022-04-13 09:28:45
861
原创 Mongoose表与表之间实现关联查询
建两个表：user和friend，实现friend关联user关联user.jsconst mongoose = require('mongoose');const Schema = mongoose.Schema;// 建立用户表const UserSchema = new Schema({ name:{ // 用户名 type: String, },});module.exports = User = mo
2022-03-28 10:50:46
1381
原创 uni-app -- 改变页面背景颜色
在uni-app中想要修改整个页面的背景颜色，直接给修改最外层标签的background-color是无效的解决办法：使用page标签，设置他的高度为100%<template> <view class="chatRoom"></view></template><style> page{ height: 100%; } chatRoom{ height: 100%; background-color: #99999;.
2022-03-06 22:44:48
3320
原创 vue使用v-for同时遍历对象和数组
需求 有一个userMsg对象和一个userMsgTitle数组，需要将这两组数据使用v-for循环遍历，得到下面图片所示的效果数据data() { return { userMsgTitle:["昵称","签名","注册","性别","生日","电话","邮箱","密码"], userMsg:{ nickname: "嗷呜是唔西迪西啊！", sign:"退一步海阔天空。",
2022-03-05 20:57:00
1013
原创 将数组转为对象：键值对形式
const arr=[ {name:'harry', age:14}, {name:'sam', age:40}, {name:'gloria', age:16}, {name:'riky', age:33},]/* // 1. reduce(function(a,b),initValue) 使用reduce()函数每一次都会将上一次回调函数的返回值作为a的值，刚开始的时候a的初始值为initValue
2022-01-08 11:15:27
1526
原创 Day10 -- JavaScript实现按下 Shift 键后进行多选操作的功能
实现效果需求分析通过shift键实现连续多选功能按下shift的同时点击A复选框，然后在点击B复选框，A,B之间的复选框都被勾选上或者是先点击A复选框，再按下shift键点击B复选框，A,B之间的复选框都被勾选上代码实现方法一要实现这个关键在于需要知道A和B之间有多少个选项使用一个变量isBetween来标记有多少个选项，刚开始isBetween=false当遇到A和B的时候就对isBetween进行取反遇到A的时候，isBetween取反等于true遇
2021-12-25 13:26:47
2304
原创 每日小知识（JavaScript+css实战篇）-- 消息动态弹窗
实现效果点击按钮出现带有遮罩层的弹窗弹窗的展开和关闭都带有动画效果实现 实现消息弹窗有三大部分：遮罩层+消息提示框；弹窗展现和关闭时的动画效果；关闭弹窗（或者做其他操作时）跳出的提示框完整代码实现消息提示框+遮罩层<style> /* 添加任务卡片 */ .dialog{ /* 遮罩层 */ width: 100%; height: 100%; background-color: rgba(0,0,0,0.85);
2021-12-24 16:39:07
941
原创 每日小知识（JavaScript+css实战篇）-- 消息动态弹窗代码部分
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>后盾人</title> <style> /* 添加任务卡片 */ .dial
2021-12-24 16:21:55
376
原创 每日小知识（css篇）-- 心动的感觉（css画会跳动的红心）
实现效果 心型缩小后回到原来大小实现步骤 有两种实现方法方法一：准备四个div，一个div作为容器，一个弄成正方形，另外两个画圆，通过transform: translate();来移动他们的位置，拼接成下面这个样子接下来给容器div设置transform: rotate(45deg)，让他旋转45°，再去掉背景颜色设，然后把其他div的背景颜色都设置为red，这样就完成了一个心型。代码<style> * { padding: 0;
2021-12-22 15:17:04
615
原创 每日小知识（JavaScript篇）-- 实现instanceof
前言每个函数创建时都会有一个prototype属性，这个属性指向构造函数的原型对象构造函数的实例有一个[[prototype]]指针指向构造函数的原型对象在脚本中没有标准的方式访问[[Prototype]]，但 Firefox、Safari 和 Chrome 在每个对象上都支持一个属性__proto__可以使用__proto__属性代表[[Prototype]]指针原型对象默认有一个constructor属性，指向与该原型对象相关联的构造函数。三者关系示意图：实现
2021-12-18 10:39:44
345
原创 每日小知识（css篇）-- 纯css实现响应式导航菜单
1. 实现效果当屏幕宽度小于300px的时候，只显示菜单按钮，点击菜单按钮显示菜单内容当屏幕宽度大于300px的时候，隐藏菜单按钮，显示菜单内容2. 具体实现使用到css的媒体查询@media和input表单的checkbox类型<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible
2021-12-16 14:17:52
1312
原创 每日小知识（JavaScript篇）-- 实现call()、apply()、bind()
前言 使用自己写的call()、apply()函数实现防抖：在input输入框中输入内容后，隔一段时间在进行操作（比如在控制台打印出input的内容），而不是每次输入都触发操作<body> <input type="text" name="" id=""> <script> const input = document.querySelector('input'); // 实现call()函数 Func
2021-12-15 16:32:29
1113
原创 网络请求与远程资源
1. 前言 在XHR(XMLHttpRequest)出现之前，Ajax(Asynchronous JavaScript + XML，异步JavaScript加XML)风格的通信必须通过一些黑科技实现，主要是使用隐藏帧技术（隐藏框架）或者是内嵌帧技术（内嵌的框架）。Ajax技术能实现：不刷新页面更新网页在页面加载后从服务器请求数据在页面加载后从服务器接收数据在后台向服务器发送数据 实际上在Garrett发布关于ajax技术文章之前，这种技术就已经存在了，不过在那之前一般称这种技术为远程脚本。这
2021-12-12 09:46:51
217
原创 CSS的transform-origin 属性
定义和语法语法transform-origin: x-axis y-axis z-axis;默认值transform-origin:50% 50% 0;单位transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。属性值详解没有旋转的时候下面例子都旋转45°，transform: rotate(45deg);默认位置是以元素中心为基点transform-origin: 50% 5
2021-11-30 14:56:01
838
原创 Day3 -- 通过JavaScript操作css变量
实现效果需求分析拖动滑块图片的外边距大小和颜色以及图片的清晰度会发生改变，标题中的JS字样颜色也会图片外边距颜色变化第一步：设置可拖动的滑块和颜色拾取器这里需要用到input标签新增的表单类型可拖动的滑块：<input type="range"/>颜色拾取器：<input type="color"/>第二步：设置滑块的可拖动范围以及颜色拾取器默认的颜色设置拖动范围：给input标签设置属性min和max设置默认值：给input标签设置属性v
2021-11-26 21:06:24
1012
原创 每日小知识(JavaScript篇) -- 递归拼接树形结构和将树形结构转换为扁平数组结构
Array.push()会在数组尾部添加元素，并且返回数组长度打印Array.push()会得到数组长度var arr = ['age'];console.log(arr.push('name')); // 2要想打印添加元素后的数组，不能直接连带push()一起输出，直接console.log(arr)就行var data = [ {id: 1, parent: null, text: '菜单1', children:[ {id: 13, par..
2021-11-25 17:18:20
1141
原创 Day1 - 原生JavaScript实现打击鼓
实现效果实现思路一共要实现两个功能：按下键盘A-L的某一个键就播放对应的音频实现这个功能需要监听键盘按下的事件，用到onkeydown事件可以在控制台打印一下window，会看到他里面自带了很多的事件（以on开头）要实现按下按键A，然后对应的方块A就播放音频，就需要给每一个方块绑定按键A-L对应的编号比如，给方块A添加onkeydown事件后，打印一下event，可以看到event对象里有一个keyCode属性，这个属性对应的按键A的值为65专门查按键对应的k
2021-11-19 16:24:26
895
原创 每日小知识(vue篇) - vue中的render函数
前言vue绝大多数情况下都是使用<template>模板来创建HTML的，但是也可以使用渲染函数render来生成HTMLrender函数的作用render函数其实就是用来代替<template>来生成html的render函数通过返回一个 createElement()方法生成template模板，这个方法是render函数自带的createElement参数传递给它的createElement()函数有三个参数，分别提供标签名，标签相关属性，标签内部的htm
2021-11-17 17:25:34
864
原创 exports和module.exports的区别
在CommonJS模块规范中，通过require来引入外部模块，通过exports和module.exports来导出模块使用require引入模块时，会得到模块导出的内容，可以用一个变量接收他比如有两个文件import.js和export.js，现在要在import.js中引入export.jsexport.jsconsole.log('我是export.js');exports.hello = 'world';module.exports.year = '2021';set
2021-11-16 21:55:54
440
原创 JavaScript运行机制：Event Loop
JavaScript运行机制：Event Loop注：对阮一峰老师的JavaScript 运行机制详解：再谈Event Loop，做的学习笔记1. 为什么JavaScript是单线程的先来了解一下进程和线程这两个概念比喻进程就是一个公司，每个公司都有自己的资源可以调度；公司之间是独立的；线程就是公司里的每一个员工，多个员工一起合作，完成任务，公司可以有一名员工或多个，员工之间共享公司的空间什么是进程进程：是cpu分配资源的最小单位；（是能拥有资源和独立运行的最小单位）什么是线程线程：是c
2021-11-15 14:44:17
943
原创 每日小知识(小案例) - 实现输入框字体动态部分
效果图：具体代码首先，定义一个divkeyText用来存放数据在设置一个input输入框，使用绝对定位，把keyText放到input输入框里css<style> .input_box{ position: relative; } input{ height: 24px; border: 1px solid #ccc; } .keyText{ position: abs
2021-11-15 14:34:29
235
原创 每日小知识(Vue篇) --- 全局注册组件
前言通常我们要实现这样一个功能：在App.vue中使用<h-button></h-button>App.vue<template> <div id="app"> <h-button></h-button> </div></template>就需要在App.vue中通过import引入h-button的文件路径，在使用components注册这个组件。<script>
2021-11-12 10:01:35
519
原创 浏览器工作原理
本文章知识点来源于b站upobjtube的卢克儿【干货】浏览器是如何运作的？1. 浏览器框架图浏览器的框架大致可以简化为以下三个部分：用户界面用于展示出标签页窗口之外的其他用户界面内容浏览器引擎：用于在用户界面和渲染引擎之间传递数据渲染引擎（浏览器内核）：负责渲染用户请求的页面内容网络模块：负责网络请求js解析器：解析和执行js数据持久层：帮助浏览器存储各种数据，比如cookie2. 多进程浏览器首先来了解两个概念：进程：进程是操作系统进行资源分配和调度的基本单位
2021-11-01 16:21:20
115
原创 JavaScript执行原理
本文章知识来源b站upobjtube的卢克儿【干货】8分钟带你了解JS运行原理！写了那么多代码，还不知道JS是如何被运行的？干货】8分钟带你了解V8引擎是如何运行JS！都2020年了还不知道什么是V8？干货】6分钟带你掌握JS调用栈 | JS运行原理系列31. JS是如何被编译的JavaScript初认识JavaScript是由Brenddan Eich在1995年创建的，JavaScript在初期设计时基本就是很多语言的大杂烩借鉴了C语言的基本语法借鉴了Java语言的数据类型和内存管
2021-11-01 16:11:56
949
原创 使用事件冒泡和事件委托来优化代码 - 给子元素添加事件问题
下面记录的是在完成纯js实现日历组件过程中遇到的问题遇到的问题1. 下拉菜单实现部分下拉菜单的展现，以及点击选项框后会出现的样式，都是事先写好的比如，下拉菜单是本来就存在了，只不过是隐藏起来了。当我点击选项框后，就给他添加了一个类名active，然后通过这个类名在添加了display:block让他显示出来同样的，选项框被点击后的样式，以及下拉菜单的每一个选项被选中后的样式，都是通过js给他们添加类名从而获得事先写好的样式。往常我是会通过js来给每一个动态变化的元素添加样式，这样看起来比较
2021-10-27 16:50:11
634
原创 移动端vue封装轮播图组件
移动端vue封装轮播图组件假设我们需要实现一个有四张图片的轮播图1. 实现思路将拿到的图片布局好要实现轮播就要让图片有规律的动起来2. 实现步骤第一步：封装组件组件可以提高模块功能的复用性，当我们在另一个项目也有同样的需求时，可以直接拿过去用这里我们需要封装一个Swiper.vue、SwiperItem.vue、HomeSwiper.vue组件Swiper.vue：作为该轮播图的主组件，主要功能函数写在这里封装组件就少不了插槽slot<template>
2021-10-20 17:54:06
1360
原创 移动端vue轮播图组件 - 代码
Swiper.vue<template> <div class="swiper"> <!-- 显示轮播图片区域 --> <div class="slide" @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove"> <slot></slot> </div> <!-- 小圆点显示区 -.
2021-10-20 17:48:15
1479
原创 启动vue项目时报错spawn cmd ENOENT errno: -4058
问题我在设置vue项目启动后自动跳转浏览器时，控制台报错报错如下：DONE Compiled successfully in 11178ms 下午3:42:04 App running at: - Local: http://localhost:8080/ - Network: unavailable Note that the de
2021-10-17 11:24:05
5278
9
原创 JavaScript函数重载
函数重载: 就是指在同一个作用域内声明了几个类似的同名函数，这些同名函数的形参列表（参数个数，类型，顺序）必须不同，常用来处理实现功能类似数据类型不同的问题我们可以思考一下为什么JavaScript不支持函数重载每个 JavaScript 函数实际上都是一个 Function 对象实例。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。我们将函数名看作是指向函数的指针，那么在同一作用域内声明了两个相同名字和类型的指针，后面的必然会覆盖前面的如何实现JavaScri
2021-10-14 13:22:54
374
原创 vue-cli3配置路径别名
vue文件路径引用简写当我们需要引用被多级文件夹嵌套的文件时，需要用到很多../../，使得引用路径看起来非常繁琐，这时我们可以采用简写模式在build文件夹中找到webpack.base.conf.js，在找到resolve:{}对象resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), }},其
2021-10-14 11:00:23
293
原创 使用vue-table-with-tree-grid树形表格组件
1. 安装（1）vue ui面板依赖 -> 运行依赖 -> 搜索vue-table-with-tree-grid -> 安装（2）控制台npm i vue-table-with-tree-grid -S2. 配置main.jsimport TreeTable from 'vue-table-with-tree-grid'Vue.component('tree-table',TreeTable) //tree-table:给要注册的插件起的名字//TreeTab
2021-10-14 10:58:51
416
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人