07 2022 档案
MVC MVVM MVP 三种设计模式
摘要：MVC是后端语言的一种设计模式，主要实现对代码分层，数据模型层主要负责操作数据，视图层主要负责进行页面展示，可以认为前端三剑客充当的就是视图层，业务控制层，主要负责控制具体的业务逻辑，负责将数据层的数据交给视图层进行展示 MVVM是前端的一种设计模式，vue就是基于这种模式来设计的，是从mvc演变过
阅读全文
vue 中computed和watch区别
摘要：# Computed 和 Watch **Computed**本质是一个具备缓存的`watcher`，依赖的属性发生变化就会更新视图。 适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。 **Watch**没有缓存性，更多
阅读全文
js 常用的正则表达式
摘要：在日常的项目中肯定离不开正则表达式，因为它可以帮我们校验一些规则，非常的方便。接下来贴几个常用的正则表达式 #js正则表达式 // 身份证号码正则表达式 // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X const ID = /(^\d
阅读全文
js 数组和字符串相关方法？
摘要：#数组的常用的相关方法 push:将元素添加到数组的末尾，返回值是数组的长度 pop：将数组最后一个元素弹出，返回值是被弹出的元素 unshift:在数组的开头插入一个元素，返回值是数组的长度 shift:将数组第一个元素弹出，返回值是被弹出的元素 splice(index,len):删除数组中指定
阅读全文
js高级 箭头函数有什么作用？和使用场景
摘要：箭头函数可以使函数内部的this指向和函数外部保持一致，箭头函数值所以可以让函数内部的this指向和外部保持一致是因为箭头函数内部没有this指向，可以在ajax的回调函数中使用箭头函数让回调函数中的this指向事件源，可以在定时器的第二个参数中使用箭头函数，避免函数内部的this指向全局Windo
阅读全文
js高级 call apply bind 区别
摘要：这三个方法都是函数这个特殊对象的方法通过这三个都可以改变函数内部this指向 不同点: call和apply 会调用一次函数 而bind不会调用函数,只会在内存中创建一个函数的副本(修改过this指向的函数) call 从第二个参数开始需要一个参数列表 apply 第二个参数需要时数组
阅读全文
js高级 什么是闭包？有什么作用 使用的时候需要注意什么？
摘要：《JavaScript高级程序设计》对闭包定义 函数本身和该函数声明时所处的环境状态的组合。也就是说，只有权访问另一个函数作用域中变量的函数 《JavaScript权威指南》对闭包定义 函数对象可以通过作用域链相互关联起来，函数体内部变量可以保存在函数作用域内，这就是闭包。 严格来说，闭包需要满足三
阅读全文
js 高级 什么是原型对象？ 什么是原型链？什么是构造函数？
摘要：什么是原型对象？ 每一个构造函数都有一个prototype的属性，这个属性的值是一个对象，这个对象叫做构造函数 一般建议将构造函数的成员属性绑定在原型对象prototype上，因为原型对象prototype身上的属性默认可以通过实例对象访问到 这样做可以保证每次通过new关键字创建实例对象的时候这些
阅读全文
css 选择器优先级
摘要：css 选择器优先级 id选择器 类选择器 标签选择器 通配符选择器 行内样式 和 important 修饰符的优先级最高 如果两个选择器属性完全相同同时命中一个元素并且权重一样则书写顺序会影响优先级，后一个选择器的属性会覆盖前一个选择器中相同属性
阅读全文
css3 新增伪类有哪些
摘要：p:first-of-type 选择属于其中父元素的首个<p>元素 p:last-of-type 选择属于其父元素的最后一个<p>元素 p:nth-child(2) 选择属于其父元素的第二个子元素 p:nth-type-of(2)选择属于其父元素的第二个子元素 p。 :enabled :disabl
阅读全文
vue 的双向绑定原理
摘要：vue的双向绑定原理：vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。 介绍： VueJS：采用 ES5 提供的 Object.defineProperty() 方法，监控对数据的操作，从而可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的
阅读全文
node + mysql 实现多文件/单文件上传
摘要：# 后端 // router文件下（自定义） const multer = require("multer"); // 引入multer模块 //配置 const storage = multer.diskStorage({ //文件保存路径 注意路径必须存在 destination: functi
阅读全文
vue3 如何判断一个数据是不是响应式？
摘要：# 响应式数据的判断 isRed：检查一个值是否为一个ref对象 isReactive:检查一个对象是否由reactive创建的响应式代理 isReadonly:检查一个对象是否由readonly创建的只读代理 isProxy:检查一个对象是否由reactive或者readonly方法创建的代理 通
阅读全文
Vue3 + node 实现搜索功能
摘要：# 后端 直接看代码 本人专项前端 后端接口写的不是很好见谅啊！ 前端传来的字段我后端进行模糊查询然后如果查询成功则返回想对应的数据,如果查询出来的数据较多我们可以用数组截取的方法给前端返回指定一次返多少数据，我这个接口没写哈？ # 前端 我们通过二次封装好的axios对后端发起请求，给后端传相对应
阅读全文
vue 项目中的axios 二次封装
摘要：axios： Web开发中，我们最常用的HTTP库就是Axios了，它的底层基于Ajax进行封装，在浏览器端和服务端都可以使用。详细介绍请看官网！
阅读全文
前端实现打印功能
摘要：# 前端 本人用的是一个包，非常简单 下载：npm i vue3-print-nb 然后再main.js中引入和注册 import print from 'vue3-print-nb' app.use(print)_
阅读全文
前后端分页器业务
摘要：分页器业务思路： #后端 本人后端用的是node， 我们通过查询语句把所有语句查询出来， 然后得到前端传来的页码， 我们然后根据需要定义一页显示多少条数据， 然后拿到当前查询出来的数据除与每页显示数量， 得到总页码,然后开始判断如果前端传来的是空页码， 默认显示第一页数据，然后我们通过数组截取的方法
阅读全文
前后端注册业务
摘要：后端注册业务 思路：通过前端传递过来的值然后递交给后端，后端通过查询数据库有没有同样的用户名，如果有就返回给客服端说用户名被注册过，如果没有继续往下注册然后通过一个bcryptjs这个对密码进行二次加密(这个需要npm下载），然后向数据库插入数据，如果插入成功返回给客服端信息，如果插入失败返回给客服
阅读全文
前后端登录业务
摘要：后端登录接口 说明: // 密码加密 和密码对比的中间件 # npm i bcryptjs // 后端验证表单数据的中间件 # npm i @escook/express-joi // 用这个包来生成 Token 字符串const jwt = require('jsonwebtoken') cons
阅读全文
node.js 如何验证表单
摘要：# 表单验证 第一步 安装 npm i joi 安装 npm i @escook/express-joi 创建一个文件夹名为schema文件名为user.js 里面引入 const joi = require('joi') 验证的几个api * string() 值必须是字符串 * alphanum
阅读全文
Vue Composition API watch与 watchEffect
摘要：watch函数 与vue2.x中配置功能一致 两个小坑： 监视reactive的响应式数据时：oldvalue无法正常获取，强制开启了深度监视（deep配置无效） 监视reactive定义的响应式数据中某个属性时：deep配置无效 let person = reactive({ name:'张三',
阅读全文
Vue3生命周期钩子
摘要：你可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。 下表包含如何在 setup () 内部调用生命周期钩子： 选项式 API Hook inside setup beforeCreate Not needed* 因为setup这个Api在beforeCreate之前执行所以被替换
阅读全文
Vue Composition API ref 与 reactive 的对比
摘要：ref 作用：定义一个响应式的数据 语法：const xxx = ref(initValue) 创建一个包含响应式数据的引用对象（reference对象，简称ref对象） js中操作数据：xxx.value; 模板中读取数据：不需要.value,直接：<div>{{xxx}}</div> 备注: 接
阅读全文
Vue3的响应式原理
摘要：vue3.0中的响应式原理 解决了vue2中存在的问题 新增属性，删除属性，界面不会更新 直接通过下标修改数组，界面不会更新 实现原理： 通过Proxy(代理)：拦截对象中任意属性的变化，包括：属性值的读写，属性的添加，属性的删除等 通过Reflect(反射): 对被代理对象的属性进行操作。 MDN
阅读全文
