qq_39874538的博客

原创 vue2中使用FullCalendar注意事项以及配置项

<template><div class="fullCalendarStyle"> <FullCalendar :options="calendarOptions" ref="fullCalendar"/> </div></template><script>import '@fullcalendar/core/vdom' // solves problem with Viteimport FullCalendar f

原创 在Vue中使用websocket实现聊天

websocket聊天在Vue中使用了解websocket并使用websocket是什么？wevsocket自带属性如何使用:onopen,onclose,onerror,send,onmessage了解websocket并使用websocket是什么？ws是建立在TCP之上的一种协议;http也是建立在TCP上的一种协议;wss是建立在TLS(安全传输层协议)之上的协议，而TLS(安全传输层协议)是建立在TCP之上的；https是建立在TLS(安全传输层协议)之上的协议，而TLS(安全传输层

原创 vue使用Export2Excel导出excel表格

首先 你需要1个js和3个依赖包（js在文章最后可以自己创建然后复制粘贴）。1、安装依赖包npm install -S file-savernpm install -S xlsxnpm install -D script-loader2、复制文章最后的js代码到你自己的项目里3、在需要使用的地方使用如下方法： downEvent() { import('@/vendor1/Export2Excel').then(excel => { const tHeade

原创 动态获取数组中的节点

document.documentElement.scrollTop = this.$refs[`${'acc'+index}`][0].offsetTop

原创 详细讲解css3 利用transform-origin 实现圆点分布在大圆上布局以及旋转特效

首先 要使用transform-origin属性，必须使用transform 属性，其有很多属性，我们只需要用到transform的rotate属性（设置2D旋转角度），再搭配 transform-origin 设置其中心点。最后搭配css3动画属性animation。完成我们想要的效果。先上效果图：圆都是动态的。步骤如下：1、transform属性使用：我们只需要利用这个属性设置我们需要这个点在圆上的那个位置。transform:rotate(你需要的度数deg)。另外我们需要注意一个点（如果

原创 vsCode配置java开发环境

你本地需要先装好jdk，用java javac 命令查看是否安装。vscode需要安装3个插件：Debugger for JavaLanguage Support for Java™ by Red HatSpring Boot Tools装好后，你可以使用命令where java查看你jdk的安装位置然后需要配置你vscode的jdk,步骤如图：完成！...

原创 VUE递归组件传递参数到父组件，event bus方法

需要一个bus.js文件代码如下import Vue from 'vue';export default new Vue();在父组件中引入import bus from '@/api/bus.js'在created中使用：created() { bus.$on('addCondition', (type) => { this.checkBefor = type }) }子组件中使用import bus from '@/api/bus.js' //

原创 解决动态添加的路由页面刷新空白问题

今天这个项目全部由本人手搭的，之前都是直接用已经搭建好了的项目。导致有很多细节问题我不知道，自己也遇见过，相当于是理论大于实际。if (to.matched.length === 0) { // 配合下面的next({ ...to, replace: true })解决动态页面刷新时空白 axios.get('static/permission.json') .then(res => { console.log(eval(res.data))

原创 vue递归（像tree）

vue递归（像tree）效果图：步骤效果图：步骤思路： 你需要有一个组件，并且在main.js中全局注册，这样才能在组件自身内部使用自己，然后父级组件传递一个对象，子级渲染对象中的需要展示的数据，然后再把children数组传递给下一集。大致就是传递对象，渲染对象，循环数组，拿到对象，传递对象，渲染对象。组件： 代码过于简单不与粘贴全局注册：父级应用以及需要的数组样式...

原创 echarts地图，通过工具生成对应区域的json数据，例如成都市，锦江区

地址：http://datav.aliyun.com/tools/atlas/#&lat=30.269597347856156&lng=102.93679772748688&zoom=6.5

原创 微信小程序 wx.navigateBack页面返回修改上一级或多级页面参数

首先onChange: function (even) { //直接在wxml 中 绑定的点击事件 console.log(even, '参数打印') let pages = getCurrentPages(); let prevPage = pages[pages.length - 2]; console.log(prevPage, 'prevPage') // 上一页的参数 console.log(pages, 'pages') //当前页的参

原创 抓包工具Fiddler以及浏览器插件proxy的使用

提取码：f6ne谷歌插件安装：proxy压缩包解压后，点击设置----扩展程序----开发者模式----左上角 加载已解压的扩展程序然后点击右上角选择 “选项”，进入下一个页面操作如图：第二步，操作如图：到这里基本上 浏览器插件安装完毕了。接下来就是 抓包工具Fiddler了。Fiddler安装绿色版打开后，界面如下：点击 Fiddler.exe 直接运行，无需安装，打开后，会提示你是否更新，我们这里选择不更新，避免其他麻烦。接下来的操作如图：选择信

原创 码云将本地仓库和远程仓库关联起来

你需要在gitee上新建一个仓库,直接建立如下图的一个仓库，直接点击创建，然后那个http地址找到需要上传到该仓库的代码，在文件中输入git init // 初始化仓库git remote re origin //先删除，以防止其他远程链接占用git remote add origin http:*********** // 如果没有如何输出就表明成功git add . // 添加全部文件git commit -m '你提交时需要的备注'git push -u origin mast.

原创 vuex存取、全局存储、按需存储

vuex 存取，以及永久存储vuex 完整代码vuex的引入方式vuex 存取vuex 的全局存储如何使用这个领人愉快的插件呢？vuex 完整代码import Vue from 'vue'import Vuex from 'vuex'import VuexPersistence from 'vuex-persistedstate';Vue.use(Vuex)const vuexLocal = new VuexPersistence({ storage: window.localStora

原创 docker进阶教程----项目创建镜像以及本地访问

注册一个teambition的账号（可能需要企业认证，我个人的流水线没有）点击首页进入没有就创建一个新项目，然后将代码放入点击项目进入，点击加号，添加行云、飞流等点击新建流水线，选择完成创建后，点击构造镜像，进行配置。点击添加步骤，添加一个node.js构建，并在步骤里面添加一行代码,并且保证node.js在推送到阿里云之前cnpm run build去阿里云创建一个镜像仓库点击镜像构建推送至阿里云，完成配置（标签就是镜像版本号）8、打开服务器，输入命令，拉取

原创 阿里云申请个人免费的SSL证书

登录阿里云并进入SSL证书传送口：SSL证书传送口证书申请的时候，需要去域名管理控制台根据提示添加配置信息才能验证通过当审核通过后就可以下载证书了

原创 docker进阶教程-----概念理解

docker概念理解docker概念Docker的应用场景Docker 的优点1、快速，一致地交付您的应用程序2、响应式部署和扩展3、在同一硬件上运行更多工作负载Docker 包括三个基本概念如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入docker概念docker里

原创 vue实现中英文切换

中英文切换安装依赖：yarn add vue-i18n 或者 npm install vue-i18n --save-dev新建文件夹language，并在文件夹language下新建zh.js及en.js：【src/components/language/zh.js】module.exports = { language: { name: 'English' }, user: { login:'登录', registe

原创 VUE忽视页面警告

大家在使用vue开发时候会发现很多时候会因为一个规范问题而报一大堆的警告，使用工具快捷键后格式规范依然纯在问题，导致经常写一个项目警告上百个，严重影响开发效率和开发心情，这里我提供一种直接关闭代码规范检查的方法！...

原创 npm run build 打包报错

关闭版本检查在**semver.js(node_modules/semver/semver.js)**里Range.prototype.test = function(version) { // +++++++++++++++++++++++++++++++ liuqing 2018.04.23 return true; // +++++++++++++++++++++++++++++++ liuqing 2018.04.23 if (!version) return fals.

原创 搭建Nginx服务器教程（超详细），工具（xshell+xftp+阿里云服务器centos系统）

1、默认你工具（xshell+xftp）都下好并安装好了，并且你需要拥有买个服务器（需要用到公网IP）2、你需要配置好自己的阿里云账号密码，并在xshell中连上，远程主机是你自己的公网ip地址，并输入账号密码看到如下界面表示连接成功3、进入正式的安装环节3.1.0、安装gityum install git -y 全局安装3.1.1、下载nvm是node版本控制器git clone git://github.com/creationix/nvm.git ~/nvm3.

原创 利用canvas制作一个vue的签名版

废话不多说，直接上代码，注释详细<template> <div class="sign-canvas" ref="putImageData"> <canvas id="canvas" width="400" height="600" @mousedown="canvasDown($event)" @mousemove="canvasMove($event)" @mouseup="canvasUp()" @mouseleave="ca

原创 vue脚手架，引入高德地图

我们选择用vue-amap这个组件，因为他是基于vue和高德的组件，当然你可以选择直接使用高德地图的方法。这里我就以vue-amap这个组件为实例。 第一步:你需要引入依赖npm install vue-amap --save第二步：需要初始化并且需要你再高德地图上获取的key如果不知道如何获取高德地图的key自行去官网查看教程，这里就不详细解答了 需要在mian.js中导入并初始化第三步：就可以在组件中是使用了注意：如果需要在地图上添加上标记点需要在<el-amap..

原创 gitHub高效率查找项目之常用命令

gitHub高效率查找项目之常用命令命令总结命令总结swoole 普通搜索in:name swoole 搜索仓库的名称，搜索仓库名称包含swoole关键字的所有项目in:description swoole 搜索描述中包含swoole关键字的项目in:readme swoole 搜索readme文件中包含swoole关键字的项目star:>100 swoole 搜索swoole关...

原创 vue-cli使用命令行创建项目

vue-cli使用命令行创建项目 //查看版本npm -v6.10.2 #升级 npmcnpm install npm -g # 升级或安装 cnpmnpm install cnpm -g # 最新稳定版$ cnpm install vue # 全局安装 vue-cli$ cnpm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webp...

原创 @click.native.prevent解答

@click:绑定按下事件native:在组件的标签中使用，否则@click会被视作从监听的是来着组件的自定义事件例如:router-link的作用是单纯的路由跳转，会阻止click事件，你可以试试只用click不用native,事件是不会触发的。此时加上.native，才会触发事件。prevent:阻止默认事件...

原创 JS日期时间过滤器

dateFormat(time) { var date=new Date(time); var year=date.getFullYear(); var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1; var day=date.getDate()<10 ...

原创 VUE上传图片到阿里云

VUE上传图片到阿里云安装依赖npm i ali-oss --save新建一个aliyun.oss.client.js 文件，在里面首先导入依赖/** * 阿里云oss上传工具 * * @description conf: { region: null, accessKeyId: null, accessKeySecret: null, bucket: null

原创 方法封装以及调用

方法封装以及调用需要创建一个util的文件夹 在里面创建一个.JS后缀的文件，里面放好自己定义的方法，使用export或者 使用export default 抛出，区别在于1、export的对外接口有多个，而export default对外接口只能有一个，所以export default定义了多个方法，需要用对象的方法导出。2、export在其他页面引入 import {export} from ‘./export’;export default在其他页面引入 import export from

原创 npm run build:prod --report打包文件空白解决办法

原创 JS 时间过滤器

JS 时间过滤器dateFormat(time) { var date=new Date(time); var year=date.getFullYear(); var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1; var day=date.getDate...

原创 解决uni-app中转换成小程序 无法拿到iv和encryptedData等参数的问题

uni-app用户信息授权获取需要修改自己的appid 将由uni-app转换成的小程序代码 中project.config.json中的appid换成自己的就可以拿到了，使用的方法就是uni-app的原生方法 爱你呦。虽然浪费了一天的时间 但还是值得纪念下 哈哈哈...

原创 vue 九宫格抽奖

vue抽奖系统html部分<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,u...

原创 vue 留言板

vue留言板记主要使用的是利用本地储存 localStorage<template> <view> <!-- 广告栏 --> <view class="ad">泡面早报|知乎推出商品推荐榜单、阿里收购企业协调知乎推出商品推荐榜单、阿里收购企业协调知乎推出商品推荐榜单、阿里收购企业协调</view> <!-- 输入...