如光不息丶-CSDN博客

原创 VUE3+mqtt封装，解决多页面使用需重复连接等问题

在做的一个项目中多个页面都需要使用到mqtt接收消息，但这样的话每个页面就都需要连接一次mqtt，并且要再次配置options信息、订阅主题、接收消息，非常的不方便，因此琢磨将mqtt封装到vuex中，使其可以多页面通用，这样只需要连接订阅一次，接收到的消息可以存储在vuex中。

2022-11-21 11:29:11 4422 1

原创 Jmeter安装、配置及压力测试

jmeter之安装、配置及压力测试

2022-10-06 17:28:35 3009 1

这里的按钮用的是element的button<div class="btn" v-for="(btn, index) in buttonList" :key="index"> <el-button :type="btn.type" @click="btnEvent(btn.btnEvent)" :icon="btn.icon" > {{btn.name}} </el-button></div>//定义按钮

2022-05-25 09:35:16 3017

原创 pgsql数据库自动备份、删除及恢复

参考文章：点此跳转第一部分：数据库备份与删除步骤一：编写备份脚本mkdir /home/postgresql_backupcd /home/postgresql_backupvim pgsql-bak.sh#!/bin/bashecho "开始执行 PostgreSql 数据库的备份！"nowtime=$(date "+%Y%m%d%H%M%S")export PGPASSWORD="数据库密码"echo "时间：" $nowtimeset timeout 500#输入IP 端口、

2022-04-12 13:45:03 5726

原创 Ubuntu20.04下Nginx的Web项目部署流程

参考文章：点此跳转步骤一：安装Nginxsudo apt-get install nginx步骤二：处理打包后的文件（dist）将打包后的文件放入/var/www文件夹中，把文件放到这个目录下可以通过IP很方便的访问。下面的demo.com为举例域名，实际情况记得替换成你自己的域名sudo cp -r /home/hdc/dist /var/www/demo.com然后再将这个文件夹给定权限和所有权：sudo chown -R www-data:www-data /var/www/dem

2022-04-07 17:18:47 3521

原创 Ubuntu20.04下Nginx的.NetCore项目部署流程

本文旨在介绍在Ubuntu20.04系统中配置Nginx服务，并进行.NetCore项目部署。第一部分：.NetCore项目部署参考文章：点此跳转步骤一：安装.NET Core SDK下面是Ubuntu20.04版本的.net环境配置，其它版本参考官方文档1、打开终端并运行以下命令，将 Microsoft 包签名密钥添加到受信任密钥列表，并添加包存储库：wget https://packages.microsoft.com/config/ubuntu/20.04/packages-microso

2022-04-07 16:50:42 4084

原创浅析JS中的赋值/浅拷贝/深拷贝

在了解深浅拷贝之前，需要先明白一个概念：堆和栈堆和栈堆和栈都是内存中划分出来用来存储的区域。栈（stack）为自动分配的内存空间，它由系统自动释放；而堆（heap）则是动态分配的内存，大小不定也不会自动释放。JS中的数据类型基本数据类型存放在栈中基本数据类型：undefined，boolean，number，string，nullvar num = 123;var str="abc";以上数据在栈中的存储形式如下图：引用类型的数据存放在堆中JS中除了基本数据类型以外的都是对象，如对象

2022-03-21 15:52:47 460

原创《网络是怎样连接的》笔记梳理----第一章 Web浏览器(1)

这是本系列文章的第二篇，前面的文章分别是：1.[网络是怎样连接的]笔记梳理----引读全书探索之旅脉络图：注：本系列文章旨在与大家探讨网络连接的全过程，因此会省略许多细节性问题，有兴趣的小伙伴可以阅读原著（强烈推荐！！！）第一章 Web浏览器1.1 生成 HTTP 请求消息1.1.1 探索之旅从输入网址开始网址，准确来说应该叫 URL，如果我说它就是以 http:// 开头的那一串东西，恐怕大家一下子就明白了，但实际上除了“http:”，网址还可以以其他一些文字开头，例如“ftp:”

2021-11-22 09:49:20 130

原创《网络是怎样连接的》笔记梳理----引读

