爱焰-CSDN博客

原创【react】pc项目教程

了解项目的定位和功能能够基于脚手架搭建项目基本结构实现步骤使用create-react-app生成项目进入根目录启动项目调整项目目录结构保留核心代码3. 使用gitee管理项目能够将项目推送到gitee远程仓库实现步骤能够在CRA中使用sass书写样式是一种预编译的 CSS，作用类似于 Less。由于 React 中内置了处理 SASS 的配置，所以，在 CRA 创建的项目中，可以直接使用 SASS 来写样式实现步骤安装解析 sass 的包：创建全局样式文件：

2022-07-08 15:08:42 801 1

原创【react】教程

了解什么是React以及它的特点React是什么一个专注于构建用户界面的 JavaScript 库，和vue和angular并称前端三大框架，不夸张的说，react引领了很多新思想，世界范围内是最流行的js前端框架，最近发布了18版本，加入了很多新特性 React英文文档（https://reactjs.org/） React中文文档（https://zh-hans.reactjs.org/） React新文档（https://beta.reactjs.org/）（开发中…）React

2022-07-08 15:05:32 346

原创【nginx】nginx的前端运用

location的匹配规则= 表示精确匹配。只有请求的url路径与后面的字符串完全相等时，才会命中。^~ 表示如果该符号后面的字符是最佳匹配，采用该规则，不再进行后续的查找。~ 表示该规则是使用正则定义的，区分大小写。~* 表示该规则是使用正则定义的，不区分大小写。注意的是，nginx的匹配优先顺序按照上面的顺序进行优先匹配，而且注意的是一旦某一个匹配命中直接退出，不再进行往下的匹配剩下的普通匹配会按照最长匹配长度优先级来匹配，就是谁匹配的越多就用谁。例如：server { se

2022-02-16 18:40:14 1712

原创【前端面试必读】js设计模式

1.工厂模式function createPerson(name, age, job){var o = new Object();o.name = name;o.age = age;o.job = job;o.sayName = function(){alert(this.name);};return o;}var person1 = createPerson("Nicholas", 29, "Software Engineer");var person2 = createPerso

2022-02-07 16:43:16 314

原创【前端面试必读】js排序的几种方法

1.冒泡排序比较相邻的元素。如果第一个比第二个大，就交换他们两个。对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。针对所有的元素重复以上的步骤，除了最后一个。持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。function bSort(arr) { var len = arr.length; for (var i = 0; i < len-1; i++) { for (var j = 0; j <

2022-02-07 15:03:06 2315

原创【前端面试必读】在js中为什么0.1+0.2不等于0.3

原因在于在JS中采用的IEEE 754的双精度标准，计算机内部存储数据的编码的时候，0.1在计算机内部根本就不是精确的0.1，而是一个有舍入误差的0.1。当代码被编译或解释后，0.1已经被四舍五入成一个与之很接近的计算机内部数字，以至于计算还没开始，一个很小的舍入错误就已经产生了。这也就是 0.1 + 0.2 不等于0.3 的原因。通常的解决办法就是把计算数字提升 10 的N次方倍再除以 10的N次方。一般都用 1000 就行了。(0.1*1000+0.2*1000)/1000==0.3/

2022-02-07 14:22:39 1520

原创【前端面试必读】js 数组循环的几种方法及返回值

1.for简单的遍历操作，没有返回值 let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; for (let i = 0; i < arr.length - 1; i++) { console.log('i: ', i); // 1, 2, 3, 4, 5, 6, 7, 8, 9 }2.forEach简单的遍历操作，没有返回值 let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; arr.forEach(item

2022-02-07 14:15:06 2657

原创【前端面试必读】js与jq操作dom的一些方法

1.创建节点js新的标签(元素节点) = document.createElement("标签名");var a1 = document.createElement("li"); //创建一个li标签jqvar $li = $('<a href="http://web.itcast.cn" target="_blank">传智大前端</a>');2.插入节点js插入节点有两种方式，它们的含义是不同的。方式1：父节点.appendChild(新的子节点);

2022-02-07 11:08:49 403

原创【前端面试必读】setTimeout 、 promise、async await 的执行顺序？宏任务、微任务，分别包含哪些？

JS 分为同步任务和异步任务同步任务在主线程上执行异步任务放在主线程之外的一个任务队列主线程执行完毕后，读取任务队列的内容宏任务(macro)task：当前主线程上执行的就是一个宏任务。例： script 的代码、setTimeout、setInterval、postMessage等。微任务：microtask。例：Promise.then、await后面的代码。在执行当前宏任务时（同步执行时），遇到 setTimeout 会把它放到宏任务队列。遇到Promise.then会放到微任务队列。当

2022-02-07 10:57:31 446

原创【前端面试必读】css基础面试

1.CSS选择器有哪些？选择符类型例子例子描述类别选择器(.class).intro选择class=”intro”的所有元素ID选择器(#id)#first选择id=”first”的所有元素标签选择器(element)div选择所有标签后代选择器(element element)div p选择元素内部的所有元素子选择器(element>element)div>p选择父元素为的所有元素群组选择器(element,elemen

2022-01-24 16:18:28 212

原创【前端面试必读】BFC (Block formatting context) “块级格式化上下文”

怎样触发：满足下列条件之一就可触发BFC　　【1】根元素，即HTML元素　　【2】float的值不为none　　【3】overflow的值不为visible　　【4】display的值为inline-block、table-cell、table-caption　　【5】position的值为absolute或fixed有何特性：1、阻止垂直外边距（margin-top、margin-bottom）折叠2、清除浮动，解决文字环绕，高度塌陷...

2022-01-24 15:54:17 223

原创【前端面试必读】实现三列两边固定宽度，中间自适应布局

calc实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .wrap{ width: 1

2022-01-22 16:57:06 201

原创【前端面试必读】实现三列中间固定，两边自适应布局

利用calc实现.area_left { float: left; width: calc(50% - 75px); height: 100%; background-color: bisque;}.area_center { float: left; width: 150px; height: 100%; background-color: black;}.area_right { float: left; wi

2022-01-22 16:55:05 291

原创【前端面试必读】实现图片16：9

<div class="img_wap"> <img src=""/> </div>.img_wap{ padding-bottom: 56%; width: 100%; position: relative; } .img_wap img{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

2022-01-22 16:52:30 933

原创【前端面试必读】flex简介及‘麻将三饼’布局的实现

2022-01-22 16:47:26 434

原创【前端面试必读】网站的页面是怎样变成灰色的？

每当遇到重大的需要全民祭奠的节日，好多大平台的网页就会变灰，你知道是怎么做到的吗？实现的方法很简单，一般都会使用css的filter去实现。代码如下：html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); fil

2022-01-22 16:36:24 805

原创【前端面试必读】w3c标准是什么？

web标准简单来说可以分为结构、表现和行为结构主要是有HTML标签组成表现即指css样式表行为主要是有js、dom组成web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。2、W3C对于WEB标准提出了规范化的要求1）标签和属性名字母要小写2）标签要闭合3）标签不允许随意嵌套4）尽量使用外链css样式表和js脚本。让结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。5）样式尽量少用行间

2022-01-22 16:27:42 7587

原创【js】数组怎么根据另一个数组筛选数据，并提取出来？

第一个数组：let comments = [ { id：1， name: 'A_soulmate', message: ' nice day', dateTime: '2022-01-13' }, { id：2， name: 'A_soulmate2', message: 'nice day', dateTime: '2022-01-13 }, { id：3， name: 'A_soulmate

2022-01-13 11:23:54 494

原创【js】form-data向后台传输数组

原本的数据：let data = { id_list:[23652,59845] }很明显这样不能变成数组，所以要变化一种形式写。let data = { id_list:JSON.stringify([23652,59845]) }这样写就可以了！

2022-01-13 11:11:26 926

原创【vue】判断当前的运行设备

1.下载//npmnpm install current-device//yarnyarn add current-device2.main.js引入import device from 'current-device'3.使用直接调用方法即可if (device.mobile()) { console.log('移动手机')} else if (device.ipad()) { console.log('ipad')} else if (device.desk

2022-01-13 11:06:01 774

原创【js】金额数目千分位显示

问题描述应用中金钱数目常常使用千分位分隔，使用js写了一个简单的函数。解决方案可以使用字符串操作，也可以数组操作，不过最简单的还是正则替换。分了2种情况，一种是以1234567为例子，先字符串截取得到前面的1，然后对后面的234和567替换为’,234’与’,567’，然后拼接得到1,234,567。另一中是位数刚好是3的倍数的，比如123456789，然后替换得到’,123,456,789’，然后字符串截取得到123,456,789。function get_thousand_num(num)

2022-01-13 10:51:52 479

原创【js】将毫秒转换成“天时分秒“

话不多说，直接上代码开搞。formatTime(msTime) { let time = msTime /1000; let day = Math.floor(time /60 /60 /24); let hour = Math.floor(time /60 /60) %24; let minute = Math.floor(time /60) %60; let second = Math.floor(time) %60; return `${d

2022-01-13 10:46:44 466 1

原创【js】获取文件名和后缀名称

1.使用subtring() 截取字符串，对于文件名中会出现多个点的很有用，从最后一个点的地方截取。// 获取文件名getFileName (name) { return name.substring(0, name.lastIndexOf("."))},// 获取 .后缀名getExtension (name) { return name.substring(name.lastIndexOf("."))}// 只获取后缀名getExtension (name) {

2022-01-12 18:20:11 1696

原创【vue】在vue项目中通过a标签download下载本地文件

1.将需要下载的文件放在public，也就是和index.html文件一个文件夹下即可，如下图：然后在需要进行点击下载文件的地方添加如下代码：<a href="./需要下载的文件名" download>点击下载</a>就可以实现下载啦。...

2022-01-12 18:16:15 1226 2

原创【ElementUI】Upload组件上传时如何携带参数

今天在写文件上传时,想要在上传的时候携带参数。于是查阅element官网寻找答案，经过一番搜索，终于解决了此问题，现在分享给大家。可以直接使用 :data={参数} ,参数为键值对的形式{key1:value1,key2:value2},传递参数,如下<el-upload class="avatar-uploader" action="/setmeal/updatePicture.do" :data={pictureName:this.imageName} :auto-upload="au

2022-01-12 18:12:16 5438 1

原创【vue】项目的 env 文件使用

这个文件的产生是为了区分各个开发环境…文件名的解释：文件(在项目根目录新建).env 无论开发环境还是生成环境都会加载.env.development 开发环境加载这个文件.env.production 生成环境加载这个文件注意env 文件需要声明运行的环境.env.developmentNODE_ENV = development---------------------------------------------------------.env.productionNODE_

2022-01-12 15:31:55 560

原创【vue】clipboard实现文本复制

1.下载npm install clipboard --save2.引入使用import Clipboard from "clipboard";3.使用方法 <el-button id="publicKey" type="success" :data-clipboard-text="linkUrl" @click="copy('publicKey')" > Copy linkUrl </el-but

2022-01-12 14:56:38 152

原创【vue】postcss-px-to-viewport移动端适配插件

之前做移动端适配时，基本上是采用rem方案，现在发现了一个新的方案，就是用viewport单位，现在viewport单位越来越受到众多浏览器的支持，postcss-px-to-viewport，将px单位自动转换成viewport单位，用起来超级简单。1.安装npm install postcss-px-to-viewport --save-dev2.在vue.config.js中配置module.exports = { css: { // 将项目和插件中的px转成rem lo

2022-01-12 11:21:05 761

原创【CSS】实现必填项前添加红色星号

在前端实现表单验证的过程中，有些必填项需要加星号提醒，怎样实现呢，下面介绍两种方法实现。1 . 常规写法<label><span style="color:red;">* </span>爱焰 : </label><input type="text" value=""/>2 . CSS写法(更简洁方便 , 而且便于统一调整样式)<style> label.xrequired:before { conte

2022-01-12 10:42:23 3932

原创【ElementUI】table表格多选状态如何禁选

对elementUI中table表格的多选框进行可勾选和不可勾选的处理给 type 属性为 selection 的加一个事件:selectable='selected’<el-table-column type="selection" width="55" :selectable="selected"> </el-table-column>methods中：判断后台给返回的状态码selected(row, index) { if (row.WaitConfirmR

2022-01-11 15:34:14 11981 7

原创【ElementUI】el-table中的label换行问题

想要实现label中换行的问题，我们以下面两种方式进行解决。1.依赖CSS的方法1.label中增加 \n<el-table-column prop="name" :label="'姓名\nname'" min-width="100"></el-table-column>2.设置white-space样式.el-table .cell {　　white-space: pre-line;}如果没有生效，查看一下css的权重问题，粗暴的方法可以使用!important

2022-01-11 15:07:22 5881

原创【vue】三种方法重置vue组件的data数据

我们在vue组件中经常遇到需要重置表单的场景，需要重置data中的对象

2022-01-11 14:19:02 9511 2

原创【ElementUI】datepicker日期选择器时间选择范围限制

1.单个输入框的情况<el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions0"></el-date-picker>情景1: 设置选择今天以及今天之后的日期data (){ return { pickerOptions0: { disabledDat

2022-01-11 11:18:07 1568

原创【JS】7分钟理解JS的节流、防抖及使用场景

7分钟理解JS的节流、防抖及使用场景前言据说阿里有一道面试题就是谈谈函数节流和函数防抖。糟了，这可触碰到我的知识盲区了，好像听也没听过这2个东西，痛定思痛，赶紧学习学习。here we go！概念和例子函数防抖(debounce)在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。看一个

2019-07-26 15:16:55 262

原创【JS】7 个有用JavaScript技巧

...

2019-07-25 16:01:55 300

原创【JS】详解bind,call和apply的区别

首先这三个方法都可以改变this的指向，下面从用法上来说一下他们的不同点一.bindvar name = 'sally'; function sayName(){ return this.name;}function sayName2(){ return this.name} var o = { 'name':'John', sayName:say...

2019-07-24 15:13:41 267

原创【JS】js获取地址栏参数

方法一：(基础版)function getQueryString() { var sHref = window.location.href; var args = sHref.split("?"); if (args[0] == sHref) { // 没有参数，直接返回空即可 return ""; } var arr = args[1].split("&am...

2019-07-24 10:50:49 223

原创【HTML】总结HTML5新特新

一. 语义化标签1.使用语义化标签的原因/优点:根据内容的结构化使用语义化标签，能够使开发者更好的阅读和理解以及浏览器爬虫与搜索引擎解析。2. 语义话标签集合新block标签：header,footer,main,aside,article,section,nav,hgroup（主要8个）。新表单标签：date、time、email、url、search媒介标签： video 和 au...

2019-07-24 10:47:06 234

原创 vue中8种组件通信方式,纯干货！值得收藏

vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家，坐着一屋子的陌生人，相互之间怎么称呼，这时就需要先知道自己和他们之间是什么样的关系。vue组件中关系说明:如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系； B与C之...

2019-07-22 11:10:41 1532

原创 vue实现word或pdf文档导出的功能，干货！

vue实现word或pdf文档导出的功能，我的项目是：后端返回一个文档流(下图)，然后前端对文档流做处理进行下载，代码如下：import axios from 'axios'; axios.get(`url`, { //url: 接口地址 responseType: `arraybuffer` //一定要写 }) ....

2019-07-18 09:18:00 1755

空空如也

空空如也