周周清(2)----踩坑日记

周一:

1.之前换了一个jdk,然后又改了很多东西,很乱,以至于很多项目都不能直接运行了,所以今天就将ideal删除并且更新版本到2022.3.3,并且重新将ideal里面的配置环境变量,以及jdk下载安装配置,现在就可以自由切换jdk并且正常运行项目了;

2.背了六级作文的第一段(快考试了,还是抽点时间背作文吧)

周二:

开完例会后,真的意识到了我进度的拉垮,打算重新安排一下时间分配,今天的话先把登陆注册写完,然后把一篇剩下的六级作文背熟一下;把首页的界面画一下(实际上没完成):

今天看见别人有些方法用这个,有些不用,还专门搜了一下

7cc0e9eeaf1248f49313f04eefb1775b.png

还有就是今天要改一下input的文本颜色,但是一直无效,把它移到修改的最后覆盖也没用,原来是谷歌自带的样式,然后看这个解决了

修改文本颜色的坑

周三:

响应式布局很重要,所以我把自己的界面改成了响应式布局;

周四:

踩了一个好大的坑:用下拉框的时候没有生效,搞了都快一天了,试遍了那些方法,终于发现了问题,首先,希望官方大大看见,让更多和我一样的孩子看到吧QAQ,对于不太会用bootstrap的人,可以先按照这个来引入使用bootstrap的简单功能:

5f7b9f2e36624655be043bd8f6ae91af.png

但是如果使用向下拉框这样的有动态特效的,底层的话肯定是又js的,如果只用css是完全不够的,这时候再在main.js里面引入这个就行了:

import 'bootstrap/dist/js/bootstrap'

完美撒花~~~~~ (诅咒那些新手不会的人都能看到啊啊啊)

学了一下bootstrap的容器:

创建固定宽度的容器,根据界面的大小来适应屏幕,很多容器都是可以根据屏幕宽度来改变大小的,可以按需选取;

还有网格:

可以在容器里面用一个行元素,并让列作为它的直接节点,然后可以选则不同样式来选择列:

<template><div class="container"><div class="row"><div class="col-md-1">1</div><div class="col-md-1">2</div><div class="col-md-1">3</div><div class="col-md-1">4</div><div class="col-md-1">5</div><div class="col-md-1">6</div><div class="col-md-1">7</div><div class="col-md-1">8</div><div class="col-md-1">9</div><div class="col-md-1">10</div><div class="col-md-1">11</div><div class="col-md-1">12</div></div></div>
</template>

然后就直接开始画界面了,注意,要用里面的img-fluid组件保持它的适应特性,但是它的工作原理是根据父元素的宽度来调整的,但是大小最多是这个张图片原来的大小,然后就算父元素再次变大,子元素也不会再变大了;

周六:

今天一直在搞自适应屏幕,关于这个的话本来我用的是js控制监听窗口的大小,但是监听一直没起作用,网上说可能是那个函数不太好用,然后看到一个说法说如果使用js控制媒体查询,会出现加载页面可能先大后小,因为要将默认样式和界面先加载出来,然后js代码可能会没加载完页面就展示了,这时候会严重影响用户体验,这时候可以使用媒体查询,根据界面的不同设置页面的根元素大小,因为样式先加载的,这样的话就不会有很大的偏差;然后我就加上了这个文件,终于实现了这个界面的自适应:

@charset "utf-8";@media (min-width:640px){ html{font-size:20px;}}
@media (min-width:631px) and (max-width:639px){html{font-size:19.66px;}}
@media (min-width:622px) and (max-width:630px){html{font-size:19.33px;}}
@media (min-width:613px) and (max-width:621px){html{font-size:19px;}}
@media (min-width:604px) and (max-width:612px){html{font-size:18.66px;}}
@media (min-width:595px) and (max-width:603px){html{font-size:17.33px;}}
@media (min-width:586px) and (max-width:594px){html{font-size:17px;}}
@media (min-width:577px) and (max-width:585px){html{font-size:16.66px;}}
@media (min-width:568px) and (max-width:576px){html{font-size:16.33px;}}
@media (min-width:559px) and (max-width:567px){html{font-size:16px;}}
@media (min-width:550px) and (max-width:558px){html{font-size:15.66px;}}
@media (min-width:541px) and (max-width:549px){html{font-size:15.33px;}}
@media (min-width:533px) and (max-width:540px){html{font-size:15px;}}
@media (min-width:524px) and (max-width:532px){html{font-size:14.66px;}}
@media (min-width:515px) and (max-width:523px){html{font-size:14.33px;}}
@media (min-width:506px) and (max-width:514px){html{font-size:14px;}}
@media (min-width:497px) and (max-width:505px){html{font-size:13.66px;}}
@media (min-width:488px) and (max-width:496px){html{font-size:13.33px;}}
@media (min-width:480px) and (max-width:487px){html{font-size:13px;}}
@media (min-width:471px) and (max-width:479px){html{font-size:12.66px;}}
@media (min-width:462px) and (max-width:470px){html{font-size:12.33px;}}
@media (min-width:453px) and (max-width:461px){html{font-size:12px;}}
@media (min-width:444px) and (max-width:452px){html{font-size:11.66px;}}
@media (min-width:435px) and (max-width:443px){html{font-size:11.33px;}}
@media (min-width:426px) and (max-width:434px){html{font-size:11px;}}
@media (min-width:417px) and (max-width:425px){html{font-size:11.66px;}}
@media (min-width:408px) and (max-width:416px){html{font-size:11.33px;}}
@media (min-width:400px) and (max-width:407px){html{font-size:11px;}}
@media (min-width:391px) and (max-width:399px){html{font-size:10.66px;}}
@media (min-width:382px) and (max-width:390px){html{font-size:10.33px;}}
@media (min-width:374px) and (max-width:381px){html{font-size:10px;}}
@media (min-width:365px) and (max-width:373px){html{font-size:9.66px;}}
@media (min-width:356px) and (max-width:364px){html{font-size:9.33px;}}
@media (min-width:347px) and (max-width:355px){html{font-size:9px;}}
@media (min-width:338px) and (max-width:346px){html{font-size:8.66px;}}
@media (min-width:329px) and (max-width:337px){html{font-size:8.44px;}}
@media (max-width:328px){html{font-size:8px;}}

