- 博客(35)
- 收藏
- 关注
原创 Ubuntu下Nginx的部署后端项目(Java为例),配置Nginx代理
若未安装同时在服务器云平台安全组开放一个端口供后端使用(以下用8080端口为例)添加规则,端口范围设置为8080,源地址设置为127.0.0.1/32(仅限服务器本地访问)
2025-08-09 10:05:23
470
原创 uni-app学习笔记01-项目初始化及相关文件
需要三步 y改为x 子组件设置display:inline-block 父组件设置white-space: nowrap;在uni-app的模板中,view组件就类似于div,text就类似于span。运行至微信小程序时需要运行设置中把路径改为微信开发者工具应用程序的路径。这三部分组成,可根据习惯,将script部分移动至上方,不影响。此项目创建使用vue3版本,文件结构与vue3类似。配置hover-class就可以做点击时的效果。新加的组件 配置一个可以滚动的区域。在uvue文件中,也是由。
2025-08-03 18:17:56
409
原创 CSS3知识补充
简单的伪类实例:invalid用户行为伪类伪元素以类似方式表现。不过表现得是像你往标记文本中加入全新的 HTML 元素一样,而不是向现有的元素上应用类。伪元素选择器会值得信赖地做到这件事——即使单词/字符的数目改变,它也只会选中第一行。有一组特别的伪元素,它们和属性一同使用,使用 CSS 将内容插入到你的文档中。你能用这些插入一个文本字符串,和在下面的实时示例里那样。试着改变属性的文本值,看看输出是怎么改变的。你也能改变::before伪元素为::after。
2025-07-26 16:00:00
767
原创 HTML5元素相关补充
DOCTYPE html>是HTML5 的文档类型声明,它告诉浏览器当前页面是使用 HTML5 规范编写的,HTML5 是最新的 HTML 版本,拥有更多的功能和优化,因此推荐在新的 Web 页面中使用它。为了创建动态内容和 Web 应用程序,HTML 支持使用脚本语言,最突出的就是 JavaScript。HTML 提供了许多可一起使用的元素,这些元素能用来创建一个用户可以填写并提交到网站或应用程序的表单。:一段简短而精确的、对页面内容的描述。属性的值,具体取决于所使用的值。)的元数据,应用于整个页面。
2025-07-26 15:28:55
982
原创 Ubuntu下Nginx的快速配置多网站(前端)
按照这个流程操作,你就能拥有一个干净、有序、基于最佳实践的 Nginx 多域名虚拟主机环境了!配置清晰,管理方便。
2025-07-17 10:36:42
417
原创 vue3-大事件项目——1
pnpm包管理器选择添加了router,pinia,Eslint,prettierprettier是专注于代码格式化的插件,可以试代码更加美观Eslint更在于规范纠错提交代码前做代码检查使用pnpm lint校验是全局校验,一旦代码量大的时候会非常耗时间所以引入了暂存区eslint校验。
2025-06-24 20:53:12
401
原创 vue3学习笔记——Pinia
如果直接对当前的store进行结构会丢失数据的响应式,如果要结构使用需要添加storeToRefs()包上,对于需要保持响应式的数据可以使用,对于函数不需要使用。persistent : true就可以本地存储了,默认使用store.$id作为本地存储时的key,默认整个store都会被持久化,这些都是默认配置。pinia持久化插件pinia-plugin-persistedstate。npm install pinia加入之后在main.js中配置。在里面写好的数据或是方法只要在组件中导入就可以使用了。
2025-06-23 16:47:19
239
原创 vue3学习笔记——组合式API——父子通信,模板引用,defineOptions新特性
传下去的数据支持响应式的数据,子组件不能直接修改数据,但是可以在爷组件上传下去一个修改数据的方法,让子组件“修改数据”provide和inject用于跨层组件通信,顶层组件可以向任意的底层组件传递数据和方法。defineExpose编译宏可以显示暴露组件内部的属性和方法。获取模板引用要等组件挂在完毕之后,在onMounted中。
2025-06-23 09:37:54
138
原创 vue3学习笔记——组合式API——setup选项,reactive和ref函数,computed,watch函数,生命周期函数
setup的执行时机比beforeCreate比较早,所以拿不到this,this在vue3中基本不再使用,声明的数据需要在return才能够使用,但是每次都return比较麻烦,vue3中提供了语法糖,即<script setup>在脚本(script)中访问ref包的数据需要通过.vlue,但是在template中,不需要加(已经帮我们扒了一层)原来需要写在created里面的现在可以直接写在setup里面,然后剩下的需要单独写函数。避免直接修改计算属性的值,特殊情况可以配置get set。
2025-06-22 21:38:24
122
原创 vue学习笔记 -vue3项目创建
在vue3的文件中,先写的script内容,加上setup是指允许在里面使用组合式api,然后其次是结构,最后是样式,结构和样式写在一起更易维护。vue3是使用create-vue创建项目,底层用的是构建工具vite,速度比vue2快得多。vue3项目目录以及关键文件。
2025-06-22 15:12:40
107
原创 vue学习笔记--配置二级路由,缓存组件,自定义脚手架
activated 当显示为这个组件的页面时,组件被激活,触发这个函数。deactivated 当离开这个组件的页面时,组件失活,触发这个函数。$router.back()返回上一页。缓存组件的使用会触发两个生命周期函数。组件缓存,keep-alive。他包裹的所有组件都会被缓存。通过配置他的三个属性来解决。
2025-06-21 16:58:01
170
原创 vue学习笔记_跳转传参,路由重定向、404、模式切换,编程式导航
跳转传参--查询参数传参与地址栏传参的格式相同,如果需要查询多个参数的话就用&并列键值对的格式使用$route.query.key直接接受地址栏传来的参数,使用插值表达式呈现后面如果需要拿参数去请求的话,需要在js代码部分中使用,就要用这样的格式获取跳转传参--动态路由传参只需要在配置路由时在相应的位置换为 :参数名 的形式,导航链接就可以简洁的写为 /参数值 在对应页面接受就要用params.参数名两种方式的区别在动态路由跳转中配置路由时注意十是否要使用可选符vue路由-重定向。
2025-06-20 11:30:03
206
原创 Vue学习笔记
组件存放是有分类的,页面组件和复用组件,分类开来是为了方便维护,页面展示相关的,需要配合路由去使用的页面组件放在src/views文件夹,用于展示数据的,常用于复用的复用组件,放在src/components文件夹。router-link-exact-active(精确匹配)和router-link-active(模糊匹配)抽离路由模块,在src下创建router文件夹,在里面创建index.js来配置路由,拆分模块,利于维护。如果觉得本身自带的那两个类名太长了,可以在配置路由的时候修改类名。
2025-05-25 21:49:31
146
原创 vue学习笔记
由于querySelector获取dom元素是对于整个页面的查找,和style一样,易出现选错dom的情况,所以在vue中采用ref和$ref的方式获取。写入slot标签时默认为空白,在父组件的子组件标签里面写会插到slot的位置,不仅可以写入纯文本的内容,还可以写入标签。可以在slot里面写入内容作为后备内容,当子组件标签里面没有写东西的时候,就会显示后备内容。当多个地方的内容需要自定义的时候,要使用多个插槽,为了区分,就要使用具名插槽。当需要自定义一个封装好的组件里面的内容的时候,我们可以使用插槽。
2025-05-25 10:28:40
131
原创 使用rem设置移动端的尺寸
移动端的特点一、设备尺寸不同二、可以通过设置百分比解决三、设置百分比计算繁琐单位概述px:像素em:相对于父级的font-size值rem:相对于html标签的font-size值设置完父级的大小之后,em前面的数即为父级元素大小的倍数html font-size:30px; 1rem 代表30px;10rem 代表300px;通过js文件,根据浏览器的视窗宽度设置html元素的fontsize值docEl.style.fontSize = 100*(clientW
2024-12-10 11:27:22
288
原创 CSS3新增样式
参数分别表示:x轴偏移量 y轴偏移量 模糊半径 阴影颜色(不设置颜色为黑色)如果设置两个值,第一个值表示左上和右下,第二个值表示右上和左下。border-radius:左上 右上 右下 左下。旋转 deg单位表示角度。在网页中如何让一个元素垂直水平居中。七、flex布局八、grid布局。三、形变:旋转、缩放、位移。后面跟的数值即为圆的半径。
2024-11-25 08:39:58
253
原创 HTML5新增标签
某些情况说HTML5(H5)表示的是HTML的第五个版本。某些情况说HTML5(H5)表示的是移动端的网页效果。某些情况说HTML5(H5)表示的是HTML5、CSS3、以及HTML5配套的JavaScript接口。HTML5是超文本标记语言(html)的第五次重大修改,可以简单的理解为是html的第五个大版衣。某些情况说HTML5(H5)表示的是手机端整屏的轮播图效果。2.autoplay 自动播放(用在视频)三.画布(<canvas>),例如刮刮乐。section:布局的一部分。
2024-11-18 11:41:57
232
原创 设计还原稿
在还原设计稿时,我们需要使用photoshop打开psd格式的设计稿,作为前端工程师,我们不需要太多的ps技巧,只需要了解一些简单的基本操作即可。10.选择切片后,按alt+shift+ct+s:存储为web和设备所用格式,就可以看到切片选择的对应图片了。以上是对初学者的一些规范,在实际项目开发中,公司应该会给出具体的规范要求,到时候按照公司的要求制作即可。3.shift+m 切换到选取工具,使用鼠标左键选择,ctrl+d可以取消选取,4.F8查看信息,可以查看选取内容的尺寸。2.class命名要有语义。
2024-11-14 20:33:16
193
原创 树状结构
节点之间的关系根节点:每一个树状结构都有一个没有父级的节点,他被称作根节点。父级节点:司马防是司马懿的父级,司马懿是司马师的父级。子级节点:司马师是司马懿的子级,司马懿是司马防的子级。同级关系:有相同父级的节点就是同级关系,司马和司马朗是同级,司马昭和司马亮是同级。(这里需要注意的是,司马炎和司马熙不是同级,因为他们没有相同的父级。
2024-11-09 22:09:30
173
原创 浮动布局
块元素:可以设置宽度和高度,独立成行。行内元素(内联元素,行级元素):不可以设置宽度和高度,不独立成行。a,span行内块元素:可以设置宽度和高度,不独立成行img,input,button。
2024-11-03 12:15:23
198
原创 盒子模型
margin简写的话,四个数字的话是按照上右下左的顺序,即顺时针排列的,如果只输出两个数字的话,第一个数字是上下,第二个数字是左右。边框:border-width;内边框:padding(-top\-right\-bottom\-left)外边距:margin(-top\-right\-bottom\-left)border后面的属性可以直接省略着写,直接空格隔开三个。将HTML元素抽象看作是盒子,来实现网页布局。利用box-size:border-box;就可以不必再有加的一堆东西,直接锁定了大小。
2024-11-01 16:05:21
184
原创 CSS的进阶
层级选择器:selector1 selector2组合选择器:selector1,selctor2伪类选择器(增加行为):selector:hover:伪元素选择器(增加元素):selector::before,selector::after除此之外还有很多选择器层级选择器为上下级关系,如示例,将两个h1分别放入两个类中,控制样式时,只要在和h1前面加入需要改变的样式的类加个点就可以了组合选择器直接用两个要加样式的标签名并列写如果要对其中某个进行加的话,可以再标签名之前加容器名。
2024-10-27 18:03:25
803
原创 CSS选择器和与常用属性
text-align为水平对齐,后面加center为居中。类选择器:className .class。通过class选择器可以同时给多个元素加样式。文本行高(垂直居中):line-height。背景色:background-color。通配符选择器可以找到所有的元素添加属性。选择器写在head中的style里面。文本水平居中:text-align。元素选择器:h1,img,p。字体大小:font-size。CSS全称层叠样式表{字体颜色:color。
2024-10-26 15:10:02
163
原创 表格和表单元素
如想要和excel那样合并单元格,则可以在其标签中加入属性colspan=”合并的列数”想要添加表格的框的话需要在里面加一些属性。如rowspan则用来合并行数。其他表格标签:thead。表格容器用table标签。 表头。 表体。
2024-10-20 18:37:50
242
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人