自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(61)
  • 收藏
  • 关注

原创 【CI/CD】docker + Nginx自动化构建部署

我们可以通过我们的git版本控制平台如GitLab CI/CD、GitHub Actions、Gitea Actions等自动化执行某些操作(打包测试、部署、数据库版本控制的验证等),设置触发时机,每次PR时都会触发,便于提前暴露问题,提高效率等

2024-07-25 13:51:53 1387 3

原创 【Nginx】docker启动Nginx的两种方式

docker启动nginx的两种方式:1、直接从Docker Hub拉取Nginx镜像2、通过Dockerfile构建Nginx镜像后拉取

2024-07-05 16:19:01 4853

原创 【解决】请求响应总是得到默认index.html

请求地址错误(文件资源不存在),服务器未找到匹配的接口地址/文件,只能返回该项目的默认index.html。当使用别名时,请求地址中@别名未被解析,所以服务器找不到@目录下的文件,返回默认的index.html。

2024-04-18 18:09:40 673

原创 【js】事件循环与同步异步的原理

事件循环、消息队列、宏任务和微任务、微队列、async/await、promise、setTimeout

2024-03-04 11:02:09 1130

原创 【js】无限虚拟列表的原理及实现

虚拟列表是长列表按需显示思路的一种实现,即虚拟列表是一种根据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术。简而言之,虚拟列表指的就是「可视区域渲染」的列表。定义固定宽高的元素,该区域限制无限虚拟列表的可视区域大小宽高为父元素的100%,纵向超出可滚动宽度100%,高度auto,用于呈放渲染的部分列表项,撑开可滚动区域。

2024-02-22 17:11:57 3054 2

原创 【报错】npm ERR! ERESOLVE could not resolve、certificate has expired

安装依赖报错npm ERR! ERESOLVE could not resolve,根据提示增加--force or --legacy-peer-deps又报错certificate has expired,真相!npm淘宝镜像源过期,要更新

2024-02-21 12:03:09 841

原创 【Flutter】底部导航BottomNavigationBar的使用

底部导航栏三种效果:当选中时图标文字变色,未选中时不显示文字。显示图标和文字,选中变色。显示图标和文字,设置背景。配合使用,背景才生效。

2024-02-20 14:50:07 1906

原创 【Flutter】graphic图表实现tooltip一段时间后自动隐藏

graphic图表中提供了自定义tooltip的事件,可通过selections中on和clear配置手势选项和可识别设备,默认情况下tooltip需要双击隐藏,但这并不符合我们的需求。通过调研发现,若想实现tooltip隔几秒后隐藏,可通过向chart发送订阅流事件隐藏,这感觉更像是局部刷新。

2023-11-29 17:33:37 1006 1

原创 【Flutter】graphic图表实现自定义tooltip

flutter数据可视化graphic图表,tooltip的TooltipGuide类提供了renderer方法详解

2023-11-24 16:44:50 1379

原创 【Flutter】graphic图表的快速上手

数据可视化语法和Flutter图表库Graphic快速上手

2023-11-24 14:31:10 2095

原创 【git】vscode项目推送到git及遇到的问题

打开文件后点击vs code左侧工具栏中第三个源代码管理图标,点击初始化仓库,此时会创建一个本地仓库。在编辑器顶部工具栏中,选择终端 -》新建终端(Terminal -》New Terminal )点击克隆/下载,复制HTTPS地址。会检查该项目中的文件变更。3)查看项目远程地址。

2023-11-24 14:29:03 1680

原创 【js】getTime的坑!!!

new Date(‘指定日期’).getTime()时间转换不相等?!!

2023-09-25 16:45:49 395 3

原创 【vue3报错】解决vue3 ref 获取不到子组件

在父组件内调用子组件内的事件从而改变子组件的某些状态,父子组件使用``语法糖,父组件通过给子组件定义ref访问其内部事件。这看起来完全没毛病,理想很丰满,现实很骨感,写完就是访问不到,还报错,离离原上谱,这究竟是为啥

2023-09-13 15:32:50 4847 1

原创 【Vue】父子传参及props与emit区别

props方式:父组件为子组件绑定一个属性,将函数赋值给该属性,子组件通过props接收,调用此事件,传递消息。emit方式:父组件需要在子组件标签中注册一个事件,子组件通过emit调用此事件,传递消息。

2023-07-10 20:33:30 543

原创 【javascript】监听某标签元素进入视口/其他标签元素

监听元素之间的交叉重叠,(交叉观察器) 提供了一种异步观察目标元素与其祖先元素或顶级文档视口(viewport)交叉状态的方法。其祖先元素或视口被称为根(root)。当一个 IntersectionObserver 对象被创建时,其被配置为监听根中一段给定比例的可见区域。可以在同一个观察者对象中配置监听多个目标元素。当然IntersectionObserver不可能完全替代监听滚动条,只是相比于监听滚动条,IntersectionObserver更加方便快捷,并且目前大多数主流浏览器已经兼容。