然后上次答辩学姐问我vue2和vue3有什么不同,vue3有什么优点,没有答得很,所以特此专门复习了一下:(到时候贴上链接)

 

还有就是v-if和v-for当时没怎么听懂学姐讲的,专门去了解了一下:

 

 

然后今天发现每次都会多了很多margin,搞了好久才发现原来是用bootstrap的contianer每个都会自带,然后我有用他们嵌套,这才导致有很大的padding和margin,虽然发现前面的说法挺有道理,但是我的错误没有出现在这里,我的问题是莫名出现的滚动条挤压了布局,然后导致布局变形,看网上要么是隐藏要么是创建多一层,反正我是都没用,但是我把被影响的元素的大小从100vw也就是浏览器视口的大小,变成100%body的大小,这样就解决了!!!响应式布局的行内高度用rem来定义,会跟好的适应一点

 

周日:

今天由于要用的是router组件复用和动态跳转,所以专门了解了一下router路由的使用,还有一个要提的是,包括之前忘记总结了,span元素禁用无效,但是可以通过它的pointer-events,前端的格式:本来我一直用的默认是json格式,然后接受的是按照form-data来的,所以可以将接受的参resquestBody Map,然后get就能获得。

 

今天学姐答辩之后我意识到自己前端代码确实不规范了,打算明天去专门改改代码。


 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/215432.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库系列之简要对比下GaussDB和OpenGauss数据库

GaussDB作为一款企业级的数据库产品&#xff0c;和开源数据库OpenGauss之间又是什么样的关系&#xff0c;刚开始接触的时候是一头雾水&#xff0c;因此本文简要对比下二者的区别&#xff0c;以加深了解。 1、GaussDB和OpenGauss数据库简要对比 GaussDB是华为基于PostgreSQL数据…

WPF仿网易云搭建笔记(4):信息流控制之消息订阅

文章目录 专栏和Gitee仓库前言消息订阅最简单的案例简单用例父组件订阅子组件回调 结果 消息订阅机制消息token是A还是B?传递消息的载体。双重token重复订阅问题 结论 专栏和Gitee仓库 WPF仿网易云 Gitee仓库 WPF仿网易云 CSDN博客专栏 前言 上一篇文章中&#xff0c;我们简单…

PHP基础(1)

PHP是一种服务器端脚本语言&#xff0c;是一种用于开发动态Web应用程序的最流行和广泛使用的语言之一。它的全称为“Hypertext Preprocessor”&#xff0c;是一种开源的、可嵌入HTML的脚本语言&#xff0c;可以嵌入到HTML中&#xff0c;也可以直接作为命令行脚本运行。PHP脚本在…

Java小案例-如果您的 Java 应用程序在不做任何事情时正在消耗 CPU,您如何确定它在做什么?

前言 我正在调用供应商的 Java API&#xff0c;在某些服务器上&#xff0c;JVM 在登录 API 后似乎进入了低优先级轮询循环&#xff08;CPU 使用率为 100%&#xff09;。其他服务器上的同一应用程序不会出现此行为。这发生在 WebSphere 和 Tomcat 上。环境设置起来很棘手&#…

DevOps搭建(四)-GitLab安装细步骤

在这里我们用docker安装 1、创建gitlab安装目录 mkdir -p /usr/local/docker/gitlab_docker 进入该目录 cd /usr/local/docker/gitlab_docker 2、下载gitlab镜像 docker pull gitlab/gitlab-ce:latest 3、创建docker-compose.yml vi docker-compose.yml 输入以下内容保…

理解 HTTP POST 请求:表单与 JSON 数据格式深入解析20231208