本系列文章为笔者阅读计算机网络入门书籍《网络是怎样连接的》整理的笔记，分享出来希望能够与大家一起探讨，同时也是对知识进行一次梳理。《网络是怎样连接的》是一本非常适合像笔者这种对计算机网络不甚理解的小白启蒙的书籍。只要能进下心来慢慢看，都能看懂，不会像许多其它的计算机网络科普书籍一样越看越困，还看不懂（可能还是本人太菜了）。注：本系列文章旨在与大家探讨网络连接的全过程，因此会省略许多细节性问题，有兴趣的小伙伴可以阅读原著（强烈推荐！！！）废话不多说，下面就开始这本书籍的探索之旅。本篇文章主要是介绍这整本书

2021-11-22 09:35:22 298

原创 VUE3 移动端滑动模块的实现

需要实现的需求如下直接上代码HTML:<div class="container" id="container"> <div class="controlDiv" id="controlDiv"> <div class="centerCircle" id="centerCircle" @touchstart="start" @touchmove="move" @touchend="end"

2021-11-18 09:17:41 1065

原创 VUE3中实现点击按钮刷新页面

这里要先了解一下provide和injectprovide ：向子组件以及子孙组件传递数据。接收两个参数，第一个参数是 key，即数据的名称；第二个参数为 value，即数据的值inject ：接收父组件或祖先组件传递过来的数据。接收一个参数 key，即父组件或祖先组件传递的数据名称下面我们通过依赖注入（provide和inject）实现自定义页面刷新事件原理：给app.vue中router-view绑定v-if事件，在函数中控制v-if的值在短时间内由true到false再到true,从而使

2021-05-04 14:47:02 5213 1

原创 VUE3.X中使用vue-clipboard3实现一键复制功能

该方法同时适用于移动端以及PC端安装：npm install --save vue-clipboard3在需要的组件中引入并使用：<template> //我这里用了vant组件库的button按钮，你可以根据自己需要将click绑定在需要的元素上 //clickBtn(value)中的value为需要复制的原始数据 <van-button square text="复制" type="success" class="delete-button" @click='cli

2021-04-14 15:43:15 4661

原创前端面试题（HTML/CSS/JS）

前端面试题（HTML/CSS/JS/ES6/HTTP/网络协议）HTML相关面试题：1、HTML5的新特性（常问）：2、语义化的理解3、块级标签和行内标签的区别：4、form中的input设置为readonly和disable的区别5、什么是WebSocket6、localstorage sessionstorage和cookie的区别（常问）基本概念三者区别CSS相关面试题：1、浅谈css中一个元素如何在其父元素居中显示（常问）2、清除浮动的方法（常问，最常用的4种）5、网页布局有哪几种，有什么区别6、c

2021-03-22 19:30:03 660

原创 vue+ElementUI(el-pagination)+express实现分页功能（前后台）

前台部分1、安装elemenUI、axios：npm i element-ui -Snpm install axios --savenpm install vue-axios --save在main.js中引用：import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css'; //样式文件单独引入Vue.use(ElementUI); #全局注册import axios from "ax

2020-12-22 17:49:39 744 3

原创 vue通过vue-fullpage实现全屏滚动

1、安装vue-fullpage插件：npm install --save vue-fullpage.js2、main.js中引用：import 'fullpage.js/vendors/scrolloverflow';import VueFullPage from 'vue-fullpage.js';Vue.use(VueFullPage);3、使用：<template> <div> <full-page :options="opt

2020-12-22 16:53:32 5755 14

原创 Express通过multer中间件实现多图片上传功能

Multer是一个Node.js中间件，用于处理 multipart/form-data 类型的表单数据，主要用于文件上传，注意：Multer中间件不会处理任何非 multipart/form-data 类型的表单数据。Multer会自动添加一个body对象及file或files对象到 express框架的request 对象，fifile或fifiles对象包含表单上传的文件信息。通过表单上传文件时需要注意的是表单的提交方式只能是POST。1、安装multer中间件npm install multe

2020-12-22 16:40:36 845

原创 vue中使用v-viewer实现图片预览查看功能

