- 博客(46)
- 收藏
- 关注
RSS订阅原创 省市区街道/乡镇四级联动vue3
省.市.区/县、乡镇/街道的四级联动组件，技术栈是element + vue3，是输入框输入地址和选择省市区乡镇的的联动效果，毕竟大部分人能选的话不会手输，如果不用的话直接禁用输入框就行，省下很多逻辑处理。可以参考这个地址，直接在浏览器下载也行，git 克隆到本地也行，这个json文件很大，大概两三兆，可以让后端返回。下面进入正文： （说一下主要流程,最后附上全部代码）肯定涉及到父组件值的传入和子组件的值传出。
2024-02-27 17:44:52
1126
原创 PC电脑端的小程序顶部自定义标题失效的原因
PC电脑端的微信小程序顶部自定义标题失效的原因，自定义导航栏，只保留右上角胶囊按钮。==iOS/Android 微信客户端 7.0.0，Windows 微信客户端不支持==windows客户端不被支持:navigationStyle:custom!
2024-01-29 16:46:16
289
原创 日常开发中的图片处理系列工具
此免费在线软件将JPG格式图片与PNG格式图片利用适当的压缩方法进行互转。与其它服务不同，该软件不会询问您的电子邮件地址，并提供大量转换，且允许文档大小达到50 MB。可高效实现下载管理，网页图片，视频，音频等内容的嗅探和下载，同时扩展集成多个网站的智能脚本，快速提取你想要的内容。超过10亿的WebP, PNG和JPEG图像优化，仍在计数!智能WebP, PNG和JPEG压缩。每次压缩20张图片且不失真。
2023-10-11 17:21:46
151
原创 踩坑---uni-app中@input 事件不生效
在开发的时候遇到这么一种情况，我们希望input输入框的值是范围是0-100或者保留两位小数之类的，当你输入时处理后的结果却不生效，但是试过很多办法发现都实现不了，最后是按照以下方法解决的,问题原因是uni-app会延时,导致输入的结果和打印的结果有时间误差，不一致！所以我们需要加一个定时器。
2023-08-15 08:55:09
1898
原创 我的谷歌书签
Form 表单 | Element Plusa Vue 3 based component library for designers and developershttps://element-plus.gitee.io/zh-CN/component/form.html#%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8Fthree.js exampleshttp://www.yanhuangxueyuan.com/threejs/examples/#software_geometr
2023-03-31 17:11:09
299
1
原创 大前端开箱即用的中后台管理模版，建议收藏
它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。Soybean Admin 是一个基于 Vue3、Vite3、TypeScript、Naive UI和UnoCSS 的清新优雅的中后台模版，它使用了最新的前端技术栈，内置丰富的主题配置，有着极高的代码规范，基于mock实现的动态权限路由，开箱即用的中后台前端解决方案。vue-admin-box是一个免费并且开源的中后台管理系统模板。...
2022-08-31 15:00:17
1455
原创 HTML中空格怎么打出来？
我们可以使用html中表示空格的字符实体来在html页面中插入空格，下面我们来看看在html中表示空格的字符实体有哪些：字符：不断行的空白格，该空格占据的宽度受字体影响。字符：相当全角状态键入半个“空格”键（半个汉字的宽度）。字符：相当全角状态键入“空格”键（1个汉字的宽度）。...
2022-07-12 17:16:49
3914
原创 正则验证邮箱、手机号
正则验证邮箱const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/console.log(regEmail.test(“[email protected]”))正则验证手机号const regMobile= /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/console.log(regMobile.test(“13912345
2022-07-12 15:07:37
1304
原创 WEB前端开发常用的优化技巧汇总
采用CSS雪碧图（CSS Sprit/CSS 图片精灵）技术，把一些小图合并在一张大图上，使用的时候通过背景图片定位，定位在具体的某一张小图上 真实项目中，我们最好把CSS或者JS文件进行合并压缩。尤其是在移动端开发的时候，如果css或者js内容不是很多，我们可以采取内嵌式，以此减少HTTP请求的次数，加快页面的加载速度采用图片的懒加载技术，在页面开始加载的时候，不请求真实图片的地址，而是用默认图占位，当页面加载完成后，再根据相关的条件依次加载真实图片（减少页面首次加载HTTP请求的次数
2022-06-25 14:47:29
333
原创 前端安全之 CSRF 攻击原理和防护方法
CSRF（Cross-site request forgery）简称：跨站请求伪造，学习 CSRF 攻击原理和防护方法是我们团队新成员的必修课，通常我都是先让新同学自己研究自己讲，然后我再通过其中细节再给他们讲一遍，讲的次数多了，也慢慢总结出一种比较容易理解的讲法。这里我整理成文分享给有需要的人。引言：必修课为什么选择 CSRF？CSRF 涉及到的前端知识点比较多，全面理解需要系统的学习 Cookie，前端跨域，HTTP 协议，web 浏览器等知识。理解 CSRF 攻击和防护方法是前端进阶要去，我也希望大家
2022-06-13 08:58:10
5961
4
原创 vue中computed计算属性和watch监听属性有什么区别?以及它们的运用场景?
区别 ： computed 计算属性：依赖其它属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取computed的值时才会重新计算computed的值。 watch 侦听器：更多的是观察的作用,无缓存性,类似与某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作运用场景 ： 当需要进行数值计算,并且依赖与其它数据时,应该使用computed,因为可以利用computed的缓存属性,避免每次获取值时都要重新计算。 当需要在数据变化时执行异步或开销较大的...
2022-05-24 17:58:21
438
原创 在地址栏里输入一个地址回车会发生哪些事情
1、解析URL：首先会对 URL 进行解析，分析所需要使用的传输协议和请求的资源的路径。如果输入的 URL 中的协议或者主机名不合法，将会把地址栏中输入的内容传递给搜索引擎。如果没有问题，浏览器会检查 URL 中是否出现了非法字符，如果存在非法字符，则对非法字符进行转义后再进行下一过程。2、缓存判断：浏览器会判断所请求的资源是否在缓存里，如果请求的资源在缓存里并且没有失效，那么就直接使用，否则向服务器发起新的请求。3、DNS解析： 下一步首先需要获取的是输入的 URL 中的域名的 IP 地址，首先会判断本地
2022-05-24 17:53:57
112
原创 vue3后台管理项目vite配置
import {viteMockServe} from "vite-plugin-mock";import {defineConfig, ConfigEnv} from 'vite'import vue from '@vitejs/plugin-vue'const {resolve} = require('path')// https://vitejs.dev/config/export default defineConfig({ // base:'./', re...
2022-05-11 15:11:20
1059
原创 某个移动端vue项目的webpack配置
const path = require('path');const CompressionPlugin = require("compression-webpack-plugin");function resolve(dir) { return path.join(__dirname, dir)}// vue.config.jsmodule.exports = { /* Vue-cli3: Crashed when using Webpa...
2022-05-11 15:06:14
158
原创 前端每日感想
2022年5月10日18:00:11千万不要再用img挂载::after或::before伪类了，有的浏览器不生效的。。根本原因是伪类的content一定要是根据挂载元素的内容走的，像div，section等的内容走，而img是没有内容的，我们看到的图片其实也不是img的内容，而是这个元素本身，所以在img标签上挂载伪类不生效。但是有的浏览器又会生效，这种浏览器间的解释不统一通常会造成一些bug。...
2022-05-10 18:00:59
267
原创 vue扫码下载app，并区分安卓和ios
下面这张图就是用草料二维码生成的，进入官网选网址，直接用项目的线上网址加路由，如果是开发环境也可以用本机的IP地址加路由生成就行。再下面这张图就是在浏览器打开后的下载页面了，可以根据实际需求美化页面，我这里就放了一个按钮。其实大部分代码都是借鉴的，自己总结一下知识点。由于微信扫码，并不能识别apk文件，所以先做一个前置页，把这个前置页做成二维码，我是用。下面这张图就是用微信扫一扫出来的前置引导页，上面提到微信浏览器不识别apk文件，把这个前置页生成二维码后，扫描这个二维码，就会跳到下载页。
2022-05-07 14:22:59
2174
2
原创 Nginx的启动(start),停止(stop)命令
查看Nginx的版本号：nginx -V启动Nginx：start nginx快速停止或关闭Nginx：nginx -s stop正常停止或关闭Nginx：nginx -s quit配置文件修改重装载命令：nginx -s reload查看windows任务管理器下Nginx的进程命令：tasklist /fi "imagename eq nginx.exe"...
2022-04-29 11:27:42
42251
原创 el - input 输入框保留两位小数
目标基于nodejs 用express + mysql 包 写接口，实现学生数据添加。要求：接口1添加学生数据url: localhost:3000/api/studentmethod: post参数格式：普通键值对 目录 目标 接口1 接口2 思路 name: 字符串 age: 数值 测试：postman来测试接口2获取所有的学生数据url: localhost:3000/api/studentmethod: get参
2022-04-22 14:40:27
809
原创 统一封装本地存储方式
export const setStorage = (key, value) => { localStorage.setItem(key, value)}export const getStorage = (key) => { return localStorage.getItem(key)}export const removeStorage = (key) => { localStorage.removeItem(key)}export const clear.
2022-03-27 21:16:04
281
原创 判断是否为微信浏览器的函数
isWeiXin() { //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型 // console.log(/MicroMessenger/i.test(window.navigator.userAgent)) return /MicroMessenger/i.test(window.navigator.userAgent); }, ...
2022-03-24 17:19:39
1756
原创 VUE+Elementui实现复选框的多选与全选
<template> <el-table :data="tableData" class="permissionstable" height="267px" :show-header="false" style="width: 26%; border: 1px solid #dfe6ec; margin: 0 auto; top: 25%" :default-expand-all="true" > &...
2022-03-01 16:25:58
6227
原创 vue路由守卫真香，解决了很多开发中的问题
beforeRouteEnter(to, from, next) { console.log(this, 'beforeRouteEnter'); // undefined console.log(to, '组件独享守卫beforeRouteEnter第一个参数'); console.log(from, '组件独享守卫beforeRouteEnter第二个参数'); console.log(next, '组件独享守卫beforeRouteEnter第三个参数'); ...
2022-02-19 09:55:09
80
原创 微信支付问题（微信浏览器和非微信浏览器）
// 微信支付混入代码import utils from '@/utils'export default { data () { return {} }, watch: { loadShow () { if (utils.isWeiXin() && this.$route.query.code) { this.wxPay() } }, }, methods: { wxPayIni.
2022-02-18 17:04:21
179
原创 手机号和6-12位密码正则表达式
13位手机号正则 const regPhone = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/; let regPhoneRes = regPhone.test(this.fromList.phone);区分大小写6-12位密码正则 const regPwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/; let regPwdRes
2022-02-10 17:59:09
757
原创 关于git常用
Debian/Linux安装Git配置git环境：git config --global创建本地空仓库：git init新建文件添加到本地仓库：git add、git commit -m改写提交：git commit --amend查看历史提交日志：git log回滚代码仓库：git reset --hard查看提交之后文件是否做了改动：git status工作区与缓存区修改缓存区内容：git add、git commit -m将改动文件添加到缓存区：git ad..
2021-10-15 22:04:58
41
原创 总结webpack面试题
目录1、什么是webpack（必会）2、webpack的优点是什么？（必会）3、webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全（必会）4、说一下 webpack 的热更新原理(必会)5、webpack与grunt、gulp的不同？（必会）6、有哪些常见的Loader？他们是解决什么问题的？（必会）7、Loader和Plugin的不同？（必会）1、什么是webpack（必会） webpack是一个javascript的静态模块打包工具
2021-09-22 18:06:24
127
原创 总结关于webpack
Day01_webpack铺垫(自学)yarn包管理器(可选)==注意: 如果yarn实在安装不上可以用npm==快速、可靠、安全的依赖管理工具。(类似npm作用)中文官网地址: Yarn 中文文档下载yarn下载地址: 安装 | Yarn 中文文档 windows - 软件包(在笔记文件夹里) ==建议不要安装到中文路径下== ==建议和node安装到一个盘符下== mac - 通过命令安装(也可还用npm) sudo np
2021-09-22 18:01:33
514
原创 Promise史诗级详解
Promise-整体说明它是一个ES6提出一个新语法，用来优化异步代码的写法。 在前端领域是我们必须要会的一个内容 后续的课程中也会多次使用 promise：承诺。小小一道面试题代码填空，并完成指定功能。 生活中.它是用来表述 对将来要发生的事情的肯定。 例如 ： 高中生说，老师，我会考上一所好大学的；销售员说，老板，我一定会签下大单的；程序员说，老妈，我过年一定会带个女朋友回来的。 在ES6中，它是新增的构造器，用来优化实现异步操作。在没有它之前，j
2021-09-18 21:48:35
321
原创 「前端面试」JavaScript手写代码无敌秘籍
目录1. 实现一个new操作符2. 实现一个JSON.stringify3. 实现一个JSON.parse4. 实现一个call或apply5. 实现一个Function.bind()1. 实现一个new操作符new操作符做了这些事：它创建了一个全新的对象。 它会被执行[[Prototype]]（也就是__proto__）链接。 它使this指向新创建的对象。。 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。.
2021-09-17 16:40:31
112
原创 写一个真正的接口
目标基于nodejs 用express + mysql 包 写接口，实现学生数据添加。要求：接口1添加学生数据url: localhost:3000/api/studentmethod: post参数格式：普通键值对 name: 字符串 age: 数值 测试：postman来测试接口2获取所有的学生数据url: localhost:3000/api/studentmethod: get参数:无测试：postman来测试思路
2021-09-17 16:27:34
438
原创 实现使用 prompt 进行登录校验的代码。
如果访问者输入"小龙"，那么使用prompt引导获取密码，如果输入的用户名为空或者按下了Esc键 —— 显示 “已取消”，如果是其他字符串 —— 显示 “我不明白你要干什么”。密码的校验规则如下：如果输入的是 “123456”，显示 “登录成功!”， 其他字符串 —— 显示 “密码错误”， 空字符串或取消了输入，显示 “已取消.”。将空字符串输入，prompt 会获取到一个空字符串''。Prompt 运行过程中，按下ESC键会得到null。let userName = ...
2021-09-17 15:46:54
1183
原创 一个有趣的现象
有时候，以下两种情况会同时发生：若直接比较两个值，其结果是相等的。 若把两个值转为布尔值，它们可能得出完全相反的结果，即一个是true，一个是false。let a = 0;alert( Boolean(a) ); // falselet b = "0";alert( Boolean(b) ); // truealert(a == b); // true!对于 JavaScript 而言，这种现象其实挺正常的。因为 JavaScript 会把待比较的值转化为数字后再做比较（..
2021-09-17 11:40:41
56
原创 总结数组的一些原型和迭代方法
一 reduce() 的用法arr.reduce(function(prev,cur,index,arr){...}, init);其中，arr表示原数组；prev表示上一次调用回调时的返回值，或者初始值 init;cur表示当前正在处理的数组元素；index表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；init表示初始值。其实常用的参数只有两个：prev和cur实例先提供一个原始数组：let arr = [1,2...
2021-09-15 10:28:07
185
原创 原生静态资源服务器
// 导入模块const http = require('http')const fs = require('fs')const path = require('path')// “策略模式”const obj = { ".png": "image/png", ".jpg": "image/jpg", ".html": "text/html;charset=utf8", ".js": "application/javascript;charset=utf8", ".cs...
2021-09-13 20:49:48
54
原创 总结一些数组去重的方法
1.简单的ES6方法//假设有arr这样的一个数组letarr=[2,4,5,2,4,6,8,66] functiongetUniqueArray(){letresult=Array.from(newSet(arr)) //调用new Set方法console.log(result) //输出结果是[2,4,5,6,8,66]}getUniqueArray()2.简单的稍微循环一下的方法 ...
2021-09-12 22:02:50
66
所有的银行名称JSON数据
2024-02-28
最新省.市.区/县.、街道/乡镇四级JSON数据带code编码
2024-02-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人