2020年12月_风向北吹i

原创修改js数字最大安全值

当请求后台数据，返回的id是一串很长很大的数字时，此时转为JSON对象会有问题（超出了js数字最大安全值）最大安全值：2的53次方 Number.MAX_SAFE_INTEGER出现超出最大安全值的2个条件1、转json对象1）转为json对象（谷歌浏览器preview中会转为json对象）2）axios请求的结果会默认转为json对象2、进行运算时长串的id数字+(任意数字) 3674856907067845+3 //结果和预期不一致（有误差）解决方案：使用json-

2020-12-28 16:53:10 444

原创 vue报错Avoided redundant navigation to current location: “/xx“

在VUE中路由遇到Error: Avoided redundant navigation to current location:报错显示是路由重复，解决方案：修改VueRouter原型对象上的push方法（引入VueRouter的后添加下面代码）//获取原型对象上的push函数const originalPush = VueRouter.prototype.push//修改原型对象中的push方法VueRouter.prototype.push = function push(locatio

2020-12-26 01:28:17 122

原创用默认插槽封装面包屑导航

在项目中常会用到elementUI提供的面包屑导航（也叫路径导航），但是在多个组件中都会使用到，此时需要封装成一个公用的组件，以便于在每个组件中用最简单的方式实现路径导航。步骤：1、定义一个面包屑组件<template> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcr.

2020-12-25 19:56:15 376

原创 vue中不同插槽的用途

在组件中如果有相同地方，但又需要插入不同的内容时使用插槽的种类1、默认插槽用于插入一处内容语法： 1) 定义插槽： <slot><slot> 2) 使用插槽: <组件>插槽内容</组件>2、具名插槽用于插入多处内容语法： 1) 定义插槽： <slot name="插槽名"><slot> 2) 使用插槽: <组件><标签 slot="插槽名">插槽内容</标签></组件

2020-12-25 19:54:43 455

原创 vue中组件绑定原生事件不生效

如果在组件中，遇到绑定原生事件（click等事件）不生效的话，在事件后面+.native即可生效原理：有些element ui中的组件可以绑定原生事件，但有些组件是无法绑定原生事件的，如果element ui 中有提供组件的事件即可用提供的事件；如果没有提供的事件，可以通过.native转为原生事件即可生效（代码在解析组件后会生成原生元素）注意： .native 绑定原生事件图中给下拉菜单中的子菜单组件绑定点击事件，不加.native此时事件不生效组件提供了点击某个下拉子菜单做不同的操作1、

2020-12-24 19:48:11 1065 2

原创 json-server 模拟后台接口

json-server 命令行工具如果后台接口未完成，模拟后台接口，快速启动一个接口服务器。全局安装npm i json-server -g使用通过定义json文件的方式来创建接口 ‘db.json’通过命令行运行该配置文件即可 json-server db.json注意：在db.json目录下执行启动服务器：‘http://localhost:3000’ 域名接口配置方式：json格式key：接口地址value ：响应的数据接口规范依赖resetful规范

2020-12-24 16:59:02 377 2

原创使用npm下载包，报错 error An unexpected error occurred: “EPERM: operation not permitted

先用了 npm Install 安装相关依赖，后用 yarn 方式来安装依赖，在用yarn安装的时候遇到下图报错信息首次使用 npm 安装依赖报错的问题，造成 yarn 访问依赖文件夹出错，尝试用** npm cache clean -force** 清楚后，再次 yarn install 成功解决问题。...

2020-12-22 16:06:57 3345

原创配置ESlint代码风格

