- 博客(29)
- 收藏
- 关注
RSS订阅
原创 实现一个某公司的仓储管理系统，分享下全栈开发过程中的一些步骤及心得
技术选型前端：react + antd后台：express + mysql2 + log4js(日志服务，按业务模块记录)部署：某讯的云服务器+域名，nginx代理前端、后台服务前端(管理端)使用脚手架创建项目，然后增加antd组件库页面鉴权左侧导航菜单:根据当前账号所属角色对应的菜单权限去生成路由/子路由设计项目代码目录设计后端1、路由设计，根据业务区分多个路由模块2、接口日志记录、鉴权（登录时写入cookie）3、登录时，密码做双层md5加密校验（内置超级管理
2022-03-07 17:56:28
796
原创 手写一个发布订阅模式（订阅 / 一次订阅 / 触发 / 关闭订阅）
心血来潮，想要手写实现一个类似pubsub-js或者vue中央事件总线的发布订阅的小类库代码如下：新建一个文件 JasonMa_PubSub.jsconst JasonMa_PubSub = { //存储事件及方法 listenStore: {}, //订阅/监听 on: function(method, cb) { //如果已监听过这个方法，就push这个回调函数；如果没监听就创建键值对，值为一个数组用于存储当前回调函数 if (this.listenStore[
2022-01-02 06:30:00
1579
3
原创 vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解（纯干huo）
方式1：定义全局的CSS变量App.vue：<style>/* 定义全局的css变量 */:root { /* 背景色 */ --theme_bg_color: red; /* 按钮颜色 */ --theme_button_color: yellowgreen;}</style>demo.vue（css）：<style scoped> /* 使用全局的css变量设置颜色 */.myButton { background: va.
2021-12-26 06:30:00
17770
6
原创 React中使用 react-router-dom 路由传参的三种方式详解【含V5.x、V6.x】
路由传值的三种方式（v5.x）params参数//路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link> //或 <Link to={{ pathname:'/demo/test/tom/18' }}>详情</Link>//注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/> //接收参数：this.
2021-12-19 07:15:00
2710
2
原创 最简洁的 Mbox 6.x 基本使用步骤介绍（仅三步）^v^
首先安装：yarn add mobx mobx-react 或 npm i mobx mobx-react --save-dev一、创建mobx仓库使用@observable装饰器import { makeObservable, observable, action, computed } from "mobx";/** 方式1： 使用@observable装饰器 */class A { //声明状态 @observable list = [ { id: 1, .
2021-12-13 16:48:50
1907
原创 全网最全 react-router-dom v6.0学习指南（新特性深入解读、持续更新...）
安装依赖npm i react-router-dom引入实现路由所需的组件，以及页面组件import { BrowserRouter, Routes, Route } from 'react-router-dom';import Foo from './Foo';import Bar from './Bar';function App(){ return ( <BrowserRouter> <Routes> .
2021-12-11 12:02:25
2561
5
原创 （原创）深入解读s React 中的useState Hook 修改了值，但是不重新渲染，不刷新的问题
（原创）深入解读s React 中的useState Hook 修改了值，但是不重新渲染，不刷新的问题
2021-12-09 18:09:39
5441
3
原创 一个开箱即用的已集成全部主流前端工具、类库的vue3+nuxt3服务端渲染ssr项目
nuxt3vue官方推荐的最好用，生态最全的nuxt3服务端渲染ssr框架vue3推荐使用script setup语法糖vue-router路由lesscss预处理器动画效果swiper公认最好用的轮播插件基于vue3的UI组件库pinia传说中的vuex5vueuseVue3组合式API的工具集lodashdayjsqsi18n多语言国际化化github项目地址：https://github.com/JasonMa-95/nuxt3-ssr-tempthanks!
2024-05-14 17:58:45
297
原创 vue3 shallowRef导致视图更新的问题解析
示例代码如下：在浏览器内，在 前面打个debug进入调试可以发现修改a.value时候，触发了vue3响应式函数的setter函数，setter函数内检测到有数据改变了，会去调用从而触发了试图的更新，所以当同时修改shallowRef定义的深层数据时，由于试图被触发了，msg的最新数据也会被更新到视图上所以当我们注释之后，就能达到正常的预期，修改深层数据而不会触发试图更新；官方推荐在修改shallowRef所定义的深层数据后，使用去主动触发更新，而不是通过这种不规范的方式。...
2022-06-09 11:05:13
916
1
原创 ESlint配置详解
{// 环境定义了预定义的全局变量。"env": { //环境定义了预定义的全局变量。更多在官网查看 "browser":true, "node":true, "commonjs":true, "amd":true, "es6":true, "mocha":true },// JavaScript 语言选项"parserOptions": {// ECMAScript 版本"ecma
2022-05-25 06:00:00
741
原创 聚齐这三张宝图，搞懂css权重
CSS权重的知识点算是一个难点，需要掌握所有的选择器，起码看到选择器能分辨出是哪种选择器。我集齐了 3 张图，看看这 3 张图能不能帮你搞懂 CSS 权重（优先级）问题。
2022-04-22 17:18:47
225
原创 什么是节流与防抖，以及基本的应用场景
防抖 (debounce)防抖，顾名思义，防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。想要了解一个概念，必先了解概念所应用的场景。在 js 这个世界中，有哪些防抖的场景呢登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖文本编辑器实时保存，当无任何更改操作一秒后进行保存代码如下：防抖重在清零 clearTimeout(timer)function d
2022-03-15 10:46:52
238
原创 IOS里面js获取时间戳时候的兼容性问题
实际项目中遇到的问题const data = await queryLiveMsgList({ lastMsgId: this.liveMessage.length > 0 ? this.liveMessage[this.liveMessage.length - 1].id : 0, lastMsgTime: this.liveMessage.length > 0 ? new D
2022-02-19 06:00:00
932
原创 vue如何实现一个自定义组件的v-model，v-model原理解析
v-model指令的原理是什么？v-bind绑定一个value属性v-on监听当前元素的input事件，当数据变化时，将值传递给value实时更新数据v-model和v-bind:value有什么区别？自定义组件中，必定会使用v-bind指令来实现组件之间值的传递，所以在我还是菜鸟的那段时间，我一直有个疑惑， 既然有的v-bind指令，为什么还需要在自定义的组件中实现v-model指令呢？在我实践了一番之后，我才明白， v-model既能够实现值的传递，也能够实现页面数据的实时变化，而v-bin
2022-02-17 06:30:00
1428
原创 js实现引用类型数据深拷贝的几种方式？
js深拷贝的三种实现方式1. 使用递归的方式实现深拷贝 //使用递归的方式实现数组、对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝 var objClone = Array.isArray(obj) ? [] : {}; //进行深拷贝的不能为空，并且是对象或者是 if (obj && typeof obj === "obj
2021-12-30 06:45:00
347
原创 在vue中使用HTML5 Web SQL 浏览器数据库
HTML5 Web SQL 数据库Web SQL 是在浏览器上模拟数据库，可以使用 JS 来操作 SQL 完成对数据的读写。\Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。核心方法以下是规范中定义的三个核心方法：openDataba
2021-12-25 06:30:00
932
原创 Vue2.x和Vue3.0中的响应式原理
vue2.x的响应式实现原理：对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。Object.defineProperty(data, 'count', { get () {}, set () {}})存在问题：新增属性、删除属性, 界面不会更新。直接通过下标修改数组, 界面不会自动更新。Vue3.0的响应式
2021-12-22 07:15:00
181
原创 深入解读vue3 watch监听（踩坑记录）
直接上代码，总共测试了下面这些情况（看注释）<template> <h2>当前求和为：{{ sum }}</h2> <button @click="sum++">点我+1</button> <hr /> <h2>当前的信息为：{{ msg }}</h2> <button @click="msg += '！'">修改信息</button> <hr />
2021-12-21 07:00:00
893
原创 在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】
react-router-dom 编程式路由导航 (v5)1.push跳转+携带params参数 props.history.push(`/b/child1/${id}/${title}`);2.push跳转+携带search参数props.history.push(`/b/child1?id=${id}&title=${title}`);3.push跳转+携带state参数props.history.push(`/b/child1`, { id, title });4.repl
2021-12-20 07:15:00
2785
3
原创 深度解析 React useRef Hook 的使用
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内持续存在。命令式地获取及操作DOM：function TextInputWithFocusButton() { // 通过useRef创建并获取Dom元素 const inputEl = useRef(null); const onButtonClick = () =&
2021-12-17 08:00:00
634
原创 HBuilderX无法启动微信小程序？仅三步
1.复制微信开发者工具启动路径 ："C:\Program Files (x86)\Tencent\微信web开发者工具\微信web开发者工具.exe" 不要后面的 “微信web开发者工具.exe”；2.在HBuilderX中，工具-》设置，打开下图3.微信开发者工具的配置：回到HBuilderX上，点击工具栏的运行，选择小程序上启动，既可！兄弟姐妹们，点波关注吧，一起分享有趣的技术！掘金： https://juejin.cn/user/3034307824456296/posts 全部
2021-12-16 10:59:47
1263
1
原创 两大js移动端调试神器 / 调试工具分享。
分享大家一个CDN网站：https://www.bootcdn.cn/eruda 移动端网页调试工具的使用: <script src="https://cdn.bootcdn.net/ajax/libs/eruda/1.6.0/eruda.js"></script> <script>eruda.init();</script>效果如下，点击小按钮即可vConsole 移动端网页调试工具的使用: <script src="htt.
2021-12-15 18:40:21
2201
原创 JS如何区分微信浏览器、QQ浏览器和QQ内置浏览器，解决 ios 无法判断是否为qq浏览器环境的问题。
原理通过不同移动端的ua弹窗 获取user-agent 参数包含的信息，进行判断浏览器类型在Android上QQ内置环境的ua中有关键字 MQQBrowser， 并且后面包含一个【空白符+QQ】字符；QQ浏览器仅有【MQQBrowser】因此在Android上区分，需要用正则判断ua中包含MQQBrowser，并且剔除【MQQBrowser】之后包含【空白符+QQ】，则是QQ内置浏览器，QQ浏览器：ua中包含MQQBrowser但是不包含QQ在ios上QQ内置浏览器： ua包含一个空格
2021-12-15 18:24:57
3968
原创 解决用creact-react-app新建React项目不支持 mobx装饰器模式导致报错问题 。
创建react项目create-react-app mobx-demo cd my-app npm run start使用react-app-rewirednpm install customize-cra react-app-rewired @babel/plugin-proposal-decorators --save在你的根目录即 和src同级的地方新建js文件 config-overrides.js 粘贴下方代码:const{override,addDecoratorsLegacy
2021-12-13 18:11:04
286
原创 create-react-app脚手架新建项目后，启动项目，浏览器报错问题解决
使用 create-react-app 脚手架新建项目后，启动项目浏览器报错：Uncaught TypeError: Cannot read property ‘forEach’ of undefined at Object.injectIntoGlobalHook这是因为React网页调试工具是老版本的，与新的脚手架有冲突导致的解决方法1：进入谷歌拓展程序，关闭或移除React Developer Tools扩展解决方法2：进入 项目目录\node_modules@pmmmwh\react-re
2021-12-09 18:19:45
1220
原创 angular移动端项目屏幕适配方案 (比rem方案更好) - postcss-px-to-viewport
1> npm i @angular-builders/custom-webpack --save-dev (angular项目本身不允许配置，步骤 1 2为它添加自定义配置)2>修改angular.json"architect": { ... "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": {
2020-05-20 10:58:59
2422
1
原创 微信小程序项目使用npm安装vant-weapp的正确步骤，简单易懂
微信小程序项目使用npm安装vant-weapp的正确步骤1、在当前小程序项目目录npm init -y 构建npm项目2、运行命令 npm install vant-weapp -S --production安装完 发现在当前小程序目录下新增node_modules目录 下面有了vant-weapp组件文件夹 如下图：3、详情里面：选中使用npm模块4、进入微信开发工具：选择 工具 -> 构建npm5、下面以引入button组件到某页面为例子：在此页面的.json中配置
2019-04-24 14:47:47
6095
8
原创 解决字节跳动开发者工具安装无法打开问题
从字节跳动小程序文档下载官方字节跳动开发者工具（地址如下）：https://developer.toutiao.com/docs/devtool/versionUpdate.html下载字节跳动开发者工具 下载之后 点击安装 默认安装到C:\Users\你的电脑名称\AppData\Local\Programs\bytedanceide目录下 但是点击打开 弹窗报红色错误如下图：解...
2019-04-08 18:37:20
4460
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人