4 樊小书生

尚未进行身份认证

我要认证

前端开发工程师

等级
TA的排名 9k+

小程序tabBar右上角添加角标

小程序可以在 pages.json 中使用 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页。关于 tabBar 的配置可以查看 https://uniapp.dcloud.io/collocation/pages?id=tabbar 。但我们有时候在某个 tab 展示角标,比如微信第一个 tab 的未读消息提示,第三个 tab 的朋友圈未读消息,这些信息是不能通过 pages.json 中的 tabBar 来配置的,而是使用如下API进行设置:uni.setTabBarB

2020-07-28 00:09:21

uni-app开发小程序总结

最近开发项目中使用 uni-app 开发了 微信小程序,整个体验下来还算流畅,下面做一些总结:HBuilderX安装HBuilderX安装的时候选择标准版,不要下载APP开发版,至于uni-app编辑都可以在标准版里面通过插件安装或者是直接通过vue-cli命令行创建项目,另外就我个人使用之后,APP开发版编译小程序的时候,有时候会导致编译出来的小程序页面空白(只剩下<page></page>)。微信开发者工具HBuilderX运行/发布微信小程序在编译完成之后会尝试打开微信

2020-07-25 22:08:00

Vue + Sentry 搭建前端异常监控系统

Sentry账号及SDK语言选择注册账号:https://sentry.io/for/vue/选择平台:Sentry通过官方的Sentry SDK与许多不同的语言和平台集成。本项目选择 Vue 。安装Sentry SDK安装Sentry的浏览器JavaScript SDK:@sentry/browser : yarn add @sentry/browser 或者 npm install @sentry/browser ,之后@sentry/browser 将报告通过应用程序捕获触发的任何异常

2020-07-20 08:19:34

Docker 部署 Sentry

部署 Sentry 要求Docker 17.05.0+Compose 1.23.0+至少需要2400MB RAMDocker 及 Sentry 依赖安装如果 Docker 版本太低,需要卸载旧版本。卸载Docker旧版本较旧的Docker版本称为docker或docker-engine。如果已安装这些程序,请卸载它们以及相关的依赖项。sudo yum remove docker docker-client docker-client-latest docker-common docker

2020-07-05 18:48:02

Vue cli 配置CDN及Gzip

在Vue项目中,为了提升性能缩短首页的白屏时间(更具体的白屏时间可查看Web 性能优化-首屏和白屏时间),我们可以通过将公共库采用CDN引入的方式以及将资源文件压缩的方式。关于 配置CDN及Gzip 之后可从以下3个链接进行体验,在 Chrome 开发者工具 Network 中勾选 Disable Cache:未配置CDN及Gzip:https://www.fxss.work/authorityRouter配置CDN但未配置Gzip:https://www.fxss.work/authorityRo

2020-06-04 17:13:05

nginx 配置 gzip_static

关于 nginx 的 gzip ,可以分为两种:nginx 动态压缩,对每个请求先压缩再输出。nginx 静态压缩,使用现成的扩展名为 .gz 的预压缩文件。nginx 动态压缩开启 nginx 动态压缩只需要在 nginx.conf 文件中做如下修改即可:# 开启和关闭gzip模式gzip on;# gizp压缩起点,文件大于1k才进行压缩gzip_min_length 1k;# 设置压缩所需要的缓冲区大小,以4k为单位,如果文件为7k则申请2*4k的缓冲区 gzip_buffer

2020-06-03 23:25:07

Vue lifecycle 生命周期详解

本文章主要介绍在全局混入、多个混入情况下初始化渲染的生命周期、更新生命周期以及销毁的生命周期。项目地址:vue-lifecycle演示地址:vue-lifecycle目录说明src/mixin 目录下放的是不同组件或者页面的混入。文件说明allMixin.js为全局混入appAMixin.jsapp.vue 的 AMixinappBMixin.jsapp.vue 的 BMixinhomeAMixin.jsHome.vue 的 AMixinhome

2020-05-31 17:14:31

Vue路由权限

在做后台管理系统的时候,一般都会遇见路由权限的问题。大家可以先体验一下最终的例子 authority vue Router ,例子项目地址 authorityRouter。在例子的登录页面中,通过选择不同的用户类型来模拟不同的用户账号登录的情况,通过不同的用户类型登录后台的时候,可以看到左侧的 menu 菜单是不同的,只有当有权限的时候才可以进行查看,并且当手动输入的时候都会直接到404页面。...

2020-04-06 18:47:59

nuxt.js + pm2 部署

对于 nuxt 项目,一般采用官方提供的 create-nuxt-app 脚手架,具体过程 https://zh.nuxtjs.org/guide/installation/ 。在实际开发中一般使用 npm run dev 其本地服务进行开发发布部署的时候首先需要 npm run build (相当于 nuxt build ) 利用webpack编译应用,压缩JS和CSS资源之后将文件上传...

2020-04-06 00:30:04

markdown-it代码块渲染、自定义行号、复制代码功能

