- 博客(1774)
- 收藏
- 关注
原创 Vue element-plus 导航栏 [el-menu]
el-menu有很多属性和子标签,为网站提供导航功能的菜单。常用标签:它里面有两个子标签。el-menu-item,它其实就是el-menu每一个里面的item,item就是真实匹配到路由的每个栏目,不带有伸缩功能,具备真正内容的。没有内容的是带有伸缩功能的,是一个功能模块的合并,也就是一个集合的展示,它没有本身的一个页面,真正的页面展示是在每一个item里面。应该menu里面,除了item之外还有sub item,sub item里面还有item。
2024-03-28 15:15:12 482
原创 CSS 绝对定位 position:absolute
绝对定位absolute定位是CSS中的一种定位方式,可以将元素精确定位到一个确定的点,这与元素在文档流上的自然位置无关。相比起其他定位方式,绝对定位很灵活性,它可以将元素脱离文档流,使得元素的位置不受页面上其他元素的影响。相应地,元素独立悬浮于页面上。
2024-03-18 17:20:19 842
原创 Vue el-card、el-input 登入页面
要开发新页面第一步要先去定义路由,定义好路由之后创建好对应的视图文件,然后就可以基于这个pass去访问这个页面了,拿到这个文件的效果了。然后就可以在这个文件里面边开发边去看效果去调试。先去注册路由,注册好路由之后去找到对应的xx.vue,再去vue文件里面写css和js。一个页面进来,是先到index.html。然后再到App.vue,App.vue里面有路由占位符,会将pass下面对应的视图文件加载进来到route-view的位置。卡片包含标题,内容及操作区域。卡片组件由header和。
2024-03-18 17:02:10 1125
原创 Kubernetes 项目整体布局 el-container
(第二个container里面header main footer里面是垂直排列的,这些在container里面垂直排列,但是aside和这些又是水平排列)唯一不同的就是main里面的内容是不同的,边框架子都是相同的。其实框架是不怎么变化的,变化的是main里面。如果将平台名设置为固钉,它会盖在侧边栏上面,往上滚动的时候会一直存在。其实和el-form类似,一个组件其实是由很多的标签组成的。element-plus已经帮我们提供了整体布局的架子,后面只需要在main里面改东西就行了。
2024-03-18 15:33:14 717
原创 CSS 脱离标准文档流 标签元素的浮动
由于存在两层,标准的那一层和浮动的那一层会出现压盖的现象。横向摆放,当元素不同的时候,元素宽度不够的情况下,在空间不够的情况下会将其挤到下面来。下面的盒子属于在标准流当中的盒子,而上面的盒子属于脱离标准流的盒子,它会在在下面的盒子上面再覆盖一层。无论向左还是向右浮动都是脱离文档流,它会在标准流的上面再来一层,而那一层来放置浮动的元素。此时可以理解为有两层页面,一层是底层的原页面,一层是脱离文档流的上层页面,所以会出现折叠现象。现在的页面有两层,一层在下面,一层在上面,这样就不会产生在标准流当中的一些问题。
2024-03-18 13:56:19 1271
原创 CSS 文档流
块元素:比如li标签或者h1这种,都是默认自上而下摆放的。内联标签:如果是span标签或者strong标签,它是从左到右进行摆放的。可以看到有文本的时候,高矮是不一样的,他们是以底边对其的。高矮不齐的时候是以底边进行对其的。上面都是默认元素会产生的问题。这个时候,就不能使用文档中元素默认的位置去摆放。空格问题,无论在文本位置放置了多少空格,默认出现在页面上面只有一个空格。是指页面上的元素在摆放的时候所占用的空间,也泛指页面元素放置的位置。这三种都会脱离文档流,一旦脱离文档流,元素的管理就会变的容易一些。
2024-03-11 16:15:57 998
原创 CSS 弹性盒子模型 Flex container、Flex item
总结 在父亲元素属性比较多,开启弹性盒子模型通过display:flex属性来开启,子盒子方向可以通过flex-direction进行调整,之后就是子盒子上下左右位置,最后就是子盒子在父盒子当中的平均分配。现在可以为盒子的布局设置一个弹性盒子模型,给外层容器的div加上弹性盒子设置,那么就可以管理里面三个盒子。一个大的盒子里面里面的子元素如何摆放由我们的弹性盒子说的算。之前的盒子模型是一个元素,内边距外边距,边框来调整在页面所显示的位置。弹性盒子,在大容器里面,里面有很多的小盒子,这些小盒子是如何摆放的。
2024-03-09 12:38:52 1090
原创 CSS 盒子模型(box model)
盒子虽然变大了但是内容在往中间挤,中间的内容还是在盒子的左上角,剩下的是内边距帮你填充的。如果把盒子模型看作是一个生活中的快递,那么内容部分等同于你买的实物,内边距等同于快递盒子中的泡沫,边框等同于快递盒子,外边距等同于两个快递盒子之间的距离。上下是一个值,左右是一个值。,它包括:外边距(margin),边框(border),内边距(padding),和实际内容(content)。蓝色的是一个盒子,这是一个元素,这个元素包含内边距padding,边框和外边距。内容文字图片是实物,然后内边距,边框,外边距。
2024-03-01 11:37:06 1913
原创 CSS技巧:实现两个div在同一行显示的方法
要将两个div放置在同一行上,可以将它们放置在一个具有Flexbox属性的父容器中,并设置其display属性为flex。在实际开发中,还可以使用CSS框架如Bootstrap等提供的栅格系统来实现响应式布局,以适应不同屏幕尺寸的显示。要将两个div放置在同一行上,可以给它们设置相同的浮动方向,例如都设置为左浮动(float: left)。要将两个div放置在同一行上,可以将它们的display属性设置为inline-block,并设置宽度、高度、边距等属性来调整它们的布局。
2024-02-29 16:47:09 1780
原创 JavaScript 数组方法 push()/pop() shift()/unshift
在while循环里面,取到的值为数字,对数字取布尔值肯定是true。对0和undefined、null取值是false。pop是从尾部操作,而shift是从头部操作,操作完之后会返回删除元素的值。
2024-02-29 10:40:17 1287
原创 Vue Element Plus El-Card组件
El-Card是Element Plus组件库中的一个组件,用于展示卡片式的内容。它提供了丰富的配置选项,可以根据需求自定义卡片的样式和内容。可以通过CDN引入,也可以通过下载并引入本地文件的方式。4.在``标签内部,可以添加任意内容来展示在卡片中,可以是文本、图像、按钮或其他HTML元素。(3)可以为`标签添加多个属性,来配置卡片的样式和行为。(2)在需要使用El-Card的地方,使用`标签包裹卡片内容。
2024-02-29 09:56:10 2065
原创 JavaScript 数组 length属性|遍历
多维数组:数组里面嵌套 一层数组为二维数组。一维数组的使用频率是最高的。如果数组访问越界会返回undefined。这个方法可以去判定一个内容是否是数组。
2024-02-23 11:04:35 1470
原创 Linux ip route命令
ip route命令是Linux系统中一个非常重要的网络管理工具,通过它可以配置和管理Linux的路由表。熟练掌握ip route命令的应用,可以帮助管理员更好地管理和控制网络流量,实现网络性能的最优化。
2024-02-21 10:29:36 1800
原创 Channel 使用事项和注意细节
说明:如果我们起了一个协程,但是这个协程出现了panic,如果我们没有捕获这个panic,就会造成整个程序崩溃,这时我们可以在goroutine中使用recover来捕获panic,进行处理,这样即使这个协程发生的问题,但是主var mapl map[string]string线程仍然不受影响,可以继续执行。下面是只读,只写管道,可以有效的预防我们误操作。要从管道当中读取数据需要close这个管道,不去close这个管道去遍历的时候,管道会阻塞,如果阻塞在main协程里面会发生死锁。
2023-12-31 12:01:54 3763
原创 Vue axios 拦截器
正常情况下打开浏览器前端页面向后端发起请求使用的是axios,无论是原生的axios还是自己封装的axios都看成是axios。这些都是优先于你的axios.get()/post()去执行的,不管是在get/post发起请求之前还是获得响应之后,你得先经过拦截器!主要去处理响应是否成功,拿到返回业务状态码的逻辑,这个时候其实是自定义的响应,到底业务有没有成功,这决定了你的前端展示。请求拦截器就是你在发起请求的时候应该做什么事情,响应拦截器就是你在接收到这个请求之后应该去干什么。做一些自定义的响应配置。
2023-12-26 13:57:30 3482
原创 Golang 协程配合管道
死锁编译器底层会分析,如果发现一个地方在不停的写,但是没有任何一个协程去读取这样就直接死锁,如果有一个协程在慢慢的读取这样不会死锁。和写入读取速度没有关系,但是必须有写入的协程和读取的协程。管道是引用类型,那么写入读取的都是同一个管道,也就是在不同函数不同栈里面读取的都是同一个管道。如果管道和放进去的数据量不匹配,管道的容量小于放进去的数据,又不取出来,那么它就会阻塞,阻塞就会死锁。那么在写的时候就会阻塞,编译器会发现虽然阻塞了,但是有另外一个协程在往里面读取数据,这样就不会发生死锁。
2023-12-23 15:42:08 3465
原创 Vue 理解数据代理 object.defineProperty
这个方法在object身上,名字叫做defineProperty,这个方法可不要小瞧,vue底层很多地方都使用到了。这里传入三个参数,第一个是给哪个对象添加属性,第二个添加的属性叫做什么名字,最后就是一个特别重要的参数叫做配置项,配置项里面可以写很多的配置。上面方法和四个配置项看起来复杂,但是可以对追加的配置项的属性进行很多高级的限制。比如vue里面使用的数据劫持就使用到了这个方法,数据代理用到了这个方法,后面计算属性也使用到了这个方法。上面都是基本的配置项,其实还可以传高级的配置项。
2023-12-21 15:04:42 3705
原创 Vue 组件传参 prop向下传递、emit向上传递
学习了组件用法,就像一种嵌套引用关系,在这个关系中,经常会涉及相互传数据的需求,即父组件传子组件,子组件传父组件。父、子组件的关系可以总结为向下传递,事件向上传递。如下图所示:所有的组件组成了完整的页面,但是组件里里面的数据与组件之间的数据是相互进行数据传递的。(组件之间存在着相互引用,这就存在了父子关系)有时候子组件页面的展示,展示什么样的内容是由父组件决定的,这时候父组件给子组件传参的时候就需要通过参数告诉子组件需要展示什么样的内容。
2023-12-21 14:23:16 3536
原创 JavaScript 循环语句之for、while循环 | break continue
for循环<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>首页</title></head><body> <script type="text/javascript"> var num = 100 for (let i = 0; i
2023-12-18 17:33:00 3571
原创 Golang channel 管道关闭close、for...range遍历
使用内置函数close可以关闭channel,当channel关闭后,就不能再向channel写数据了,但是仍然可以从channel中读取数据。下面这种遍历方式肯定是错误的,每次取出来数据长度都会减1,容量方式也一样不是真实的长度,所以只能使用for rang方式。相当于关闭管道就数据不能进入到队列里面了,只能进行读操作,只读不写。2)在遍历时,如果channel已经关闭,则会正常遍历数据,遍历完后,就会退出遍历。1)在遍历时,如果channel没有关闭,则回出现deadlock的错误。
2023-12-17 11:24:14 3750
原创 JavaScript 三元运算符
条件为真执行表达式1,条件为假执行表达式2,有点像if else语句,三目运算符的目的就是简化if else的编写形式。
2023-12-12 14:27:21 3653
原创 JavaScript 条件语句之switch
需要注意的是,每个case代码块内部的break语句不能少,否则会接下去执行下一个case代码块,而不是跳出switch结构。if..else虽然有多条路选择,但是代码读起来会很累人,说白了就是使用switch来简化if else表达式。语法会有switch关键字,case关键字,以及break关键字。break其实就是跳出判断,不继续往下执行了。
2023-12-09 10:03:30 3064
原创 JavaScript if...else语句
if结构先判断一个表达式的布尔值,然后根据布尔值的真伪,执行不同的语句。所谓布尔值,指的是JavaScript的两个特殊值,true表示真,false表示伪。()里面不一定是true和false,还可能是表达式生成的。x=y里面是会执行的,其实也就是if(2),那么是为true的,条件语句会执行。
2023-12-08 10:20:37 3860
原创 Golang channle (管道)基本介绍、快速入门
为什么需要channel?前面使用全局变量加锁同步来解决goroutine的通讯,但不完美1)主线程在等待所有goroutine全部完成的时间很难确定,我们这里设置10秒,仅仅是估算。2)如果主线程休眠时间长了,会加长等待时间,如果等待时间短了,可能还有goroutine处于工作状态,这时也会随主线程的退出而销毁3)通过全局变量加锁同步来实现通讯,也并不利用多个协程对全局变量的读写操作。4)上面种种分析都在呼唤一个新的通讯机制-channelimport ("fmt""sync"
2023-12-06 15:47:52 3639 2
原创 Vue 理解MVVM设计模式
vue作者在最初设计vue的时候参考了mvvm这个模型。没有完全遵循mvvm,是在一定程度上遵循了这个模型。根据这个模型设计了vue里面的模型。
2023-12-05 12:03:04 3039
原创 Golang 设置运行的cpu数与channel管道
介绍:为了充分了利用多cpu的优势,在Golang程序中,设置运行的cpu数目。比如你有逻辑的4个cpu,但是在程序里面只想使用3个。另外一个我要保留下来给其他程序使用,因为你占满了cpu导致其他程序可能跑不起来了。(1)go1.8后,默认让程序运行在多个核上,可以不用设置了(2)go1.8前,还是要设置一下,可以更高效的利益cpu。
2023-11-27 19:57:40 3506
原创 JavaScript 运算符
null与undefined都可以表示“没有”,含义非常相似。将一个变量赋值为undefined或null,老实说,语法效果几乎没区别。既然含义与用法都差不多,为什么要同时设置两个这样的值,这不是无端增加复杂度,令初学者困扰吗?数组返回的也是object,如果使用typeoof来判断一个类型是否是对象类型的话,不准确,因为返回的对象的类型的情况有很多。JavaScript有三种方法,可以确定一个值到底是什么类型,而我们现在需要接触到的就是typeof。//null一般代表对象为 “没有”
2023-11-27 16:40:40 2822
原创 Vue 双向数据绑定、数据变化 v-model
不能够输入就是没有value值,没有value值就证明不能捕获用户的输入,连输入的值都不能捕获那怎么可能影响数据的变化呢?v-bind最大特点就是单向数据绑定,修改了data里面的值容器里面的值也会跟着改变,但是修改容器里面的值data里面的值是不会发生变化的。还有另外一个指令可以完成双向的绑定。之前通过v-bind来完成的数据绑定,属性值和表达式进行绑定,表达式的值发生变化了属性值也跟着发生变化。2.v-model:value可以简写为v-model,因为v-mode1默认收集的就是value值。
2023-11-27 10:37:53 3716
原创 Golang 协程、主线程
当执行main的时候就开启了一个主线程,往下执行发现go test(),这样就会开启一个新的分支然后执行,但是主线程并没有阻塞,它会继续往下走,发现for循环去执行,执行完毕主线程就退出。其次就是线程有点笨重,这样就需要在底层做一些优化,这样线程就变的更加轻巧了。1)Go主线程(有程序员直接称为线程/也可以理解成进程):一个Go线程上,可以起多个协程,你可以这样理解,协程是轻量级的线程。开启协程,一般以函数为单位进行开启的.如果不使用go test(),那么就是顺序执行的。CSDN @富士康质检员张全蛋。
2023-11-16 11:07:24 2800
原创 Vue 模板语法 指令语法 v-bind
红色框里面的都是vue的模板。上面只是简单的双括号加上表达式,这种叫做插值语法,除了这种语法还有其他语法吗?bind可以给标签里面任何一个标签属性动态的绑定值。通过上面可以看到插值语法往往用于指定标签体内容,也即是html元素中间部分。插值语法实现的功能很单一,就是将指定的值放到指定的位置。在data当中,不仅仅可以是基本的数据类型,还可以是对象。所以data里面的数据可以是多级的结构。vue里面的指令很多,都是以v-开头。v-bind不管理标签里面的内容,它是用于管理标签的属性。
2023-11-15 16:00:42 2627
原创 jQuery Ajax前后端数据交互
例如在不刷新页面的情况下查询数据、登录验证等(数据在没有变化的情况下走的是缓存)在往后端发送一个请求,在发送请求之后,正常拿到数据会渲染到用户列表的ul里面去。ajax是用来做前后端交互的,前端使用ajax去去发送一个请求,后端给其响应拿到数据,前端做些展示。在前端去对接开发的时候,它肯定要知道对接的后端接口返回的是什么数据,根据数据格式去做怎么样的数据处理。如果局部有新数据需要更新,需要刷新浏览器重新发起页面请求获取最新数据,如果。每次都是通过刷新解决这个问题,势必会给服务器造成负载加重,页面加载缓慢。
2023-11-15 15:09:21 3173
原创 JavaScript 语句、标识符、变量声明
最常见的标识符就是变量名标识符是由:字母、美元符号($)、下划线(L)和数字组成,其中数字不能开头,温馨提示中文是合法的标识符,可以用作变量名(不推荐)变量是在程序当中开辟一块空间,然后为这个空间创建名称,这个空间就是用来存放数据的。JavaScript引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。var是一个关键字,代表这个词汇就是这样写的,不可以被改变。var的作用是用来声明变量的。就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升(hoisting)。
2023-11-15 14:28:46 2325
原创 JavaScript库:jQuery,简化编程
js先要去获取dom元素,再去click,之后给其匿名函数。jquery就简单了,直接将$符号填进来,直接再去点click完事。下面其实就是先去获取text的内容,然后将内容放到这个demo选择器里面去。可能一两行就可以实现,因此得到前端程序猿广泛应用。设置或返回所选元素的文本内容 text标签是不会获取到html元素的。从被选元素中删除一个或多个类样式。向被选元素添加一个或多个类样式。除非特殊要求,一般用的少。设置或返回表单字段的值。删除类样式的切换操作。常用版本 2.x,设置或返回所选元素的。
2023-11-14 14:04:05 817
原创 Golang Gorm 连接数据库
GORM 官方支持以上四种数据库, 你可以为不支持的数据库编写支持,参考。,为了方便的去记住它们的导入路径,你可以像下面这样导入。为了连接数据库,你首先要导入数据库驱动程序。注意: 为了正确的处理 time.Time。已经包含了一些驱动程序。
2023-11-10 10:41:53 1149
原创 JavaScript 函数
是指一段可以直接被另一段程序或代码引用的程序或代码。在编写代码时,常将一些常用的 功能模块编写成函数,放在函数库中供公共使用,可减少重复编写程序段和简化代码结构。语法:这里的出参是不需要定义的,大部分时候在js里面都不需要return,它没有大量的逻辑判断,有大量逻辑判断的时候才需要return。(它是最上级的对象,比dom树还要上级的对象)中,一个浏览器窗口就是一个。对象,这个窗口里面的。对象(dom对象),对 象是window。
2023-11-09 14:48:46 710
原创 Golang Type关键字
使用 type 关键字可以定义我们自己的类型,如我们可以使用type定义一个新的结构体,但也可以把一个已经存在的类型作为基础类型而定义新类型这里我们可以看到 int 是变量 a 的底层类型,这也使得它们之间存在相互转换的可能。type (IZ intFZ float64STR string在 type IZ int 中,IZ 就是在 int 类型基础构建的新名称,这称为自定义类型。然后就可以使用 IZ 来操作 int 类型的数据。使用这种方法定义之后的类型可以拥有更多的特性。
2023-11-09 10:10:22 1057 1
原创 JavaScript 基本数据类型 字符串
在JS中,数据类型有:字符串、数字、布尔、数组、对象、NullUndefined用到最多的还是字符串和数组的转换。是一个具有映射关系的数据结构。用于存储有一定关系的元素。d = {'key1':value1, 'key2':value2, 'key3':value3} 注意:对象通过key来访问value,因此字典中的key不允许重复。一个特定的符号,用它与其他数据 类型连接起来组成一个表达式。常用于条件 判断,根据表达式 返回True/False采取动作。
2023-11-08 16:07:03 696
原创 Vue 入门案例剖析
初识Vue:1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象2.root 容器里的代码依然符合htm规范,只不过混入了一些特殊的Vue语法3.root 容器里的代码被称为【Vue模板】先准备好容器,然后有的vue实例,当vue实例开始工作的时候,拿到绑定的容器,之后去扫描看是否有特殊的语法。模板其实就是htlm里面混着很多的写法,这个就是vue的模板,经过解析就变成了正常的html片段,包含了你需要的数据。
2023-11-08 13:53:05 371
原创 Vue 官网使用与环境搭建
vue官网网址:https://cn.vuejs.org/文档网址:https://cli.vuejs.org/zh/vue团队为了使得vue更加好的使用,维护了一些文档。API是vue的字典,在编写vue的时候,遇到了一些不会的方法那么就去找API,好像上面都在告诉你有哪些有用的属性和方法。API是在编码的时候遇到了不会的东西在这里面查阅一下。之前在学习的时候肯定要在html页面当中引入vue.js,然后去编写vue相关的代码。那么以后在公司就需要使用脚手架。
2023-11-03 10:29:11 851
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人