- 博客(59)
- 收藏
- 关注
RSS订阅原创 CICD最简实践————github actions
你写了一个博客网站，在没有配置CICD的时候。需要改动一些内容，你需要做下面几件事npm run build等待编译打开ftp客户端，连接服务器找到打包文件目录，传输文件配置了CICD，你只需要做一件事情提交代码工作中常用的CICD工具有Gitlab CI,Travis CI等，场景也会更复杂。这里使用github actions，不需要跑ci的服务器。用最简单的配置。实现github中提交代码，自动编译，自动部署到自己的服务器一. 找到你要配置的github项目，创建工作
2020-10-15 15:20:28
1158
原创 nuxt项目使用scss预处理器
1.安装node-sassyarn add sass-loader node-sass 或 yarn add @nuxtjs/style-resources这样就可以识别.vue文件中的scss语法了，但不能使用全局变量2.安装style-resources（全局使用scss变量） yarn add @nuxtjs/style-resources 或 npm i @nuxtjs/st...
2020-04-17 15:37:54
856
原创 vue.js使用audio标签实现聊天语音条组件
效果演示<template> <div class="audio__wrap"> <audio controls :src="src" ref="audioPlayer" style="display:none"></audio> <div class="self__audio"> <div cl...
2020-03-08 18:03:00
2030
2
原创 react native踩坑——"RNCSafeAreaView was not found in the UIManager"
"react": "16.9.0","react-native": "0.61.5",在使用react-navigation遇到的错误，在simulator中编译正常，但是在真机上就报错了原因是react-native-safe-area-context暂不支持react-navigation5。换到4版本就解决了问题...
2020-02-23 23:53:53
4168
原创 react native踩坑——Unrecognized font family 'Material Icons'
"react": "16.9.0","react-native": "0.61.5",在info.plist插入以下代码 <key>UIAppFonts</key> <array> <string>AntDesign.ttf</string> <string>Entypo.ttf</string>...
2020-02-23 23:42:23
1655
原创 如何编写可维护、健壮的前端代码？——前端编码规范制定
前言我认为代码不只是为了实现某个需求，更是给别的人看的。团队制定一个好的编码规范，能让大家更清晰的去理解代码。只有高质量的代码，才能有优化的可行性。更利于项目的版本迭代和拓展。前段时间为公司制定了编码规范，在这里分享一下如果感觉文章对你有帮助的话，留个赞再走吧~js（vue）写法推荐变量和普通使用camelCase小驼峰式命名(tableData,isVisible)，构造函数使用...
2020-01-19 11:27:59
728
原创 记一次vue+golang开发个人博客网站经历
前言大概在半年前，因为公司技术栈的原因。作为小前端的俺，对golang也产生了极大的兴趣。就想着用golang(iris) + vue.js来搭建一个博客。这半年因为加班的原因，留给自己的时间比较少。好歹前几日备案刚刚下来，也算是初步的搭建完成了。博客风格刚刚工作一年多，但搭建博客的想法在我刚接触前端的时候就有了。但是一直都不知道自己的博客应该长啥样，怎么去设计它。有一天在刷PC端tw...
2020-01-14 17:33:18
1879
原创 vue从零搭建一个前中后台权限管理模板
背景我司有很多需要进行权限管理的产品。其中有一个产品，需要给多个客户部署前中后台。在开发第一个版本时，代码全部分离。前端三套，后端三套。加上kafka，redis，算法，数据库等服务器，每有一个新的客户就需要部署一次，需要花费很长的时间且代码难以维护。后决定重构代码，产品分为前，中，后三个平台。前后端分别一套代码，支持权限管理，可拓展。前端使用路由前缀判断平台，登录时会返回不同的token和...
2020-01-12 12:02:56
3291
原创 nginx多个域名解析同一ip的不同应用
一级域名：percywang.top 解析为106.12.221.34:2000这个应用二级域名：auth.percywang.top 解析为106.12.221.34:2001这个应用注意：一级域名server的转发配置一定要在二级域名的后面 server{ listen 80; server_name auth.percywa...
2020-01-10 15:43:02
967
原创 QQ/微信即时通讯产品聊天时间格式转换
import moment from 'moment'moment.locale('zh-cn');export default { // 获取联系人的上次聊天时间 转换成 上午9:20 或 昨天 或 星期三 或 2019/11/14 getLastChatTime(time) { let curtime = moment(); let ftime = moment(...
2020-01-02 10:46:48
871
2
原创 浏览器同源策略导致的跨域问题分析
1. 何为跨域？记住一点：只要域名（ip），协议(http和https)，端口其中任何一个不相同，都是跨域请求。2. 为什么需要跨域因为存在浏览器同源策略，所以才会有跨域问题。那么浏览器是出于何种原因会有跨域的限制呢。其实不难想到，跨域限制主要的目的就是为了用户的上网安全。如果浏览器没有同源策略，会存在什么样的安全问题呢。下面从 DOM 同源策略和 XMLHttpRequest 同源策略...
2019-12-16 16:56:31
650
原创 从零实现redux及中间件思想
一、为什么要用reduxreact和vue都是单向数据流去管理状态。而两个非父子组件之间通信就相对麻烦，特别是跨多级组件之间的通讯。所以两个框架都有相应的状态管理器，如redux vuex mobx等优秀框架。而其中大致的设计思想就是发布订阅模式，通过管理容器存储需要共享的数据，中央管理，多处派发，解决了跨级通讯的痛点。看了redux源码后，体悟很深，自己动手写了一个。参考文章：https:...
2019-12-14 15:04:19
206
原创 基于vue的emoji表情评论组件
vue-emoji-comment最近在写自己的个人博客时，还差最后一个评论功能，一个没有评论功能的博客是没有灵魂的，哈哈哈。效果演示使用精灵图 + 背景定位实现，大家也可以自定义这些emoji表情。看看源码，有注释。就明白怎么弄了。这里推荐一个做精灵图的在线地址：https://sprite.ydr.me/个人博客：https://github.com/pppercyWang/twi...
2019-11-12 17:31:27
2728
原创 vue实现自定义指令 点击元素区域外执行事件
效果演示:需求：出现搜索窗口后，点击搜索窗口外关闭搜索窗口vueClickOutSize.js:const clickOutside = { // 初始化指令 bind(el, binding, vnode) { function clickHandler(e) { // 这里判断点击的元素是否是本身，是本身，则返回 if (el...
2019-10-31 16:07:56
1842
转载 50行代码手写call，apply，bind方法
本文是对该文章的一些理解，写的非常好。附带实例。跟大家分享一下https://segmentfault.com/a/1190000020044435call方法实现：Function.prototype.mycall = function(context,...arg){ // Function是所有函数对象的构造函数。这里给Function的原型声明了一个mycall方法，则所有的函数...
2019-09-25 17:06:49
238
原创 vue实现添加标签组件
最近在写自己个人博客时，发布文章功能需要一个添加标签组件。点击加号，输入文本。就写了一个TagInputer组件,中间遇到了一些麻烦 跟大家分享一下遇到的问题：input需要根据内容自适应宽度绑定contenteditable元素的值效果展示TagInputer.vue<template> <div class="tag-inputer-wrap">...
2019-09-24 15:15:42
7007
原创 input根据内容自适应宽度
最近在写自己个人网站时，发布文章功能需要一个添加标签组件。点击加号，输入文本。而这里的input就需要宽度根据内容自适应。百度搜大多是这两种方法，结果都不是很理想。// 方法一 <input type="text" @input="changeWidth" id="myInput" class="my-input" /> changeWidth(e) { let...
2019-09-23 19:57:21
30148
9
原创 公众号微信支付接口没回调踩坑 WeixinJSBridge getBrandWCPayRequest
这真是一个史前巨坑,遇到的问题是:苹果手机支付然后取消,可以alert出支付取消.但支付成功后不能alert,就以为没进入回调.安卓手机一切正常找了很多方法,各种百度 google,调jssdk的方法去支付,结果还是不行解决办法: 不用去alert,它不会执行.直接跳转到指定页面就可以了.我哭了 onBridgeReady(config) { if (!config.pack...
2019-09-21 14:48:29
4055
3
原创 react模仿antd手写一个多选日期日历组件
业务需求多选近三个月的日期。不能选择当日之前的日期。因为antd的日期组件都是选择单个日期或者日期范围。不符合需求，所以自己就实现了一个。写的不好的地方大家请指教效果展示测试组件<CheckCalendar visible={this.state.showCalendar} onClose={()=>{ this.se...
2019-09-07 15:09:49
3280
4
原创 react实现modal/dialog组件
效果展示测试组件class Test extends Component { constructor(props) { super(props) this.state = { modalVisible: false } } render() { return ( ...
2019-09-06 12:07:44
3062
原创 react实现Radio组件
效果展示：测试组件：class Test extends Component { constructor(props) { super(props) this.state = { active:1 } } onGroupChange(value) { this.setState({...
2019-09-05 18:47:09
7020
原创 react开发公众号踩坑日志
最近刚刚接触react，用react开发一个公众号。以前没有过开发公众号的经验，在这里记录一下过程中踩过的坑。这个项目是前后端开发的。本篇文章只站在前端的视角，希望给大家一个参考一.授权回调微信授权过程进入你的程序跳转至微信授权接口用户确定授权重定向至你的程序访问微信授权接口这里注意使用window.location.href 而不是window.open去访问接口，不然可能...
2019-09-04 16:37:28
1342
2
原创 vue模仿twitter写一个自己的博客——头部导航栏
这个头部导航主要是写一个menu-item组件，hover时底部的蓝色底边动画弹出。再将logo扣出精灵图。MenuItem：<template> <div class="menu-item-wrap" @click="push"> <div class="top">{{title}}</div> <div class=...
2019-08-26 10:33:26
2744
2
原创 vue模仿twitter写一个自己的博客——拉幕效果
实现twitter页面的这种拉幕效果不是很难。但以前看到anijs官网的那种从下面往上面覆盖的拉幕效果感觉更好。所以自己就尝试了下。这里我希望每个页面都有这个拉幕效果，所以就放在了Layout文件<template> <div class="home"> <div class="header"> <blog-header>...
2019-08-26 10:33:20
2846
原创 vue模仿twitter写一个自己的博客——中部导航栏布局
接下来是中部导航栏。我们看到这里的头像动画，和中部导航栏定位都是跟鼠标滚动有关的。我们先将布局实现一下。这里是要求在页面上部分滚动范围内，导航栏一直在div的上部，随着鼠标的滚动而改变位置。到下部分滚动范围，导航栏就一直固定到页面的上部分。这里需要注意两个地方这里需要一个覆盖不了的区域，可以给人一种更好开关屏的感觉。而且中部导航栏下方区域的内容，在下滑的时候不能出现在这个区域。一定要注...
2019-08-26 10:32:56
2565
2
原创 vue模仿twitter写一个自己的博客——中部导航栏
中部导航栏的Menu-Item跟头部导航栏差不多。但是需要设置一个default-active参数。还有路由变化时菜单激活项的变化。头像的变化可以使用transition实现，一个大头像，和一个小头像加信息的离开进入动画。通过之前鼠标滚动监听达到效果。<template> <div class="heading-wrap"> <div class="b...
2019-08-26 10:32:51
2599
原创 vue实现自定义radio组件
效果展示父组件中使用<radio-group v-model="radioIschecked"> <radio label="个人" value="1"></radio> <radio label="收藏" value="2"></radio></radio-group>Ra...
2019-08-18 14:09:02
4402
1
原创 vue实现自定义checkbox组件
效果展示父组件中使用<checkbox-group v-model="checkList"> <checkbox v-for="(item,index) in data" v-bind:key="index" :label="item.name" :value="item.id"...
2019-08-16 14:50:22
7139
原创 vue子组件作为slot如何触发父组件的事件，slot踩坑记录
最近写了一个checkbox组件。跟其他的ui组件一样。被checkbox-group组件包裹，根据其v-model绑定的值，用于储存多选框被选中的值。 <checkbox-group v-model="checkList"> <checkbox v-for="(item,index) in data" v-bind:ke...
2019-08-16 14:04:55
9243
3
原创 vue写一个全局Message组件——插件知识
不知道大家在用一些UI框架，比如Element-ui的时候，有没有觉得一些全局组件。this.$message(),this.Toast()等，用起来很爽。他们不像其他的组件，需要去导入，去注册。麻烦的很。看了Element的源码，自己也撸了一个。其中包括了以前没有接触过的插件知识，哎，感觉自己对Vue的理解还是不够，只停留在了使用的这阶段。需要更多的往深层次的地方去钻。不说废话了，直接上代码。...
2019-08-14 14:58:59
1909
2
原创 实现下拉加载根本没那么复杂
之前缺乏移动端的经验。一直不知道上拉加载，下拉刷新是怎么实现的。现在正好有个产品有这样一个需求。想了一会没有思路。就去找插件。啥vue-infinite-scroll，vue-virtual-scroll-list。啊呀，牛!无限滚动，十万条数据渲染。经过我一大圈的折腾。还是默默的卸载了插件。我只是需要实现一个下拉加载，不需要其他这么多的功能。看了看其他人的源码，直接撸了起来，实现一个List组...
2019-08-13 10:08:02
431
原创 vue实现自定义dialog组件
不知道大家有没有遇到这种情况。平时过于依赖组件库，如果产品对某个组件有特殊的要求。我们与其去改，去覆盖组件库的源码。还不如自己写一个组件，毕竟是自己写的，不管你想怎么改，都方便容易的很。这里就实现一个dialog组件和input组件，不基于任何组件库。供大家参考效果展示MDialog.vue<template> <transition name="fade">...
2019-08-09 14:14:35
4200
原创 前端必备技能之如何制作精灵图
为什么要用精灵图？比如京东首页的这些icon，如果每个icon都去请求一个资源。是非常浪费资源的。因为我们浏览器在同一个域名下并发加载的资源(CSS、JS 、图片等)数量是有限的。我们可以将这些icon放到一张图片，通过截取这张图片的不同的区域，拿到不同的icon制作一个背景透明的Icon截图你喜欢的logo，最好是正方形。打开ps，使用快速选择工具选择白色区域ctrl+x删除...
2019-07-28 22:21:25
2545
原创 用vue模仿twitter写一个自己的博客
vue生态十分的强大，UI组件库越来越多。而过分依赖组件库，只会导致自己的技术越来越烂。组件的编写，样式的书写，动画，适配，媒体查询等很多都不记得了。 自己一直想着写一个博客。打算模仿twitter的一个页面。写一个自己的博客Githubhttps://github.com/pppercyWang/twitter-blog-vue目录头部导航栏拉幕效果中间导航栏布局实现模仿的页面...
2019-07-28 21:18:17
843
原创 Vue+vant使用skeleton组件实现骨架屏
效果演示直接上代码<template> <div class="skeleton" v-show="skeletonShow"> <van-skeleton :row="3" row-width="160" /> <van-skeleton :row="3" row-width="160" /> ...
2019-07-25 10:25:15
15772
1
原创 vant中van-icon使用自定义图标简单粗暴
图标库是iconfont，这里面的图标够用了吧一.新建项目二.选择喜欢的图标，加入购物车，再添加到项目三.生成代码四.将链接粘贴到地址栏，将css内容复制到icon.css五.在App.vue进行全局引用六.在相应组件使用van-icon，iconfont类是必须要有的，不同的图标就是不同的percy-icon-xxxx...
2019-07-15 15:48:41
51913
4
原创 Vuex在Vue工程的正确使用
关于vuex，我们听到最多的是vuex是一个状态管理容器，可以解决组件之间通信的痛点。但vuex真的只是这样吗？平时，我更喜欢将vuex比喻成一个前端程序的数据库。他可以储存各种数据，需要什么直接过去拿就行。我们都知道，单页面应用只要页面跳转了，data中的数据都会清空。但store中的数据不会清空，只有在页面刷新时，会清空store中的数据一.那我们是不是可以这样设计？当我们需要获取数据时...
2019-07-09 10:24:54
596
1
原创 Vue+Typescript的PC端管理平台模板
Github地址：https://github.com/pppercyWang/vue-typescirpt-admin
2019-07-08 19:33:26
766
原创 Vue+Typescript的移动端项目模板
#Github地址：https://github.com/pppercyWang/vue-typesctipt-mobile
2019-07-08 19:32:00
1031
原创 Vue+Typescript使用vue-router路由不正常跳转采坑记录
近期经常看到Typescript的一些文章。自己看了看文档，写了一个demo。哇，一种重所未有的体验。决定自己以后写的产品都用Typescript+Vue了。可能vue2.x和对ts的支持不是很好（期待vue3，将用ts重构）。期间遇到了一个最大的坑，跟大家分享一下页面上报的错：Property or method “xxx” is not defined on the instance b...
2019-07-08 09:49:49
5440
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人