- 博客(67)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 总结了Vue3的七种组件通信方式，别再说不会组件通信了
写在前面本篇文章是全部采用的 本篇文章将介绍如下七种组件通信方式：propsemitv-modelrefsprovide/injecteventBusvuex/pinia(状态管理工具)举一个例子本篇文章将围绕下面这个demo，如下图所示：上图中，_列表_和_输入框_分别是父子组件，根据不同传值方式，可能谁是父组件谁是子组件会有所调整。Props方式Props方式是Vue中最常见的一种父传子的一种方式，使用也比较简单。根据上面的demo，我们将数据以及对数据的操作定义在
2022-02-21 12:19:42
715
原创 前端架构师神技，三招统一团队代码风格
本文从代码规范，代码检查，代码格式化，以及编辑器自动化实现的方向，介绍代码规范统一在我们团队的实践应用。大纲预览本文介绍的内容包括以下方面：认识代码规范制定和统一规范神技一：ESLint神技二：Prettier神技三：VSCode附录：命名和项目结构规范认识代码规范先来思考两个问题：1.什么是代码规范？2.为什么需要代码规范？如果你是一个经验丰富的前端开发，你一定接触过这样的老项目：变量名是abc,fds这种随意起的，或者是name1,name2这种带数字起名，这样的变量不加注
2022-01-04 16:47:42
1898
原创 清明全网灰色主题实现原理
首先，把网站做成一个纯灰色主题，最简单直接的办法就是给整个网站加一个滤镜，就像我们平时自拍完给照片加喜欢的滤镜一样。我们的网页也可以加滤镜，但不是在整个网页上面遮一个div蒙版，而是让整个网页只有灰色 。原理灰色其实是个比较复杂的颜色。从白色到黑色，有无数种灰色，那么这些不同的灰色，就可以代替我们网页中的五颜六色，使整个网页有不同色值的灰色，但是依然很有层次，而且又可以表达出一种深沉的感情。什么是灰度，用图片来解释就是：我们知道RGB代表三个颜色，Red、Green、Blue。rgb(0255.
2021-12-31 10:47:42
678
原创 解决axios在ie浏览器下提示promise未定义
在做项目的时候发现在ie11上出现不兼容的问题，对于和后台交互这块页面都报错，f12开发者工具模式下提示Promise未定义。为了解决这个问题，网上查了很多，经过多番尝试，发现了一个解决方法。首先安装cnpm install -g es6-promise --save-dev然后在main.js里面引入import promise from 'es6-promise';promise.polyfill();但是引入之后重新npm run dev 发现报错，提示 webpack不是内部命令的错误，然
2021-12-24 11:59:19
905
原创 vue3 如何定义全局变量
在vue2中，我们知道vue2.x是使用Vue.prototype.$xxxx=xxx来定义全局变量，然后通过this.$xxx来获取全局变量。但是在vue3中，这种方法显然不行了。因为vue3中在setup里面我们是无法获取到this的，因此按照官方文档我们使用下面方法来定义全局变量：首先在main.js里写一个我们要定义的全局变量，比如一个系统id吧app.config.globalProperties.$systemId = "10"现在在页面里需要使用这个变量，只需要从vue中引入
2021-07-31 18:39:15
13607
1
原创 vue3.0 子组件调用父组件中的方法
在vue2中，子组件调用父组件，直接使用this.$emit()即可。但是在vue3中，很显然使用this.$emit() 已经开始报错了，为什么会报错呢？原因是：在vue3中setup是在声明周期beforeCreate和created前执行，此时vue对象还未创建，因此我们无法使用this。那么我们在vue3中，子组件该如何调用父组件的函数呢？方法一：首先写一个 Child.vue，重点在 setup 函数中引入 context 形参，配合 emit 使用。定义了两个函数，toFather
2021-07-31 18:02:10
16959
1
原创 节流函数
节流函数就是在单位时间（10s）内随便触发多少次，只要过了单位时间（10s）就会执行一次。应用场景是：用户在输入框内疯狂输入字符串，每经过单位时间就会向后端发起请求查询数据库。节流函数有两种实现方式：1.定时器 2.计算时间差时间差实现function throttle(fn, delay) { let previous = 0; // 使用闭包返回一个函数并且用到闭包函数外面的变量previous return function() { let args = argume
2021-04-09 18:23:14
8929
原创 初识nuxt.js框架（一）
nuxt.js框架1.什么是服务端渲染(SSR) ？vue.js是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出vue组件，进行生成dom和操作dom。然而，也可以将同一个组件渲染为服务端的html字符串，直接发送给浏览器，最后将这些静态标记‘激活’为客户端上完全可交互的应用程序。服务端渲染的vue.js应用程序也可以被认为是‘同构’或‘通用’，因为应用程序的大部分代码都可以在服务端可客户端上运行。通俗的讲：就是服务端把vue组件渲染为html字符串，直接发给浏览器。2.为什么要使用服务端
2021-01-31 18:01:14
745
1
原创 你眼中的静态网页和动态网页
作为一名前端开发，我们经常要做各种网页，那么对于静态网页和动态网页，大家又了解多少呢？今天就由我带大家深入了解一下什么是静态网页和动态网页。什么是静态网页？在网站设计中，纯粹HTML（标准通用标记语言的子集）格式的网页通常被称为“静态网页”，早期的网站一般都是由静态网页制作的。静态网页的网址形式通常为：也就是以.htm、.html、.shtml、.xml等为后后缀的。在HTML格式的网页上，也可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字母等，这些“动态效果”只是视觉上的，与下面
2021-01-11 21:00:36
266
原创 express vue history模式下打包部署，刷新页面提示404
解决这个问题我们可以参考中间件connect-history-api-fallback官网文档地址：https://github.com/bripkens/connect-history-api-fallback第一：引入依赖//引入history代理 解决刷新页面404的问题var history = require('connect-history-api-fallback');第二：引入expressvar express = require('express');var app =
2021-01-05 18:31:57
555
1
原创 react ant-design 如何加载后端返回的菜单icon
项目环境：react 16.13 和 ant-design V4需求背景是：现在后台管理系统左侧菜单是由后端返回的，其中菜单图标Icon也希望是由后端动态返回的。现在返回的菜单是这样的：{ path: '/dashboard', name: "Dashboard", title: '首页', icon: 'DesktopOutlined', }, { path:'/user', title:'用户管理', icon:'AppstoreOutlined' },
2020-11-05 17:24:27
1312
原创 react ant-design框架 基于hook 的表格分页查询
之前用react的做的项目一直都是用class ,setState,componentDidMount ，componentDidUpdate ，componentWillUnmount 的写法，但从16.8以来，react新增了Hook特性，对于喜欢技术尝试我的来说，岂能不试一下新写法。我们一般用react 的ant-design框架做后台管理系统，那么最常见的业务场景就是表格，查询，分页。西面我就拿最常用的一个例子和大家分享一下：首先请看我们的界面：上面是搜索条件，中间是表格，下面是分页。这个大
2020-10-21 17:58:45
2642
2
原创 chrome调试秘籍
作为一个前端开发者，一定要掌握的几个调试神器。1.copy（obj）copy（anything）是一个很有用的工具函数，方便我们把任何东西拷贝到系统的粘贴板暂存。给copy函数传入一个没有格式的JSON，会返回格式化后的结果：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BhhnSyNv-1602841438418)(http://showdoc.ceibsdigital.com/server/…/Public/Uploads/2020-10-16/5f894dc
2020-10-16 17:44:43
210
原创 制作邮件模板的规范
邮件模板的制作和我们平时的写html是有一些不一样的地方，在做邮件模板的时候踩了很多坑，尤其是outlook邮箱客户端，会自动屏蔽掉很多html标签，导致我们的样式错乱，但是在客户端又无法调试，所以给我们造成了很多困扰，这个文章只记录一下我们做邮件模板需要注意的地方：一：静态页面的制作1.邮件模板中，图片及文字应具有平衡的比例，从门户的判断机制上看，邮件正文中文本的比例越合理，被判断为垃圾邮件的可能性越小，尤其是网易。通常建议 根据邮件的内容将非效果性文字都以文本的形式展现。2.切图片时候，在不影响
2020-10-15 14:28:15
1312
原创 基于vue 的h5微信分享
之前一直都是使用的html，jquery，js等做的微信分享，现在项目都改用vue做了，但是微信分享还是要接入的，这里简单分享一下移动端vue如何接入微信分享。1.首先安装微信分享依赖 npm install weixin-js-sdk --save2.一般我会在src/utils目录下新建weixinSDK.js(可凭个人习惯自行创建到相应位置)。weixinSDK.js用来封装我们的分享接口。import wx from 'weixin-js-sdk' // 引入微信SDKimport {c
2020-07-20 10:43:01
3082
2
原创 vue 锚点定位 tab切换
废话不说 下面直接上代码和说明我们这想要实现tab切换时候页面自动滚动定位到锚点位置，因为这个是单页面引用，也没有使用a标签等，使用的是最普通的方法，仅供大家参考。//要实现切换的三个tab项<div class="con_nav"> <span @click="changeTab(0)" :class="active === 0 ? 'active' : ''">介绍</span> <span @click="changeTab
2020-07-20 10:26:06
4064
原创 vue3 生产环境去掉console.log
在开发项目时,为了便于调试,我们一般会输出很多console.log,但是在生产环境中我们是要去掉这些的.但是如果手动删除,就有点麻烦了,而且如果以后再开发调试的时候,还得重写再写console.log不过好在webpack提供了删除console.log的插件,在vue3里面是这样用的:首先安装terser-webpack-pluginnpm install terser-webpa...
2020-04-17 14:24:57
2148
原创 FreeMarker生成H5模板数字带有逗号
项目描述:这是有服务端生成的一个H5模板,支持跳转.后端返回的数据格式如下:[{matchId:‘10001’,roomId:20001,name:‘哈哈哈’,}]然后FreeMarker的H5模板里面,代码如下<#list lists as list> <div class="box" roomId="${list.roomId}" matchId=...
2020-03-19 17:01:32
603
2
原创 express 热更新
node里面的express框架,每次修改代码之后,都需要重新npm start才能看到改动之后的效果,感觉非常麻烦为了实现不用重新启动也能看到改动后的效果,这里引入nodemon模块实现热更新.1.全局安装 npm install -g nodemon或者安装到本地 npm install nodemon --save2.在项目根目录下创建nodemon.json文件{"re...
2020-01-10 17:27:31
2097
原创 App内嵌H5活动页面携带用户token
此文章仅记录自己在app端做的一个活动所遇到的各种问题, 帮助大家避免入坑.背景:后端使用framemark动态生成html模板.我写好的以ftl为后缀名结尾的framemark文件给后台,后台打成jar包,并集合后端自己的代码部署.需求:app端通过banner页面进入到投票活动页面(这个活动页面是H5页面),H5页面需要拿到用户的token.并可以进行投票活动.问题1:通过postm...
2020-01-08 17:58:10
4446
原创 table 合并单元格内容
最近使用element ui做的一个表格,现在又加了一个新需求,就是要求可以合并单元格.从后台拿到的数据格式如下:data= [ { "number": 4, "dataTypeName": "食品生产", "dataType": "1", "details": [ { "wscCou": 3, ...
2019-11-21 16:09:57
424
原创 解决vue项目双击路由导航报错 "Navigating to current location (XXX) is not allowed"
双击或者连续点击路由导航的时候,发现报错:"Navigating to current location (XXX) is not allowed"原因是:在路由里面添加了相同的路由解决方案是:我们可以重写路由的push方法在src/router/index.js 里面import Router from 'vue-router’下写入下面方法即可/** * 重写路由的push方...
2019-11-09 17:38:24
2311
1
原创 移动端登录后,携带token请求其他页面接口提示token验证失败
最近做移动端的h5,登录之后携带token跳到列表页面,请求列表接口,但是后端却一直报错,提示token校验失败.最后发现后端接到的sessionId和token不一致导致的,查看资料经过无数奋战才知道,原来是跨域要想带上cookie.必须在ajax请求里加上xhrFields:{withCredentials:true},crossDomain:true....
2019-10-27 10:23:49
2438
原创 babel-plugin-import 插件的使用
babel-plugin-import是一款babel插件,在编译过程中将import的写法自动转换成按需引入的方式.今天在使用react 的组件库ant-ui时候,想要引入babel-plugin-import插件实现按需加载,按照官网教程发现样式怎么都引入不进去.记录一下自己的过程.安装插件npm install babel-plugin-import --save-devant-...
2019-08-23 16:22:41
15896
1
原创 对象类型数组 自定义排序
我们可以对任何对象类型的数组排序,比如,对象Person有名字和年龄属性,我们希望根据年龄排序,那么我们可以这么写:const friends=[ {name:'john',age:30}, {name:"lily",age:20}, {name:"merry",age:24},];function comparePerson(property){ return function(a...
2019-07-20 14:37:08
606
1
原创 Echarts 图表大小自适应浏览器窗口缩放
最近使用element-ui做的后台管理要求嵌入图表功能,其实element-ui嵌入图表很简单,但是问题来了.开发场景是:页面上有多个图表,当我调整浏览器窗口大小的时候,发现图表并不会根据浏览器窗口大小而进行调整,这完全不符合我们的要求,也是作为一个合格的开发人员不能容忍的.我的页面内有两个echarts图表,下面是我的解决方案:(vue 代码)//data 里面定义的两个图表data:...
2019-07-09 09:38:01
8029
原创 element table 分页选中记忆功能
想要实现table checkbox 分页选中记忆功能,网上看了很多,总是有一些小问题.自己写了一个demo,供大家参考.思路是:把选中的数据用二维数组记录下来,二位数组的key是页码,value是当前页码选中数据的id集合.每次点击下面附上代码template模板:<el-table :data="tableData" style="width: 100%" border ...
2019-07-08 17:40:11
4364
5
原创 element-ui upload 多文件单接口上传
最近在使用element-ui upload 上传多个文件的时候发现element-ui的批量上传是每个文件都请求一次接口,但是我们项目的需求是多个文件只请求一次接口.细思良久,经过一番奋战,终于实现了这个需求.下面直接上代码//element 组件<el-upload action="" class="upload-demo" :on-change="change" ...
2019-06-27 17:05:47
6799
10
原创 vue 的修饰符之 .lazy .number .trim
今天看别人的代码时候,偶然发现别人写的代码里input标签的写法是v-model.lazy,初见政协发顿时有点蒙圈,本着不会就百度的原则查了一下,原来这是vue的修饰符.下面简单记录一下,方便大家以后使用.在输入框中,v-model默认是同步数据,使用.lazy会转变为在change时间中同步,也就是在失去焦点或者按下回车键时才更新.写法是 <input type="text" ...
2019-05-23 11:24:17
434
原创 node.js 模板引擎
express 可以像php一样使用后台语言模板,此时最好用的模板引擎叫做ejs模板.全称 Embedded Javascript templates 嵌入式JS模板Api:https://ejs.bootcss.com/安装ejs:cnpm install --save ejs我们写一个案例index.js是一个标准express案例var express=require("exp...
2019-03-18 17:51:26
680
原创 express 注意事项
这是使用express的时候遇到的需要注意的地方,现在都写在代码里var express=require("express");var app=express();app.get("/",function (req,res) { res.set({'Content-Type':'text/html;charset=utf-8'});//设置response编码为utf-8 res.en...
2019-03-18 16:25:59
194
原创 NodeJs之formidable模块的使用
今天分享一下nodejs的post请求之formidable模块.话不多说,直接上代码index.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>NodeJS的post请求</title></head>&
2019-03-08 17:31:59
4025
1
原创 移动端h5调起数字键盘并且小数点后只能是两位
在做移动端调起数字键盘时候,输入的时候小数点后最多有两位.使用input[type=number]可以调起数字键盘,但是在安卓和ios下会出现一些问题,下面我我记录一下:安卓上使用input[type=number]可以调起数字键盘,但是当输入小数点后,光标就自动定位到小数点前面了,这显然不合理.但是ios手机使用input[type=number]却是正常的.经过一番查询和尝试,发现在安卓...
2019-03-08 14:41:23
2657
原创 NodeJS的post请求
这一章讲解NodeJS的post请求,post请求是通过请求体获得参数的,下面附上具体的代码.有些知识点和get请求里面的一样,我就不多讲了.如果大家不知道,可以参考上一篇文章.index.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>NodeJS的...
2019-03-07 12:30:30
2074
原创 NodeJS中get请求的识别
NodeJS中get的识别主要是靠地址栏中的地址是别的,核心是url.parse()下面我直接给大家上代码讲解:index.html文件注意此文件在public文件夹下面(可以自己制定位置,不一定非得放在public文件夹下面,但是要注意此处index.html的位置要和下面index.js里面配置静态资源服务器的地方的文件夹名称一致)<!DOCTYPE html><h...
2019-03-07 11:58:14
1018
原创 绘制圆环进度条的两种方式
绘制圆环进度条有多种方式,那么现在介绍两种基本的,也是最常见的.第一种:canvas绘制圆环 代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=
2019-03-02 19:51:35
536
原创 node--模块
在讲模块之前,先区分两个词:模块我们叫做module,指的是一系列有关系的js程序的集合.后面我们学习MVC中的M指的是model,模型.模型是实现最基本的算法的程序单位.内置模块:NodeJS中内置了很多模块,可以直接用require来进行引用.国际惯例是,你接受的名字最好和模块一样var http=require(“http”);var qs=require(“querystri...
2019-02-28 17:02:10
149
原创 node 自定义静态文件存储器
创建一个文件夹myweb,我们的程序能够自动为里面的文件,图片,css,js加上路由.实现一个小小的阿帕奇.基本思想就是一句话:用户输入什么url,我就真的用fs去读那个文件代码如下:var http=require("http");var fs=require("fs");var url=require("url");var path=require("path");var q...
2019-02-28 13:52:26
200
原创 node的url模块,path模块,querystring模块
如果一个URL比较完整,包括querystring部分(就是GET请求查询字符串部分),hash部分:http://127.0.0.1:3000/b.html?id=123#123此时req.url是:b.html?id=123也就是说,querystring属于req.url,但是hash不属于.但是我们此时要得到文件名部分,我不想要querystring,此时可以用正则提炼,...
2019-02-27 19:02:29
348
原创 node路由机制--静态资源文件使用
我们现在千万不要进入Apache的世界难以自拔,Apache是一个怎样的世界,是一个物理文件和URL一一对应的世界.比如:此时:http://127.0.0.1/a/1.html但是NodeJS没有根目录的概念,没有URL和物理文件一一对应的关系.此时,如果我们的html页面上,视图插入一张图片<img src="0.jpg">此时这个0.jpg实际的URL是:h...
2019-02-27 10:32:49
554
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人