nilmao的博客

原创 vue登录态管理=+路由守卫+封装 Axios+Vuex

1.理由配置路由的配置path时；在需要守卫的path加上meta属性；{ path: '/home', component: home, meta:{requireAuth:true}}在路由配置文件中加上//路由配置文件import Vue from 'vue';import VueRouter from 'vue-router';import routes from './routes';//使用VueRouter插件Vue.use(Vue...

原创 Spring详解，代码事例，IOC，AOP，事务。整合MyBatis，JUnit

Spring详解，代码事例，IOC，AOP，事务。整合MyBatis，JUnit。spring调的是无参构造方法，public ，private都可以掉到（反射）无参构造方法如果不存在，将抛出异常BeanCreationException，实例工厂，使用 FactoryBean 实例化，bean 生命周期

原创 JavaSE概念详解，代码事例，基础，IO，网络，Lambda，反射，模块化，注解，XML解析

【基础加强】JavaSE概念详解，代码事例，IO流，网络编程，模块化，Lambda，反射，注解，XML解析，测试

原创 Nacos详解，从安装到服务部署，及nginx反向代理

实际部署时，需要给做反向代理的nginx服务器设置一个域名，这样后续如果有服务器迁移nacos的客户端也无需更改配置.Nacos的各个节点应该部署到多个不同服务器，做好容灾和隔离

原创 SpringCloud详解，图文码笔记

Feign是一个声明式的http客户端，官方地址: https://github.com/OpenFeign/feign其作用就是帮助我们优雅的实现http请求的发送，解决上面提到的问题。使用Feign的步骤如下:引入依赖:Feign是一个声明式的http客户端，官方地址: https://github.com/OpenFeign/feign其作用就是帮助我们优雅的实现http请求的发送，解决上面提到的问题。

原创 Docker入门到拿捏，一文搞定，图文码并茂

Docker安装，基本操作，镜像推拉，项目部署，构建部署，到私有镜像仓库

原创 引入即用，canvas添加网页水印，开关控制

【代码】引入即用，canvas添加网页水印，开关控制。

原创 vue keep-alive 中的生命周期

keep-alive是 Vue 提供的一个内置组件，用来对组件进行缓存——在组件切换过程中将状态保留在内存中，防止重复渲染DOM。如果为一个组件包裹了 keep-alive，那么它会多出两个生命周期：deactivated、activated。同时，beforeDestroy 和 destroyed 就不会再被触发了，因为组件不会被真正销毁。当组件被换掉时，会被缓存到内存中、触发 deactivated 生命周期；当组件被切回来时，再去缓存里找这个组件、触发 activated钩子函数。.

原创 Vue几种监听路由变化的方式

Vue几种监听路由变化的方式2.通过钩子函数 beforeRouteEnter， beforeRouteUpdate， beforeRouteLeave

原创 vue 监听页面卷去的高度，获取元素离页面顶部的距离

获取元素离页面顶部的距离补充 document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 网页可见区域宽： document.body.clientWidth 网页可见区域高： docu

原创 js小数计算精度丢失，生产中应用方案

