h周杰偷-CSDN博客

前文：本文章介绍前端一下数组的操作的小技巧,喜欢的小伙伴可以点一个赞1.将值强行转换成数组//js版const castArray = (value) => (Array.isArray(value) ? value : [value]); //ts版const castArray = <T,_>(value: T | T[]): T[] => (Array.isArray(value) ? value : [value]); //案例castArray(1); /

2022-01-23 16:16:16 700 4

原创 img 标签访问图片返回403 解决方法

错误信息解决方案:在HTML 的头部添加这个标签即可<meta name="referrer" content="no-referrer" /> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"><!-- 告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲

2021-08-29 09:33:22 1368 6

原创什么是跨域？

1 为什么会出现跨域出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）什么是同源策略(Same origin

2021-08-15 21:52:51 204 2

原创 react的消息发布与订阅

subscribe 和 publish的介绍消息发布与订阅是用来解决我们的兄弟之间的一个通信方式我们可以把消息订阅发布机制简单的理解为事件（发布，通过相同的名字找到订阅的函数）引入第三方库PubSubJS，就能直接在触发事件的组件中发布消息，监听组件中订阅消息来实现兄弟组件的通信：subscribe 和 publish的使用使用方法如下：工具库: PubSubJSGitHub我们百变不离其宗的就是先下载下载: npm install pubsub-js --save然后是使用impor

2021-08-15 21:25:28 630 3

原创 react的state的简写方式

前言state是react中用来初始化的。this.state 应该被视为一个组件的私有属性，我们的react的state的写法方式式有两种的一种是我们在官网上看到的用constructor(构造器) constructor(props) { super(props); this.state = { value: null, }; }但是在类组件中在使用state时类会继承了React.Component class Appt ext

2021-08-11 17:09:58 316

原创 react脚手架配置代理总结（超详细版）

react脚手架配置代理总结方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明：这个方法的话我们一般用的要少些优点：配置简单，前端请求资源时可以不加任何前缀。缺点：不能配置多个代理。工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）方法二第一步：创建代理配置文件在src下创建配置文件：src/setupProxy.js编写setupProxy.j

2021-08-05 18:10:10 180

原创 react应用（基于react脚手架）

使用create-react-app 创建react应用我们先介绍一下啥是脚手架1, xxx脚手架，用来帮助我们程序员快速的创建以个基于xxx库的项目的模板包含了所有的需要的配置（语法检查，jsx 编译）下载好了所有的相关的依赖可以直接运行一个简单的效果2 react提供了一个用于创建react项目的脚手架库：create-react-app3. 项目的整体技术的架构为： react+ webpack + es6 +eslint4. 使用脚手架开发的项目的特点：模块化，组件化

2021-08-03 14:16:56 153 2

原创判断一个字符串中出现次数最多的字符，并统计次数(新人不得不看)

判断一个字符串中出现次数最多的字符，并统计次数借助对象来存放字符，以及对应出现的次数 <script> function num (str){ // 首先定义一个空对象 var a = {}; // 然后在把我们传来的字符串进行分隔返回一个数组 var b = str.split(""); // (49) ["d", "a", "f", "s"

2021-08-02 23:32:45 704

翻译 React的基本使用(看了它在也不用为了学不会而苦恼)

1. React的基本使用1.1. 安装脚手架create-react-app1.2. 创建项目2. JSX语法2.1. VSCode配置2.2. 插值2.3. 列表渲染2.4. 条件渲染2.5. 事件绑定3. React组件3.1. 类组件3.1.1. 存在的问题3.2. 无状态组件4. 组件状态提升（组件通信）5. Props的定义5.1. 限制prop类型5.2. prop默认值5.3. children5.4. 类名的操作1. .

2021-08-02 10:33:45 551

原创 webpack的配置

webpackWebpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack改变的是前端的开发模式，使前端可以进行模块化开发，基于ESModule。现在主流的框架开发都基于webpack。entry入口文件设置，只有和入口文件产生模块关联，最终才能被webpack打包module.exports = { // 单入口写法 entry: "./src/main.js", // 多入口数组写法 entr

2021-07-26 19:13:44 199 8

原创 vue中使用echarts

vue中使用echarts如果在vue里使用echarts可以使用vue-echarts，又因为echarts需要echarts模块，所以我们需要安装这两个模块yarn add echarts vue-echarts在vue2中使用该模块时，需要安装@vue/composition-apiyarn add @vue/composition-api如何使用1 创建对应的组件在components中创建一个文件Chart.vue2 生成基本的模板结构，引入v-chart组件<temp

2021-07-25 17:18:50 738

翻译 axios的使用（详细版）

axios文档axios是一个封装好的独立的ajax请求库, 基于Promise。支持在浏览器和Node中使用使用我们可以在我们的页面中引入axios.js，然后使用axios相关功能<script src="axios.js路径"></script>请求方法GET、DELETEaxios.请求方法(get, delete)("接口文档的接口地址", { params: { 接口文档中的参数: "要携带的值" }}).then(res =>

2021-07-21 23:49:14 1595

原创一招教你学会element-ui的表单验证

ElementUI表单验证ElementUI的表单验证借助了async-validator，该模块内置了很多原生类型的验证，如： string, number等相关类型给el-form绑定model属性<template> <el-form :model="formData"></el-form></template><script> export default { data () { return {

2021-07-21 23:25:52 592

原创 vue实现解决跨域问题

第一步的话就是在当前项目的根路径下新建一个文件,文件名是固定的 vue.config.jshttps://cli.vuejs.org/config/#crossorigin这个解释说明的话我们具体可以看官方文档module.exports = { devServer: { //以上的ip和端口是我们本机的;下面为需要跨域的 proxy: { '/api': { // 拦截以 /api 开头的接口

2021-07-18 09:12:00 258 2

原创高级数组方法去重，查找（新人不得不看）

我们今天说的是一些数组的方法相信一写小伙伴们在数组去重的时候，和一些进行查找的时候大多时候的话我们用for去遍历的时候就很麻烦今天就叫你爱上这些方法·/* forEach((item, index, arr) => {}) map filter some every reduce find findIndex 大家经常使用的可能有这些 map filter

2021-07-16 15:52:11 308 10

原创 vue的生命周期（前端面试必问）

vue的生命周期介绍写这章博客不是为了要获得多少赞，主要是利用vue开发项目时踩的坑太多了。自己曾不理解或者遇到的问题再这里搞清楚，不想后来的人再遇到这样的坑，做技术的要懂得分享，做人嘛，最重要的是开心。vue官网说，“你暂时不用搞清楚这些…",我觉得你既然准备用vue做开发的，不搞懂搞透它，你以后会发现踩的坑终究还是有它引起的，等以后再来补坑，不如现在就拿下它。每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM

2021-07-16 12:21:57 2136 25

原创使用require.context实现自动导入vue项目路径（年轻人不得不会的装杯小技巧）

require.context的简历一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块我们先生成一个moduies文件夹//这个是我们生成的对象一会用const modules = {}//这个 require.context('我们的路径', 是否箭头固定是true

2021-07-13 18:04:32 469 5

原创新人不得不看Vuex核心内容

vuex核心内容（新人不得不看）Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化简单来说就是一个统一状态的管理工具我们的主要是为了我们后期的代码的维护那么在何时使用vuex呢，用官方文档的一句话是 Flux 架构就像眼镜：您自会知道什么时候需要它。建议大家尽量在多人开发中使用vuexVuex的核心思想statemutationaction这三个东西组成了Vuex的核心内容·

2021-07-12 19:36:07 179 8

原创 Vue用实现markdown编译器（如何叫别人眼前一亮的小技能）

当下Markdown是最流行的一个编辑器深受技术人员的喜爱，Markdown可以用来编写说明文档，用它写的文档很多技术平台都能通用；Markdown可以用来写技术博客，可以使说明部分和代码都非常清晰易读；Markdown格式转换方便，还可以轻松地将文本转换为 html、pdf等。首先我们要实现的是这样的效果在vue中我们想要使用html去翻译成markdown编译器的话我们要用上markdown的安装包第一步安装markdown安装包npm i markdown然后的话我们的.

2021-07-11 18:11:00 962 11

原创将时间格式化为几天前/几月前（和代码介绍）

这个是个小方法很简单但是我们在开发项目中这样的我必不可少接下来我们说下我们的相关效果就想这个力扣的话就有这个的效果上面会显示我们的在何时发布的文章的时间接下来我们看看我们要如何入手话不多说我们直接看代码// 时间格式化成秒分钟小时前 const formatDate = (value) => { const time = Date.now() - new Date(value) /* 1秒 1000 1分钟 1000 * 60 60000 .

2021-07-09 23:17:08 460 5

原创 vue-cli（脚手架）的安装步骤（新手不得不看）

vue作为当下前端必配的技能之一vue-cli的话也是其核心的部分我们今天就来聊聊这个cli的安装和创建项目吧https://cli.vuejs.org/zh/这个是我们安装的官方文档首先的话我们的vue-cli是依赖我们的node,js的所以我们要确保我们的电脑上有node不然的话没有办法进行下一步操作好那么我们话不多说开始吧，1，首先我们要在我们要打开我们的终端，也就是我们的命令行窗口在我们的窗口输入我们的如果是我们在VsCode打开终端的小伙伴安装错误的话在终端输入

2021-07-04 09:03:16 290 7

原创 vue组件化（基础教学）

我们学习vue的话关于组件，我们前期的话我们是务必要好好掌握的知识点，接下来我们话不多说开始解释我们的vue的组件化首先先介绍它的作用：主要的一个核心思路就是提高我们的代码的复用性、比如我们将一个页面中的所有的处理逻辑全部放在一起，处理起来就会变得十分的复杂，但是我们如果把这些的大的逻辑问题一个一个的拆分成一个一个的小的问题的话，就有利于我们更好的解决问题，我们组件的类型分为两种类型一种是我们的全局组件，一种是我们的局部组件全局组件的话可以在vue的多个实例中使用，局部组件的话只

2021-06-28 17:38:08 284 11

原创 js中的过滤和计算，汇总的方法（重点）

先是filter（）这个方法中有一个回调函数回调函数这个回调函数有一个要求他的的返回值必须是一个布尔值当返回的是true时这个回调函数会自动将这次回调的n加入新的数组中当返回的是false的话函数会过滤这次的n我们用这个方法来把一个数组中的小于100的放在一个新的数组中<script> 这个是声明的一个函数 let ad=[1,23,454,67,54,7876] 这个ado是添加的一个新的数组 var ado= ad.filter(function

2021-06-23 20:06:30 515 3

原创如何快速了解vue的解释和指令方法

这个文章说明的比较详细如果是有了解的小伙伴们可以跳过一些繁琐的基础解释，如果没有了解的小伙伴希望可以耐心看何为vueVue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。众所周知vue是前端必备的一个要理解的和常用的框架我们先.

2021-06-23 13:16:57 231 2

原创 DOM 的节点关系获取元素（超细心版）

DOM 的节点关系获取元素首先什么是通过节点获取元素呢？节点就是html的父子级关系意思就是·我们可以通过父亲获得子元素，也可以通过子元素获取父元素

2021-06-21 10:58:21 156 1

原创一个文章叫你理解ajax，（前段小知识）

ajax是web的数据交互方式，用于局部刷新网页使用场景：1，搜索框实时显示结果2，动态加载页面，3，列表页面的fey

2021-06-15 13:13:40 103 1

翻译前端面试大宝典

前端面试大宝典1html+css面试题2js面试题3 React面试题1html+css面试题1, HTML5中新增了哪些内容？广义上的html5指的是最新一代前端开发技术的总称，包括html5，CSS3，新增的webAPI。Html中新增了header,footer,main,nav等语义化标签，新增了video,audio媒体标签，新增了canvas画布。新增了一些标签属性，例如input的placeholder。Css3中新增了：圆角，阴影，滤镜，vwvh单位，flex布局，媒体查询，过度和

2021-06-10 16:19:55 824 1

空空如也

空空如也