2023-05-16 16:39:08 1281

原创 【js】数组arr.splice的使用

众所周知,splice() 方法用于添加或删除数组中的元素。那替换的实现呢?删除+添加。这与遍历不同,遍历时不能同时进行添加与删除操作,但是splice完美的解决这一问题

2023-01-31 17:18:03 3053

原创 【js】解决 v-if “不生效”

v-if = ‘showAnswer’不生效,一直为true

2022-09-06 14:19:04 6476 6

原创 【vue3】获取[object object]的值

众所周知,当获取到的参数显示[objectobject]时,我们传参使用JSON.stringify()转换为string类型,接收后使用JSON.parse()转换回来。当然这在js中没有任何不妥,但使用过ts的朋友们都知道,这可能会提示类型不匹配,无法赋值。正常接收,定义一个新的数据,再用JSON.parse()转换接收后赋值的数据。...

2022-08-02 11:09:12 3524

原创 【vue3】公共组件reactive中响应式数据的条件判断

对应不同的业务需求,要求数据不同

2022-08-02 10:59:50 1632

原创 获取数据Proxy下的Target的数据

获取Proxy下的Target数据

2022-07-29 21:37:55 12171 4

原创 Vue3中element中dialog对话框的visible的坑

vue3中使用element对话框的visible的坑

2022-07-19 11:23:35 2981 4

原创 Cannot access ‘state‘ before initialization

错误信息:在初始化之前无法访问state相信很多小伙伴在使用Vue2的时候习惯将新写的内容放在前面,这样避免了在方法很多的时候向下滑动但是在Vue3.0中新增了setup语法糖,所以在使用语法糖时,定义响应式数据state当我们使用state响应式数据时就需要注意了,将使用数据的语句要放在响应式数据定义之后,否则就会报此错误哦Vue3 新增语法糖——setupsetup函数是 Composition API(组合API)的入口在setup函数中定义的变量和方法最后都是需要 return .

2022-05-01 10:38:13 1934

原创 【Vue】3.0 项目创建 自定义配置

1、进入项目路径2、创建vue3项目vue create +项目名称注意:项目名称要避开特殊名字如echarts、vue等3、项目配置等待后弹出选项窗口,询问用户以什么模板方式进行安装Default ([Vue 3] babel, eslint):默认预设配置,会快速创建一个Vue2.0项目,提供了babel和eslint支持Default ([Vue 2] babel, eslint):默认预设配置,会快速创建一个Vue3.0项目,提供了babel和eslint支持Manu

2022-04-21 17:34:14 8401 6

原创 ECharts+Vue实现数据可视化

Echarts

2022-04-08 09:08:09 2852

原创 Vue实现数据筛选