在通过vuecli创建项目编写代码时，通常会固定一种代码风格来开发，当有问题时会自动修复问题或者会提示哪里有问题步骤1、在vscode中左侧扩展里面安装ESlint插件，2、配置ESlint插件（监听vue做格式化）配置文件---> 打开设置---->settings.json在setting.json中,将代码放在最外侧{}里面即可 "eslint.validate": [ "javascript", "javascriptreact", {

2020-12-21 16:29:06 505

原创快捷键快速生成vue组件的代码片段

.vue组件中输入vuec快速生成vue组件结构<template> <div></div></template><script> export default {}</script><style lang="less" scoped></style>vscode中安装插件Vue 3 Snippets：设置代码片段，需要在vscode编辑器中配置代码：设置 ------>

2020-12-19 21:51:21 4303 1

原创运行vue项目时自动打开浏览器以及vueli创建项目的目录结构

在vue.config.js中配置信息如下： devServer: { open: true }vuecli创建项目的结构目录信息|-- node_modules // 项目需要的依赖包|-- public // 静态资源存储目录| |-- index.html // 项目主容器文件********| |-- favicon.ico // 项目默认索引图片|-- src| |-- assets

2020-12-19 20:50:19 219 1

原创控制台console的一些使用方法

我们通过使用console.log()形式输入信息。但是，它也可以输出别的形式查看信息。比如：我们有时候想查看这个对象身上有什么属性或者方法，就可以通过对象方式输出；如果我们想查看类似数组形式的信息，可以使用以一组的形式输出；如果我们想查看不同样式的信息，可以通过设置样式形式输出下图为例：对象形式的输出：展开箭头即看到对象身上所有的属性和方法1、对象形式语法console.dir(); （找到那个元素，通过dir输出） var p = document.querySelector('p');

2020-12-16 18:37:34 2308

原创 vue中自定义指令

常用指令：v-text v-model v-for v-if v-else等我们也可以设置自定义指令语法： var vm = new Vue({ el: "#box", directives: { //自定义指令名 focus: { inserted: function(dom){ //inserted固定写法 dom.focus();

2020-12-16 18:06:50 80

原创在vscode中通过快捷键`vh`将vue初始化代码结构自动输出

通过快捷键vh将vue结构快速输出，类似!将html结构快速输出一样效果如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content

2020-12-16 14:35:06 1284

原创 jsonp和CORS解决跨域问题

出现此问题代表跨域了。目前最常用的2中解决跨域问题的方法：1、jsonp通过src属性实现（前端操作）2、cors（后端操作）1、jsonp方案原理1、前端设置一个函数（用来接收数据），通过src请求接口时，用callback将函数名传递过去2、后端通过express中jsonp的方法调用函数，将数据传给前端前端操作原理：（src属性）//1、设置一个函数来接收数据function aa(res){console.log(res)} //res拿到结果//2、通过src属性请求接口，.

2020-12-14 15:23:09 305

原创 ES6降级处理

由于ES6有兼容性问题，可以使用babel工具进行降级处理。babel基于node，需要先安装node0、项目初始化 npm init -y1、命令行安装babelnpm install @babel/core @babel/cli @babel/preset-env2、配置 .babelrc文件手动创建.babelrc文件，设置配置{ "presets": ["@babel/preset-env"]}3、运行//1、把单个es6的文件转为ES5（新文件.js会自动创建）np

2020-12-14 01:46:22 917

原创设置npm淘宝镜像及yarn安装依赖包

npm镜像是国内淘宝做的一个备份1、首先初始化:npm init -y（初始化后产生一个package.json文件）此文件中“dependencies”里面记录了所有安装过的包，如果别人需要你的这些包，直接将package.json发给对方，对方通过npm i 自动下载里面所有的包。2、在终端全局设置npm镜像npm config set registry https://registry.npm.taobao.org此命令，然后再通过npm i 包的方式来下载包速度更快一些...

2020-12-13 23:38:02 1356

原创使用express搭建服务器

除了使用http模块的方式来创建服务器，我们还可以使用第三方插件express来创建服务器，此方式更为简单，对http模块进行了封装（类似于jQuery对js进行封装一样）//1、加载express模块// 2、创建服务器// 3、设置端口，开启服务器// 4、设置静态文件// 5、写接口const fs = require('fs');const express = require('express');const app = express();app.listen(3000, (

2020-12-12 23:25:49 985

原创使用node中http搭建服务器以及自己写接口发送请求

如果搭建服务器的话，需要通过http模块步骤：1、引入http模块2、创建服务器3、设置端口，开启服务4、监听浏览器请求事件（设置request事件）判断文件存在，则读取文件；如果文件不存在，页面显示Not Found（或者显示图片）const http = require('http');const server = http.createServer();server.listen(3000,()=>console.log("服务器开启了"));server.on('req

2020-12-12 20:36:51 3237

原创请求服务器的过程三次握手

当我们在浏览器输入域名后，浏览器先查看DNS缓存中是否有和域名对应的IP，如果有，则使用缓存中保存的IP去请求网络资源的。如果没有缓存，那么浏览器会查找计算机中host文件,如果host文件中没有,最后再去DNS服务器查找 (域名对应的IP地址，得到IP地址后，浏览器再通过IP地址去找到访问的服务器IP，此时会将访问的IP缓存下来。)如果下次再去访问这个IP时，直接从缓存中获取。DNSDNS中记录了所有的域名对应的IP地址．查看DNS的IP：电脑的网络共享中心-点开连接的网络-详细信息中有DN

2020-12-10 21:19:35 466

原创 template模板引擎中判断添加类名或者判断没数据

用模板引擎渲染页面，如果遇到其中一个元素跟别的元素的大小不一样，由于设置了类样式，此时应该使用{{if}}{{else}}{{/if}}来判断。如果是第一个元素的话，通过索引值判断，如下图所示  <script type="text/html" id="hotpic"> {{each ary value key}} {{if key===0}} <li cla

2020-12-09 22:12:32 1089

原创 FormData中文件上传、预览、富文本编辑器取值

如上图所示：我们需要做发表文章功能,如果表单中有红色框出来的文件上传，那么必须使用FormData收集表单数据。注意：使用FormData，html结构中必须要有name属性，属性值必须和后端提供的字段名保持一致。（因为是通过name属性收集数据的）。小点：如果是select标签，必须给select标签设置name属性，select里面option标签设置value属性以及值（value=‘1’）-1代表新闻。jquery中ajax传FormData参数必须设置下面2行代码，否则报错请求参数.

2020-12-09 16:01:33 515

原创如果请求参数是FormData，使用ajax的操作

如果在请求接口时，提供的请求参数是FormData类型的，那么我们可以分为2中方式操作。FormData()中的方法0、append() 追加值1、set() 修改值2、getAll() 获取复选框所有值3、get() 获取单选框值1、jQuery封装的ajax如果请求参数是formdata，必须设置2个配置项processData: falsecontentType: false $.ajax({ url: '接口地址', type

2020-12-08 21:07:53 1541

原创用jq和ajax实现分页功能

在平时工作中，我们经常会遇到要做分页的小功能。此文章写的是用ajax+jquery实现分页效果步骤：1、下载pagination的js和css文件（jquery中下载）2、设置分页结构，放在需要的地方  <div id="pagination" class="page"></div>3、将下面js代码复制 //点击页码的时候会跳转页码，但对应的内容不会改变，因为这只是准备 $("#pagination").pagin

2020-12-08 20:08:38 1030

原创优化性能字符串拼接使用art-template模板引擎

在编写代码时，如果遇到在js中需要对html结构进行拼接字符串，我们通常会定义一个空字符串，使用+或者ES6中的模板字符串反引号进行拼接，但是这样编写出来的代码却有很大的性能问题，代码如下：弊端：效率和性能比较低下如果拼接的数据非常多的话，会占据很大的内存，非常不友好！此时我们可以使用模板引擎来解决占据内存大的问题1、模板引擎 art-template1、下载并引入template-web.js文件2、定义模板1、模板必须使用script标签（div标签会将内容直接显示出来）2、在s

2020-12-08 16:09:55 483

原创 Git创建分支报错信息 fatal: Not a valid object name: ‘master‘.

如果新建的文件仅初始化(git init)不做提交操作就开始创建分支(git branch 分支名)，将会报错fatal: Not a valid object name: ‘master’.措施初始化init后，需要进行一次在主分支的提交操作，然后再创建别的分支即可成功。...

2020-12-07 16:57:03 860

原创 Git的使用及设置忽略文件

常见的版本管理软件有2中：1、集中式：所有版本（历史记录）都在中央服务器上，也就是说所有人开发的代码都放在了同一台服务器上。svn为代表，svn是早期的版本管理软件，不过目前页有少部分公司在使用，它需要在联网状态下使用。弊端：当中央服务器崩溃或出问题时，服务器上提交的版本（历史记录）将会受到影响2、分布式：每个开发人员的计算机都可以作为服务器，互不影响Git为代表，Git是目前大多数公司在使用的版本管理软件，它无需联网，即使某个开发者计算机上的版本控制丢失或损坏，从任何一台别的计算机上都可以下载（

2020-12-07 01:14:57 591

qq_40576178的博客