之前写过一篇关于代码块渲染添加自定义行号的文章:markdown-it和highlight.js的结合渲染代码,并添加自定义行号 。不过在之后的渲染使用过程中由于效果不是很好,所以重新改版,并借此机会添加复制代码功能。本博客采用的后端是 node.js 框架 Express,在使用 markdown-it 渲染 md 文件的时候,选择在添加文章或者更新文章的时候由 md 生成 html。代码...

2020-03-12 22:30:25

nuxt + vant 适配 rem

创建项目npx create-nuxt-app <项目名>详情查看 安装-NuxtJS安装vantnpm i vant -S引入vant这里采用的是: 导入所有组件在根目录的 plugins 目录下创建 vant.js ,内容如下:import Vue from 'vue'import Vant from 'vant'import 'vant/lib/index...

2020-03-07 11:25:48

VS code 常用插件

VS code是现在流行的编辑器之一,我们可以通过安装插件来实现更好的使用,下面是常用的插件合集(此处是以我常用的为例),可以直接在VS code左侧的Extensions中搜索:Chinese (Simplified) Language Pack for Visual Studio Code:中文翻译Auto Rename Tag:自动重命名标签Babel JavaScriptBea...

2020-02-29 17:27:21

vue 自定义事件传参

先来简单看个例子:TodoList.vue :<template> <ul> <li> <todo-item v-for="item in list" :key="item.id" :status="doneList.includes(item.id)" :info="item"...

2020-02-29 00:03:05

css选择器 - 1

[attribute]例子例子描述[target]选择带有 target 属性所有元素。[attribute=value]例子例子描述[target=_blank]选择 target="_blank" 的所有元素。[attribute~=value]例子例子描述[title~=flower]选择 title 属性包...

2020-02-09 19:20:06

Element-UI / scrollbar-width.js

获取浏览器滚动条宽度,一般用于弹出层的时候,设置body的右边距,防止overflow: hidden的时候元素抖动。scrollbar-width.jsimport Vue from 'vue';let scrollBarWidth;export default function() { // 如果是服务器端渲染,则浏览器滚动条的宽度为0 if (Vue.prototype....

2020-02-05 19:53:43

Element-UI / dom.js 的学习

isServerconst isServer = Vue.prototype.$isServer;Vue.prototype.$isServer表示当前是否是在服务器端渲染,例如使用 create-nuxt-app 创建的项目中,在 page/index.vue 的 created 生命周期中添加 console.log(this.$isServer) 服务器端打印出来为 true 。ie...

2020-02-05 19:51:09

markdown-it和highlight.js的结合渲染代码,并添加自定义行号

一般写博客都采用md格式,快捷方便,但是写好之后为了方便查看,我们需要将md格式的代码解析。markdown-it本示例中采用的是markdown-it来解析md格式的代码。highlight.js本示例中采用的是highlight.js来进行代码高亮显示。但是highlight.js不支持行号,这会导致代码看起来不方便,本示例结合给博客的highlight.js添加行号和行号高亮中的方...

2019-12-16 18:58:40

mysqljs的Promise封装

mysqljs暂不支持Promise的写法,这导致我们代码的嵌套层级增多,不易于理解和维护,所以需要对其进行Promise封装,结合async/await来使代码易于维护。mysqljs的Promise封装假设我们将mysqljs的Promise封装放在db.js文件中,内容如下:const mysql = require('mysql');// 创建连接池const pool = m...

2019-11-26 08:31:07

Express4 环境变量配置

在进项项目开发中经常会遇到不同环境切换的问题,比如说开发环境和正式环境对应不同服务器的 mysql ,总不能每次切换不同环境的时候修改代码,这样既容易出错,也不利于代码维护,所以这个时候就需要用到环境变量来进行配置了。开发环境在开发环境中,我们一般链接的是本地服务器的 mysql ,这个时候我们可以通过以下设置来进行变量控制:package.json:"scripts": { "s...

2019-10-17 07:52:26

CSS预编译器

当前环境中,直接手写 css 的越来越少,主要是通过各种预编译器来做,主要原因会通过如下几点进行描述。先看一下 css 的一些基础点,这里只说关键的,完整的可以自己查看 css2.1规范 。css 基础知识点css 盒模型页面都是通过盒模型来拼凑的,首先需要知道都有哪些块模型(也就是 display 的值):inline: 行内元素inline-block: 行内块元素block...

2019-07-30 15:42:08

查看更多

勋章 我的勋章
  • GitHub
    GitHub
    绑定GitHub第三方账户获取
  • 签到新秀
    签到新秀
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 专栏达人
    专栏达人
    授予成功创建个人博客专栏的用户。专栏中添加五篇以上博文即可点亮!撰写博客专栏浓缩技术精华,专栏达人就是你!
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv1
    勤写标兵Lv1
    授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 学习力
    学习力
    《原力计划【第二季】》第一期主题勋章 ,第一期活动已经结束啦,小伙伴们可以去参加第二期打卡挑战活动获取更多勋章哦。