Eva3288-CSDN博客

原创【nodejs开发个人博客】-2 搭建开发环境+接口开发（不用任何框架）

文章目录1、搭建环境2、开发接口 -- 初始化路由3、开发路由 - 博客列表路由从0开始搭建，不使用任何框架使用nodemon检测文件变化，自动重启node使用cross-env设置环境变量，此工具兼容mac、linux、windows1、搭建环境线下开发数据库连接线下数据库，到线上后连接线上正式的数据库（数据库通过检测env:process.env.NODE_ENV的变化来修改配置）线下环境的日志直接打印到控制台中，上线后的日志需要记录到文件中，也需要一个标识r

2021-07-28 10:52:58 384

原创自定义指令

文章目录1.全局自定义指令1.1 钩子函数：1.2 钩子函数参数：2. 私有自定义指令3. 指令的简写形式4. 案例demoVue中所有指令都以（v-）开头，即：v-指令名1.全局自定义指令使用Vue.directive('name',{})定义全局自定义指令。参数一'name'：指令的名称，不需要加"v-"前缀；调用时需要加上。参数二{}：是一个对象，有相关钩子函数（可选），可在特定阶段执行相关操作1.1 钩子函数：钩子函数：bind()，只调用一次，指令在第一次绑定到元素身上时调用。

2021-04-15 15:12:37 435

原创封装UI组件库

如何封装并发布一个属于自己的ui组件库基础知识：关于Vue.use()详解*** Vue.use() 的使用和基本原理vue.use和vue.prototype.$xxx的区别参考：*** 教你搭建按需加载的Vue组件库教你搭建按需加载的Vue组件库(小结)_哒哒_前端开发者其他：基于elementUI封装自己的UI组件库...

2021-04-01 10:22:51 355

原创 vue-cli4打包时清除console.log

1.在项目中下载依赖包npm install babel-plugin-transform-remove-console -D2.在项目babel.config.js中配置let transformRemoveConsolePlugin = [];// 生产环境清除console.log的信息if (process.env.NODE_ENV != "development") { transformRemoveConsolePlugin = ["transform-remove-consol

2021-01-27 09:44:32 425

原创 nvm安装与使用

nvm安装与使用1、下载2、安装/管理nodejs3、命令提示1、下载下载地址： github本次下载安装的是windows版本。打开网址我们可以看到有两个版本：nvm-noinstall.zip：绿色免安装版，但使用时需进行配置。nvm-setup.zip：安装版，推荐使用注意的是安装路径最好不要出现中文和空格安装完确认：打开cmd，输入命令 nvm ，可以看到里面列出了各种命令,表示安装成功。2、安装/管理nodejs1、nvm list [available] – 有

2020-11-16 10:23:50 412

原创 Mac安装Homebrew、nginx

1、Mac安装Homebrew国内安装(可用)：/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"以上方法来自：参考如果采用了上面改的方法，就不用看下面的官方方法了。官方的方法可能需要翻墙或者安装完成之后的权限问题。官方安装方法1(需要翻墙)：/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com

2020-10-30 13:39:16 139

原创 element-ui 的table 滚动条在合计上边

.el-table { overflow-x: auto;}.el-table__header-wrapper,.el-table__body-wrapper,.el-table__footer-wrapper { overflow: visible;}.el-table::after { position: relative;}.el-table--scrollable-x .el-table__body-wrapper { overflow: visible;}属

2020-10-10 15:40:44 1041 1

原创数组场景题 -- 字节

