qq_38847914的博客

原创 vue和react通过vite创建项目

【代码】vue和react通过vite创建项目。

原创 js将html网页转换成PDF并解决了图表文字被切割的问题

js将网页转成pdf格式，并解决高度不固定分页时文字被切割问题

原创 electron-egg 如何把任意网站打包成桌面软件

以前，开发一个桌面软件要花费大量的人力和时间。现在随着Electron的出现，大大简化了开发门槛。今天，给大家介绍一个工具，让你5分钟之内就把一个网站变成一个可安装的桌面软件。所需工具electron-egg是一个简单、快速、功能丰富的跨平台桌面软件开发框架。

原创 element plus 输入框样式模仿Material-UI

【代码】element plus 输入框样式模仿Material-UI。

原创 vscode插件

/ “prettier.useEditorConfig”: false, // 是否使用editorConfig配置文件中的设置。“prettier.bracketSpacing”: true, // 在对象字面量的花括号内侧使用空格作为间隔。“prettier.trailingComma”: “none”, //禁止随时添加逗号。“prettier.printWidth”: 200, //每行代码的限制长度。“prettier.proseWrap”: “never”, // 文本换行。

原创 canvas基本使用

原创 vue如何使用depcheck进行依赖检测

【代码】vue如何使用depcheck进行依赖检测。

原创 黑白电视效果的404页面

【代码】黑白电视效果的404页面。

原创 http-server使用

【代码】http-server使用。

原创 Vue 全景图 photo-sphere-viewer的使用以及改变图片

Vue 全景图 photo-sphere-viewer的使用以及改变图片

原创 vue双向数据绑定原理

vue双向数据绑定原理详解

原创 vue前端上传下载进度条

vue前端上传下载进度条

原创 JavaScript实现监控上传和下载进度

js实时监控上传下载进度

原创 通过css实现流式布局

