- 博客(117)
- 收藏
- 关注
RSS订阅原创 https网站加载http资源问题
最近项目对接了一个第三方的平台、我们需要展示第三方平台返回来的图片资源、由于我们的服务器设置为了https、但是第三方平台返回的图片链接是 http 资源。所以就出现了图片无法加载出来的问题，在此记录一下问题的解决方案。
2023-11-04 14:07:46
761
1
原创 前端版本更新提示
最近项目发布比较频繁、导致每次都要主动告知用户/测试 去刷新清除页面缓存、从而防止发了新功能之后、用户因为没有刷新页面/清除缓存，一直使用的还是旧版本。所以就着手写一个检测到发布了新版本就自动提醒用户去刷新页面的功能。一、思路：我们可以通过每次打包构建(npm run build)之后给包打一个唯一标识并且挂在到页面中的某个标签上或者存在本地缓存(localStorage/sessionStroage)、从而来确定唯一性，然后通过判断本地的存储的唯一标识是否与当前服务器上的资源记录的唯一标识是否一致。
2023-09-20 18:37:18
570
原创 uniapp-微信小程序篇
我们可以根据自己业务需求进行功能代码差分、可以分出不同的包、这里只是为了做演示。可以通过命令行的方式创建也可以通过HBuilderX进行创建（通过HBuilderX创建的项目建议选择最简单的模板），个人建议使用命令行方式。在此处将你们的后端服务地址配置上（注意还必须是https），没有配置https的可以自行去你们的服务器（阿里云、腾讯云）申请就好了。这里注意一个问题、就是开发完成需要发版的时候、一定要在微信公众平台进行服务器域名配置、否则将无法与你的后端服务进行通信。二、配置manifest.json。
2023-08-15 17:34:39
1864
原创 uniapp-开发APP使用自定义插件
需求背景： 项目组开发了一个APP需要使用到打印机的功能、所以需要通过打印机厂商提供的jdk包结合自己的业务融合到uniapp 中。首先你需要一个懂开发android开发的同事、让他帮忙配合写一些调用方法（调用打印机提供的一些原生方法、例如打印、连接蓝牙、蓝牙搜索等）。其他的就需要你在项目中自己写。
2023-07-20 18:26:27
289
原创 前端打印、生成PDF的那些事
实现思路：将需要生成PDF的DOM节点使用html2canvas 生成 canvas 再使用 canvas.toDataURL 方法将 canvas转成图片base64、然后使用 jspdf 的 addImage方法将图片base64 转成PDF。1.上述导出PDF的功能还有一些问题没有完善、例如如果内容时table表格 的时候需要精准计算每一行的高度、再进行计算最终动态改变position偏移量来解决table内容被截断的问题。后续有空补上这部分代码。使用上述的方式就能解决打印内容被截断的问题了。
2023-07-15 10:59:57
1737
原创 前端微服务-qiankun从0到1搭建（主要核心点）以及需要注意的地方
前端微服务-qiankun从0到1搭建（主要核心点）以及需要注意的地方
2022-12-13 15:26:34
2481
2
原创 基于 vue-cropper 库 实现的 图片裁剪组件（含vue2.x/vue3.x/vue3.x+ts 写法）
基于 vue-cropper 库 实现的 图片裁剪组件（含vue2.x/vue3.x/vue3.x+ts 写法）// 代码地址 https://gitee.com/zhong-wenkai/cropper-image-upload.git内含3个文件夹：cropper-image-upload2.x || cropper-image-upload3.x || cropper-image-upload3.x+ts说明：cropper-image-upload2.x 为 vue2.x 版本
2022-02-23 17:19:21
765
5
原创 实现虚拟滚动表格（无限滚动）
实现虚拟滚动表格（无限滚动）背景：项目组中，原来使用的element UI 中的table组件当一页数据量多了之后页面渐显卡顿，不满足要求，所以就决定自己开发一个table组件，当然解决这个问题，不一定要自己开发一个table组件，可以有其他的现成的库直接用，或者可以用分段式（切片）加载的方式来解决这个问题。因为正好年底，时间稍微宽裕些，所以就打算自己开发一个，正好也能了解到整个table组件的实现方式。正文：代码我直接上传到gite上了，要使用或者想了解一下自己开发一个table组件的思路的可以自行p
2022-01-14 15:29:23
1609
原创 vue 删除Keep-alive缓存
vue删除Keep-alive缓存keep-alive简单介绍：我们项目中为了用户有更好的体验/页面性能，大多数地方都会使用到keep-alive，这个是vue提供的组件，它会将它的子组件进行数据缓存/行为缓存。大致原理就是当离开当前组件时，组件并不会被销毁，而是保存的了内存中，下次再次访问的时候，不会重新创建新的组件实例，直接从内存中通过特定的key取出缓存的组件实例，进行渲染。问题：**最近我们项目提了一个用户体验的需求，希望同一个页面有些场景有缓存，但是有些场景不希望缓存。**
2021-11-30 17:35:45
5020
原创 navicat连接不上服务器mysql
navicat连接不上服务器mysql**背景：**在自己搭建部署项目的过程中，安装mysql之后，想通过本地电脑navicat软件来操作数据库，然后发现连接不上，后面查资料说是因为mysql默认root用户是不允许外部访问的，所以我们需要进行修改。步骤：首先我们可以通过grep “password” /var/log/mysqld.log 命令获取初始密码grep "password" /var/log/mysqld.log # 拿到密码 登录mysqlmysql -uroot -p
2021-10-29 15:53:10
3108
原创 前端项目部署流程
前端项目部署流程1.首先我们需要有一台服务器，这里我用的是阿里云ecs服务器。选择的服务器操作系统是linux，下面我们开始从0开始部署一个前端项目到服务器上。步骤：一、链接服务器(1). 我们需要先在自己电脑链接上我们的服务器，我使用的是xshell工具。# 通过ssh @root[ipaddress] 来链接你的服务器#（将ipaddress替换成你服务器的公网IP地址）ssh @root[ipaddress]二、部署一个简单的静态页面登录成功之后，我们先来部署一个简单的html静态
2021-10-28 14:37:01
28340
原创 $attrs 和 $listeners
$attrs 和 $listeners一、概念：$attrs: 包括组件 props 和 emits property 中未包含的所有属性 (例如，class、style、v-on 监听器等) ps: 官网原话其实就可以简单理解为：除了组件内props声名了的所有给组件传的值（class,style除外）这个属性有什么作用呢？当我们需要给多层嵌套父子组件传值，而且杂的时候，可以直接使用它，可以使代码看起来更加简洁。案例如下：// parent.vue<m-child :data-s
2021-10-12 16:38:54
5270
4
原创 Vue-cli3.0 分环境运行/打包
前文 ：最近项目中需要新增一个灰度环境，所以要新增运行环境配置。太久没复习vue-cli的配置知识有点忘记了，后面查询资料配置完成，此文章作为记录以防后面忘记。正文：我们使用vue-cli构建完项目后，会有一个package.json文件，里面有scripts属性，如下："scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", },这是默认配置，当我们项目需要进行分环境时(
2021-09-02 11:38:07
495
原创 indexedDB 前端缓存实战
1.## indexedDB 前端缓存实战业务场景：最近项目组接触一个H5的项目，里面有一个课程学习的功能，里面基本都是一些比较大的gif 图片或者是一些高清的 jpg /png 图片，这个时候如果每次通过用户学习的过程中点击下一步再去下载对应的图片，如果刚好下载的图片比较大就会导致用户交互体验极差的问题，所以当时就想在学习课程之前让用户提前下载资源并缓存在前端，这时需要在前端做一个缓存，前端缓存使用比较多的是localStorage/sessionStorage ,但是应该很明显不符合我们的业务场景（
2021-05-25 16:37:33
1420
原创 element-ui form表单嵌套循环校验
element-ui form表单嵌套校验记录一次使用 element-ui form 表单嵌套校验的需求数据结构： formData:{id:1,type:'test数据',input_info:[...]}上述formData 中的 input_info 数组就是我们需要渲染成表单的数据具体使用： <div class="form"> <el-form label-position="right" label-width="145px" ref
2021-02-24 17:36:38
553
原创 微信小程序 ---- 自定义顶部导航栏
微信小程序 ---- 自定义顶部导航栏需要使用到 微信小程序中的 wx.getSystemInfoSync 方法 和 wx.getMenuButtonBoundingClientRect 方法。方法作用：wx.getSystemInfoSync(): 获取 手机系统信息。wx.getMenuButtonBoundingClientRect():获取 胶囊按钮的尺寸，以及位置信息。首先需要知道的是 导航栏 距离屏幕顶部 的距离就是 状态栏的高度。具体计算见下代码块：//app.jsApp({
2020-11-09 15:14:32
1184
原创 实现一个简易的 vue router
实现一个简易的 vue router1.vue-router 有2种模式 hash 与 history 模式，hash模式就是利用锚点的原理实现跳转（通过修改window.location.hash 值），而history 通过修改浏览器访问历史栈来实现（该模式需要后端支持）。2.由于History 需要后端支持，这里就不做实现，这里主要实现一下hash 模式路由。// 这里先引入 vue 库的 cdn <script crossorigin="anonymous" integrity="sh
2020-08-19 15:07:06
263
原创 MySql索引剖析
MySql索引剖析1.最近朋友问我一个问题，一时把我给问懵了。MySql 索引的本质是什么？我当时是以我自己对索引的理解回答：类似于书中的目录，可以快速查询到指定的数据，主要用于加速查询速度。后面得知这个答案只能给 30分，所以我也特地去查询资料深入的学习了一番。2.数据库索引的本质：分散存储的数据结构在RDBMS 系统中数据索引都是硬盘级索引*下图是索引的工作机制：3.MySQL中索引类型：（1）.hash索引：优势： 查询速度快劣势：不支持范围查询，hash冲突。由于in
2020-06-17 22:26:48
221
原创 vue-自定义指令
vue-自定义指令1.简单记录一下 vue-自定义指令的使用方法// html 部分<div id="app"> <h3>vue directive</h3> <div> <p> <input type="text" v-focus v-model="info" /> </p> ...
2020-04-13 17:39:40
153
原创 bind,call,apply方法的实现
bind,call,apply方法的实现1.call 方法：第一个参数为 this 指向，第二个参数及以后 为传入执行函数的参数。function myCall(context){ const arg = [...arguments].slice(1); //复制第二个以后的参数 用于传入执行函数 ，此处arguments 为类数组所以不具有数组的一些操作方法，所以需要先进行转换 co...
2020-03-10 14:50:32
253
原创 手动实现vue数据双向绑定
手动实现vue数据双向绑定1.看了vue 数据双向绑定的源码决定 根据自己的理解 实现一个简单版的 vue双向绑定首先根据用法 new Vue({…}) 可以知道 vue 构造函数接收一个 对象参数class Vue { constructor(options){ }}其次 数据双向绑定的原理 是使用了观察者模式 和 Object.defineProper...
2020-02-28 13:57:25
875
原创 微信小程序 懒加载
微信小程序 懒加载1.需要使用到 wx小程序中的 createIntersectionObserver ， relativeToViewport ，observe 等一系列 API ，API使用方法详情 官网: https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createIntersectionObserver.html...
2020-02-21 17:04:02
621
原创 微信小程序 bindtap 传参
微信小程序 bindtap 传参//index.wxml<view bindtap="changeIndex" data-src="我固定参数"> </view>//index.jspage({ data:{ }, changeIndex(e){ console.log(e.currentTarget.dataset.src); //我...
2020-02-20 16:44:21
893
原创 React-错误边界
React-错误边界错误边界是用于捕获其子组件树 JavaScript 异常，记录错误并展示一个回退的 UI 的 React 组件，而不是整个组件树的异常。错误边界在渲染期间、生命周期方法内、以及整个组件树构造函数内捕获错误.注意: 错误边界无法捕获以下几个错误。(1).事件处理(2).错误边界组件自身的错误(3).异步代码(setTimeout 或 requestAnimati...
2020-01-02 15:24:57
332
原创 实现Promise.all 方法
实现Promise.all 方法1.Promise.all() 方法执行完成之后还是返回一个 promise对象 所以封装方法的时候必须最终返回一个promise对象function promiseAll(arrayPromise){ return new Promise((resolve,reject)=>{ })}2.传入Promise.all方法内的promise数...
2019-11-28 15:21:28
1555
原创 Sequelize：TimeoutError：ResourceRequest超时
Sequelize：TimeoutError：ResourceRequest超时1.解决方法://config.default.js 文件//找到数据库配置项config.sequelize = { username:xxx, ... pool: { max: 100, min: 0, // @note https://github.com...
2019-11-19 17:36:31
2669
原创 egg RESTFul 接口实例
egg RESTFul 接口实例1.获取/查询//路由router.get('/userInfo',controller.home.getUserInfo);//controller/home async getUserInfo(){ let params = this.ctx.request.query; //获取get请求参数 console.log('查询所有用户...
2019-11-16 17:37:12
800
原创 egg -- 处理前端传入的文件
egg – 处理前端传入的文件1.首先需要配置一下multipart 属性config.default.js config.multipart = { mode:'file', fileExtensions:[ //新增文件类型 fileExtensions属性为 whilelist 新增文件白名单 此处支持 .xlsx 后缀文件 '.xlsx' ]...
2019-09-30 11:56:43
1306
4
原创 egg-- 实现自定义模块挂载到app上
egg-- 实现自定义模块挂载到app上1.将自己封装的模块功能类写到一个单独文件内，并导出(exports).//test.jsconst BaseContextClass = require('egg').BaseContextClass;exports.Test = class extends BaseContextClass { constructor(ctx){ supe...
2019-09-30 10:53:04
3364
原创 egg 插件 编写--入门
egg 插件 编写–入门1.主要文件： package.json//插件文件都放在一个 egg-test-plug 文件夹内// egg-test-plug/package.json{ "name": "egg-test-plug", //引入插件时，插件的包名 package: xxx "eggPlugin": { "name": "eggTestPlug"...
2019-09-18 10:47:47
887
原创 element-ui 自定义弹窗 进入退出动画效果
element-ui 自定义弹窗 进入退出动画效果1.在全局样式 文件中加入下述代码即可//弹窗自定义 动画.el-dialog__wrapper { transition-duration: 0.8s; }.dialog-fade-enter-active{ animation: none !important;}.dialog-fade-leave-active {...
2019-08-28 14:21:50
5008
原创 自定义element-ui loading 加载动画
自定义element-ui loading 加载动画1.直接在全局样式文件中修改://index.scss 我这里是 index.scss 文件//自定义 加载动画.el-loading-spinner { background-image:url('../assets/loading_images/loading.gif'); // 这个是自己想设置的 gif 加载动...
2019-08-27 15:23:27
4775
原创 vue-router 路由守卫（路由生命周期）
vue-router 路由生命周期（路由守卫）1.全局&路由 使用beforeEach((to,from,next)=>{…})发生路由 跳转时 立即执行router.beforeEach((to,from,next)=>{ console.log('跳转到',to); console.log('来源',from); console.log('全局前置路...
2019-08-10 17:31:03
2390
原创 Vue使用 Echarts
Vue使用 Echarts1.安装 echarts 插件npm install echarts -save2.在main.js 引入 echartsimport Vue from 'vue'import App from './App'import router from './router'import echarts from 'echarts'Vue.config.pr...
2019-08-08 17:41:38
339
原创 Vue项目中添加 页面 标签页 的 小图标
Vue项目中添加 页面 标签页 的 小图标1.找到 build 文件夹中的 webpack.prod.conf.js文件// webpack.prod.conf.js...//找到 这 一配置项new HtmlWebpackPlugin({ ...});添加 favicon 属性2.找到 build 文件夹 内的 webpack.dev.conf.js 文件// webp...
2019-08-08 11:52:27
4783
原创 angular 项目 运行提示 node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected.解决 方案
angular 项目 运行提示 node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ‘;’ expected. 解决 方案打开package.json 文件找到：将 “rxjs”:"^6.0.0" 为 “rxjs”:“6.0.0”如下图:...
2019-07-27 18:08:45
2193
原创 使用 angular-cli 搭建 angular 项目
使用 angular-cli 搭建 angular 项目首先 先安装 angular-cli (脚手架);npm install -g @angular-cli注意：此为 安装 最新 版本 (目前 最新版本 为 8.1)运行完上述 命令 可以 使用 :ng -v 或者 ng version 查看 当前 版本 （检查是否 安装 成功）;2.创建 ...
2019-07-26 16:07:42
409
原创 TS-枚举 元组
TS-枚举 元组1.枚举: enumenum 类型 是 对 JS 数据 类型 的 一个 补充。// 任意值 这种 写法 只能 指定 最后 一个 enum Color4 {red,green,blue=<any>'a'};Color4.bule; // 'a'enum Color4 {red=<any>'a',green,blue}; //e...
2019-07-22 17:07:02
1928
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人