- 博客(237)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 axios解决多个baseURL配置的几种方式
通过环境变量或直接写死的方式配置好，这样就可以在接口请求的时候少写公共的url前缀，以达到减少代码量，提高可读性的目的。缺点：在某些请求的时候，特别是post请求，需要多写代码进行参数转换，不然后端接收不到请求参数。但项目进行到中后期，又有了新的接口地址变化，需要新的代理接口，如果直接修改axios的。在开发初期，我们往往都会对axios进行初始化配置，把常用的。这种方式比较推荐，因为代码量不多，而且还可以接着使用以前的封装。缺点：会多维护一份axios配置实例，增加文件数量。
2023-04-13 10:39:12
3829
原创 前端接入keycloak的几种方式
最新内容请看原文链接：https://fenxianglu.cn/article/493。这种方式就像使用QQ登录一样，登录会跳转到 keycloak 给的登录界面。其他接口请求需要加 token 验证（keycloak 使用的是。这个是针对 vue 项目封装的 keycloak-js。进行 access_token解析。这种试可以使用自定义的登录界面。
2022-12-28 13:55:15
1977
1
原创 ES6模块化改变前端的原生开发方式
ES6推出的模块化，使用方式有点类似 require.js，只需要引入一个入口文件即可，其他的js文件可以按功能创建及引入，export 导出方法属性，然后 import 引入使用，这个新特性可能在未来会引来原生开发的热潮，不需要三方框架（vue、react）即可自由使用模块化开发，而且目前浏览器市场快统一了，就连IE也放弃了自己的内核使用google webkit内核了，而且电脑也是默认配备了 IEAdge浏览器，想想就觉得爽。PS：使用模块化加载，需要服务器环境，也就是得通过 localhost 访
2022-05-31 16:21:21
294
原创 vue3.x页面功能拆分方式
vue3.x相对比vue2.x主要的应用区别在于setup的使用，这个也是vue3.x的特色，所有的功能都得通过vue钩子引入使用，因为 setup 语法糖环境是不支持 this 的，这种开发方式有点回到原始的感觉，针对小项目还好，但如果页面模块功能复杂，如果都放到一个文件里堆叠，不仅会造成可读性差，而且时间长了难以维护，所以这就需要进行按功能拆分了，方式同vue2.x一样，一个是按照组件拆分，一个是混入处理，还有就是通过vuex或api分离功能一、 组件可以把一些新增/编辑、配置、日志及公共操作等写到
2022-05-20 09:46:39
1385
原创 Vue3.x项目开发常用知识点
PS：以下知识点都是基于 vue3.x + typescript + element-plus + setup语法糖 使用的。一、定义组件属性const props = defineProps({ visible: { type: Boolean, default: false }})console.log(props.visible)[warning] 注意：defineProps 不用从vue引入，setup 语法糖环境会自动识别二、formatter简写在
2022-05-16 12:51:49
464
原创 如何有效的删除数组中符合条件的值？
项目开发比较常见的是删除数组中指定索引的值，代码如下：let arr = [1, 2, 3, 4, 5, 6, 7, 8]for(let i=0,len=arr.length; i < len-1; i++) { if(i === 2) { // 删除索引为2的值 arr.splice(i, 1) break }}console.log(arr) // [1, 2, 4, 5, 6, 7, 8]从上可以看出删除1个能通过 break 退出循序，但删除多个该如何处
2022-04-29 13:50:18
1586
1
原创 vue3.x从打包、部署到上线
一、前言作者采用的项目架构：vue3.x + typescript + element-plus + axios，知道这一点很重要，因为目前 vue3.x 和 element-plus 还在不断更新迭代中，可能后面又会有所变化，导致具体的解决方案也会跟着改变。具体版本：{ "dependencies": { "axios": "^0.26.1", "element-plus": "^2.1.4", "moment": "^2.29.1", "qs": "^6.10.
2022-04-24 12:42:34
8722
原创 vue3.x路由404通配处理
vue-router3.x通配规则vue2.x对应的vue-router3.x的404路由通配方式：{ path: '*', // 会匹配所有路径 name: '404', component: () => import('@/views/404/index.vue')}vue-router4.x通配规则上面的代码在vue3.x对应的vue-router4.x的路由通配中就没有效果了，需要改成这样才行：{ path: '/:error*', // /:error ->
2022-04-22 09:17:43
2983
原创 vue3.x+ts+vite2环境变量配置
在做项目环境变量配置前，可以先到官网回忆一下环境变量的基本使用，https://cn.vitejs.dev/guide/env-and-mode.html一、环境模式首先环境变量是可以分模式的，常用模式如下：.env # 所有情况下都会加载.env.local # 所有情况下都会加载，但会被 git 忽略.env.[mode] # 只在指定模式下加载.env.[mode].local # 只在指定模式下加载，但会被 git 忽略
2022-04-21 13:51:22
1452
原创 vuepress打包项目如何在express框架渲染
如果要在 express 项目上加一个 vuepress 写的文档应如何渲染？Vuepress 是 Vue 驱动的静态网站生成器1、.vuepress/config.js 修改 base 配置指定静态资源目录，如：test目录base: "/test/",2、打包去缓存配置package.json"scripts": { "build": "vuepress build docs --no-cache"},3、把打包目录 dist 复制到 express 项目 public 目录
2021-03-12 13:35:18
289
原创 动态polyfill和import
一、动态polyfill以前都是通过 babel-polyfill 一把梭，不管能不能用到，都全量处理，这样虽然方便，但也会造成资源浪费，所以出来了一个动态 polyfill 概念，根据项目需要指定要 polyfill 的特性，而且会根据浏览器是否支持来决定要不要 polyfill，这样性能会更好，如何指定要 polyfill 的特性，直接到 polyfill.io 勾选生成即可使用方式：<script src="https://polyfill.io/v3/polyfill.min.js?fe
2021-02-22 09:33:46
467
原创 微信小程序轮播图高度自适应
图片自适应在网站上是内置好的，只需要设置宽度即可，但在微信小程序非要做一个封装，高度不是随宽度自适应，真是操蛋，不过谁叫在人家的平台的搞呢，还是不得不屈服于小马哥的淫威啊。。在微信小程序上实现图片自适应需要配合javascript脚本，也就是需要动态计算才能实现，具体修改如下：先看下view层是什么样的<view class="zh-carousel" style="margin-top: {{carouselMarginTop}}rpx"> <swiper indicato
2020-11-04 09:40:08
571
原创 vuex-router-sync如何使用
简单来讲vuex-router-sync插件就是将vue-router的状态同步到vuex中一、安装npm下载地址：https://www.npmjs.com/package/vuex-router-sync> npm i vuex-router-sync --save二、使用import { sync } from 'vuex-router-sync'import store from './vuex/store'import router from './router'sy
2020-10-31 20:14:17
358
原创 selenium之nodejs入门使用
selenium详解见此篇：https://www.fenxianglu.cn/article/343有了对selenium文档的了解，这里还需要做一个hello world演示，不然不知道怎么跑起来的，心里总觉得不舒服，所以下面介绍下基于nodejs的selenium启动使用首先nodejs是要安装的，这个直接到 https://nodejs.org/en/ 上下载安装即可然后创建 test/index.js 目录文件根据selenium写官网下载页的指示，这里需要下载JavaScript的依赖包
2020-10-30 17:42:39
1831
原创 做项目容易但运营真的好难
直到做了一个平台后，现在真的明白当初华为为什么没有推自己的手机操作系统，因为用户生态很难建立，用户已经习惯了现有的ios和android操作系统，再出来一个新的操作系统，可能就只有国内人买账了，因为对应操作系统上的应用真的太多了，一个个重头开发或兼容到新的操作系统上确实不是一两年能实现的，而以互联网的快速发展来看，恐怕等不急，时代变化太快。自认做的平台还不错，扁平化清晰高亮（此时有种老王卖瓜的感觉，嘿嘿），各种SEO站长平台也做了，但一天的访问量确实没有多少，一方面可能是因为技术领域偏向及文章内容的问题，
2020-10-30 13:01:25
199
1
原创 微信小程序反编译
一、相关环境安装1、下载 nodejs2、下载反编译nodejs脚本 wxappUnpacker 提取码：mduo 3、下载 夜神模拟器4、下载 RE文件管理器RE：Root Explore二、获取.wxapkg文件在夜神模拟器里安装微信和RE文件管理器PS：把前面下载好的RE文件管理器直接拖到夜神模拟器安装即可接下来设置模拟器的超级权限，如下图：然后在模拟器微信里搜索想要获取的小程序，在微信中运行一下后，直接切回模拟器桌面运行RE文件管理器，按照下面的目录结构找文
2020-10-29 17:13:50
933
原创 phantomjs入门使用
PhantomJS是一个命令行工具。确保您熟悉命令提示符或PowerShell(在Windows上)或终端(在macOS和Linux上)的使用。这个指令假设PhantomJS已经安装并放置在路径的某个地方(例如，Windows用户请参阅本教程)。官网：https://phantomjs.org/中文网：http://wenku.kuryun.com/docs/phantomjs/index.html一、下载地址：https://phantomjs.org/download.html选择对应操
2020-10-28 22:03:06
316
原创 android webview与原生交互
demo.html完整示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</title></head><body> &
2020-10-13 09:36:33
298
原创 proto语法说明
官方文档：https://developers.google.cn/protocol-buffers/docs/proto3一、基本语法示例/* 头部相关声明*/syntax = "proto3"; // 语法版本为protobuf3.0package = "com.xxx.foo"; // 定义包名import "common.proto"; // 导入common.protooption java_package = "com.xxx.foo"; // 指定java包// 搜索请求
2020-09-25 16:42:55
2441
原创 QQ浏览器video标签不显示第一帧解决
因为在QQ和微信上打开网址链接都是用QQ浏览器打开的，但QQ浏览器做了很多限制还存在一些问题，导致一些功能不能正常使用，就像下面这个video标签一样显示不出来第一帧[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ly4FbIa5-1599532123748)(/img/bVbMzo6)]一、尝试前端解决视屏加载完成，获取第一帧作为poster海报当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件。&l
2020-09-08 10:28:58
1256
原创 webpack externals配置方式介绍
webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。简单理解就是不通过npm下载的类库，在html文件中以script引入，然后在页面中使用import导入的这种方式以vue开发环境为示例在public/index.html中引入moment.min.js类库<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <met
2020-09-07 09:39:30
3451
原创 vue slot与slot-scope示例
注意：以下示例以最新版本vue为主，最低需要2.6.0版本一、具名组件简单示例hello world<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><div id="js_app"> <foo> <template slot="title"> <strong>{{ msg }}</s.
2020-09-03 09:08:23
332
原创 vue递归组件自定义事件
关于递归组件只调用一次的问题，解决方案示例：父组件：parent.vue<template> <div id="app"> <Tree :data="data" @nodeClick="nClick"></Tree> </div></template><script> import Tree from './components/tree.vue' export default {
2020-08-28 17:11:48
564
原创 资源预加载
一、DNS prefetchDNS prefetching通过指定具体的URL来告知客户端未来会用到相关的资源，这样浏览器可以尽早的解析DNS。<link rel="dns-prefetch"href="//example.com">二、Preconnect和DNS prefetch类似，preconnect不光会解析DNS，还会建立TCP握手连接和TLS协议<link rel="preconnect"href="http://css-tricks.com">三、Pr
2020-08-27 15:23:21
163
原创 经纬度高度转ThreeJS的xyz坐标
// 计算位置function calcPosition(lng, lat, alt) { var phi = (90-lat)*(Math.PI/180), theta = (lng+180)*(Math.PI/180), radius = alt+200, x = -(radius * Math.sin(phi) * Math.cos(theta)), z = (radius * Math.sin(phi) * Math.sin(
2020-08-25 11:36:33
1773
1
原创 根据proto文件生成pb和pb_service文件
假如有一个HelloWorld.proto文件，内容如下：syntax = "proto3";option java_package = "ex.grpc";option objc_class_prefix = "HSW";package helloworld;service Greeter { rpc sayHello (HelloRequest) returns (HelloReply) {} rpc printAge (printAgeRequest) returns (p
2020-08-24 17:37:40
1304
原创 argc 和 argv的区别
argc和argv对应的英文全称是arguments counter 和 arguments vector (arguments 参数 counter 计数器 vector向量)argc: 整数,用来统计你运行程序时送给main函数的命令行参数的个数argv[ ]: 字符串数组，用来存放指向你的字符串参数的指针数组，每一个元素指向一个参数#include<stdio.h...
2019-12-31 14:05:06
743
原创 [前端] touch事件方向判断
// 触摸开始$("body").on("touchstart",function(e){e.preventDefault();startX=e.originalEvent.changedTouches[0].pageX,startY=e.originalEvent.changedTouches[0].pageY;});// 触摸移动$...
2019-12-29 10:36:52
124
原创 [php] thinkphp 开发注意
Thinkphp开发总结，在开发过程中难免会遇到 一些小问题，这些小问题需要注意一下，由于本人好忘，所以在这里做个记录，也希望能帮到大家1、在使用自动验证的时候，指定附加规则callback时，使用echo/die()/exit()来输出 （function应该也是这样的）代码示例：// 自动验证protected $_validate = array( arr...
2019-12-27 13:51:40
102
原创 rgb与hex颜色互转绝对实用
网站开发中难免会遇到颜色互转的情况，如改变图片颜色等。。先来看下rgb转hex的方法function rgb2hex(){ hexColor = "#"; var rgb = Array.prototype.slice.call(arguments); var rgbLength = rgb.length; for(var i=0; i<rgb...
2016-12-20 16:05:18
2803
原创 php自动加载文件
为了解决页面多文件引入的麻烦及难以管理 ，PHP提供了几种自动加载文件方案，这里会一一介绍 自动加载最好做到类名和文件名一至，高手路过。。首先贴下目录结构 方法一：使用__autoload()魔术函数app/home.php<?phpclass home { public static function say() { echo 'hello'; }}auto
2016-07-08 16:35:33
1002
1
原创 shadow dom介绍
什么是shadow dom？首先我们先来看看它长什么样子。在HTML5中，我们只用写如下简单的两行代码，就可以通过<video>标签来创建一个浏览器自带的视频播放器控件。<video controls=""> <source src="https://mdn.mozillademos.org/files/2587/AudioTest%20...
2016-05-24 20:44:44
1019
原创 js解析xml
XML文件<?xml version="1.0" encoding="utf-8" ?><DongFang> <Company> <cNname>1</cNname> <cIP>1</cIP> </Company> <Company&...
2016-05-12 11:34:07
999
原创 判断浏览器（微信、微博、QQ）、操作系统、横竖屏等
以下都是干货，没有别的费话，相信搞过前端的都懂得一些，这里只是记录了一遍，以便在忘时查阅，十分有用，希望对你有所帮助，代码如下：一、根据浏览器判断URL跳转var browserOfMobile = { wapUrl: 'http://m.baidu.com', versions:function(){ var u = navigator.us...
2016-04-22 18:18:09
8089
原创 node使用buffer生成图片
buffer是node里的一个模块，这个模块的出现是因为js没有阅读和操作二进制数据流而出现的1、buffer是什么及作用？ Buffer顾名思义叫缓冲区，用于存储速度不同步的设备或优先级不同的设备之间传输数据；通过buffer可以减少进程间通信需要等待的时间，当存储速度快的设备与存储速度慢的设备进行通信时，存储慢的数据先把数据存放到buffer，达到一定程度存储快的设备再读取buffer的数据，
2016-04-07 18:07:36
15254
转载 [nodejs] ccap验证码
用node做web开发很多都可能碰到需要验证码的地方，之前在github上搜索，有一些比如node-captcha等的类库，都需要依赖第三方的图形处理库或者软件，像我之前安装cario这个图形库时，真是费了好大一番劲，但是其实我们只用到了这些图形库的一点点小功能，比如图片的尺寸修改裁剪，或者生产验证码。先介绍一下CImg这个c++的图形库吧，CImg是一个跨平台的C++的图像处
2016-04-06 14:34:36
2649
转载 js实现浏览器通知功能
概述Notification API是浏览器的通知接口，用于在用户的桌面（而不是网页上）显示通知信息，桌面电脑和手机都适用，比如通知用户收到了一封Email。具体的实现形式由浏览器自行部署，对于手机来说，一般显示在顶部的通知栏。如果网页代码调用这个API，浏览器会询问用户是否接受。只有在用户同意的情况下，通知信息才会显示。下面的代码用于检查浏览器是否支持这个API。
2016-03-29 11:55:36
12789
2
转载 js监听手机屏幕亮度、震动、方向变化
Vibration APIVibration接口用于在浏览器中发出命令，使得设备振动。显然，这个API主要针对手机，适用场合是向用户发出提示或警告，游戏中尤其会大量使用。由于振动操作很耗电，在低电量时最好取消该操作。使用下面的代码检查该接口是否可用。目前，只有Chrome和Firefox的Android平台最新版本支持它。navigator.vibrate = navi
2016-03-29 11:48:47
8531
转载 [node] ejs模板手册
嵌入式 JavaScript 模板安装$ npm install ejs特性<% %> 用于控制流<%= %> 用于转义的输出<%- %> 用于非转义的输出-%> 结束标签用于换行移除模式带有<%_ _%>的控制流使用空白字符移除模式自定义分隔符 (例如，使用 '' 代替 '')包含客户端支持
2016-03-08 16:23:12
1188
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人