map()方法map()方法用于遍历数组中的每个元素,让其作为参数执行一个指定的函数,然后将每个返回值形成一个新数组,map()方法不改变原数组的值。调用格式如下:let 新数组名 = 数组名.map((参数) =>{ //函数体 })示例:定义一个数组arr[ ], 使用map()方法遍历数组,通过三目运算作为条件,将返回值赋给新数组newArr let arr = [90,34,76] let newArr = arr.map(item => item>=60

2022-03-29 20:30:25 6988

原创 Vue Echarts报错Initialize failed: invalid dom.

报错原因dom还没挂载完成,echarts.init() 就已经开始执行解决方法1.不要用created(用mounted),created这时候还只是创建了实例,但模板还没挂载完成created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作也就是说created()方法是在页面加载前调用,此时dom还未加载。所以当 有改变dom的时候用mounted, 没.

2022-03-23 17:47:17 13024 9

原创 解决:字体样式font-family不起作用

问题:CSS样式设置字体font-family: 华文新魏,但是运行后浏览器的字体样式根本没有使用华文新魏解决首先你先看一下自己电脑上是否有这种字体,很大可能是没有这种字体的,所以才不会显示;如果有这种字体还是不显示的话,有没有可能是写错了查看字体方法:控制面板→外观和个性化→字体如果是第一种 电脑上没有这种字体的话,就找一个网站,下载好你需要的字体一般是.ttf文件下载好后,打开文件点击左上角的**“安装”**之后,在电脑上就可以看到刚才安装的字体了还有一个办法,就是在项目中引入字体

2022-02-19 15:53:45 18662

原创 Vue之点击收藏与取消收藏

思路通过条件运算符,给定图片一个属性,点击改变属性值未点击时,图标灰,默认值false点击时,图标亮,改变为true再次点击时,图标灰,改为false示例<div> <img :src="isActive===true?'static/image/c_icon1.png':'static/image/c_icon.png'" @click="gostore"></div>methods: { gostore(){ //收藏 c

2022-01-23 18:08:22 4814

原创 Vue之判断数组内是否存在某一项

两种方法://方法一:通用xx(Arr,date){ // 返回值等于-1 说明数组Arr中不存在id为date的对象 if( Arr.findIndex(item => item.id=== date )!==-1){ ... } }//方法二:当数组里的对象为字符串时用这个方法更简单xx(Arr,date){ // 返回值等于-1 说明数组Arr中不存在id为date的对象 if( Arr.indexOf(date)!==-1 ){ ... } } 实例

2022-01-23 17:46:32 19970

原创 Vue之点击循环内某一项不影响其他项

遇到的问题:当我们使用循环时,循环内有需要点击的图片、图标等,经常会遇到一种情况就是点击其中一项,其他项也会随着点击而响应改变解决:使用循环索引号index,通过每项唯一索引号来进行控制实例<div v-for="(item,index) in cards" :key="item.Id"> <span>图谱名称:{{item.mindName}}</span> <img :src="isActive===true?'static/image/c_ico

2022-01-23 17:25:12 1647

原创 css实现自适应之单位vh

vh(Viewport Height)是前端开发中的一个动态单位,是一个相对于网页视口(Viewport)的单位。(与vh一起的还有vw(Viewport Width))在桌面端,视口指的是浏览器的可视区域即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。系统会将视口的高度分为100份,1vh就占用视口高度的百分之一(宽度同)1vh等于视口高度的1%(1vw等于视口宽度的1%)。vw和vh与百分比不同的是,百分比永远

2021-12-26 17:27:45 2394

原创 Vue之点击滑动到页面指定位置(点击下滑滚动)

三种方法<div @click="go">点击下滑</div><div id="show" ref="view">展示</div>1、利用scrollIntoView()方法,该方法将调用它的元素滚动到浏览器窗口的可见区域(根据其他元素的布局,元素可能无法完全滚动到顶部或底部)ps:页面可滚动时才有用!!!methods:{ go(){ document.getElementById("show").scrollIntoView

2021-11-13 17:35:57 15765 1

原创 vue之canvas转图片并下载

用到的方法利用html2canvas插件进截图下载图片网上看到好多方法,有些没有注册,所以下载不成功,一定要注意啊!1、下载html2canvasnpm install --save html2canvas2、在需要的页面引入并注册import html2canvas from 'html2canvas' components: { html2canvas },3、实例(方法一)<template><div id="aaa" style="width:

2021-11-10 21:45:14 2640

原创 解决Component template should contain exactly one root element...

vue终端报错Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead解决在组件内写代码时先包裹一层divCtrl+s

2021-11-10 19:52:16 1072

原创 前端改https

修改vue项目build目录下webpack.dev.conf.js文件在原30行的位置增加https:true语句修改87行语句,将http改为https运行

2021-11-09 17:08:06 532

转载 Vue 点击刷新

点击动态更新图形验证码1、在验证码的图片上,绑定点击事件 getCode(),同时使用 ref 指明图形验证码的引用对象,代码如下所示:<div class="box"> <el-input v-model="Code" placeholder="请输入验证码"></el-input> <img src=url @click="getCode" ref="code"></div>2、在 methods,定义 getCode 的方法,通

2021-11-06 15:15:59 804

原创 CSS 3 动画 实现图片动态切换

用到的方法:动画 Animation + @keyframes注意:animation属性要与keyframes规则进行绑定CSS3 创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。当用@keyframes 创建动画时,需要把它绑定到一个选择器(例如div),否则动画不会有任何效果。动画属性属性描述@keyframes规定动画animation所有动画的简写属性animation-name规定@keyframes 动

2021-11-06 08:28:52 6148 1

原创 以图片做背景报错

./static/image/img1.jpg in ./node_modules/css-loader?{“sourceMap”:true}!./node_modules/vue-loader/lib/style-compiler?{“vue”:true,“id”:“data-v-10d9df09”,“scoped”:true,“hasInlineConfig”:false}!./node_modules/vue-loader/lib/selector.js?type=styles&index.

2021-11-04 17:12:44 164

原创 Vue v-for循环的使用方法

v-for循环的使用方法首先定义一个循环数组 “数组名” (我这里为layex1)其次在script标签里面添加数据方法data<template><div style="width: 45vh"v-for="item in latex1" > <div class="card-item"> <div class="item">{{ item.text1 }}</div> </div></div&

2021-11-03 19:32:02 266

原创 Vue 点击获取v-for循环内数据

实例<div class="card-item"> <div class="item" @click="beat(item.text2)"> {{ '$$' + item.text2 +'$$'}} </div></div><el-input class="input" type="textarea" :autosize="{ minRows: 12,}" placeholder="请输入latex公式"

2021-11-03 17:25:43 1748

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除