前端
文章平均质量分 57
前端开发
天空还下着雪
这个作者很懒,什么都没留下…
展开
-
前端接入keycloak的几种方式
最新内容请看原文链接:https://fenxianglu.cn/article/493。这种方式就像使用QQ登录一样,登录会跳转到 keycloak 给的登录界面。其他接口请求需要加 token 验证(keycloak 使用的是。这个是针对 vue 项目封装的 keycloak-js。进行 access_token解析。这种试可以使用自定义的登录界面。原创 2022-12-28 13:55:15 · 2185 阅读 · 1 评论 -
ES6模块化改变前端的原生开发方式
ES6推出的模块化,使用方式有点类似 require.js,只需要引入一个入口文件即可,其他的js文件可以按功能创建及引入,export 导出方法属性,然后 import 引入使用,这个新特性可能在未来会引来原生开发的热潮,不需要三方框架(vue、react)即可自由使用模块化开发,而且目前浏览器市场快统一了,就连IE也放弃了自己的内核使用google webkit内核了,而且电脑也是默认配备了 IEAdge浏览器,想想就觉得爽。PS:使用模块化加载,需要服务器环境,也就是得通过 localhost 访原创 2022-05-31 16:21:21 · 336 阅读 · 0 评论 -
vue3.x页面功能拆分方式
vue3.x相对比vue2.x主要的应用区别在于setup的使用,这个也是vue3.x的特色,所有的功能都得通过vue钩子引入使用,因为 setup 语法糖环境是不支持 this 的,这种开发方式有点回到原始的感觉,针对小项目还好,但如果页面模块功能复杂,如果都放到一个文件里堆叠,不仅会造成可读性差,而且时间长了难以维护,所以这就需要进行按功能拆分了,方式同vue2.x一样,一个是按照组件拆分,一个是混入处理,还有就是通过vuex或api分离功能一、 组件可以把一些新增/编辑、配置、日志及公共操作等写到原创 2022-05-20 09:46:39 · 1510 阅读 · 0 评论 -
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 · 487 阅读 · 0 评论 -
如何有效的删除数组中符合条件的值?
项目开发比较常见的是删除数组中指定索引的值,代码如下: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 · 1625 阅读 · 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 · 10558 阅读 · 0 评论 -
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 · 3040 阅读 · 0 评论 -
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 · 1516 阅读 · 0 评论 -
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 · 342 阅读 · 0 评论 -
动态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 · 563 阅读 · 0 评论 -
微信小程序轮播图高度自适应
图片自适应在网站上是内置好的,只需要设置宽度即可,但在微信小程序非要做一个封装,高度不是随宽度自适应,真是操蛋,不过谁叫在人家的平台的搞呢,还是不得不屈服于小马哥的淫威啊。。在微信小程序上实现图片自适应需要配合javascript脚本,也就是需要动态计算才能实现,具体修改如下:先看下view层是什么样的<view class="zh-carousel" style="margin-top: {{carouselMarginTop}}rpx"> <swiper indicato原创 2020-11-04 09:40:08 · 607 阅读 · 0 评论 -
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 · 404 阅读 · 0 评论 -
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 · 1919 阅读 · 0 评论 -
做项目容易但运营真的好难
直到做了一个平台后,现在真的明白当初华为为什么没有推自己的手机操作系统,因为用户生态很难建立,用户已经习惯了现有的ios和android操作系统,再出来一个新的操作系统,可能就只有国内人买账了,因为对应操作系统上的应用真的太多了,一个个重头开发或兼容到新的操作系统上确实不是一两年能实现的,而以互联网的快速发展来看,恐怕等不急,时代变化太快。自认做的平台还不错,扁平化清晰高亮(此时有种老王卖瓜的感觉,嘿嘿),各种SEO站长平台也做了,但一天的访问量确实没有多少,一方面可能是因为技术领域偏向及文章内容的问题,原创 2020-10-30 13:01:25 · 215 阅读 · 1 评论 -
微信小程序反编译
一、相关环境安装1、下载 nodejs2、下载反编译nodejs脚本 wxappUnpacker 提取码:mduo 3、下载 夜神模拟器4、下载 RE文件管理器RE:Root Explore二、获取.wxapkg文件在夜神模拟器里安装微信和RE文件管理器PS:把前面下载好的RE文件管理器直接拖到夜神模拟器安装即可接下来设置模拟器的超级权限,如下图:然后在模拟器微信里搜索想要获取的小程序,在微信中运行一下后,直接切回模拟器桌面运行RE文件管理器,按照下面的目录结构找文原创 2020-10-29 17:13:50 · 982 阅读 · 0 评论 -
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 · 348 阅读 · 0 评论 -
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 · 322 阅读 · 0 评论 -
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 · 2700 阅读 · 0 评论 -
QQ浏览器video标签不显示第一帧解决
因为在QQ和微信上打开网址链接都是用QQ浏览器打开的,但QQ浏览器做了很多限制还存在一些问题,导致一些功能不能正常使用,就像下面这个video标签一样显示不出来第一帧[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ly4FbIa5-1599532123748)(/img/bVbMzo6)]一、尝试前端解决视屏加载完成,获取第一帧作为poster海报当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件。&l原创 2020-09-08 10:28:58 · 1344 阅读 · 0 评论 -
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 · 3528 阅读 · 0 评论 -
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 · 357 阅读 · 0 评论 -
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 · 599 阅读 · 0 评论 -
资源预加载
一、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 · 174 阅读 · 0 评论 -
经纬度高度转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 · 2002 阅读 · 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 · 1361 阅读 · 0 评论 -
[前端] node UDP 用户数据报测试
UDP(user datagram protocol)用户数据报协议dgram是datagram的简写服务端:udpServer.jsvar dgram = require("dgram");var server = dgram.createSocket("udp4");server.on("error", function(err) { conso原创 2015-11-26 17:21:37 · 634 阅读 · 0 评论 -
nodejs express4.x 创建项目
前言Nodejs是一个年轻的编程框架,充满了活力和无限激情,一直都在保持着快速更新。基于Nodejs的官方Web开发库Express也在同步发展着,每年升级一个大版本,甚至对框架底层都做了大手术。在Express4时,替换掉中件间库connect,而改用多个更细粒度的库来取代。带来的好处是明显地,这些中间件能更自由的更新和发布,不会受到Express发布周期的影响;但问题也是很的棘手,不兼转载 2015-03-30 10:59:29 · 985 阅读 · 0 评论 -
nodejs + express4.x + mongodb创建项目
第1部分 – 15分钟安装如果你真的是从零开始学,那就花点时间先把环境搭建起来吧。这不难,我用的是Win8,所以这看上去跟那些用Mac和Ubuntu或者其它*nix系统的教程有点区别,不过大致是一样的。第1步 – 安装Node.JS这很容易,进入Node.js官方网站,点击绿色的大Install按钮,它会自动检测你的系统并给你一个正确的安装文件的下载。(如果没有,点击Dow转载 2015-03-30 16:57:22 · 2152 阅读 · 1 评论 -
nodejs express3.x 创建项目
从零开始nodejs系列文章从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发。Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎。chrome浏览器就基于V8,同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express,可以帮助我们迅速建立web站点,比起PHP的开发效率更高,而且学习转载 2015-03-30 10:50:43 · 956 阅读 · 0 评论 -
nodejs + express4.x + mongodb 创建登陆
node:是运行在服务器端的程序语言,表面上看过去就是javascript一样的东西,但是呢,确实就是服务器语言,个人觉得在一定层次上比c灵活,java就不提了。反正你只要认为node可以干很多事就行了,绝对不只是web开发。express:这货呢,就是node的一种框架,node有很多的开源框架,express是一个大神开发的(这尊神已经移驾到go语言的开发去了)。express可以让你更方转载 2015-03-31 15:46:51 · 1681 阅读 · 0 评论 -
[前端] CSS不常用的属性及选择器
一、介绍(所有知识及要点都在代码里了)二、代码<!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>css不常用属性</title> <style type="text/css"> ...原创 2015-04-22 14:39:52 · 692 阅读 · 0 评论 -
[前端] nodejs 文件系统解析
前提:需要nodejs环境一、目录1. readFileSync()2. writeFileSync()3. exists(path, callback)4. mkdir(), writeFile(), readFile()5. mkdirSync(), writeFileSync(), readFileSync()6. readdir()7. stat()...原创 2015-04-22 15:43:45 · 784 阅读 · 0 评论 -
[前端] 鼠标点击+鼠标浮动效果(有图有真相)
一、依赖jQuery框架二、代码:CSS:<style>* { margin: 0; padding: 0; font-family: '微软雅黑';}li { list-style: none;}.page-select { position: relative; width: 276px; hei...原创 2015-04-23 14:43:01 · 3844 阅读 · 0 评论 -
[前端] DOM对象属性及cookie定义
DOM的含义DOM是文档对象模型(Document Object Model)的简称,它的基本思想是把结构化文档(比如HTML和XML)解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构,都有规范的对外接口,以达到使用编程语言操作文档的目的(比如增删内容)。所以,DOM可以理解成文档(HTML文档、XML文档和SVG文档)的编程接口。转载 2015-04-15 15:58:45 · 878 阅读 · 0 评论 -
[前端] 进阶之路 分7段
【背景】如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧;如果你是做了两三年WEB产品前端研发,迷茫找不着提高之路,看这篇文章吧;如果你是四五年的前端开发高手,没有难题能难得住你的寂寞高手,来看这篇文章吧;WEB前端研发工程师,在国内是一个朝阳职业,自07-08年正式有这个职业以来,也不过三四年的时间。这个领域没有学校的正规教育,没有行内成体系的理论指引,转载 2015-04-15 11:57:03 · 729 阅读 · 0 评论 -
[前端] 滚动监听导航效果
一、依赖:引用jQuery框架二、要点:$(window).scroll(function() { // 判断$(this).scrollTop()的滚动高度是否大于某个div的距顶高度 });三、代码:<!DOCTYPE HTML><html> <head> <title>导航定位</title> <...原创 2015-04-21 16:46:21 · 3748 阅读 · 1 评论 -
[前端] nodejs中全局变量&global对象
作为一个javascript初学者,都在不知不觉的使用全局变量,用了许久之后,前辈告诉我们不要用去全局变量,然后想尽办法不使用全局变量,使用模块化的思路去解决问题。但是到了nodejs中来,模块的全局变量只能在模块用,不能拿到外面去用,当然这是非常好设计,作为天生就能模块化的封装,还能有效的隔离各个模块的耦合,符合我对模块化的期待。事实上在nodejs的实现代码中发现,require一个模转载 2015-04-17 17:05:45 · 7171 阅读 · 0 评论 -
[前端] JSON.stringify() JSON.parse() charAt() charCodeAt() fromCharCode()
一、本章主要讲的是JSON.stringify() JSON.parse() charAt() charCodeAt() fromCharCode()方法JSON.stringify()用于从一个对象解析出字符串var arr = [1, 2, 3, 4, 5];console.log(JSON.stringify(arr)); // 输出 '[1, 2, 3, 4,...原创 2015-04-28 10:14:04 · 843 阅读 · 0 评论 -
[前端] canvas绘制视频
一、概要<!--视频地址:http://www.w3school.com.cn/example/html5/mov_bbb.*用到的video事件: play pause 和 ended-->二、HTML<video id="video" controls width="270" autoplay> <sour...原创 2015-05-04 10:35:09 · 4454 阅读 · 5 评论 -
[前端] H5页面制作经验
1. 响应式web设计说到这个,移动开发面对的屏幕尺寸那叫一个丰富,其中安卓阵营就够让人头痛的。我们在PC端常用的两种布局方式就是固定布局和弹性布局,前者设置一个绝大多数电脑能正常显示的固定宽度居中显示,后者则采用百分比。关于这两者讨论的文章很多,有兴趣的自己查阅下,我今天要介绍的就是相信你已经听过的”响应式布局”,响应式布局意味着媒体查询,这个在css2就已经出现的东西随着html5、c转载 2015-05-04 15:39:29 · 3301 阅读 · 0 评论