- 博客(58)
- 收藏
- 关注
RSS订阅原创 Windows：prometheus + grafana + wmi_exporter+ 主机信息监控页面 + 支持主机信息告警
选择对应的系统的版本下载并解压压缩包，运行程序本人在window系统上操作双击验证浏览器输入点击Staatus=>Targets出现以下即成功。
2023-07-03 22:47:46
1204
原创 webpack-dev-server报错The ‘mode‘ option has not been set, webpack will fallback to ‘production‘ fo
webpack-dev-server报错
2022-06-09 21:21:01
5817
原创 微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候，我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码，因为调用的https://api.weixin.qq.com这个域名是不允许上白名单， 或者是云开发（显然他们不需要云开发）这时候我跟他们说，前端画不了跳转小程序页面的二维码，要后端巴拉巴拉的。。。结果打脸时刻来了，（这个故事告诉我们，文档要看干净点）扫普通链接二维码打开小程序 | 微信开放文档发现可以在后台按照二维码规则部署小程序链接。（千万千万不要随便说：前端做不了，后.
2022-04-15 20:45:55
3525
1
原创 vue父子组件传参、兄弟组件传参、页面跳转传参
1、父组件向子组件传参父组件向子组件共享数据需要使用自定义属性// 父组件<template> <div> // 使用子组件 <son :msg="message" :userInfo="userInfo"></son> </div></template><script>// 引入子组件import son from './test'export default { na
2022-03-26 21:33:43
3018
原创 封装分页器全局组件
1、在components文件夹下创建Pagination文件夹，里面装分页器组件<template> <div class="pagination"> <button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)">上一页</button> <button v-if="startNumAndEndNum.start > 1" @cli
2022-03-20 22:06:21
732
原创 iconfont矢量图的链接使用
1、挑选矢量图标加入购物车2、把购物车中的图标添加到项目当中3、点击生成链接，并且在public文件夹下的index.html文件中全局引用注意：//at.alicdn.com/t/font_3262462_j1yq2h7ic79.css路径前要加上https域名<!DOCTYPE html><html lang=""><head> <meta charset="utf-8"> <meta ht...
2022-03-20 21:51:42
911
2
原创 mockjs模拟数据+Vuex
Mock.js可以模拟请求，获取数据1、在项目根目录下载mockjsnpm install --save mockjs2、在项目src文件夹中创建mock文件夹3、将准备好的JSON数据放入JSON文件中注意：JSON数据不允许有空格，最好格式化好文档，否则容易报错[ { "id": "1", "imgUrl": "/images/banner1.jpg" }, { "id": "2", "imgUrl": "/images/...
2022-03-20 20:57:18
1016
原创 关于导航路由的其他细节
声明式导航：router-link编程式导航：push|replace1、在三级联动等遍历出许多标签，点击标签跳转如果使用声明式导航router-link，可以实现路由的跳转与传递参数，但是需要注意，此方法会出现卡顿现象。因为router-link是一个组件，当服务器的数据返回之后，会循环出很多的router-link组件。若创建1000+ 组件实例的时候，将一瞬间创建1000+多的内存，导致出现卡顿现象。所以最好的解决方法是使用编程式导航+事件委派。...
2022-03-20 19:58:45
509
原创 防抖与节流
在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。函数防抖：在规定的时间间隔范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能
2022-03-12 22:42:06
109
原创 动态改变背景颜色
第一种，用CSS写 //第一种，用CSS写的 //.item:hover{ // background-color: skyblue; //}第二种，用JS写 <div class="container"> <!-- 事件委派|事件委托 --> <div @mouseleave="leaveIndex"> <h2 class="all
2022-03-12 21:59:08
707
原创 vuex模块式开发
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。统一配置管理不仅有助于我们的协同开发，也有利于提高代码的可读性。安装npm install --save vuex在src目录下新增store文件夹，然后新增modules文件夹，存放每个模块的状态管理文件，然后新增action.js，getters.js，index.js，mutation.js，types.js每个js含义如下t
2022-03-12 21:48:52
1586
原创 nprogress进度条的使用
安装插件npm install --save nprogress在src文件夹下request文件下使用// 对于axios进行二次封装import axios from "axios";// 引入进度条import nprogress from 'nprogress';// 引入进度条样式import "nprogress/nprogress.css"// start： 进度条开始 done：进度条结束// 1:利用axios对象的方法create,去创建一个axios
2022-03-12 18:00:24
1413
原创 axios二次封装以及API接口统一管理
前端向服务器发送请求，使用的方法有很多：XMLHttpRequest、fetch、JQ、axios二次封装axios是为了请求拦截器、响应拦截器。请求拦截器：可以在发送请求之前可以处理一些业务；响应拦截器：当服务器数据返回以后，可以处理一些事情。安装axiosnpm install --save axios习惯与src的api下放置请求文件在request.js文件下对axios进行二次封装// 对于axios进行二次封装import axios from "a
2022-03-12 17:29:32
3637
原创 页面组件拆分（Home为例）
在大型的项目中，页面过于复杂，代码就不能全部塞在一个文件中，这样也不利于维护。所以需要把页面进行模块化拆分组件。先把静态页面完成 拆分出静态组件 获取服务器的数据进行展示 动态业务全局组件有些组件在多个页面中会使用到，那就需要把组件拆在components目录下，在main.js中，注册成全局组件，方便使用。// 三级联动组件---全局组件import TypeNav from '@/components/TypeNav'// 第一个参数：全局组件的名字 第二个参数：哪一个
2022-03-12 17:17:13
680
原创 重写push与replace方法
编程式路由跳转到当前路由（参数不变），多次执行会抛出NavigationDuplicated的错误警告路由跳转有两种形式：声明式导航、编程式导航声明式导航没有这类问题，因为vue-router底层已经处理好了为什么编程式导航进行路由跳转的时候，就有这种警告错误？因为“vue-router”：“^3.5.3“：最新的vue-router引入promise通过底部的代码，给push方法传递相应的成功、失败的回调函数，可以捕获到当前错误，解决报错。this.$router.push(
2022-03-12 17:01:14
2357
4
原创 前端配置了跨域代理，却还是报错
前端配置了跨域代理，反反复复检查了配置文件，也确保配置文件修改过后是保存重启过项目的却还是报错，如下：Proxy error: Could not proxy request /api/product/getBaseCategoryList from localhost:8080 to http://39.38.123.211.See https://nodejs.org/api/errors.html#errors_common_system_errors for more informatio
2022-03-09 22:24:09
4567
原创 npm install --save vuex 安装时报错
npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR!npm ERR! While resolving: app@0.1.0npm ERR! Found: vue@2.6.14npm ERR! node_modules/vuenpm ERR! vue@"^2.6.11" from the root projectnpm ERR!npm ERR! Could not resolve.
2022-03-07 21:57:58
2978
1
原创 1. 两数之和
给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target 的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。示例 1：输入：nums = [2,7,11,15], target = 9输出：[0,1]解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。示例 2：输入：nums = [3,2,4],
2022-03-03 19:29:00
87
原创 变量的解构赋值
一、数组的解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。1.成功解构下面是一些使用嵌套数组成功解构的例子。let [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz // 3let [ , , third] = ["foo", "bar", "baz"];th
2022-03-02 21:58:39
288
原创 免费搭建一个博客，修改博客样式
1.要有node.js环境。npm 最好用淘宝镜像源安装hexo框架npm i -g hexo-cli新建一个文件夹,windows下hexo init安装完毕之后，检查一下blog文件夹启动博客hexo s检查完博客之后新建一篇博客hexo n "我的第一篇博客文章"在该目录下找到文章，用你自己的编译器打开md文件，可以直接编译接下来清理一下hexo clean然后生成一下hexo g刷新一下界面打开Gi...
2022-03-01 15:47:26
106
原创 var、let和const
在ES6（ES2015）出现之前，JavaScript中声明变量就只有通过 var 关键字，函数声明是通过 function 关键字，而在ES6之后，声明的方式有 var 、 let 、 const 、 function 、 class、import共六种一、varvar声明的变量属于函数作用域 var声明的变量存在提升（hoisting） var变量可以重复声明1.如果使用关键字 var 声明一个变量，那么这个变量就属于当前的函数作用域，如果声明是发生在任何函数外的顶层声明，那么这...
2022-02-28 17:55:23
3749
2
原创 路由传参相关面试题
1：路由传递参数（对象写法）path是否可以结合params参数一起使用？2：如何指定params参数可传不可传？3：params参数可以传递也可以不传递，但是如果传递的是空串，如何解决？4：路由组件能不能传递props数据？路由传递参数（对象写法）path是否可以结合params参数一起使用？答：路由跳转传参的时候，对象的写法可以是name、path形式，但是需要注意的是，path这种写法不能与params参数一起使用this.$router.push({path: '/se
2022-02-19 23:00:47
451
原创 项目的路由vue-router
什么是前端路由？路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。如何实现前端路由？要实现前端路由，需要解决两个核心： 如何改变 URL 却不引起页面刷新？ 如何检测 URL 变化了？ 下面分别使用 hash 和 history 两种实现方式
2022-02-19 22:40:29
1061
原创 使用vue-cli脚手架初始化Vue项目下的项目结构
vue-cli是Vue 提供的一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。使用vue-cli有以下几大优势：vue-cli是一套成熟的Vue项目架构设计，会跟着Vue版本的更迭而更新 vue-cli提供了一套本地的热加载的测试服务器 vue-cli集成了一套打包上线的方案，可使用webpack或Browserify等构建工具创建项目有两..
2022-02-19 21:17:20
506
原创 WebStorm设置代码模板
注：本人的是windows系统，2021.2版本。但是其实版本不同，操作也是大同小异。第一步，打开setting设置第二步：点击Editor，然后点击Live Templates，再点击右上方的加号Live Template（代表创建具体的模板）Template Group（代表创建模板组）选中模板组，点击Live Template创建具体的代码模板 Abbreviation（模板的缩写） Description（模板的描述） Template.
2022-02-17 22:48:04
3144
1
原创 报错in ./node_modules/vue-router/src/util/path.jsModule parse failed: Unexpected token (4:10)You may
ERROR Failed to compile with 1 error 下午10:06:45 error in ./node_modules/vue-router/src/util/path.jsModule parse ..
2022-02-17 22:13:17
1914
原创 前后端身份认证
Web 开发模式目前主流的 Web 开发模式有两种，分别是：①基于服务端渲染的传统 Web 开发模式②基于前后端分离的新型 Web 开发模式服务端渲染的 Web 开发模式服务端渲染的概念：服务器发送给客户端的 HTML 页面，是在服务器通过字符串的拼接，动态生成的。因此，客户端不需要使用Ajax这样的技术额外请求页面的数据。代码示例如下：app.get('/index.html',(req,res)=>{ // 1. 要渲染的数据 const user = {name..
2022-02-08 22:47:24
1528
原创 在项目中操作 MySQL
在项目中操作数据库的步骤安装操作 MySQL 数据库的第三方模块（mysql） 通过 mysql 模块连接到 MySQL 数据库 通过 mysql 模块执行 SQL 语句安装与配置 mysql 模块mysql 模块是托管于 npm 上的第三方模块。它提供了在Node.js项目中连接和操作MySQL 数据库的能力。想要在项目中使用它，需要先运行如下命令，将 mysql 安装为项目的依赖包：npm i mysql配置 mysql 模块在使用 mysql 模块操作 MySQ.
2022-02-08 22:10:10
194
原创 数据库的基本概念
数据库的基本概念数据库（database）是用来组织、存储和管理数据的仓库。当今世界是一个充满着数据的互联网世界，充斥着大量的数据。数据的来源有很多，比如出行记录、消费记录、浏览的网页、发送的消息等等。除了文本类型的数据，图像、音乐、声音都是数据。为了方便管理互联网世界中的数据，就有了数据库管理系统的概念（简称：数据库）。用户可以对数据库中的数据进行新增、查询、更新、删除等操作。常见的数据库及分类市面上的数据库有很多种，最常见的数据库有如下几个：MySQL 数据库（目前使用最广泛、流
2022-02-08 21:38:42
1586
原创 CORS跨域资源共享
什么是跨域？跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）http://abc.1
2022-02-08 20:45:07
2099
原创 Express编写接口
// 导入express模块const express = require('express')// 创建express的服务器实例const app = express()//配置解析表单数据的中间件app.use(express.urlencoded({extended: false}))//必须在配置cors中间件之前，配置JSONP的接口app.get('/api/jsonp', (req, res) => {// TODO：定义JSONP接口具体的实现过程// .
2022-02-07 22:52:19
619
原创 Express 中间件
中间件（Middleware ），特指业务流程的中间处理环节。当一个请求到达 Express 的服务器之后，可以连续调用多个中间件，从而对这次请求进行预处理。
2022-02-07 22:11:33
353
原创 Express 路由
广义上来讲，路由就是映射关系。在 Express 中，路由指的是客户端的请求与服务器处理函数之间的映射关系。Express 中的路由分 3 部分组成，分别是请求的类型、请求的 URL 地址、处理函数，格式如下：app.METHOD('PATH',HANDLE);app.post('/user',(req,res)=>{});app.get('/user',(req,res)=>{})路由的匹配过程每当一个请求到达服务器之后，需要先经过路由的匹配，只有匹配成功之后，才会
2022-02-03 23:48:59
230
原创 nodemon的安装与使用
在编写调试 Node.js 项目的时候，如果修改了项目的代码，则需要频繁的手动 close 掉，然后再重新启动，非常繁琐。现在，我们可以使用 nodemon（https://www.npmjs.com/package/nodemon） 这个工具，它能够监听项目文件的变动，当代码被修改后，nodemon 会自动帮我们重启项目，极大方便了开发和调试。安装 nodemonnpm install -g nodemon当基于 Node.js 编写了一个网站应用的时候，传统的方式，是运行 nod
2022-02-03 23:12:02
5138
原创 Express的使用
官方给出的概念：Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。通俗的理解：Express 的作用和 Node.js 内置的 http 模块类似，是专门用来创建 Web 服务器的。Express 的本质：就是一个 npm 上的第三方包，提供了快速创建 Web 服务器的便捷方法。Express 的中文官网：http://www.expressjs.com.cn/http 内置模块与 Express 类似于浏览器中 Web API 和 jQuery 的关系。后
2022-02-03 23:08:32
2303
原创 模块的加载机制
优先从缓存中加载模块在第一次加载后会被缓存。这也意味着多次调用require()不会导致模块的代码被执行多次。注意：不论是内置模块、用户自定义模块、还是第三方模块，它们都会优先从缓存中加载，从而提高模块的加载效率。内置模块的加载机制内置模块是由Node.js官方提供的模块，内置模块的加载优先级最高。自定义模块的加载机制使用 require() 加载自定义模块时，必须指定以 ./ 或 …/ 开头的路径标识符。在加载自定义模块时，如果没有指定 ./ 或 …/ 这样的路径标识符，则 nod
2022-02-03 22:50:01
80
原创 如何开发属于自己的包
初始化的包的基本结构新建文件夹，作为包的根目录 在新建的文件夹中，新建如下三个文件package.json（包管理配置文件） index.js（包的入口文件） README.md（包的说明文档）package.json文件{ "name": "testtool322", "version": "1.0.0", "main": "index.js", "description": "提供了格式化时间，HTMLEscape相关的功能", "keywords": [
2022-02-03 22:37:21
388
原创 npm与包
Node.js中的第三方模块又叫做包。就像电脑和计算机指的是相同的东西，第三方模块和包指的是同一个概念，只不过叫法不同。包是基于内置模块封装出来的，提供了更高级，更方便的API，极大地提高了开发效率。包和内置模块之间的关系，类似于jQuery和浏览器内置API之间的关系。网站上搜索自己所需要的包：https://www.npmjs.com/服务器上下载自己需要的包：https://registry.npmjs.org/在项目中安装包的命令npm install 包的完整
2022-02-03 22:05:28
837
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人