- 博客(74)
- 收藏
- 关注
RSS订阅原创 如何快速在本地运行你vue打包的的dist文件
要在本机启动运行前端提供的dist包，需要先安装一个HTTP服务器，例如Apache,Nginx，phpstudy。这里以使用Node.js的http-server为例进行说明首先，确保已经安装了Node.js。如果没有安装，可以从官网下载并安装。打开终端或命令行窗口，使用以下命令安装http-servernpm install -g http-server进入dist...
2023-07-26 14:44:00
1816
原创 监听sessionStorage中值的变化
应用场景：将登录接口所返回的用户信息存入sessionStorage，在其他地方需要使用到用户信息，但不知道什么时候接口请求完，此时可以监听sessionStorage中值的变化。应用：Event自定义事件 window.dispatchEvent();事件分发var orignalSetItem = sessionStorage.setItem;sessionStorage.se...
2023-07-21 14:52:00
410
原创 23年用vuex进行状态管理out了，都开始用pinia啦！
1 Vue2项目中，Vuex状态管理工具，几乎可以说是必不可少的了。而在Vu3中，尤大大推荐我们使用pinia(拍你啊)进行状态管理，咱得听话，用就完了。使用之前我们来看一下，使用 pinia 给我们带来哪些好处?官网介绍：Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态个人理解：在我看来就是变态版 vuex，听说是为了尊重原作者，所以给改名了叫 pinia(拍你啊)看...
2023-03-03 14:58:00
122
原创 js实现一二级域名共享cookie
前言最近接手的项目中 ，有人反馈了一个问题，说是在访问网站并登录后，登录成功有登录信息，但是刷新页面后重定向到了登录页面，让从新登录。打开 goole 调试页面，查看 cookie 时发现存储的相关 token 信息不见了。原本以为 cookie 有效期有问题，但经过排查 cookie 失效为 7 天，也没有清除 cookie 的逻辑。经排查发现：我们在输入访问 hew.cn 的时候，...
2023-02-17 16:51:00
413
原创 10分钟了解MVVM，实现简易MVVM
MVVM 是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模型，View 代表 UI 组件，ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 viewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据。Model: 代表数据...
2023-02-17 11:34:00
47
原创 8种Vue中数据更新了但页面没有更新的情况
这一句引起的，因为触发了 setter，所以单看上述例子，具有响应式特性的数据只有 message 这一层，它的动态添加的属性是不具备的。方案3： 在vuex中设置状态，动态绑定 include 值，在登录的时候缓存需要缓存的组件，在退出的时候，清除需要刷新的组件（效果很理想，也顺带解决了加载数据时，数据闪现的情况）方案1： 如果要在进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务(亲测，时而有效，时而无效，不知道是什么原因)。
2022-11-30 17:30:46
785
2
原创 前端-文件上传几种方式及其核心思想
目录一、文件上传几种方式1、from 表单上传1.1 普通上传1.2异步上传方案1：base64上传方案2：二进制形式2、frame上传3、FormData异步上传二、大文件上传1、切片2、断点续传3、上传进度和暂停一、文件上传几种方式form表单上传iframeFormData异步上传1、from 表单上传首先要知道我们上传文件时需要修改form表单的 enctype='mult...
2022-03-31 16:47:00
919
原创 HyBird App(混合应用)核心原理JSBridge
目录app分类HyBird App(混合应用)JSBridge介绍优势及应用场景JsBridge的核心1、Web端调用Native端代码1.1 拦截URL Schema1.2 注入api2、Native端调用Web端代码app分类Native App(原生应用)Web App(网页应用)HyBird App(混合应用)HyBird App(混合应用)Hybrid利用JSBridge...
2022-03-29 14:58:00
47
原创 微前端
一、微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端。微服务是面向服务架构(SOA)的一种变体，把应用程序设计成一系列松耦合的细粒度服务，并通过轻量级的通信协议组织起来具体地，将应用构建成一组小型服务。这些服务都能够独立部署、独立扩展，每个服务都具有稳固的模块边界，甚至允许使用不同的编程语言来编写不同服务，也可以由不同的团队来管理。1、将单页面前端应用由单一的单体应用转...
2022-03-28 16:06:00
29
原创 linux基本操作
一、 基础介绍Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 UNIX 的多用户、多任务、支持多线程和多 CPU 的操作系统。1、发行的 linux 版本Linux 的发行版说简单点就是将 Linux 内核与应用软件做一个打包。市面上较知名的发行版有：Ubuntu、RedHat、CentOS、Debian、Fedora、SuSE、OpenSUSE...
2022-03-23 17:32:00
74
原创 微信小程序---快速上手云开发
一、初识云开发官方文档小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务。开发者可以使用云开发快速开发小程序、小游戏、公众号网页等，并且原生打通微信开放能力。开发者无需搭建服务器，可免鉴权直接使用平台提供的API进行业务开发目前云开发包含：云数据库，云函数，云存储，云调用优势无需搭建服务器，只需使用平台提供的各项能力，即可快速开发业务。无需管理证书、签名、秘钥，直...
2022-01-18 15:14:00
57
原创 谷歌性能测评工具lighthouse使用
1、谷歌插件lighthouse的基本介绍Lighthouse 是一个网站性能测评工具， 它是 Google Chrome 推出的一个开源自动化工具，能够对 PWA 和网页多方面的效果指标进行评测，并给出最佳实践的建议以帮助开发者改进网站的质量。它的使用方法也非常简单，我们只需要提供一个要测评的网址，它将针对此页面运行一系列的测试，然后生成一个有关页面性能的报告。通过报告我们就可以知道需要采取...
2022-01-12 18:03:00
27
原创 微信小程序--数据共享与方法共享
目录全局数据共享 Moboxnpm安装及其注意事项小程序对 npm 的支持与限制npm 依赖包的安装与使用Mobox1. 全局数据共享2. 小程序中的全局数据共享方案3. 使用mobx组件方法共享 behaviors1. 什么是 behaviors2. behaviors 的工作方式3. 创建 behavior4. 导入并使用 behavior5. behavior 中所有可用的节点6. 同名字...
2022-01-07 16:47:00
40
原创 微信小程序-自定义菜单导航（实现楼梯效果）
设计初衷在开发页面时，往往需要实现，点击页面的导航菜单页面滚动到相应位置，滚动页面实现菜单选项的高亮。在html开发中，我们可以用到a标签锚点实现，jq的动画相结合实现类似效果。在框架中vant UI框架也为我们实现了这一效果。微信小程序该如何实现？？效果展示当菜单导航滚动到页面顶部时，菜单吸顶当点击菜单按钮时，切换到对应区域(过渡到该区域，有动画效果)当内容区滚动到某类区域时，对...
2021-12-30 14:39:00
61
原创 前端开发需要了解的浏览器通识
目录浏览器通识一、浏览器架构1、单进程浏览器时代2、多进程浏览器时代3、Chrome 打开一个页面需要启动多少进程？分别有哪些进程？二、javascript单线程1、为什么采用单线程2、浏览器内核中线程之间的关系3、进程和线程又是什么呢4、任务队列三、渲染机制1. 浏览器如何渲染网页四、缓存机制1、常见 http 缓存的类型2、缓存的好处3、浏览器缓存总结强缓存协商缓存缓存位置六、浏览器存储七、...
2021-12-02 11:46:00
24
原创 vue实现聊天+图片表情功能
项目需求是这样的：要求实现类似于微信聊天一样，表情+文字效果 “文字效果????????????”表情包三种方案表情包的实现其实可以分为以下三种情况：表情包：点击表情--直接发送大表情(这种方案其实就是发送了一张定义好的图片而已)emoji图标表情：系统可识别的emoji图标表情，这种表情实现起来相对麻烦一些，其实这种方法emoji我们可以当成一个2位字符的特殊文字去处理推荐emoji网址:emoj...
2021-11-24 13:12:00
60
原创 react之react Hooks
目录1、useState保存组件状态2、useEffect 处理副作用3、useContext 减少组件层级4、useReducer 数据交互5、useCallback 记忆函数6、useMemo 记忆组件7、useRef 保存引用值8、useImperativeHandle 透传 Ref9、useLayoutEffect 同步执行副作用函数组件，没有 class 组件中的 component...
2021-11-23 11:33:00
37
原创 react之Lazy和Suspense（懒加载）
React.lazyReact.lazy 函数能让你像渲染常规组件一样处理动态引入(的组件)。什么意思呢？其实就是懒加载。其原理就是利用es6 import()函数。这个import不是import命令。同样是引入模块，import命令是同步引入模块，而import()函数动态引入。当 Webpack 解析到该语法时，它会自动地开始进行代码分割(Code Splitting)，分割成...
2021-11-23 09:35:00
28
原创 react之路由
功能：让用户从一个视图(组件)导航到另一个视图(组件)前端路由是一套映射规则，在React中，是URL路径与组件的对应关系使用React路由简单来说，就是配置路径和组件路由的使用1、安装路由npm i -S react-router-dom2、相关组件Router组件：包裹整个应用，一个React应用只需要使用一次Router： HashRouter和BrowserR...
2021-11-22 10:12:00
34
原创 react之redux状态管理
1、传统MVC框架的缺陷模型(model)－视图(view)－控制器(controller)的缩写V即View视图：用户看到并与之交互的界面。M即Model模型是管理数据：很多业务逻辑都在模型中完成。在MVC的三个部件中，模型拥有最多的处理任务。C即Controller控制器：接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个...
2021-11-19 09:24:00
22
原创 ES6--ES12笔记整理（1）
一、let const五个共同特点不允许重复声明块级作用域不存在变量提升不影响作用域链暂时性死区---在代码块内，使用let/const命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”const 特殊性声明必须赋初始值；标识符一般为大写(习惯)；值不允许修改；指向的那个内存地址所保存的数据不得改动。对于简单类型的数据(数值、字符串、布尔值)，...
2021-11-18 14:07:00
19
原创 js实现日期格式化封装--八种
封装一个momentTime.js文件，包含8种格式.需要传两个参数:时间戳：stamp格式化的类型：type，日期补零的方法用到es6语法中的padStart(length,‘字符’):第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全的字符串。如果没有指定第二个参数，默认用空格填充。需要注意的是需要将获取到的年月日转为字符串，可以直接拼接一个引号。padSta...
2021-11-02 16:36:00
36
原创 react之组建通信
父组件与子组件通信父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变父组件利用ref对子组件做标记，通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法父组中定义ref引用import React,{Component,createRef} from 'react'import Child1 from './C...
2021-10-14 10:11:00
15
原创 react之组件生命周期
四个阶段初始化运行中销毁错误处理(16.3以后)初始化constructorstatic getDerivedStateFromProps()componentWillMount() / UNSAFE_componentWillMount()render()componentDidMount()更新props或state的改变可能会引起组件的更新，组件重新渲染的...
2021-10-13 10:33:00
18
原创 react之事件处理
1、事件绑定React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同:React 事件的命名采用小驼峰式，而不是纯小写。onClick onChange使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。onClick={this.fn}类组件与函数组件绑定事件是差不多的，只是在类组件中绑定事件函数的时候需要用到this，代表指向当前的类的...
2021-10-12 09:54:00
14
原创 react之组件数据挂在方式
1、属性(props)组件间传值，在React中是通过只读属性 props 来完成数据传递的。props：接受任意的入参，并返回用于描述页面展示内容的 React 元素。import React, { Component, Fragment } from 'react'import ReactDOM from 'react-dom'class Title extends Compon...
2021-10-11 16:32:00
23
原创 react之四种组件中DOM样式设置方式
1、行内样式想给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现行内样式需要写入一个样式对象，而这个样式对象的位置可以放在很多地方例如：render函数里、组件原型上、外链js文件中注意：这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号<p style={{color:'red', fontSize:'14px'}}>Hello worl...
2021-10-11 10:16:00
64
原创 微信小程序开发指南
目录一、介绍小程序与普通网页开发区别小程序与传统App区别小程序框架结构二、开发前准备工作申请账号与登录设置获取APPID下载设置代理创建第一个项目三、项目文件结构与配置文件结构配置三、基本语法视图结构 wxml1、数据绑定2、setData修改数据源数值3、for循环列表渲染4、if条件渲染5、模块引用(包含)样式wxss新增了尺寸单位提供了全局的样式和局部样式支持部分 CSS 选择器page...
2021-09-28 09:44:00
22
原创 九种实用的前端跨域处理方案
目录同源策略跨域解决方案一、JSONP跨域1、原生JS实现2、jquery Ajax实现3、Vue axios实现二、跨域资源共享(CORS)简单请求与非简单请求简单请求非简单请求CORS跨域三、Nginx 反向代理解决跨域问题正向代理和反向代理nginx配置解决iconfont跨域nginx反向代理接口跨域四、nodejs中间件代理跨域1、nodejs服务器代理2、vue框架的跨域五、docu...
2021-09-18 10:59:00
24
原创 Vue3.x全家桶+vite+TS-搭建Vue3.x项目
目录一、搭建基础项目1、vite创建项目3、运行项目2、环境变量设置介绍vite配置多环境打包二、配置Router1、安装路由2、配置路由3、引入三、配置Vuex1、安装vuex2、配置vuex3、引入4、页面调用四、alias起别名五、基础语法1、定义data2、定义props3、定义methods一、搭建基础项目vite详解vue3API详解1、vite创建项目使用 vite 搭建项目...
2021-09-17 13:17:00
37
原创 Vue3.x全家桶+vite+TS-构建Vue3基本框架
目录一、搭建基础项目1、vite创建项目3、运行项目2、环境变量设置介绍vite配置多环境打包二、配置Router1、安装路由2、配置路由3、引入三、配置Vuex1、安装vuex2、配置vuex3、引入4、页面调用四、alias起别名五、基础语法1、定义data2、定义props3、定义methods一、搭建基础项目vite详解vue3API详解1、vite创建项目使用 vite 搭建项目...
2021-09-17 13:05:00
40
原创 Typescript详解
typescript由微软开发的一款开源编程语言。ts是jacascript的超集，遵循ES6,ES5规范，ts扩展了js的语法。ts更像后端java，c#这样的面向对象的语言，可以让js开发大型的企业项目，谷歌也大力支持ts的推广，谷歌的angular2.x就是基于ts语法开发的最新的Vue,React也继承tsNodejs框架Nestjs,midway中用的就是ts语法.目录基础...
2021-09-15 15:41:00
19
原创 Vite详解
vite目录一、推荐两个插件插件VolarVue 3 Snippets二、vite简介优势分析浏览器支持三、vite搭建vue3.x项目1、创建项目2、集成Vue-Router3、集成vuex4、集成Eslint5、集成element-plus6、移动端适配四、vite.config.js的配置1、 配置alias起别名2、proxy代理配置3、按需引入element plus五、Webpac...
2021-09-14 09:59:00
23
原创 网站安全问题汇总
目录一、SQL注入解释如何产生举例如何防御二、XSS 攻击(跨站脚本攻击)解释如何产生举例如何防御三、CSRF 攻击解释如何产生如何防御四、DDoS 攻击解释如何产生常见的攻击方式如何防御五、DNS劫持解释DNS劫持方法如何防御六、JSON 劫持解释如何产生七、点击劫持解释如何产生如何防御八、OS命令注入解释如何产生举例如何防御九、URL跳转漏洞解释如何产生如何防御其他暴力破解HTTP 报头追踪...
2021-09-10 14:38:00
21
原创 前端搭建Linux云服务器，Nginx配置详解及部署自己项目到服务器上
目录搭建Linux云服务器购买与基本配置链接linux服务器目录结构基本命令软件安装Linux 系统启动启动过程运行级别Nginx详解1、安装方式一：yum安装方式二：自定义目录安装2、启动nginx3、解决80端口被占用4、彻底卸载和删除CentOS上的Nginx目录介绍配置 nginx.conf配置文件语法配置虚拟主机开启gzip动手发布一个自己的项目到服务器上一、购买一个阿里云服务器二、p...
2021-09-09 15:33:00
34
原创 vue-八种实现组建通信的方法
目录组件通信1、props 父组件--->子组件通信2、$emit 子组件--->父组件传递$emit与props结合 兄弟组件传值3、bus(事件总线) 兄弟组件通信4、$parent、$children 直接访问组件实例5、$refs6、provide/inject(提供/注入) 多组件或深层次组件通信7、slot(slot-scope作用域插槽) 子元素-->父元素(类...
2021-09-08 13:43:00
27
原创 vue.config.js中的webpack配置，优化及多页面应用开发
目录一、vue.config.js中常用的配置1、导出模块2、publicPath 部署应用包的基本Url3、outputDir 输出文件目录4、assetsDir 打包后生成的静态资源目录5、lintOnSave6、productionSourceMap 生产环境的 source map7、devServer8、 chainWebpack webpack配置9、configureWebpack...
2021-09-03 15:28:00
26
原创 轻松搞定webpack5.x
源码地址:https://gitee.com/cyp926/webpack-project.git"webpack": "^5.46.0","webpack-cli": "^4.7.2",目录一、webpack1.1 webpack是什么1.2 五个核心内容1.3 下载webpack的插件1.4 基本使用运行打包命令行快捷配置1.5 打包html1.6 开发服务器 devServer1.7...
2021-09-01 13:35:00
17
原创 项目中经常用到的sass语法汇总
1、定义变量使用：$(符号定义变量)注意：使用时要带有‘$’符号，定义变量的方式与PHP相同$变量：数值;$color_r : red;div{ color:$color_r;}2、if判断语句执行逻辑与js中的if判断完全相同使用：@if、 @else if、@else注意：判断条件没有()直接写就行2-1 @if 变量 判断符号 数值$c1 : red;...
2021-08-30 18:11:00
18
原创 npm常用命令及其node相关工具汇总
它是一个事件驱动异步I/O单进程的服务端JS环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。浏览器是JS的前端运行环境。Node.js是JS的后端运行环境，在后端中运行无法调用 DOM 和 BOM 等浏览器内置 API。nodejs调用服务查看服务器相关api gulp基础node环境node应用场景创建应用服务，web开发，接口开发，...
2021-08-27 16:39:00
25
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人