在生产环境中，开发时写的；1.js处理精度丢失问现成解决方法/** * 处理小数运算精度丢失问题 * a: number * b: number * type: string 加，减，乘，除 add, sub, multiply , division * @returns */export function decimalOperation(a, b, type) { const changeA = a.toString().split('.') con.

原创 Vue3快速上手，Vue3全解

vue3快速上手，vue3全解；

原创 JavaScript中，数组常用的API

1.修改原数组的API1.1.pop（）：弹出数组中最后一个元素，并返回这个元素let arr = [1,2,3,4,5,6]let result = arr.pop()console.log(arr) // [1, 2, 3, 4, 5]console.log(result) // 61.2.push（）：添加一个或多个元素到数组末尾，并返回新的长度let arr = [1,2,3,4,5,6]arr.push(7,8)console.log(arr) // [1, 2, .

原创 JavaScript中，字符串处理(String对象)合集，附代码

1.字符串操作 let a = 'HelloWorld'; let b = 'World' //1.concat() 连接两个或多个字符串 // +左右可以为null，concat为会空指针。 let c = a.concat(b); //输出结果：HelloWorldWorld let c = a + b; //HelloWorldWorld//2. replace()：字符串替换或正则匹配替换 ..

原创 CentOS 部署前端项目，Nginx反向代理，搭建node服务

原创 前端优化 - 提高 Web 性能的 9 个技巧

这篇文章将介绍您可以用来帮助改进前端优化的有用技术。通过专注于干净的代码、压缩图像、最小化外部请求、实施 CDN 和其他一些方法，您可以显着提高网站的速度和整体性能。1.清理HTML文档HTML 或超文本标记语言是几乎每个网站的支柱。HTML 允许您使用标题、副标题、列表和其他有用的文本组织功能来格式化网页。借助 HTML5 的最新更新，您还可以create有吸引力的图形。网络爬虫可以轻松读取 HTML，因此搜索引擎可以使用您网站的更新content及时。在处理 HTML 时，您应该努力以简洁.

原创 优雅的二次封装Element-UI

1.创建vue项目vue create appname2.借助babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。npm install babel-plugin-component -D3.在 main.js 中写入以下内容：import Vue from 'vue';import { Button, Select } from 'element-ui';import App from './App.vue';Vue.com.

原创 webpack配置与优化

1.认识配置项1.1.入口(entry)入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理，最后输出到称之为 bundles 的文件中，我们将在下一章节详细讨论这个过程。可以通过在webpack 配置中配置entry属性，来指定一个入口起点（或多个入口起点）。默认值为./src。接下来我们看一个 e...

原创 Vue中 $nextTick 原理及作用

Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。我们可以理解成，Vue在更新DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现，本质是为了利用 JavaScript 的这些异...

原创 js中的defineProperty（）方法

defineProperty（）定义对象中新属性或者修改原有的属性；Object.defineProperty(obj,prop,descriptor)defineProperty（）方法需要传三个参数：obj:必须，目标对象； prop：必须；需要定义或修改的属性名字； descriptor：必须；目标属性所拥有的特性；第三个参数——>descriptor，说明，需要写成对象形式：value：设置属性值，默认undefined； writable：是否可以重写，...

原创 JS 中 this 指向,call()、apply()、bind()

1. 箭头函数箭头函数 this 不会被改变，所以只要当前函数是箭头函数，那么就不用再看其他规则了。箭头函数的 this 是在创建它时外层 this 的指向。这里的重点有两个：创建箭头函数时，就已经确定了它的 this 指向。 箭头函数内的 this 指向外层的 this。箭头函数是不绑定this的，它的this来源于上级作用域var user = { name: 'kiki', foo: () => { console.log('箭头函数中的this',th..

原创 promise详解，及使用

1.介绍Promise是异步编程的一种解决方案，有两个特点：（1）对象的状态不受外界影响；（2）状态一旦改变是不可逆的，一旦Promise 被 resolve 或 reject，不能再迁移至其他任何状态。Promise有三种状态：（1）Pending ：进行中；（2） Resolved ：已完成；（3）Rejected ：已失败。Promise从Pending状态开始，如果成功就转到成功态，并执行resolve回调函数；如果失败就转到失败状态并执行reject回调函数。

原创 CSS中可继承与不可继承属性有哪些

1. 无继承性的属性 display：规定元素应该生成的框的类型 文本属性： vertical-align：垂直文本对齐 text-decoration：规定添加到文本的装饰 text-shadow：文本阴影效果 white-space：空白符的处理 unicode-bidi：设置文本的方向盒子模型的属性：width、height、margin、border、padding 背景属性：background、background-color、background-image

原创 vue路由懒加载--2种实现方式

（1）vue异步组件-路由懒加载 component：resolve=>(['需要加载的路由的地址'，resolve])（2）import 实现路由懒加载 [推荐]const HelloWorld = （）=>import('需要加载的模块地址')1.路由懒加载作用：首屏组件加载速度更快一些，解决白屏问题；更好的客户体验；也是性能优化的一种方式；什么是路由懒加载？懒加载简单来说就是延迟加载或按需加载，就是用到的时候再进行加载。2.使用-详情- ...

原创 JavaScript 异步编程

1.异步的概念在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。以上是关于异步的概念的解释，接下来我们通俗地解释一下异步：异步就是从主线程发射一个子线程来完成任务。...

原创 vue 全局事件总线详解 $bus-任意组件间通信

全局事件总线（GlobalEventBus）是一种组件间通信方式，适用于任意组件间通信1.安装全局事件总线main.js入口文件配置 new Vue({ beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线， //在开发中习惯取名为：$bus，可以自由命名 }, }).$mount('#app') 2.使用事件总线以B组件给A组件传值为例；（B —> .

原创 vue监听屏幕尺寸变化，window.onresize很简单

>> 可在任意组件中使用;1.在data中定义一个变量，用于记录屏幕尺寸；data(){ return{ screenWidth: null, }}且做好定义为 null2.使用window.onresize方法获取屏幕尺寸； mounted() { this.screenWidth = document.body.clientWidth window.onresize = () => { ...

原创 Vue 项目cli打包上线后，路径错误，解决办法

报的错：Uncaught SyntaxError: Unexpected token '<' (at chunk-vendors.5ea7a1b2.js:1:1)Uncaught SyntaxError: Unexpected token '<' (at app.5e29bd6c.js:1:1)Vue 项目，用vue-cli打包上线后，播以上错误，打开打包后的index.html文件看。发现是路径问题，所有的文件都没有引入的index.html中解决办法：在vue.

原创 vue路由跳转 定位到页面顶部

Vue-router 路由跳转之后，页面默认停留在当前浏览的位置，想要的是路由跳转之后，页面重新定位到顶部，1.下面介绍一下可以实现的方法：在理由配置文件中，添加以下代码即可import Vue from 'vue'import VueRouter from 'vue-router'import routes from './routes'Vue.use(VueRouter);let router = new VueRouter({ routes});//要添加的代

原创 【vue报错】vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read properties of undefined (reading ‘0‘)

Error in mounted hook: "TypeError: Cannot read properties of undefined (reading '0')"vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read properties of undefined (reading '0')原因：创建DOM元素遍历依赖的 props 数据，而计算过程在挂载完毕之后；需要将计算过程放到 正确 的生命周期钩子；...

原创 vue v-for 遍历不能正常显示的问题，

data() { return { imgList:[ { imgUrl:'../assets/img/a.png', imgLink:'', type:'' }, { imgUrl:'../assets/img/b.png', imgLink:'', type:'' }, { ...

原创 CSS去除默认样式，写页面前的准备工作

前端写页面时，诸多标签的默认样式是不需要的；每用一次都要写的话，第一，耗时，徒劳，第二，代码重复；so，可以在开始前，统一去除出默认样式，如下：/* 初始化 css文件*/body { margin: 0; padding: 0; background-color: #f4f4f4; font-family: 12px/1.5 "Microsoft YaHei",Heiti SC,tahoma,arial,"Hiragino Sans GB"

原创 less快速上手，使用详解

1.引入 js 文件<!DOCTYPE html><html lang="en"><head> ...</head><body> <div id="wrap"> <div class="inner">AAA</div> </div> <!-- 引入js文文件 --> <script src="//cd...

原创 原生AjAX使用需求，代码详解

1.GET请求 //1. 创建AJAX对象 const xhr = new XMLHttpRequest(); //2. 设置请求方法和url xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&C=300&=300'); //3. 发送 xhr.send(); //4. 事件绑定 处理服务端返回的结果 /

原创 HTTP响应码，大详解

1.HTTP的正确响应码一、1XX （1开头）请求已经被接收到了，需要进一步处理才能完成，HTTP1.0不支持；100 Continue 上传大文件前先让服务器准备，由客户端发起请求中携带Except：100-continue 头部触发 101 Switch Protocols协议升级使用，由客户端发起的请求中携带Upgrade头部，如升级WebSocket/http2.0 102 Processing WebDev请求可能包含许多涉及文件操作的子请求，等待很长时间才能完...

原创 Vue路由传参 详解（params | query 的区别）

params 传参类似于网络请求中的 post 请求，params 传过去的参数不会显示在地址栏中（但是不能刷新）。params 只能配合 name 使用，如果提供了 path，params 会失效。query 传参类似于网络请求中的 get 请求，query 传过去的参数会拼接在地址栏中（?name=xx）。query 较为灵活既可以配合 path 使用，也能配合 name 使用（亲测可用）。//路由规则配置 const routes = [...

原创 promise异步编程 详解

1.基本概念promise是对异步编程的一种抽象。它是一个代理对象，代表一个必须进行异步处理的函数返回的值或抛出的异常。也就是说promise对象代表了一个异步操作，可以将异步对象和回调函数脱离开来，通过then方法在这个异步操作上面绑定回调函数。状态promise有3种状态：pending（待解决，这也是初始化状态），fulfilled（完成），rejected（拒绝）。接口promise唯一接口then方法，它需要2个参数，分别是resolve和rej...

原创 MVVM、MVC、MVP的区别

MVC、MVP 和 MVVM 是三种常见的软件架构设计模式，主要通过分离关注点的方式来组织代码结构，优化开发效率。在开发单页面应用时，往往一个路由页面对应了一个脚本文件，所有的页面逻辑都在一个脚本文件里。页面的渲染、数据的获取，对用户事件的响应所有的应用逻辑都混合在一起，这样在开发简单项目时，可能看不出什么问题，如果项目变得复杂，那么整个文件就会变得冗长、混乱，这样对项目开发和后期的项目维护是非常不利的。1.MVCMVC 通过分离 Model、View 和 Controller 的方式来组织

原创 webpack html-webpack-plugin插件 配置代码详解 即用

1.安装插件npm install html-webpack-plugin --save-dev2.在webpack.config.js中位置如下：const HtmlWebpackPlugin = require("html-webpack-plugin"); //引入插件//配置如下module.exports = { plugins: [ new htmlWebpackPlugin({ title: "this is title"

原创 vant UI 使用，按需引入

vant-uI官方文档1.安装npm i vite-plugin-style-import@1.4.1 -D //npm安装yarn add vite-plugin-style-import@1.4.1 -D //yarn 安装2. 配置插件//在 vite.config.js 文件中配置插件：import vue from '@vitejs/plugin-vue';import styleImport, { VantResolve } fro..