引言 在日常的 Web 开发中&#xff0c;理解 HTTP POST 请求的不同数据格式是至关重要的。这不仅有助于构建健壮的后端服务&#xff0c;还能确保与其他服务的有效沟通。本文将深入探讨 multipart/form-data 和 application/json&#xff0c;这两种常见的 POST 请求格式。 POST…

2023 年安徽省职业院校技能大赛高职组“软件测试”赛项样题

2023 年安徽省职业院校技能大赛 高职组“软件测试”赛项样题 目录 任务一&#xff1a;功能测试&#xff08;45 分&#xff09; 1、测试计划&#xff08;5 分&#xff09; 2、测试用例&#xff08;15 分&#xff09; 3、Bug 清单&#xff08;20 分&#xff09; 4、测试报告&…

Python 学习笔记之 networkx 使用

介绍 networkx networkx 支持创建简单无向图、有向图和多重图&#xff1b;内置许多标准的图论算法&#xff0c;节点可为任意数据&#xff1b;支持任意的边值维度&#xff0c;功能丰富&#xff0c;简单易用 networkx 中的 Graph Graph 的定义 Graph 是用点和线来刻画离散事物…

张驰咨询:数据驱动的质量改进,六西格玛绿带在汽车业实践

尊敬的汽车行业同仁们&#xff0c;您是否曾面临生产效率低下、成本不断攀升或顾客满意度下降的困扰&#xff1f;本期专栏&#xff0c;我们将深入探讨如何通过六西格玛绿带培训&#xff0c;在汽车行业中实现过程优化和质量提升。 汽车行业的竞争日趋激烈&#xff0c;致力于提供…

3.cloud-Consul服务注册与发现

1.官网 https://learn.hashicorp.com/consul/getting-started/install.html 2.订单服务 2.1 POM <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-consul-discovery</artifactId> </dependenc…

学习Java第66天,路径问题

相对路径情况分析 相对路径情况1:web/index.html中引入web/static/img/logo.png 访问index.html的url为 : http://localhost:8080/web03_war_exploded/index.html 当前资源为 : index.html 当前资源的所在路径为 : http://localhost:8080/web03_war_exploded/ 要获取的目标资…

【华为数据之道学习笔记】3-9元数据治理面临的挑战

华为在进行元数据治理以前&#xff0c;遇到的元数据问题主要表现为数据找不到、读不懂、不可信&#xff0c;数据分析师们往往会陷入数据沼泽中&#xff0c;例如以下常见的场景。 某子公司需要从发货数据里对设备保修和维保进行区分&#xff0c;用来不对过保设备进行服务场景分析…

Qt 使用百度的离线地图

使用百度离线地图&#xff0c;一下载百度离线包&#xff08;offlinemap&#xff09;&#xff1b;二是准备地图瓦片&#xff08;不同级别的瓦片&#xff09;&#xff1b;三 准备&#xff48;&#xff54;&#xff4d;&#xff4c;主页面&#xff1b;四&#xff0c;&#xff31;&…

深度学习 Day13——P2彩色图片分类

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 文章目录 前言1 我的环境2 代码实现与执行结果2.1 前期准备2.1.1 引入库2.1.2 设置GPU&#xff08;如果设备上支持GPU就使用GPU,否则使用C…

在Go中定义方法

引言 函数允许你将逻辑组织到可重复的过程中,每次运行时可以使用不同的参数。在定义函数的过程中,你会经常发现多个函数可能每次都操作同一段数据。Go可以识别这种模式,并允许您定义特殊的函数,称为方法,其目的是对某些特定类型的实例进行操作,称为接收器。为类型添加方…

nodejs微信小程序+python+PHP基于spark的酒店管理系统-计算机毕业设计推荐

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

排序算法——归并排序

归并排序&#xff08;Merge Sort&#xff09;是计算机科学中非常重要的排序算法之一。它不仅高效、稳定&#xff0c;而且是许多高级排序技术和算法思想的基础。在本文中&#xff0c;我们将深入探讨归并排序的原理、实现方法&#xff0c;以及它的优缺点。 1. 归并排序的原理 归…

Python大模型TensorFlow/PyTorch/Scikit-learn/Keras/OpenCV/Gensim

Python 作为一种高级编程语言&#xff0c;可以用于开发各种大小的模型。以下是一些常见的 Python 大模型&#xff0c;以及它们的优势、劣势和使用场景&#xff1a; TensorFlow&#xff1a; 优势&#xff1a;TensorFlow 是一个非常流行的深度学习库&#xff0c;具有高度的可扩…

阶段五:深度学习和人工智能(掌握使用TensorFlow或PyTorch进行深度学习)

掌握使用TensorFlow或PyTorch进行深度学习需要具备一定的编程基础和数学基础&#xff0c;包括编程语言、数据结构、算法、线性代数、概率论和统计学等方面的知识。以下是掌握使用TensorFlow或PyTorch进行深度学习的一些基本要求&#xff1a; 了解深度学习的基本概念和原理&…

目标检测YOLO系列从入门到精通技术详解100篇-【目标检测】计算机视觉(基础篇)

目录 前言 几个高频面试题目 计算机视觉中常见的错误及解决方案 1.翻转图像和关键点