- 博客(101)
- 收藏
- 关注
RSS订阅原创 js 如何通过代码复制内容到粘贴板
问题描述解决办法1.document.execCommand(“Copy”)代码如下，复制即可：let oInput = document.createElement("input")// 这里的value就是你想要复制的值，碰到复杂的对象的时候可以JSON.stringify(value)来转成字符串复制oInput.value = valuedocument.body.appendChild(oInput)oInput.select()document.execCommand("Co.
2022-04-02 17:18:00
2934
3
原创 HTML ＜img＞ 标签
HTML img 标签问题描述最近碰到这样一个问题：在用JS将网页导出为word的时候，有几张特别大的图片(3000*4000)，但是呢在网页上用css对图片大小进行了限制，例如现在图片的显示大小只有600*500。然后导出到word中发现图片大小仍然是3000*4000，就导致图片在word中显示不正常。然后在导出word的时候可以设置一些简单的css样式，发现样式对文字有用，对图片就没啥用(width，height)。然后就导致上述出现的问题。解决方案...
2022-04-02 17:16:07
539
原创 前端xmp-js解析图片xmp信息
功能介绍前端有Exif.js用于解析图像基础信息，但是对于一些比较特殊的图像信息，例如大疆无人机所拍摄得到的图像，它会在图像中添加xmp信息用来保存设备的一些额外信息，例如朝向等等。xmp-js就是一个可以用来解析图片xmp信息的第三方库。功能实现1.安装依赖yarn add xmp-js// 或者npm install xmp-js2.示例代码const reader = new FileReader()reader.onload = e => { let xmp =
2022-03-21 16:03:57
1577
原创 Cesium 无法加载出地球
Cesium 无法加载出地球问题描述Cesium 无法加载出地球，在控制台中看到这样一条报错信息：401错误，不可用的token值。解决方案1.注册一个免费的账户网址：https://cesium.com/ion/2.创建一个token值3.在代码中添加token在你的初始化地球代码前面添加一行下面的代码：Cesium.Ion.defaultAccessToken = '你的token'...
2022-02-12 10:35:55
1383
原创 前端图片信息解析Exif.js
图片信息解析Exif.js功能说明Exif.js适用于利用JavaScript读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO感光度、GPS地理位置等数据。功能实现API方法Exif.getAllTags(file)其中，file指的是图片文件对象。获取到上面解析过后的对象后，常用属性如下所示(详细属性含义说明)：属性名含义ImageWidth图片宽度ImageHeight图片高度Make拍摄设备品牌Model拍摄设备型
2022-02-10 09:57:16
1562
原创 从零开始安装，配置nginx
从零开始安装，配置nginx最近在学习一手nginx，作为一个新手把nginx的安装流程给走了一遍。nginx安装1.下载nginx首先去nginx的官方网站，并去到下载页面：下载页面中分为两种版本，我们下载Stable version版本的最新版即可：右键nginx-1.20.1最新版，复制链接地址。在服务器中指定的目录文件夹中，即你想要安装nginx的目录，运行下面的命令来下载安装包：wget https://nginx.org/download/nginx-1.20.1.tar.g
2021-11-16 14:48:31
2315
原创 微信小程序view等标签元素点击出现闪光效果
微信小程序view等标签元素点击出现闪光效果1.问题描述最近在搞微信小程序自己做一个view的按钮效果时，碰到view在点击的时候会出现背景高亮的效果，如下图所示：2.解决办法在全局样式文件app.wxss中添加一行代码即可解决：page { ... // 将点击后的背景高亮颜色设置为透明 -webkit-tap-highlight-color: rgba(0,0,0,0);}...
2021-11-13 23:34:25
1874
原创 React 中的 Fragment 标签
React 中的 Fragment 标签介绍React.Fragment组件能够在不额外创建 DOM 元素的情况下，让 render()方法中返回多个元素。使用代替div作为最外层，可做不可见的包裹元素。主要的作用就是避免了多层嵌套的div标签。import react, { Component, Fragment } from 'react'...render() { return ( <Fragment> <h1>Hello&
2021-10-18 16:18:25
829
原创 axios token权限认证请求机制，前端实现无感刷新
axios token权限认证请求机制涉及到登陆后token存储本地，axios全局配置请求头，axios请求拦截器和处理器。
2021-09-24 14:38:26
1143
原创 天地图引擎加载自定义WMTS图层
天地图引擎加载自定义WMTS图层问题描述最近在开发过程中碰到在天地图引擎中叠加自定义的WMTS图层，天地图官网API：天地图JavaScript API 4.0在代码示例中添加自定义图层只有一行代码：var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" + "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TIL
2021-09-22 20:56:27
2837
原创 React ref用法
React ref官方文档1.介绍Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。DOM 节点：就是平常所说的能在页面中直接获取到的原生DOM节点。在 render 方法中创建的 React 元素：通过React中的render()方法创建出来的虚拟DOM。2.使用均在基于ts的React项目中使用：import React, { Component, createRef } from 'react';interface Ref
2021-09-17 16:09:22
406
原创 十六进制下的(6+2) 8位数颜色代码
十六进制下的(6+2) 8位数颜色代码8位数十六进制颜色代码平常我们在写代码用到颜色的时候，经常写的是，六位十六进制代码例如：白色：#FFFFFF黑色：#000000网易云红色：#E20000如果要加上颜色透明度，可能会用到opacity常见写法同时设置背景色和透明度<div className={'color'} style={{backgroundColor: '#E20000',opacity: '0.2'}}> <span>文字</span>
2021-09-03 16:27:21
10654
2
原创 React 类组件 与 函数式组件 + Hooks
React 类组件类组件式我们经常用到的组件形式，也是React最基础的组件形式。类组件拥有自己的状态state(存储数据的仓库)和状态改变函数setState(在仓库中操作数据的管理人员)，能够很方便地对页面上的数据进行各种操作。函数式组件 + Hooks函数式组件相对于类组件比较轻量，写起来也更加方便，在平常开发中更多的用在一些小的数据展示组件上面。但是，函数式组件它没有和类组件一样的state，setState，不能维持所谓的状态state。因此，在函数式组件中的数据操作显得比较复杂，一般需要调
2021-08-26 16:57:08
543
原创 React 逻辑式导航 的实现(不刷新路由跳转)
React 逻辑式导航问题描述React中的路由大多是用React-router来实现的。但是标签和标签往往仅限于声明式路由，即往往写在标签中，用于主体界面之间的内容切换。如下所示：<Router > <Switch> <Route exact path={"/"} component={Login} /> <NavigationBar> <Switch> {pageList.map((item
2021-08-24 12:00:17
1024
2
原创 分享一个微信小程序编辑页面的WXML模板
分享一个微信小程序编辑页面的WXML模板最近在进行微信小程序开发的时候经常会碰到编辑页面的搭建，大致格式如图所示：顶部：返回按钮和确认按钮，在中间还可以自行加上一些别的元素。中间部分：编辑的标题和内容底部：显示内容的字数或者另外一些别的操作(例如添加图片，设置日期等等…)模板文件WXML:<!--pages/addArticle/addArticle.wxml--><view class="header"> <view class="backBox"
2021-08-17 21:40:24
1288
原创 前端地图坐标系详解
1.地图类型国外国外一般就是GPS，谷歌地图国内百度地图，高德地图，腾讯地图，搜狗地图，天地图…2.坐标系类型WGS84坐标系最常见的GPS，用的是WGS-84坐标系，也是原始坐标体系。一般用国际标准的GPS记录仪记录下来的坐标，都是GPS的坐标。GCJ-02坐标系国测局02年发布的坐标体系。又称火星坐标系。火星坐标系就是在84坐标系的基础上进行了一次加密偏移所得到的坐标系。在中国，必须至少使用GCJ-02的坐标体系。比如腾讯，高德都在用这个坐标体系。GCJ-02也是国内最广泛使用的坐标体
2021-08-10 14:50:50
2150
2
原创 前端js代码实现截图功能
前端js代码实现截图功能据我所知，屏幕截图大致可以分为两种类型。一种是真-屏幕截图，也就是我们平常QQ，微信，钉钉等社交工具里面所用到的截图。也就是说它能把我们看到的东西截取下来，所见即所得。另一种是通过获取网页DOM元素的截图。它的原理就是获取到网页上的DOM元素，再将他们放到canvas画布里面，最后再又画布转为图片，这样就实现了屏幕截图的功能。目前有好多方法可以实现此功能，一 一 介 绍 ：1.html2canvas方法(最方便，最常用)html2canvas官网html2canvas
2021-08-04 10:22:41
7568
1
原创 项目开发在vscode里面拉取，推送代码
1.在gitee上项目新建一个自己的分支yyz2.在本地新建文件夹拉取代码命令：拉取yyz分支下的代码：git clone -b yyz gitee地址拉取master分支下的代码：git clone gitee地址
2021-08-04 09:39:04
9672
1
原创 Antd报错Attempted import error: ‘Search‘ is not exported from ‘antd‘
报错信息Attempted import error: ‘Search’ is not exported from ‘antd’代码import { Search } from "antd";错误原因
2021-07-15 10:11:21
2569
原创 微信小程序中使用VantWeapp组件库
微信小程序中使用VantWeapp组件库官方快速上手文档1.新建项目2.初始化项目普通项目如果不是云开发的项目：那么直接在根目录下执行命令：npm init一路回车(如果需要自己配置项目基本信息也可以)。在根目录下就会生成一个package.json文件。云开发项目在miniprogram文件夹下执行初始化命令。3.安装组件库执行命令：npm i @vant/weapp -S --production4.配置组件库在详情—本地设置中勾选使用npm模块。在工具栏中选择工具—
2021-06-26 10:57:26
365
原创 基于网易云音乐API的微信小程序——网愈芸音乐
网愈芸音乐一.项目说明二.项目环境准备三.项目初始化一.项目说明前段时间，网抑云的梗被许多人说道，但是作为一个网易云音乐的资深使用用户，我个人觉得网易云这一款小小的音乐软件也能治愈着我们芸芸众生中的每一个平凡人。因此，想着做一个听歌的网愈芸音乐小程序，另外还打算用上云开发来实现**“治愈芸芸众生”**的功能。二.项目环境准备开发工具：微信开发者工具界面UI组件库用到的是Vant Weapp：Vant Weapp网易云开发接口文档：网易云开发接口文档接口的基地址为：baseURL文档中的地
2021-05-30 09:29:20
7703
29
原创 Vue实战电商系统-七.数据统计
Vue实战电商系统-七.数据统计数据统计1.基本页面布局和路由配置2.安装Echarts并渲染图表3.数据统计1.基本页面布局和路由配置同之前的一样就不说了。2.安装Echarts并渲染图表1.首先在可视化面板中安装运行依赖Echarts。2.接着按照Echarts教程进行布局使用。导入Echarts：import echarts from 'echarts'布局Echarts容器：<template> <div> <!-- 面包屑导航区域 -
2021-05-19 10:03:47
572
原创 Vue实战电商系统-五商品管理
Vue实战电商系统-五商品管理五.分类管理1.新建goods_cate子分支并上传码云2.商品管理-商品分类1.新建文件并配置路由2.页面布局3.获取分类列表数据4.将数据渲染在树形表格控件中3.商品管理-商品列表4.商品管理-分类参数五.分类管理1.新建goods_cate子分支并上传码云git branchgit checkout -b goods_categit push -u origin goods_cate2.商品管理-商品分类1.新建文件并配置路由components/g
2021-05-19 10:03:17
528
原创 Vue实战电商系统-四权限管理
Vue实战电商系统-四权限管理四.权限管理1.权限管理-用户列表1.新建分支并推送2.新建rights.vue并配置路由3.权限管理-权限列表的页面布局4.数据获取并渲染5.权限管理业务逻辑分析2.权限管理-角色管理四.权限管理1.权限管理-用户列表1.新建分支并推送在开发一个新功能模块之前，首先要创建一个新分支rights并把它推送到码云上的云端仓库中。首先检查一下当前是否处于主分支master：git branch接着创建一个新分支rights(权限管理)并切换到新分支：git che
2021-05-19 10:03:02
398
1
原创 vue实战
vue实战1.项目概述1.功能模块电商后台管理系统大致可以分为以下几个功能模块：用户登录，退出登录用户管理权限管理角色列表权限列表商品管理商品列表分类列表参数管理订单管理数据管理2.开发模式采用的开发模式是前后端分离的开发模式。其中前端项目是基于Vue技术栈的SPA(单页面应用)项目。前端技术栈主要有：vuevue-routerElement-UIAxiosEcharts后端技术栈主要有：Node.jsExpressJwt(状态保持的
2021-05-19 10:02:23
1145
原创 ReactRouter
ReactRouterReactRouter1.安装2.使用3.动态传值4.动态传值25.重定向6.ReactRouter嵌套路由7.后台动态获取路由配置ReactRouter1.安装npm install --save react-router-dom2.使用return ( <Router> {/* ul内部的相当于是导航栏 <Route></Route>才是跳转语句 */} {/* 每个Ro
2021-05-18 21:44:07
132
原创 微信小程序预览页面功能无法实现？
微信小程序接口功能无法实现，页面无法正常显示微信小程序在开发者工具中预览时功能无法实现？？？但是真机调试的时候却可以实现，体验版小程序和正式上线版小程序也无法实现一些接口功能。解决办法1.如果小程序中涉及到一些request的请求接口，记得在开发者工具中把不校验合法域名勾选上。2.另外注意，小程序的接口不允许http，只支持https。3.仅仅是https还不够，正式版和体验版上的接口功能实现还需要将接口地址添加到开发管理——开发设置——服务器域名——request合法域名中去。否则，手机预览或者
2021-05-18 21:31:35
2089
原创 小程序发布上线全流程(包含小程序怎么通过审核)
小程序在开发完成后，需要上传代码，设为体验版本(功能测试)，提交审核，发布上线这几个基本步骤。接下来用自己的亲身经历一一详细介绍！！！小程序发布上线全流程1.上传代码2.设为体验版本3.提交审核微信小程序审核规范规则4.发布上线...
2021-05-18 21:25:55
31503
47
原创 微信小程序获取全局变量获取不到，只得到undefined
首先申明全局变量在app.js中申明，如下格式：App({ globalData: { // 当前正在播放的歌曲对象 nowPlayingSong: {}, // 播放列表 playingSongList: [], // 播放模式 random,singleloop,order,listloop，默认随机播放 playingSongMode: 'random' }, onLaunch: function () {在app.js页面调用的话直接
2021-04-12 21:06:37
4939
原创 vue+Element-ui快餐店pos系统
vue 2.0项目-快餐店pos系统视频地址：vue 2.0项目-快餐店pos系统1.项目搭建1.新建项目新建一个空文件夹AwesomePos并在VScode中打开。首先安装一下vue-cli：npm install vue-cli -g要验证是否安装成功的话输入：vue -V，如果出现版本号说明安装成功。然后是用脚手架初始化项目(因为项目文件夹已经建好了所以webpack后面不用再跟参数了)：vue init webpack然后是进行一些初始化的项目配置：项目名(要小写)，项目作者
2021-01-29 14:43:14
898
原创 vue-router
学习视频地址：技术胖vue-router视频博客参考：技术胖vue-router视频博客1.Vue-router入门1.安装Vue-routervue-router是一个插件包，所以我们还是需要用npm来进行安装的。npm install vue-router --save-dev如果使用vue-cli新建项目中已经选择安装了vue-router，那这里不需要重复安装了。2.分析router/index.js文件在src/router/index.js文件，这个文件就是路由的核心文件。i
2021-01-26 15:57:12
147
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人