- 博客(79)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 Vue 中 Axios 的封装和 API 接口的管理
参考文章https://mp.weixin.qq.com/s/__riUPMh4yRB9J57VGQO4g1.http.jsimport axios from "axios";import { Message } from "element-ui";import _ from "lodash";// create an axios instanceexport default function createRequest(config) { config = _.assign(
2021-05-27 16:17:22
133
原创 JavaScript前端代码规范
HTML篇#1. 标准模板<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <lin
2021-03-15 15:56:23
1225
1
原创 vscode 插件推荐 - 前端开发
必备#HTML SnippetsHTML标签智能提示#HTML CSS SupportHTML标签内样式的智能提示#JavaScript(ES6) code snippetsES6语法智能提示以及快速输入#Path Intellisense输入路径时自动补全#VeturVue 的语法高亮、错误检查、格式化等工具集合#eslint代码格式化，发现语法错误和低效的编程实践扫描和提示，还可以保存时自动格式化，需要团队定制统一的规范#Prettier配合Vet
2021-03-15 15:54:08
182
原创 常用知识点（好记性不如烂笔头，站在岸上学不会游泳）
1.闭包https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures2.this指向https://blog.51cto.com/11871779/21295223.http协议详解https://www.cnblogs.com/an-wen/p/11180076.html4.flex布局http://www.ruanyifeng.com/blog/2015/07./flex-grammar.html5.pr
2021-03-02 23:16:28
414
转载 JS进阶必备
01.数组扁平化数组扁平化是指将一个多维数组变为一个一维数组const arr = [1, [2, [3, [4, 5]]], 6];// => [1, 2, 3, 4, 5, 6]方法一：使用flat()const res1 = arr.flat(Infinity);方法二：利用正则const res2 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',');但数据类型都会变为字符串方法三：正则改良版本
2020-10-28 17:03:46
217
原创 uniapp中使用vite-plugin-uni代码混淆
需求：正常情况下，未经混淆压缩过的代码打包后，校验元素时显示如下，这就导致项目整个结构目录暴露在外部，甚至有些隐私信息轻松就可以查到，造成信息泄露风险，极不安全。尤其是to C开放的项目，将未混淆过的代码暴露至外部，风险更甚。是一个用于构建 uni-app 项目的 Vite 插件，它提供了代码混淆的能力。要使用混淆代码，你需要在项目中配置。请注意，这只是混淆的一个基本配置，根据你的项目需求，你可能需要调整。以下是一个简单的配置示例，展示了如何在。中的其他选项来优化混淆效果。以移除混淆后的代码注释。
2024-10-29 10:23:49
234
原创 uniapp中地图定位功能实现的几种方案
缺点：关闭定位后延时很久，无法控制定位延迟时间，流程卡顿。获取手机定位权限方法不支持h5。实现思路：uni.getLocation获取经纬度后调用接口获取城市名。3.浏览器内置对象navigator.geolocation。缺点：仅支持https协议链接，http协议下无法正常定位。1.uniapp自带uni.getLocation。缺点：dom拼接百度map降低性能，初始化时慢3秒。优点：比较稳健，功能支持群面。优点：方便快捷，直接调用。
2023-11-04 11:26:04
3130
原创 uniapp项目实战开发笔录（h5+公众号）
1.HbuilderX下载后，从工具中可直接创建uni项目，架构已配置好2.官方文档要过一遍跨端兼容 | uni-app官网3.uniapp 使用npm安装依赖输入 npm init -y 初始化后即可安装依赖了例如： npm install @dcloudio/uni-ui 后即可在项目中看到node_modules包以及依赖了4.uniapp H5唤起APP跳转指定页面 wx-open-launch-appuniapp H5唤起APP跳转指定页面 wx-open-l.
2022-04-08 15:12:37
4541
原创 前端两种播放视频的方式
两种方式，需要弹窗的话，可以结合layer使用<html> <head> <script src="vue.js"></script> <style type="text/css"> video{width: auto;max-height: 100%} &...
2022-02-22 17:16:13
20594
原创 使用nvm安装管理node版本
1.使用场景：当本地项目过多时，不同项目创建使用不同的node版本，我们需要安装不同版本的node，如果反复安装卸载会很麻烦，nvm由此而生。2.下载地址：下载地址：https://github.com/coreybutler/nvm-windows/releaseswindows用户选择 nvm-setup.zip 下载安装解压后为可执行文件，安装时会检测本地node，提示点是3.打开nvm安装目录，运行nvm -V 查看版本4.其他使用指令$ nvm -h //查..
2021-10-25 18:21:26
720
原创 vue中Echarts实现伪3D地图
1.需求3d切面地图，颜色渐变，选中阴影，可切换地市，点击时展示地理数据，由于echarts 3d地图无法渐变，地图比例大小效果不好改成理想效果，所以通过伪3d方式实现。最终实现如下图：2.代码<template> <div ref="myEchart" class="map-echart"> </div></template><script>import echarts from 'echarts'export def
2021-10-21 12:28:41
3921
原创 vue中created(),mounted()与activated()区别及应用
created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次（作用：可用于页面预加载数据）；mounted()：页面初始化完成后，加载完dom后触发，与created一样只会触发一次（可用于页面加载数据）activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据（作用：可解决页面返回上一页后，重新进入此页面的数据刷新问题
2021-08-10 09:57:25
5412
转载 Vue动态路由传参和监听路由
Vue动态路由传参query传参params传参//定义Detail路由{ path: '/detail/:id', name: 'Detail' component: () => import('@/views/Detail.vue')}1234561.query方式传参和接收参数传参:this.$router.push({ path:'/detail/:id', query:{ id:i...
2021-08-06 16:45:20
2464
原创 数据可视化之Echarts开发常用网站
1.makeapie丰富的开源图例作品：https://www.makeapie.com/explore.html2.3D环状饼图https://www.cnblogs.com/KaypoGeng/p/14338434.html3.解决echarts开发过程中常见问题https://blog.csdn.net/qq_36711388/article/details/994096794.树形菜单封装(常结合echarts使用)https://www.jb51.net/artic
2021-08-05 15:13:47
1128
1
原创 vue通过监听动态设置页面样式
data(){ return { topHeight: 300, clientHeight: 0 }}mounted(){ this.clientHeight=`${document.documentElement.clientHeight}` let that=this window.onresize=function(){ that.clientHeight=`${document.documentElemen.
2021-07-20 09:50:35
695
原创 vue-treeselect极速实现级联选择功能
显示效果如下：使用方式：1.先安装npm install --save @riophae/vue-treeselect2.组件中引入//importthecomponentimportTreeselectfrom"@riophae/vue-treeselect";//importthestylesimport"@riophae/vue-treeselect/dist/vue-treeselect.css";3.组件注册components...
2021-05-27 10:21:36
2111
原创 折线图组件封装及数据处理
//折线图组件封装及数据处理<template> <div class="pancelDiv" :id="id" :style="{ height: height, width: width }"></div></template><script>import * as echarts from 'echarts'export default { props: { id: { .
2021-05-24 16:40:26
261
原创 基于Ant Design of Vue的级联导航菜单组件
1.显示效果如图2.数据格式3.组件代码<template> <!-- 数据菜单 --> <!-- 这里面只写到了第四层， 需要用到多少，按照这个格式 续写下去就行，核心就是如果 下面还有一层，那么他只能是 这个标签a-sub-menu，只有根 节点才能用这个标签a-menu-item! 另外感觉可以优化的地方是可以将 template单独封装成组件，item
2021-05-18 23:05:02
1100
原创 git克隆代码ssl鉴权及密码输入错误后报错无法更新代码解决方法
1.https证书过期，需关闭git的https的验证git config --global http.sslVerify false2.控制面板->用户账户->管理您的凭据->Windows凭据,删除所有git:开头的凭据，克隆代码时提示重新输入账号密码，确认正确账号密码即可...
2021-05-13 18:22:59
418
原创 es6变量赋值及数据处理
1.修改对象中的元素const{phone,certType,certCode,birthday,name:driverName,gender:sex}=this.userInfo;2.增加或移除对象中的元素const original = { a: 1, b: 2 }const copy = { ...original, c: 3 } // copy => { a: 1, b: 2, c: 3 }const { a, ...noA } = copy // no...
2021-04-30 16:28:41
142
原创 css四种垂直居中方式
(1)margin:auto 法css:div{ width: 400px; height: 400px; position: relative; border: 1px solid #465468;}img{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0;}html:<div> <im.
2021-04-16 11:38:16
142
原创 elementUI el-table组件封装（自定义列）
<template> <div class="loading-table" v-loading="tableLoading"> <el-table :data="tableData" border stripe> <el-table-column type="index" label="序号" align="center" width="80"> <template slo.
2021-04-08 17:51:26
1680
6
转载 vue中异步函数async和await的用法
用 async/await 来处理异步 昨天看了一篇vue的教程，作者用async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await 已经被标准化，也是需要学习一下了。 先说一下async的用法，它作为一个关键字放到函数前面，async function timeout() { return 'hello world';}只有一个作用, 它的调用会返回一个promise对象。调用一下看看就知道了，怎么调用？async函数也是函数，所以它的...
2021-03-16 11:13:38
992
原创 百度地图开发demo
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {.
2020-10-14 12:12:12
207
原创 js深拷贝，删除复制添加节点dom
业务如下：dom中绑定循环数据深拷贝复制：copyThisDom(val, index) { const arr = JSON.parse(JSON.stringify(this.treatmentMethodData[index]));}删除节点：// 清除某一条数据val代表选定的当前数据，index代表数据下标 closeThisDom(val, index) { console.log('clean：', index) t
2020-07-07 15:03:13
717
原创 element级联选择器中获取当前选择node节点的两种方式
级联选择器一.官网给出的getCheckedNodes()方法this.$refs['cascaderAddr'].getCheckedNodes()打印效果如下：但是这种方式有一个弊端，就是无法获取到“搜索条件下”的node节点，打印时getCheckedNodes为undefined，这种情况下就需要用到第二种方式二.根据获取到的val值反查this.$refs.cascaderAddr.panel.getNodeByValue(val)打印如下：以上
2020-07-02 17:06:14
8675
8
原创 element多选级联回显
1.如果直接处理二维数据// 转换后的二维数组(多选级联回显) convert(arr) { var map1 = {}; while(arr.length) { let current = arr.pop(); // 会影响原数组 // console.log('current.relationId',map1[current.relationId]) map1[current.relationI
2020-06-28 09:51:23
1942
13
原创 Nginx安装部署及代理配置
1.使用nginx作为反向代理解决前后端分离时前端https,后端http造成访问无法被加载https://blog.csdn.net/qq_37105358/article/details/808545592.Nginx反向代理配置实例https://www.cnblogs.com/sxshaolong/p/11706223.html
2020-06-22 15:15:40
239
2
原创 vue响应式布局与自适应方案
layout布局https://blog.csdn.net/jack_bob/article/details/79813114vue自适应方案https://blog.csdn.net/linkea_i/article/details/81092243
2020-06-10 15:07:43
4177
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人