1、安装v-viewernpm install v-viewer --save2、在main.js中配置如下：import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer, { defaultOptions: { zIndex: 999 }})3、在需要使用图片查看的文件中使用如下：//images是一个数组，用来存放需要预览的图片的路径<viewer :images=

2020-12-22 15:33:20 829

原创解决VUE刷新页面后页面title失效问题

1、在 router/index.js 中，使用meta属性的title设置好每个路由对应的title值{ path: '/ihlist', name: 'IHList', component: IHList, meta: { // 页面标题title title: '韶关市非物质文化遗产共享平台' } },2、安装监听标题插件npm install vue-wechat-title --save3、在

2020-12-22 15:28:43 2285 1

原创 vue-quill-editor+ElementUI（el-upload）实现自定义图片上传

对于vue-quill-editor的安装和基本用法不了解的可以看我另一篇文章，这里就不赘述了，直接进入正题：https://blog.csdn.net/weixin_42088314/article/details/109767214当插入图片时由于vue-quill-editor的默认操作是将图片转为base64编码，所以当图片比较大，提交后台时参数过长，导致提交失败或者无法存进数据库等情况。于是我们就需要自定义图片上传来实现需求。解决思路1、使用elementUI的el-upload来上传

2020-12-22 11:30:10 1593 5

原创 VUE中实现父组件向子组件动态传值

1、父组件传值：<div class="editor"> <qul-editor :intrd="content"></qul-editor></div>（ :intrd=“content”）为需要传递的值，其中content是data中的数据。2、子组件接收并监听数据是否发生改变：<div>{{content}}</div>//接受父组件传递的数据props:{ intrd: String},data(

2020-12-18 10:45:59 2566

原创 vue+express+ElementUI实现单图片上传至服务器

一、初始化后台项目这里通过手动创建项目，你也可以通过脚手架创建。创建一个文件夹font-server，执行以下初始化命令npm init -ynpm install expres body-parser //安装express和body-parsernpm install multer --save //Multer 是一个node.js中间件，主要用于上传文件。在font-server目录下新建文件app.js，新建文件夹upload、api。在api文件夹下新建文件upLoadImg.j

2020-12-09 09:30:57 1155

原创 vue使用Vue-Quill-Editor富文本编辑器(附加工具栏title、图片大小修改功能)

本来是想用tinymac富文本编辑器的，不过参考网上的教程弄了很久都没有解决图片预览的问题。所以就改用了Vue-Quill-Editor，发现这个使用起来还是很方便的。下面上教程：1、安装Vue-Quill-Editornpm install vue-quill-editor -s2、封装Vue-Quill-Editor组件自行创建一个quEditor.vue文件，写入下面代码：<template> <div> <quill-editor v-model

2020-11-18 15:29:19 1791 18

原创 VUE项目中引入视频插件（video.js）

1、安装video.jsnpm install video.js2、在main.js中引入// 引入video.js插件import Video from 'video.js'import 'video.js/dist/video-js.css'Vue.prototype.$video = Video3、完成以上步骤后就可以直接使用啦 <template> <div> <!-- vjs-big-play-centered可使播放按钮居中，

2020-11-10 21:12:16 1714

原创 vue项目中引入外部字体（超详细）

1、创建一个conmon文件夹，再在其下创建一个fonts文件夹，用于存放字体文件，此处以方正清刻本悦宋简体“FZQKBYSJW.ttf”为例，“FZQKBYSJW.ttf”为所下载的字体文件。2、再在fonts文件夹下创建一个"font.css"文件，并写入样式（如下图）。@font-face { font-family: "fzqkbysjt"; src: url('FZQKBYSJW.ttf') format('truetype'); font-weight: normal; f

2020-11-10 20:46:35 4172 6

原创 VUE中实现点击按钮刷新页面的方法

VUE中实现点击按钮刷新页面的方法vue中provide和inject 用法通过依赖注入实现页面刷新源码片段：vue中provide和inject 用法首先我们需要先了解一下vue中的依赖注入provide 和 inject概念：作用：用于父组件向子孙组件传递使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据，这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间

2020-11-03 10:58:14 11730 4

weixin_42088314的博客