- 博客(105)
- 收藏
- 关注
RSS订阅原创 Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架
Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架
2022-11-18 23:14:08
885
原创 使用redux-persist解决redux数据刷新丢失问题
在React项目实际开发中，我们常常会对一些数据进行存储缓存中,防止用户刷新浏览器，数据丢失问题，比如token，用户信息之类的。之前都是手写一遍localStorage和sessionStorage储存，接来下，我们通过一个插件redux-persist配置项，来存储数据。存储数据配置首先安装 redux-persist插件cnpm install redux-persiststore文件配置本地存储 import storage from 'redux-persist/lib/st.
2021-07-04 18:54:10
1432
原创 React中使用react-i18next切换中英文
在React中，使用react-i18next和i18next切换中英文Store文件数据初始化首先安装redux依赖包通过redux对数据状态管理,通过派发changeLanguageActionCreator来切换中英文状态export const CHANGE_LANGUAGE = "change_language";export const changeLanguageActionCreator = (languageCode) => { return {
2021-07-03 16:28:50
1922
原创 React配置路径别名
在react中，都是组件化开发，大部分都会import 组件名 from './../../组件路径，这样写太臃肿和不美观，可以通过配置来改变这个写法通过安装customize-cra插件来实现在根目录新建config-overrides.jsconst { override, addWebpackAlias} = require('customize-cra')const path = require('path')module.exports = override( //
2021-06-24 16:07:32
607
原创 React组件实现权限按钮显示和隐藏
在一些管理后台中，经常会编写权限这一块功能模块，通过调用后端返回的接口，匹备权限码来控制显示和隐藏，按钮权限控制显示和隐藏需要和后端沟通好，通过给用户分配权限(权限码)，通过接口的形式，后端返回权限码存储到redux中。编辑高级组件role_button:存储到redux的权限码button 按钮级别传的权限码import React, { Component,Fragment } from 'react'import PropTypes from 'prop-types';impo
2021-06-04 22:40:09
2474
1
原创 Redux DevTools浏览器插件调试redux两种方法
通过科学上网的方式，在谷歌商店安装Redux DevTools方法一安装插件完之后，在你的redux文件，添加如下代码，reducer忽略即可const store = createStore( reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() );如果你安装了redux-thunk了使用applyMiddleware，修改如下首先需要在red
2021-05-26 22:06:27
469
原创 react结合antd动态生成左侧菜单栏
antd专门为react定制的中后台组件库，提供了大量的组件供开发者使用，官网地址 点击跳转在中后台中，菜单项是必不可少的，今天就使用react结合antd配置一个菜单栏目先定义好路由结构const Router = [{ title: '控制台', icon: 'laptop', key: '/index', role: ["user", "information", "product"] }, {
2021-04-14 19:43:42
3808
4
原创 react实现文字展开和收起功能
无论是在PC端页面还是WAP端页面，很常见的页面效果，超长文字，隐藏，然后点击展开和收齐功能。通过React Hook提供的useState定义好状态，来点击切换展开和收起id,name,image,info,price从父组件传递的数据info.substring(0,200)先对文本内容截取通过对按钮绑定点击事件，去触发useState里面的setReadMore去改变readMore的状态，即可实现这个功能通过三目运算符 readMore ? info : `${info.substri.
2021-04-01 22:35:52
2776
3
原创 小程序实现搜索历史记录，去重搜索字段以及限制展示字段数量
使用微信小程序实现搜索历史记录，去重搜索字段，限制字段数量以及点击重新搜索功能。对应界面 <view class="search-left"> <view class="search-icon"></view> <input class="search-input" bindinput="bindKeyInput" bindconfirm="OnSearch" .
2021-03-23 18:02:16
1110
原创 微信小程序修改radio样式
在开发小程序的时候，使用一些小程序自己提供的组件，感觉有和ul设计的不一样，这样让我们修改很通过，尤其是radio组件，checkbox组件。我们怎么去修改这样的样式。小城默认样式使用小程序的radio组件<radio-group name="sex" class="form-radio_wrap"> <label> <radio value="男" checked="{{sex == '男'}}" />男</label>
2021-01-23 09:38:05
6555
原创 基于vue3.0全家桶H5模板
基于vue3.0全家桶 + vant3.0 +scss + rem适配方案 + axios封装，构建H5模板脚手架版本要求vue cli版本需要node 8.9 或者更高的版本。或者你可以使用nvm来切换node版本本案例中，node版本的是12.15.0启动项目 git clone https://github.com/MrZHLF/vue3.0-vant-h5.git cd vue3.0-vant-h5 npm install 或者使用 cnpm 切换到淘宝镜像 cnpm .
2020-11-26 11:14:45
2223
1
原创 使用Vue-Cli4.x配置文件路径别名
vue脚手架版本升级到4.x以后，目录发生了很大的变化，有些配置需要我们自己去配置自己项目中的目录结构在根目录创建一个 vue.config.js文件配置一下引入文件路径的别名const path = require('path')const resolve = dir => path.join(__dirname, dir)module.exports = { chainWebpack:(config)=>{ config.resolve.alias .
2020-11-24 14:21:34
681
2
原创 vue项目中使用echarts实现雷达分析图
在工作中常常会开发大数据可视化展示效果，今天就使用vue结合echarts实现一个雷达分析图，记录一下，便于以后工作中查询在vue安装echartsnpm install echarts使用在methods定义一个方法drawRight1接受后端返回的数据drawRight1 (indicatorData, seriesData) { let chart = this.$echarts.init(document.getElementById('chart_1')); .
2020-10-24 22:31:29
1136
原创 node+express实现微信公众号授权
微信的网页授权是指在微信公众号获取用户个人信息等一些权限.这次我们将使用node+express实现一个微信授权功能。准备工作如果没有域名的话，现在我是通本地host文件配置一个域名，只适合局域网测试专用。C:\Windows\System32\drivers\etc我们使用vue快速搭建一个H5页面,vue.config.js一些简单的配置,前端做跨域处理module.exports = { lintOnSave: false, devServer: { host: "m.i
2020-08-24 11:32:06
1113
原创 使用css动画实现网易云音乐播放界面波浪动画效果
通过实现CSS实现仿网易云音乐播放界面动画效果，最终的效果如下界面布局图片也是实现滚动效果的，使用四个div，来标识每一帧波动的效果。<div class="container-wrap"> <div class="container"> <div class="more"></div> <div class="more"></div> <div class="more"></
2020-08-04 18:20:16
3591
2
原创 Nativefier一行代码快速将网站打包成桌面程序
Nativefier简介Nativefier是一个命令行工具，仅仅通过一行代码就可以轻松地为任何的网站创建桌面应用程序，应用程序通过Electron打包成系统可执行文件。作者github： https://github.com/jiahaog/nativefier安装建议使用cnpm全局安装cnpm install nativefier -g使用创建一个桌面应用程序,只需要运行下面命令就行，随便找一个网址，就行nativefier "https://www.baidu.com/"
2020-07-22 17:10:58
344
3
原创 H5跳转App、跳转小程序
就在昨天，微信发布了一个功能，这个需求终于可以满足大家了。定义: 微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签，网页开发者可安全便捷地使用微信或系统的能力，为微信用户提供更优质的网页体验开放标签<wx-open-launch-weapp>打开小程序用于页面中提供一个可跳转指定小程序的按钮。此功能仅开放给已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。使用此标签后，用户需在网页内点击标签按钮方可跳转小程
2020-07-09 10:29:13
6587
5
原创 微信小程序BackgroundAudioManager播放m3u8格式音频
小程序中实现背景音乐播放。在这个项目中，也踩了很多坑，记录一下。由于后台给我返回的音频流是m3u8格式的，没有得办法，安全性高，由于实现背景音乐播放，但是设置了backgroundAudioManager.protocol = 'hls';这个，导致，backgroundAudioManager.onEnded这个api，在ios无法检测到，从18年到现在微信至今没有解决，所留下的坑。实现功能 切换上下首 播放暂停 列表播放 随机播放 单曲播放 定时播放 拖拽播放 定位播放当前.
2020-07-08 17:36:12
3523
原创 小程序与webview通信传参
在小程序中，只要每次修改代码或者增加新的内容都是需要发版才行，常常用到与一些活动页面，这个时候小程序提供的webview就可以解决这个问题，通过调用```H5``页面，传参完成一些常用的功能。以后每次更改的时候，只需要修改H5页面就行。小程序webview组件对嵌入的H5页面有要求、必须在小程序管理后台配置为合法的业务域名。H5端H5页面需要引用微信提供的官方sdk<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"&
2020-05-21 09:08:02
5946
原创 Vcode也可以画流程图
作为一款前端常用的编辑器Vcode，受到程序员的青睐。作为一名程序员，也是需要会画流程图。画图工具有很多，今天推荐的是一款 VSCode 插件！没错，在 VSCode 中画图。它就是 vscode-drawio，即将 draw.io 集成进 VSCode 中。项目地址：https://github.com/hediet/vscode-drawio，截止目前 Star 数：4.3k+，下载安装量 36k+。安装打开 VSCode，点击最左侧底部的 Extensions，搜索 draw.io，找到
2020-05-19 09:12:19
758
原创 WEB开发中合理选择图片格式
判断一个网页设计师是否优秀，可以从其在WEB开发（或网页设计）中是否合理的采用各种图片格式得出结论。事实上，或许所有人都知道图片存在GIF,JPG和PNG等格式，但并非所有人都知道它们之间的具体区别和使用技巧。 ### JPEG联合国图像专家小组是一种针对彩色照片而广泛使用的压损图形格式介绍：栅格图形，常用文件扩展名为.jpg，也有.jpeg,.jpe,jpeg在互联网上常被应用于存储和...
2020-04-26 10:21:04
2919
原创 H5手机端常见问题
个人已经开通微信公众号，需要的可以关注一波ios滑动不流畅上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。原来在 iOS 5.0以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */...
2020-04-24 11:47:05
473
原创 小程序自定义底部导航栏，切换不同页面显示不同tabBar
在一个微信小程序中，需要实现一个功能，点击页面某一个按钮，显示不同底部导航栏，实现效果如下代码仓库地址 https://github.com/MrZHLF/tabBar.git这个就需要自定义底部菜单栏，app.json文件的tabBar需要给custom设置为true建立导航栏公共组件<cover-view class="tab-bar"> <cover-vi...
2020-04-09 10:40:58
5063
1
原创 使用vue构建一个可视化大数据平台
使用vue全家桶以及v-charts和datav实现一个github可视化大数据界面展示，没有设计搞的原因，只能忽略设计编写一下界面，最终界面展示效果
2020-03-22 10:21:18
2845
原创 jq移动端点击导航滚动对应位置并跟随联动效果
使用jq实现一个移动端锚点效果页面布局导航栏布局<div class="tabs"> <ul class="list-item"> <li class="active">首页</li> <li>详情</li> ...
2020-03-14 20:46:08
1510
1
原创 使用node生成swagger接口文档
在开发过程中，我们请求的接口的时候，往往都是后台我们一个接口文档，便于我们查阅，今天我们就用node生成一个自己的接口文档 ，知道接口文档怎么来的。这里不在讲解node怎么安装，接口怎么写，直接写接口文档生成的那部分，如果想看怎么使用node接口的话，可以移动到https://blog.csdn.net/Govern66/article/details/104290198这篇博客最终案例我已...
2020-03-11 12:47:13
6720
3
原创 小程序tcb-router云开发使用
tcb-router基于 koa 风格的小程序·云开发云函数轻量级类路由库，主要用于优化服务端函数处理逻辑基于tcb-router 一个云函数可以分很多路由来处理业务环境。一个用户在一个云环境只能创建50个云函数相似的请求归类到同一个函数处理tcb-router就相当于koa的中间件相当于一个洋葱模型，每一层相当于一个中间件，一层一层执行，只有最后一个执行完之后，才返回reques...
2020-03-10 23:08:39
1038
原创 使用docker 安装MongoDB数据库
Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。在服务上安装数据库，nginx极大的方便和使用使用docker安装数据库，首先在先安装docker，才能往下面进行安装所需要的软件yum install -y yum-utils device-mapper-persistent-data lvm2...
2020-03-09 14:39:11
1197
原创 小程序--音乐播放器功能开发
通过微信小程序实现一个音乐播放器功能，功能如下,实现效果图如下- [x] 歌词联动- 播放，暂停，切换上一首和下一首- 全局背景音乐播放- 歌词播放选择状态- 拖拽播放进度- [x] 保存播放歌曲当前记录通过分析这个页面，可以把这个页面拆分成三个组件，分别对应歌词组件，进度条组件和下面切换按钮组件页面布局<view class="player-container" sty...
2020-03-03 22:19:26
6827
9
原创 React中Hook使用案例
React Hooks是React生态圈里边最火的新特性了。它改变了原始的React类的开发方式，改用了函数形式,通过一个小案例，理解对react hook的认知安装react脚手架create-react-app react-hook创建一个组件FileSearch在组件中引入react hook apiimport React, { useState, useEffect} fr...
2020-02-25 16:28:14
3835
2
原创 css实现华为充电动画
通过css新特性实现一个华为充电动画效果html结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
2020-02-23 00:05:48
4045
1
原创 vue面试中常见的面试题
1.谈一下你对MVVM原理的理解传统的MVC指的是,用户操作会请求服务端路由，路由会调用对应的控制器来处理,控制器会获取数据。将结果返回给前端,页面重新渲染MVVM:传统的前端会将数据手动渲染到页面上,MVVM模式不需要用户收到操作dom元素,将数据绑定到viewModel层上，会自动将数据渲染到页面中，视图变化会通知viewModel层更新数据。ViewModel就是我们MVVM模式中的桥...
2020-02-22 23:16:22
917
原创 vue实战中的一些技巧《一》
大部分公司几乎现在都用到了vue，一个简易，灵活，高效的一个框架，方便快速开发项目。在工作中，我们经常会遇到查询一条数据，但是我们如果模糊查询的时候，在查询的数据中，怎么高亮的显示我们查询的内容。从后台遍历的数据中this.listQuery就是我们在data定义的字段名，用户input绑定model，listBook请求的数据，这里是对title和author两个字段查询listBo...
2020-02-20 20:56:14
741
原创 electron菜单的基本使用
对electron了解之后，让我们学习创建一个窗口，使用自己的编写的窗口搭建环境可以看https://www.cnblogs.com/zhoulifeng/p/12306050.htmlMenu菜单创建一个menu.js文件，编写一下代码，结构相当于JSON格式的const { Menu} = require('electron')const template =...
2020-02-19 12:34:00
260
原创 React-Router入门使用
React Router 是一个基于React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与URL间的同步。React路由跳转制作一个平常一样的点击切换路由效果,首先需要安装cnpm install react-router-dom创建一个根目录AppRouter.js,并仰引入react-router-dom，在创建两个js组件import React, ...
2020-02-18 22:12:13
215
原创 nrm使用与安装
nrm 是一个 npm 源管理器，允许你快速地在 npm源间切换。安装nrm在命令终端行执行命令，npm install -g nrm，全局安装nrm。执行命令nrm ls查看可选的源。其中，带*的是当前使用的源，上面的输出表明当前源是官方源。查看当前源在命令终端输入nrm current就可以查看现在使用那个源切换源地址通过使用nrm use 源名称可以切换源地址删除源...
2020-02-17 23:19:51
180
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人