程序媛养成记
码龄7年
关注
提问 私信
  • 博客：27,830
    27,830
    总访问量
  • 20
    原创
  • 1,747,529
    排名
  • 120
    粉丝
  • 0
    铁粉
IP属地以运营商信息为准，境内显示到省（区、市），境外显示到国家（地区）
IP 属地：河南省
  • 加入CSDN时间： 2018-08-17
博客简介：

cxy980626的博客

查看详细资料
个人成就
  • 获得19次点赞
  • 内容获得5次评论
  • 获得131次收藏
创作历程
  • 6篇
    2022年
  • 5篇
    2021年
  • 3篇
    2019年
  • 6篇
    2018年
成就勋章
TA的专栏
  • 前端
    14篇
  • webpack
    1篇
兴趣领域 设置
  • 前端
    javascriptcssvue.jses6webpack前端框架
  • 网络与通信
    https
  • 学习和成长
    面试
  • 最近
  • 文章
  • 代码仓
  • 资源
  • 问答
  • 帖子
  • 视频
  • 课程
  • 关注/订阅/互动
  • 收藏
搜TA的内容
搜索 取消

前端常用方法记录

一、手机号码正则export const phoneReg = /^(0|86|17951)?1[123456789][0-9]{9}$/;二、银行卡简单验证export const idReg = /^([1-9]{1})(\d{14}|\d{15}|\d{16}|\d{17}|\d{18})$/;三、身份证号正则校验const valid = { // 精确验证身份证 isChinaIDCard: function (StrNo) { let res = { t
原创
发布博客 2022.02.17 ·
280 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

2022前端面试题汇总（更新中）

【HTML + CSS】一、CSS实现元素水平垂直居中① 绝对定位的居中实现-- 已知宽高 -- width:100px; height:100px; position:absolute; left:50%; top:50%; margin-left:-50px; /*宽度的一半*/ margin-top:-50px; /*高度的一半*/-- 未知宽高 -- position:absolute; left:50%; top:50%; transform: translate(
原创
发布博客 2022.02.07 ·
4997 阅读 ·
6 点赞 ·
4 评论 ·
93 收藏

git命令小笔记

1. git init 初始化本地仓库2. git add . 将全部代码从代码区添加到暂存区3. git status 查看git此时的提交状态4. git commit -m '提交说明'提交到本地仓库5. git log 查看提交记录6. git reset --hard HEAD^ 回退上一个版本7. git reflag 查看操作记录8. git reset --hard 六位版本号 回退到某个版本...
原创
发布博客 2022.01.26 ·
181 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

使用vue中的keep-alive缓存表单数据

一、问题提出在表单页面填写信息，提交进入支付页面，从支付页面路由回退到表单页面，数据全部清空二、期望效果从支付页面路由回退到表单页面，数据保留，不被清空三、解决方案：使用keep-alive缓存表单数据① 将需要缓存的组件，在路由规则中的meta添加keepAlive属性为true，如下：{ path:'/IDCard', name:'IDCard', component:resolve => require(['@/views/proofLoss/loss/IDCard
原创
发布博客 2022.01.26 ·
1610 阅读 ·
0 点赞 ·
1 评论 ·
0 收藏

vue路由跳转之后页面停留在上一个浏览页面位置不会回到顶部

解决方案：在App.vue中添加如下代码：watch: { $route: function (to, from) { if(from.name == 'pLindex'){ document.getElementById('app').scrollTop = 0; } }, },
原创
发布博客 2022.01.26 ·
1421 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

css设置h5页脚固定底部

思路：将页面拆分为主体内容和页脚两大部分，给内容区域设置css样式：min-height: calc(100vh - 120px);<template> <div class="container"> <!-- 内容 --> <div class="page-body"> 这里放页面的内容 </div> <!-- 页脚 --> <div class="page-foot.
原创
发布博客 2022.01.11 ·
793 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

解决h5页面弹窗滚动穿透

问题描述：在页面打开弹窗，弹出遮罩层，在滑动页面时会导致弹窗底部的页面跟着一起滚动解决方案一、适用于弹窗文案较少且不需要滚动的场景，如图：// 方法：直接在遮罩层（弹窗）上添加@touchmove.prevent(这里是vue中)，它的作用就是当你全屏的遮罩层（弹窗）时，就会禁止滑动，原理就是因为该弹出层都禁止滑动了，自然而然就不存在滑动穿透的问题了。<div class="modal" @touchmove.prevent></div>二、适用于弹窗文案多且支持滚.
原创
发布博客 2021.12.31 ·
1987 阅读 ·
0 点赞 ·
0 评论 ·
4 收藏

vuex持久化

vuex的数据都存在内存里面，一旦刷新页面，vuex中的状态都会被重置，这对于一些不想被重置的状态数据而言， 是一个不好的表现。对此，我们可以采用 vuex-persistedstate 插件实现vuex数据同步到localStorage中。一、安装执行命令：cnpm i --save vuex-persistedstate二、引用在vuex组件库入口文件index.js引入并调用，此时会将state中的四个状态放到本地存储localStorage里面 import createPersis.
原创
发布博客 2021.12.20 ·
241 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

vue项目vscode安装eslint插件和错误自动修复以及如何关闭eslint校验

当我们编写不符合eslint规范的代码时，启动项目会报错，而且代码里会报红，如下图：方案一：自动错误修复运行指令：npm run lint 会帮助我们自动修复不符合规范的代码方案二：安装eslint插件① 安装eslint插件并启用② 文件 > 首选项 > 设置 > setting.json添加如下配置："editor.codeActionsOnSave": { "source.fixAll": true },配置完成后，在我们编写代码时，esli.
原创
发布博客 2021.11.29 ·
2501 阅读 ·
1 点赞 ·
0 评论 ·
5 收藏

css动画实现骨架屏加载效果

对于前端来说，最重要的莫过于用户体验了。现如今，前端首屏渲染时间(FCP)因为首屏需要请求更多内容，比原来多了更多HTTP的往返时间(RTT)，这造成了白屏，如果白屏时间过长，用户体验会大打折扣，如果用户网速差，则FCP会更长。这里要介绍的就是优化用户等待体验的骨架屏，它可以被视为是原来加载菊花图的一种升级版，结合传统的首屏优化方法对应用进行优化可以达到不错的效果。<!DOCTYPE html><html lang="en"><head> <me.
原创
发布博客 2021.11.16 ·
1075 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

利用浮动+行高实现头像昵称居中排版

在项目开发中，经常遇到头像和昵称居中的排版需求，今天无意间看到了一个好的方法，利用浮动+行高来实现，记录一下以便后续查看。效果图：代码实现： <style> .container img{ width: 45px; height: 45px; border-radius: 50%; float: left; } .container .name{ margin-left: 10px;.
原创
发布博客 2021.09.02 ·
320 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

配置一个完整项目的webpack

话不多说，直接上步骤：1、创建一个项目，例如：webpack在根目录(webpack)下建立两个文件夹 dist 和 src；其中 src下创建文件夹如下：2、在根目录下输入npm init -y 初始化项目，点击回车，这时项目中会生成一个 package.json 文件。如图：3、使用 cnpm 安装 webpack ，运行指令 cnpm i webpack -D4、运行指令 ...
原创
发布博客 2019.06.04 ·
574 阅读 ·
0 点赞 ·
0 评论 ·
2 收藏

解决Webpack中提示syntax 'classProperties' isn't currently enabled的错误

解决方案：1、安装如下插件npm i -D @babel/plugin-proposal-class-properties2、在babelrc中配置插件：options: { plugins: ['@babel/plugin-proposal-class-properties'] } },重新运行项目，不再报此错误！...
原创
发布博客 2019.04.02 ·
5952 阅读 ·
0 点赞 ·
0 评论 ·
3 收藏

babel7.x发布后 安装babel插件的新语法以及注意事项

安装babel插件，你踩坑了吗？前两天做React项目 使用webpack安装babel插件时 遇到了很多问题，经过一番研究现已解决，整理成文，希望这篇文章会对你有所帮助！我当时在安装babel时，运行的指令如下：安装babel插件运行cnpm i babel-core babel-loader babel-plugin-transform-runtime -D运行cnpm i ...
原创
发布博客 2019.04.02 ·
1867 阅读 ·
5 点赞 ·
0 评论 ·
6 收藏

webpack 打包 环境配置

文章目录什么是webpack？安装步骤什么是webpack？webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具，借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。安装运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令在项目根目录中运行npm i web...
原创
发布博客 2018.12.29 ·
702 阅读 ·
0 点赞 ·
0 评论 ·
2 收藏

深入解读ES6

一、ES6的发展ECMAScript 和 JavaScriptECMA 是标准，JS 是实现ECMAScript 简称 ECMA 或 ES历史版本1996, ES1.0 Netscape 将 JS 提交给 ECMA 组织，ES 正式出现1999, ES3.0 被广泛支持2011, ES5.1 成为 ISO 国际标准2015, ES6.0 正式发布二、变量 let ...
原创
发布博客 2018.11.30 ·
310 阅读 ·
0 点赞 ·
0 评论 ·
2 收藏

Linux运维之基础知识及简单命令

Linux运维之基础知识及简单命令1. 虚拟机的开启
原创
发布博客 2018.11.23 ·
885 阅读 ·
4 点赞 ·
0 评论 ·
11 收藏

Linux运维之基础知识及简单命令

Linux运维之基础知识及简单命令1. 虚拟机的开启
原创
发布博客 2018.11.23 ·
885 阅读 ·
4 点赞 ·
0 评论 ·
11 收藏

Linux虚拟机安装VmwareTool步骤

Linux虚拟机安装VmwareTool步骤1. 点击虚拟机2. 点击安装Vmware-Tools，出现如下界面，将圈起来的拖动到桌面3. 接着打开终端，执行解压缩命令tar -xzv -f VMwareTools-10.2.5-8068393.tar.gz这个后面的VMwareTools-10.2.5-8068393.tar.gz 建议复制桌面那个压缩包的名字，防止出错。4....
原创
发布博客 2018.11.22 ·
1075 阅读 ·
1 点赞 ·
0 评论 ·
4 收藏

快速总结正则表达式

正则表达式正则表达式又叫做*规则表达式
原创
发布博客 2018.11.22 ·
248 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏
加载更多