退出登录功能 1.在index.vue中定义一个<el-button>按钮，并且绑定一个点击事件@click="handlelogout"事件，、 2.然后在下方定义一个handlelogout()函数 12345function handlelogout () { showModel("是否要退出登录？").then(res => { console.log("退出登录"); })} 3.在util.js中封装一个提示框方法 12345678910111213import { ElMessageBox } from 'element-plus'export function showModel (content = "提示内容", type = "warning", title = ""){ return ElMessageBox.confir ...

统计面板组件开发 骨架屏优化体验 使用element-plus中的骨架屏组件 数字滚动动画实现 1npm i gsap 为了方便使用，封装至/components/CountTo.vue 1234567891011121314151617181920212223242526272829<template> {{ d.num }}</template><script setup>import { reactive } from "vue"import gsap from "gsap"const props = defineProps({ // 父亲组件传过来的值 value: { // 希望滚动到的终点 type: Number, default:0 }})const d = reactive({ num: 0})function An ...

JS 检测数据类型的 4 种方式 typeof instanceof constructor Object.prototype.toString.call() 混淆点 typeof 123typeof null; //'object'typeof function () {}; //'function'typeof Symbol(); //'symbol' typeof 的返回值类型为字符串类型 typeof 判断基本数据类型时，除了 null 的输出结果为’object’ 其它类型都能正确判断 typeof 判断引用数据类型时，除了判断函数会输出’function’ 其它都输出’object’ 注意点： null 的数据类型是 object （null 是对一个空对象的引用，是一个占位符） typeof 并不能区分引用数据类型（Array 数组、Date 时间）等 所以我们可以使用 instanceof 来判断引用数据类型 symbol()的注意点： 1234567891011121314 ...

事件循环机制 javascript是一门单线程语言。 Javascript事件循环 导图要表达的内容用文字来表述的话： 同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。 当指定的事情完成时，Event Table会将这个函数移入Event Queue（任务队列）。 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。 上述过程会不断重复，也就是常说的Event Loop(事件循环)。 那怎么知道主线程执行栈为空呢？js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。 说了这么多文字，不如直接一段代码更直白： 123456789let data = [];$.ajax({ url:www.javascript.com, data:data, success:() => { console.log( ...

数据驱动视图 MVVM模型 MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 在MVVM的架构下，View层和Model层并没有直接联系，而是通过ViewModel层进行交互。ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。因此开发者只需关注业务逻辑，无需手动操作DOM，复杂的数据状态维护交给MVVM统一来管理。 M：模型Model，data中的数据 V：视图View，模板代码 VM：视图模型ViewModel，Vue实例 观察发现 data中所有的属性，最后都出现在了vm身上 vm身上所有的属性及Vue原型身上所有的属性，在Vue模板中都可以直接使用 本质：事件 + 方法 + 改变数据 = ViewModel 1<p @click="changeName">& ...

防抖和节流 防抖（deounce） 定义 防抖指只有在n秒内没有再次触发某个函数时，才会真正执行这个函数；若n秒内再次触发此函数，则重新计算时间。 应用场景 输入框中频繁的输入内容，搜索或者提交信息； 频繁的点击按钮，触发某个事件； 监听浏览器滚动事件完成操作； 用户缩放浏览器的resize事件(浏览器窗口大小发生变化时触发) 代码实现 1234567891011function debounce(func, wait) { let timeout; return function () { let context = this; // 保存this指向 let args = arguments; // 拿到event对象 clearTimeout(timeout) // 清除定时器 timeout = setTimeout(function(){ func.apply(context, args) }, wait); }& ...

面试官灵魂三连问 你用过webpack么，它的原理是什么？ 你还知道些构建工具，各有什么优缺点？ 你在项目中有配置过么，在哪些场景配置过？ Webpack介绍 什么是webpack webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)。 webpack原理是什么 工作原理 webpack可以看做是模块打包机： 它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 在3.0出现后，Webpack还肩负起了优化项目的责任。 打包原理 把一切都视为模块：不管是 css、JS、Image 还是 html 都可以互相引用，通过定义 entry.js，对所有依赖的文件进行跟踪，将各个模块通过 loader 和 plugins 处理，然后打包在一起。 按需加载：打包过程中 Webpack 通过 Code Splitting ...

基本使用 Webpack 是一个静态资源打包工具。 它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。 输出的文件就是编译好的文件，就可以在浏览器段运行了。 我们将 Webpack 输出的文件叫做 bundle。 功能介绍 Webpack 本身功能是有限的: 开发模式：仅能编译 JS 中的 ES Module 语法 生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码 开始使用 资源目录 123456webpack_code # 项目根目录（所有指令必须在这个目录运行） └── src # 项目源码目录 ├── js # js文件目录 │ ├── count.js │ └── sum.js └── main.js # 项目主文件 创建文件 count.js 123export default function count(x, y) { return x - y;} sum.js 123export default f ...

大事件后台 API 项目 API 接口文档 项目初始化 创建项目 新建 api_server 文件夹作为项目根目录，并在项目根目录中运行如下的命令，初始化包管理配置文件： 1npm init -y 运行如下的命令，安装特定版本的 express： 1npm i express@4.17.1 在项目根目录中新建 app.js 作为整个项目的入口文件，并初始化如下的代码： 12345678910const express = require('express')// 创建 express 的服务器实例const app = express()// write your code here...// 调用 app.listen 方法，指定端口号并启动web服务器app.listen(3007, function () { console.log('api server running at http://127.0.0.1:3007')}) 配置 cors 跨域 运行如下的命令，安装 cors 中间件： 1np ...

数据库和身份认证 数据库（database）是用来组织、存储和管理数据的仓库。 用户可以对数据库中的数据进行新增、查询、更新、删除等操作。 最常见的数据库有如下几个： MySQL 数据库（目前使用最广泛、流行度最高的开源免费数据库；Community + Enterprise） Oracle 数据库（收费） SQL Server 数据库（收费） Mongodb 数据库（Community + Enterprise） 其中，MySQL、Oracle、SQL Server 属于传统型数据库（又叫做：关系型数据库 或 SQL 数据库）。 而 Mongodb 属于新型数据库（又叫做：非关系型数据库 或 NoSQL 数据库），它在一定程度上弥补了传统型数据库的缺陷。 在传统型数据库中，数据的组织结构分为**数据库(database)、数据表(table)、数据行(row)、字段(field)**这 4 大部分组成。 安装MySQL 对于开发人员来说，只需要安装 MySQL Server 和 MySQL Workbench （Navicat）这两个软件， ...