使用sequelize-cli管理数据库
安装
sequelize-cli 的依赖是 sequelize sequelize的依赖是mysql2 需要自己手动安装
123npm i sequelize-cli --save-devnpm i sequelizenpm i mysql2
查看版本
12npx sequelize-cli --versionnpx sequelize --version
查看所有命令
1npx sequelize --help
123456789101112131415161718192021222324252627282930313233Sequelize CLI [Node: 10.21.0, CLI: 6.0.0, ORM: 6.1.0]sequelize <指令>指令： 带db的都是操作数据库的指令 sequelize db:migrate 运行待处理的迁移 sequelize db:migrate:schema:timestamps:add 更新迁移表以包含时间戳 sequelize ...
使用 Docker 运行 MySQL
使用 Docker +Mysql使用Docker来运行MySQL。这样在 Windows 与 macOS 上，甚至在 Linux 服务器上，它们的运行环境都是一致的。
1.进入Docker官网后，https://www.docker.com/get-started/，直接下载安装。
2.配置中国镜像
123"registry-mirrors": [ "https://xelrug2w.mirror.aliyuncs.com"]
3.使用 docker compose
接着进入项目根目录中，新建一个文件，叫做docker-compose.yml。千万要注意，一定要在项目根目录中，放在其他地方会找不到的。然后将下面的配置复制进去，这就是MySQL的一个简单配置了。
123456789101112131415services: mysql: image: mysql:8.3.0 command: --default-authentication-plugin=mysql_native_password ...
深入理解 Node.js 中的 module.exports 和 exports
前言在上一篇文章中，我们介绍了 JavaScript 模块系统的发展历程，其中提到了 CommonJS 是 Node.js 默认的模块系统。在 CommonJS 中，我们使用 module.exports 和 exports 来导出模块内容，使用 require 来导入模块。但很多初学者对 module.exports 和 exports 的关系和区别感到困惑。本文将深入剖析这两个对象的关系和正确使用方式。
理解 module 对象在每个 Node.js 文件中，都有一个内置的 module 对象。这个对象包含了当前模块的相关信息。
让我们通过一个简单的例子来观察 module 对象：
12// example.jsconsole.log(module);
运行这个文件：
1node example.js
你会看到类似以下的输出：
12345678910Module { id: '.', path: '/path/to/your/file', exports: {}, parent: null, fil ...
JavaScript CommonJS 和 ES Module 理解与应用
前言在现代 JavaScript 开发中，模块化是组织代码的重要方式。随着 JavaScript 生态的发展，出现了多种模块系统，其中 CommonJS 和 ES Module 是最为重要的两种。CommonJS 主要用于 Node.js 环境，而 ES Module 是 ECMAScript 官方标准的模块系统，逐渐在浏览器和 Node.js 中得到广泛支持。本文将深入探讨这两种模块系统的区别、使用场景以及它们解决了哪些问题。
什么是 CommonJSCommonJS 是 Node.js 中默认的模块系统，它是一种同步的模块加载机制。在 CommonJS 中，每个文件都是一个模块，具有独立的作用域。通过 require() 函数导入模块，通过 module.exports 或 exports 导出模块。
CommonJS 基本语法123456789101112131415161718// math.js - 导出模块function add(a, b) { return a + b;}function subtract(a, b) { ret ...
在抖音小程序中实现类似 Pinia 的全局响应式数据状态管理
在微信小程序中实现类似 Pinia 的全局响应式数据状态管理抖音小程序作为一种轻量级的应用程序开发框架，具有自身的特点和限制。其中，全局状态管理是开发者常常需要面对的问题之一。在这篇博客中，我们将介绍如何在抖音小程序中实现类似 Vue.js 生态系统中的 Pinia 的全局响应式数据状态管理。
简介Pinia 是一个为 Vue.js 设计的全新状态管理库，通过利用 Vue 3 提供的响应式 API，提供了简洁而强大的全局状态管理解决方案。虽然抖音小程序并不直接支持 Vue.js，但我们可以借鉴 Pinia 的设计思想，在抖音小程序中实现类似的全局状态管理系统。
实现步骤1. 创建全局状态管理器首先，我们创建一个 store 文件夹，新建 index.js文件， 定义一个名为 Store 的类作为全局状态管理器。在该类中，我们可以定义状态、mutations、actions 等相关方法。
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253cla ...
vite性能优化之CDN加速
CDN 加速内容分发网络（Content Delivery Network，简称 CDN）就是让用户从最近的服务器请求资源，提升网络请求的响应速度。同时减少应用打包出来的包体积，利用浏览器缓存，不会变动的文件长期缓存。(不建议使用第三方cdn，这里做学习讨论使用)
采用CDN引入的弊端：1、可靠性：使用CDN引入外部模块意味着依赖于第三方服务商的可用性和稳定性。如果CDN服务商发生故障或者网络问题，可能会导致外部模块无法加载，影响网站的正常运行
2、安全性：使用CDN引入外部模块需要信任第三方服务商，因为模块实际上是从服务商的服务器上加载的。如果服务商被黑客攻击或者恶意篡改了模块的内容，可能会导致安全问题
3、性能：CDN服务通常会根据用户的地理位置选择最近的节点进行内容分发，这样可以减少网络延迟和提高访问速度。但是如果用户所在地区的CDN节点发生故障或者网络拥堵，可能会导致加载速度变慢甚至加载失败
4、版本控制：使用CDN引入外部模块可能会导致版本控制的问题。如果模块的版本发生变化，CDN服务商可能会立即更新节点上的内容，这样可能会导致网站出现兼容性问题或者功能异常
代码实现安装插件 ...
vue-cli4之手撸webpack骨架屏插件
一、实现webpack骨架屏 书接上文，由于在vue-cli4里面直接使用 vue-skeleton-webpack-plugin插件失败 （插件基于vue2开发），而项目是vue3开发，这就导致了不兼容，于是乎就开始了手撸…
二、骨架屏的由来：123单页面应用在现在的前端页面开发是越来越常见了。它的好处很多，坏处也很明显：就是首屏加载往往很慢，呈现一片空白的页面，这给用户的体验感是很差的。可资源的加载我们除了尽量地优化，也没有其他很好的办法了。为了解决这个体验感的问题，骨架屏应运而生。
三、骨架屏原理：12345678<html lang="en"><head> <meta charset="UTF-8"></head><body> <div id="app"></div></body></html>
单页面应用其实就是一个html文件，html结构里面有一个div#app，当js加载完毕并且执行完成 ...
温故，重新记录一次vue-cli4打包优化
vue-cli4打包优化一、 配置 proxy 跨域使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题：
12345678910111213141516171819202122232425module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060, // 端口号 hotOnly: false, // 热更新 overlay: { // 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层 warnings: false, errors: true }, proxy: { //配置跨域 '/api': { target: 'https://www.test.com', // 接口的域名 ...
禁止打开开发者工具
禁用开发者工具的尝试与思考 在如今web盛行的时代，确保网页安全是一个至关重要的主题，涉及到用户隐私、数据保护、防范攻击等方面, 我们时常会遇到需要保护代码免受未经授权访问和复制的情况。一些开发者可能尝试通过禁用浏览器开发者工具来实现这一目标。在这篇文章中，我们将介绍一种使用 disable-devtool 库的尝试，并讨论相关的思考。
为什么要禁用开发者工具？
代码安全性： 一些开发者希望通过禁用开发者工具来增强其代码的安全性，防止被未授权的用户查看、修改或复制。
防止调试： 有时，开发者可能希望防止用户对其网站进行调试，以保护敏感信息或增加一些控制。
功能介绍npm库名称：disable-devtool，
github地址：github.com/theajack/disable-devtool。从f12按钮，右键单击和浏览器菜单都可以禁用Web开发工具。
一行代码搞定禁用web开发者工具
该库有以下特性:
支持可配置是否禁用右键菜单
禁用 f12 和 ctrl+shift+i 等快捷键
支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
开发者可以绕过禁用 (url参数 ...
基于vite ts 封装 axios
封装request和config请求信息抽离处理
先安装axios，毕竟请求是基于axios的。
npm: npm install axios
yarn: yarn add axios
在src的同级目录下，创建shims-axios.d.ts。用于做axios的ts声明
123456789101112131415161718192021222324252627282930313233import { AxiosInstance, AxiosRequestConfig, AxiosPromise } from "axios"declare module "axios" { export interface AxiosRequestConfig { /** * @description 设置为true，则会在请求过程中显示loading动画，直到请求结束才消失 */ loading?: boolean isDialog?: boolean } ...