let list =[ {id:1, name:'A', parentId:0}, {id:2, name:'B', parentId:0}, {id:3, name:'C', parentId:1}, {id:4, name:'D', parentId:1}, {id:5, name:'E', parentId:2}, {id:6, name:'F', parentId:3}, {id:7, name:'G', parentId:2}, {i

2020-08-23 19:42:17 166

原创 [‘1‘, ‘2‘, ‘3‘].map(parseInt) what & why ?

文章目录map方法parseInt()关于进制同理的题map方法参数必须是函数，非函数会报错参数1 – 回调（回调参数：当前项，索引，数组自身），参数2 – 回调中的this指向arr.map(parseInt) – parseInt 就是遍历每项后的回调，他的的参数就是每项和索引parseInt()parseInt则是用来解析字符串的，使字符串成为指定基数的整数。parseInt(string, radix) 接收两个参数，第一个表示被处理的值（字符串），第二个表示为解析时的基数

2020-08-22 22:11:20 197

原创 zoom和transform:scale()的区别

文章目录1. 兼容行区别2. 控制缩放的属性值不一样3. zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置4. 对文字的缩放规则不一致5. 执行的渲染顺序不同总结：zoom 不兼容火狐zoom 使等比例缩放，scale可以只缩放一个方向；属性值也不同zoom缩放基点是左上角，scale 是中心位置，用transform-orgin来改变zoom缩放文字受12好字体限制，scale 可以缩小到12号字体一下zoom 先缩放再渲染，s

2020-08-22 18:19:34 1764 1

原创网页里小于12号的字体怎么处理？- transform:scale()

在新版的chrome中，已经禁止了改属性,建议使用CSS3中的方法:transform:scale(0.875);当使用transform:scale(0.75)时; 不仅是文字变小了，整个文字所在的容器也同时会变小。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt.

2020-08-21 14:39:32 366

原创＜img src=“./logo.jpeg“ style=“width: 400px!important；“ alt=““＞修改图片的宽度

max-width:100px;给图片设置box-sizing: border-box;padding: 0 50px;，但图片左右会有50px的内边距利用缩放,给图片设置zoom: 0.625利用缩放,transform: scale(0.5,0.5)，但是占据的位置还是原来的200pxjs获取元素使用imgs[0].setAttribute(“style”,“width:300px!important;”)或者imgs[0].style.cssText=‘width:300px;’动画：谷歌.

2020-08-21 11:28:24 2557

原创多次异步请求，结果返回顺序的问题

搜索框进行搜索的时候，可能会先请求的数据在页面上覆盖掉后请求的数据，这就导致检索内容与当前检索关键字不一致例如：发送3次请求，有可能第3条请求最先发送，第1条请求最晚发送。而返回时间却是反过来的：第一条最先返回结果；异步请求返回顺序依赖网络，无法控制，所以每次请求的时长不一致，也就是不能保证请求返回顺序。解决方案：有的人直接使用ajax的同步模式就好了，但这样做就失去了ajax的意义了，而且用户体验也不好。在前端定义一个全局变量，记录请求次数的标识符，并把这个标识符带上传给后端，在

2020-08-19 10:04:10 2430 4

原创新建数组 + 数组的索引与长度

文章目录1. 新建数组1.1 字面量1.2 构造函数2. 数组的索引与长度数组主要用于封装/管理多个任意类型的数据数组是值的有序集合，由于弱类型的原因，js在同一个数组中可以存放多种类型的元素，且长度可以动态调整;1. 新建数组1.1 字面量var arr = []; //创建空数组var arr1 = [10]; // 创建数组 [10] -- 字面量方式，无论传入几个参数，都会把参数当作初始化内容//最好最后不要带多余的”,”，不同浏览器下处理不同,现代浏览器上运行

2020-08-17 20:48:35 983

原创浏览器兼容性问题

文章目录CSS兼容问题1. reset.css 重置样式2. IE9 以下不能使用透明属性 opacity3. 浏览器兼容前缀JS兼容问题1. 事件兼容性1.1. 事件对象和事件源1.2. 阻止浏览器默认行为和阻止冒泡1.3. 添加事件监听 / 移除事件监听 / 触发事件2. ajax3. H5的自定义属性 data-* 兼容问题4. 滚动条、窗口大小等兼容问题5. ie不支持let/const关键字6. 键盘事件 keyCode 兼容性7. 获取元素的非行间样式值CSS兼容问题

2020-08-17 09:13:24 551

原创 margin塌陷以及 margin合并

文章目录1. 什么是margin 合并？及何时会margin合并？2. margin 合并的几种情况1. 兄弟元素margin 合并2. 父子元素（父元素没有padding 或 border把两个margin分开，让其不相遇）父元素margin大 -- 正常margin合并子元素的margin大 -- --------------margin塌陷 --------------------3. 一个空元素，没有border和padding3. margin合并解决方法兄弟元素：父子元素：总结：普通

2020-08-15 16:15:36 245

原创 BFC - 特性、应用及如何触发

文章目录1. BFC2. BFC的布局规则3.触发 BFC4. BFC 特性及应用1. 防止margin上下重叠（不同bfc 里的元素互不影响）2. 清除浮动（BFC 可以包含浮动的元素）3. 自适应两栏布局 -- BFC 不与浮动元素重叠1. BFCBFC 即 Block Formatting Contexts (块级格式化上下文)具有 BFC 特性的元素可以看作是隔离了的独立容器(独立的渲染区域)，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性2. BFC

2020-08-13 21:57:47 211

原创防抖和节流

文章目录1. 防抖节流的异同2. 防抖(debounce) 实现3. 节流(throttle) 实现1. 防抖节流的异同相同 :防抖和节流是高频触发事件，频繁回调函数时做的性能优化，避免大量计算导致的页面卡顿/浏览器卡死；不同 :防抖是将多次执行变为最后一次执行 – 让某个时间期限内，事件处理函数只执行一次；节流是将多次执行变为在规定时间内只执行一次 – 节流会稀释函数的执行频率2. 防抖(debounce) 实现思路：在第一次触发事件时，不立即执行函数，用setT

2020-08-13 13:31:03 331 1

原创 CSS盒模型: ie盒模型 / 标准盒模型

元素的外边距（margin）、边框（border）、内边距（padding）、内容（content）就构成了CSS盒模型盒模型分为：IE/怪异盒模型和 W3C标准盒模型。标准盒模型：width/height = content宽高，不包含border和padding;IE 盒模型： width/height = content + padding + border，包含 border和padding。Css3新属性box-sizing: content-box | border-box | in.

2020-08-12 22:45:13 1669

原创未知宽高元素上下左右垂直居中

文章目录1. 绝对定位 + margin反向偏移/ transform: translate(-50%,-50%)2. flex布局3.绝对布局4.`table-cell`实现居中<div class="wrap"> <div class="box"> </div></div> 1. 绝对定位 + margin反向偏移/ transform: translate(-50%,-50%) .box{ width: 100px;

2020-08-12 22:36:00 375

原创 flex场景面试题

文章目录1. flex-内容宽度等分( flex: 1;)2. 左右布局，一侧定宽，一侧自适应撑满（一个width:200px;另一个：width:100%；）3. 未知高宽上下左右居中 (justify-content: center;align-items: center)1. flex-内容宽度等分( flex: 1;).box { display: flex;}.box div { flex: 1; border: 1px solid red;}<

2020-08-12 21:26:16 327

原创常用插件

文章目录1、cropper.js -- 裁剪图片并上传2. vue-drag-resize -- 拖拽与缩放3. JS时间处理插件MomentJS1、cropper.js – 裁剪图片并上传参考：cropper.js 裁剪图片并上传2. vue-drag-resize – 拖拽与缩放vue-drag-resize是一个支持拖拽与缩放的vue插件，支持vue 1.x与2.xgithub 地址3. JS时间处理插件MomentJS参考：JS时间处理插件MomentJS...

2020-08-11 12:55:53 152

原创数组扁平化

文章目录1、数组扁平化方法1：递归方法2：reduce1、数组扁平化数组的扁平化，就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。举个例子，假设有个名为 flatten 的函数可以做到数组扁平化，效果就会如下：var arr = [1, [2, [3, 4]]];console.log(flatten(arr)) // [1, 2, 3, 4]知道了效果是什么样的了，我们可以去尝试着写这个 flatten 函数了方法1：递归// 方法 1var arr

2020-08-11 12:55:16 90

原创【混合开发】 - 3、初始化项目

文章目录1、创建项目2、组件化开发3、vue-cli中使用scss1、创建项目使用@vue/cli创建项目 : vue create 项目名需要我们自己选择预设是默认还是自定义选择项目需要的功能bable – 帮我们把js代码进行降级，比如es6代码编译成es5PWA – 渐进式的增强web应用Linter / Formatter – 代码风格检测工具是否需要history模式的路由- YRequires proper server setup for ind

2020-08-05 11:02:07 121

原创【VSCode】更改tab键大小 - 如更改为4个或者2个空格

点击左下角图标，选择settings(设置) ，进入settings.jsonsettings.json中加入两个配置内容{ "editor.tabSize": 2, "editor.detectIndentation":false,}“editor.tabSize”: 4：指定一个tab等于多少个空格，例如此处指定4就像等于4个空格，2就等于两个空格“editor.detectIndentation”:false ：必须指定！！否则指定的tab大小将不起效果返回编辑面板，测.

2020-08-04 12:24:33 1208

原创【混合开发】 - 2、开发前样式准备

文章目录1、SCSS 预处理器1、嵌套2、变量3、函数与运算2、计算场景3、初始化样式reset.css 引入4、配置别名5、配置viewportSCSS 预处理器SCSS 是SASS 3.0 之后的称呼强化 CSS 的辅助工具，在 CSS 的语法上增加了额外的功能（嵌套、变量、运算、函数……）scss没办法直接被浏览器识别，需要转换成css(使用webpack)1、SCSS 预处理器1、嵌套对 CSS 选择器的嵌套如上，有嵌套scss里，可以直接用& 表示直接的父标签

2020-07-30 22:33:32 186

原创 ajax与axios区别

文章目录1. 原生XHR2. jquery ajax3. axios1. 原生XHR//原生XHRvar xhr = new XMLHttpRequest();xhr.open('GET', url);xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText) // 从服务器获取数

2020-07-23 21:31:00 191

原创 flex布局

文章目录容器属性1. display: flex / -webkit-flex; --元素定义为flex 容器2. flex-direction - 主轴的方向，也就是容器中项目的排列方向3. flex-wrap -- 项目大小超过主轴宽度时，是否换行4. justify-content -- 定义项目在主轴上的对齐方式5. align-items -- 定义项目在交叉轴上的对齐方式项目属性1. order -- 项目在容器中的排列顺序2. flex-grow -- 项目的放大比例3. align-sel

2020-07-22 21:24:29 147

原创【常见页面布局】- 2、登录等上中下布局--背景等比例缩放background-size、calc()

<template> <div id="login"> <div class="header"> 头部 </div> <div class="content"> 内容 </div> <div class="footer"> 底部 </div&gt

2020-07-22 20:19:15 633

原创【混合开发】- 1、技术原理

文章目录1.关于混合开发1-1. 什么是混合开发1-2. 流行的混合开发方案2. 混合开发app 的本质2-1. Hybrid App 混合开发app 的本质2-2. 什么叫做JSBridge2-3. webView3. Android 与 web 通信 -- 安卓中js 和原生的相互调用--了解3-1. Android Studio - 安装配置流程3-2 安卓与 web 通信3-3. npm 安装与 http-server3-4. 安卓与 web的相互调用4. IOS 与 web 通信4-1.I

2020-07-22 20:08:05 1716

原创在mac中，npm安装或者卸载失败，提示没有权限

问题：mac 上原来是vue-cli 2.x ，升级前卸载的时候总是报错如下，没有权限解决办法：在终端输入 sudo chown -R $USER /usr/local输入开机密码此时再操作 npm uninstall -g vue-cli 卸载vue --version 查看已经卸载完成，然后再 npm install -g @vue/cli即可...

2020-07-14 11:08:19 463

原创【webpack扩展】- 3、

文章目录普通文件处理普通文件处理普通文件：不是css文件，也不是js文件，而是一些图片/字体文件等通过js 添加的图片，放到src/assets文件夹下//希望导入的模块结果是一个可用的资源路径import png from "./assets/webpack.png"console.log(png)var img = document.createElement("img");img.src = png;document.body.appendChild(img);像上面的代码中：

2020-07-12 21:23:02 110

原创 @vue/cli 中用axios请求本地json报 404

问题：@vue/cli 中用axios请求本地json，开始把json放到了static下面，各种报404解决办法：json文件需要存在public文件夹下，cli3之后public才是存放静态资源的地方,内置服务器对外暴露静态资源的位置，而不是之前的static了请求时，直接写axios.get('/student.json',{})即可，/ 直接指向项目下的public文件夹...

2020-07-12 17:31:47 504 1

原创【常见页面布局】- 1、应用网站常用布局 - 侧边栏和头部固定

<template> <div id="app"> <div class="sider"> 侧边栏 </div> <div class="header">头部</div> <div class="content"> 内容 <p style='height:2000px;'></p> 111111111111111 .

2020-07-11 17:33:06 920

原创【Vue】10 - vuex，路由守卫，登录

文章目录1、state2、关于mutations1. 那怎么配置mutaions ？2. mutaions的参数： state、 payload3. 提交更改 / 调用mutaions里的方法4. mutations 函数中不可以出现异步等副作用操作3、 actions：配置副作用操作1. actions里的配置2. 调用actions里的方法vuex + vue：总结：其他：登录 + 导航守卫配合vuex用于解决大量的、复杂的组件间共享数据的问题提出了一个模块：数据仓库，我们的共享数据都放到数据

2020-07-02 08:26:10 359

空空如也

空空如也