-moz-page-break-inside: avoid;-webkit-column-break-inside: avoid;break-inside: avoid; /*break-inside: avoid; 避免元素内部断行并产生新列*/-moz-column-count: 2; /* Firefox */-webkit-column-count: 2; /* Safari or Chrome */column-count: 2; /* 将 div 元素中的文本分为2列，并规定列间1r

原创 vue使用mqtt

目前3.0的版本比较稳定npm install mqtt@3.0.0yarn add mqtt@3.0.0<script>import mqtt from 'mqtt'export default { data() { return { connection: { host: '192.168.113.88', port: 8083, endpoint: '/mqtt', clean: tru

原创 js事件循环机制微宏任务执行过程（超详细）

**1.js因为是单线程语言，为了避免阻塞设计出了事件循环机制2.js任务分为同步任务和异步任务，同步任务会放到主线程中，而异步任务会放入任务队列中3.异步任务分为宏任务和微任务，js会将宏任务放入宏任务队列中，微任务放入微任务队列中，第一轮先执行宏任务队列里面的任务，如果此时宏任务队列的其中一轮结束后，调用栈清空了，事件循环机制又发现微任务，并且会清空微任务队列，才会看一下需不需要渲染，此时将进入下一轮宏任务，如果最后微任务队列中没有微任务了，此时宏任务队列中还存在多个宏任务将会依次放入调用栈中进行执

原创 vue中文版和国际版如何切换百度地图和谷歌地图

定义两个对象分别gisGoogle，gisBaidu用于导航之间的切换，代码只是记录一下自己的项目，整的有点乱，但是根据自己的项目需求可按照这样的思路去实现封装//用于谷歌地图var gisGoogle = { marker: null, markers: [], path: null, infoWindow: null, //初始化地图 initMap(divId) { map = new google.maps.Map(document.getElementById

原创 js递归树,修改树的key

setTree (org) { const haveChildren = Array.isArray(org.children) && org.children.length > 0; return {　　　　 //分别将我们查询出来的值做出改变他的key title: org.groupName, label: org.groupName, value: org.id, data: {...org},

原创 vue使用百度地图

// bmpgl.jsexport function BMPGL(ak) { return new Promise(function(resolve, reject) { window.init = function() { // eslint-disable-next-line resolve(BMapGL) } const script = document.createElement('script') scri

原创 geojson全国各省市区地图数据

geojson全国各省市区地图json数据

原创 微信小程序图片压缩或者进行Base64转码

压缩网址，压缩完之后可进行下载 https://tinypng.com/

原创 小程序request请求接口封装（常用）以及使用方法

小程序request请求接口封装（常用）以及使用方法第一步：在小程序目录中新建一个utils文件，里面在新建一个js文件用来编写封装的请求方法第二步：封装接口//封装接口post from表单类型function way1(url, data, cb) { wx.showLoading({}) //加载动画 wx.request({ url: '公用域名' + url, //域名 （据情况而定） url为地址 data: data, //所需要传的

原创 微信小程序登入授权步骤

页面部分<view wx:if="{{isHide}}"> <view wx:if="{{canIUse}}" > <view class='header'> <image src='/images/1.jpg'></image> </view> <view class='content'> <view>申

原创 vue项目中如何使用websocket(非常详细的教程)

<script>export default { data() { path:"ws://localhost:8999/websocket/", ws:{}, }, methods: { //init函数可在页面加载的时候就进行初始化或者根据自己的业务需求在需要打开通讯的时候在进行初始化 init() { // 实例化socket，这里的实例化直接赋值给this.ws是为了后面可以在其它的函数中也能调用websocket方法，例如：this.ws.c

原创 vue中如何使用富文本编辑器和如何自定义菜单栏

1、下载Vue-Quill-Editornpm install vue-quill-editor --save 复制页面代码即可完成引入和初始化<template> <div class="edit_container" style="height: 350px;"> <quill-editor styl...

原创 node+express+mysql实现简单的数据增删改查

第一步dome地址：.首先安装express,安装步骤npm install -g express-generator #需先安装express-generator npm install -g express express --version #最后验证是否安装成功 项目结构如下第二步1.创建mysql数据库名称oa 表名 user表结构如下：2.项目根...

原创 mysql安装步骤

①安装服务：mysqld --install 　　②初始化：　mysqld --initialize --console 　　③开启服务：net start mysql 　　④关闭服务：net stop mysql 　　⑤登录mysql：mysql -u root -p 　　　　Enter PassWord：(密码) 　　⑥修改密码：alter...

原创 前端网页优化

性能优化概述从输入 URL 到页面加载完成，完整的链路1.DNS 解析2.TCP 连接3.HTTP 请求抛出4.服务端处理请求，HTTP 响应返回5.浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户整个性能消化http层面优化DNS 解析:DNS 实现域名到IP的映射。通过域名访问站点，每次请求都要做DNS解析。目前每次DNS解析，通常在200ms以下。一般采用DN...

原创 uniapp上拉刷新，下拉加载更多

需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。{ "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app", ...

原创 git常用命令和使用步骤

建立本地仓库git init查看用户名和邮箱地址：git config user.namegit config user.emailgit commit告诉Git，把文件提交到仓库git status来查看是否还有文件未提交第一步：是使用 git add 把文件添加进去，实际上就是把文件添加到暂存区。git add readme.txt（文件名）第二步：使用git c...

原创 js对数组几种常见的操作方法

第一：读取数组 for循环方法如下： var ay=[1,"sdsd","sdsd"]for (var i=0;i<ay.length;i++) {console.log("index:"+i+" "+ay[i]) //index：0 1 index：1 sdsd index：2 sdsd}第二：合并数组 concat方法如下：var ar...

原创 vue中如何使用less和sass

vue中使用less当所有东西都 准备好之后 ：第一步：安装less依赖，npm install less less-loader --save第二步：安装less依赖，npm install -g less第三步：main.js 全局引入var Less = require('Less'); 第四步： 在组件中 <style scoped lang=...

原创 jq遍历数组返回一个新的属性名数组

var data2=[];data1.map((value,index,arry)=>{ data2.push({ 'name': value.latitude, 'value': value.longitude })})

原创 js自动换算成rem

(function (doc, win, pwidth, prem) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = funct...

原创 vuex的核心概念和使用方法

vuex核心概念state 数据源，载体getters 用于改变state的值，派生出多个数据源mutation 唯一可以提交可以改变state的状态，也就是数据的属性值actions 提交的是mutation,用commit提交 而不是直接变更状态，可以包含任意异步出操作modules 拆分成多个模块state通过计算属性改变值computed:{ count(){ /...

原创 router路由的定义和使用方法详解

在routes.js写法import Todo from '../view/todo/todo.vue'export default[ { path:'/', redirect:'/app' //redirect这是一个默认路由 }, { path:'/app', component:Todo }]在router.js写法,导入import Router ...

原创 axios请求方式详解

axios核心安装命令 cnpm i axios --saveaxios.request()//一个完整的get请求axios.get("",{//需要提交给后台的数据 params:{ userID:"" },//请求头中携带token进行后台验证 headers:{ token:'' }, before:function(){ console.log("此...

原创 时间戳转换成年月日的形式

timeFormate(timeStamp) { let year = new Date(timeStamp).getFullYear(); let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMon...

原创 json字符串、json对象、数组 三者之间的转换

<script>//json字符串、json对象、数组 三者之间的转换 let jsonStr = '[{"id":"01","open":false,"pId":"0","name":"A部门"},{"id":"01","open":false,"pId":"0","name":"A部门"},{"id":"011","open":false,"pId":"01","...

原创 Vue.js实现tab切换效果

<div id="app"> <!-- 推荐这种写法--> <ul class="tab-tit"> <li v-for="(title,index) in tabTitle" @click="cur=index" :class="{active:cur==index}">{{title}}</li> ...