这里有三张图片,随便点击一张图片,便可以放大浴了。然后在滚动滚轮的同时,图片也可以随之放大或者缩小。这个就是我们今天要实现的一个效果。 大家好,这里是三亚。我发现很多人随便从会遇到这么一个问题。学基础语法知识的时候,可能感觉自己像叶问啊,一看就懂,感觉能打十个。可是写一个实际项目的时候,就感觉自己像一个林黛玉。 有很多人随便成,他就卡在了上面这个阶段。有的时候卡着卡着,甚至他就放弃了,转行了。可是这又是随便成必经的一个阶段,不仅谁成功开发谁,任何语言都会遇到, 那就是如何利用基础语法知识来实现一个完整的功能。这个阶段可以说是很多学编程的人最难度过的阶段,但只要过了这个坎,后面的学习就 就会轻松很多很多。那么度过这个阶段最好的办法是什么呢?我的界就是不停的写代码,写功了,遇到问题就去解决,然后呢,然后又会遇到下一个问题。 只有通过解决一个又一个实际的问题,最终才能真正的提高我们的编程能力。今天这期课程适合有一定的 atl、 css, 还有这二十位的基础,但又刚好卡在上述阶段的同时,我会通过实际的眼泪解决一个又一个问题,来帮助看视频的你成长。 你需要将屏幕一分为二,视频放在左边 vs 库的放在右边。当然,如果你有两个屏幕,那肯定是最好的。在项目的实现过程中,每个阶段我会去提一个问题,你需要暂停视频,去想一下解决方案。当然你也可以使用 google、 百度等搜索工具。然后你需要长 是去写出解决方案,不管能不能完成,先自己去尝试一下。千万千万不要光看不写。最后你继续播放视频。如果你的解决方案跟我的不一样,没关系,也许你的解决方案比我更好呢。 刀不误卡台功。我们先来理一下解题思路。链条。它有两个图片元素,重点在于预览器会有一个黑色半透明的遮罩,遮罩居中有一个图片元素。在写。写时部分我们实现的难点是要按预览元素的遮罩占满整个页面,并且图片在遮罩中水平垂直。居中。 指挥部分我们需要点击使用动物操作插入预览器和图片,还有能够实现滚动实时修改图片大小的这么一个功能。通常情况下,我建议先写二乘二部分,然后再来写写写首部分,最后才写专属回忆的部分。那如果是鼠标选 停或者说点击之后才出现的效果,我们就可以先把这个效果给实现出来,最后再去实现全停或者点击的效果。那么让我们开始编写我们的代码吧。 现在我在页面之上显示了这三张图片,你可以使用任意的图片来进行练习,并且我把这三张图片的那个宽高都设置成了两百个像素。 可是现在发现一个情况,我这个图片的宽高笔被改变了。那么我如何能够保持这个图片原来的这个宽高笔,并且完全的显示这几张图片呢? 我们可以通过设置图片的 objectively 样式来设置图片的一个适应模式。我们将它设置成 contain 的,那么我们 我们的图片将会能够完全的显示,并且保持原图的宽高比。我们来试一下。下一步让我们来实现一下这个预览器的半透明遮罩效果。 我的思路是把一个 div 设置成费克斯的固定定位,让他能够脱离这个正常的文档流,并且将他拉伸得和整个页面的宽高一致。 最后我再用一个啊 gba 的颜色单位来设置这个背景颜色,将它设置成一个纯黑色,并且不透明度为零点六。 接着把一张图片放到预览器这个 div 当中,那卡拉斯删掉。下一个问题。那么如何才能让这个图片在预览器当中水平并且垂直的进行一个居中呢? 让一个元素在复元素当中水平居中。或许大家都懂,我的推荐是使用弗莱克斯布局,一劳永逸的解决水平居中和垂直居中的一个问题。 首先我给他定义了 discolateflax, 将这个图片的复原数给他声明成一个弹性盒子。然后我用 release item 让这个元素在他复元数当中垂直剧中。接着我用 youtube 卡片让这个 flax 布局的元素当中的指向来进行一个水平聚众。 下一个问题是如何通过点击图片来显示这个预览器。 我的思路是先把所有的图片人数筛选出来,接着绑定他们的 点击事件。然后我们在这些图片元素的点击事件当中创建我们刚刚的预览器,比如这个。我们把他的克拉斯给添加我们刚刚定义的那个克拉斯。 然后我们创建一个预览图片,别忘了让我们这个预览图片的那个 src 设置成我们绑定的这个图片的这个 src 就是我们获取出来的这个元素图片元素的 src。 再接着我们把我们这个图片给添加到这个预览器当中。然后我们把我们这个预览器给添加到我们这个八点元素当中。别忘了把我们原来的代码给注视掉,刷新一下我们的页面,看一下效果。 下一步我就需要点击这个预览器的时候,让我这个图片可以关掉。那么我们应该如何去实现呢? 我们只需绑定预览器的这个点击事件,然后再点击事件当中把预览器自身给删除掉即可。同样别忘了给预览器加上一个小手的图标钥匙。 这张图片显示的太大了。我们将预览器内图片的大小限制为预览器百分之九十的宽高大小。我先在这里给他添加一个 plus, 然后来设置他的样式。 再来看下一个问题,我们如何通过滚动滚轮来说放这个图片呢?就像我们这个案例一样, 我的思路是绑定预览器的滚动事件,然后获取图片的宽高数字, 乘以一个系数实现说话。我尝试了绑定这个滚动事件,并且打印这个图像的宽度,然后打印这个图像宽度的类型, 接着我滚动我的滚轮。由于这个数值是字物串类型,并且后面带有 px 单位,所以我们需要截取这个字物串的前面部分,抛弃后面的这个 ps 单位,然后将它转换成数字,再进行这个后续的运算。 我首先对这个返回的属性值进行一个截取,只保留前面的数字部分,扯去后面两个 px 这两个字母。 接着我将这个数值乘以零点八,也就意味着我将它缩小。然后我再加上 px 作为一个像素单位,在设置成原来的这个图片 宽高让死。那么接着我只需要再判断一下我是向上滚动滚轮还是向下滚动滚轮,然后来决定我应该是放大图片还是缩小图片。放大图片我就乘以一个大于一的系数,缩小图片我就乘以一个小于一的这个系数。 这个系数值可以由我们自己来确定。如果我们想要这个放大和缩小的数率快一点,那么我们就可以相应的改大和改小这个数字。那么对于这个数,它意义是向上滚动滚轮的时候就将图片放到一点二倍, 或者说我向下滚动滚轮的时候就将图片缩小成员的零点八倍。现在刷新我们的页面,查看一下效果, 你可以看到当它放大到一定程度的时候,这个图像 会完全的充满这一个我们设定的最大宽高。这个是因为图片现在已经相当于我们这里设置的最大宽度跟最大高度,所以我们也需要给里面的图片设置这个 oppojitobi, 也就是图片适配模式。 我们先使用一个专属的克拉斯名来区分需要使用图片预览功能的图片。 我在使用 play vivo 这个克拉斯名。现在做到了,只有克拉斯为 pray vivo 的图片才可以预览。作为这个点击的时候他就没有反应了,只有左右这个加了 pray vivo class 才能使用这个预览功能。下一步我们将钻石会跟写起来是部分分别提取出来, 然后按虚引路。这样子以后使用到这个预览功能的页面,只需要引入这个解锁文件跟显显示文件就可以使用了。我全都要。
粉丝763获赞3890

有一个插件是我们在学习 css 和 atm 的时候必须装的,他可以帮助我们在修改代码的时候会自动进行同步, 不过听说这个作者现在已经发达了,他呢不太维护了,那么微软的话呢,推出了跟他类似的啊,就是时时预览我们这个效果呢, 那我建议大家来安装它,它的功能的话呢,相比于它要更加的优秀。呃,我们比如说在这里边啊, 当我们这块敲上这个命令的时候,比如说我显示内置浏览器,这个时候呢会在我的右侧打开浏览器,那当我输入的时候,我没有保存的时候,你看到他就会同时同步的进行更新,那你设置的样式在这里边的话呢,当然就会立刻发生改变,对吧? 会立刻发生改变,那我们也支持什么呢?直接打开外部的浏览器,你也可以呢?呃,通过调样命令的形式打开我们的外部浏览器,这样的话呢就会在外部浏览器当中进行预览,如果你有两台显示器的话呢,这种感觉就非常的棒。 看到了吧,而且它的特点就是说你不用按保存,就是你在修改的时候会自动的进行热更新。看到了吧, 那我建议你的话呢,可以配置个快捷键啊,比如说在这块我就把 ctrl o 给它配置成了。呃,在外部浏览器进行显示,所以以后要用的时候就按 ctrl o 就会直接打开外部的浏览器, 那如果你有两台显示器,一台在修改,一台在写代码,那就非常方便了,你也不用像我这样来回切换了是吧?

给大家推荐一款全能成员必备的 vico 的插件,就是这个六十二,我们可以在这个市场里面去搜索,去安装,安装完了之后他右下角他有一个这个勾猎物,这个图标应用场景是啥呢?有的时候我们在工作当中要简单的写一个页面,比如说我们这个地方 一七年的一个页面,我们要预览他,那么正常情况下我们可能会本地 apm 专删,我去去取得一个服务,那么这时候我们直接点右下角这个勾列我就行了,点他我们点他 看看,他下面有一个端口号叫五五零二,那么这时候我们在浏览器直接输入这个就行了,那么我们就很快的进行预览了。当然你也可以要在预览的页面右键选择 openvid, 然后选中他,直接打开预览你写的页面的效果。 这个插件是前端程序员必装的一款,如果大家有什么好用的插件,可以评论区留言一块分享。

倒在桌面,打开文本编辑器,并且在文本编辑器里面写入 hold word 这句话,并且进行保存,修改后缀 放到桌面并点击保存的时候确认关闭,我们会发现桌面生成了一个叫做文档点 html 的文件, 我们通过右键打开方式,利用浏览器进行预览,我们会发现我们就已经实现了一个叫做 hello word 的网页。那么有的同学呢,可能会发现 我们没办法看到文档后面的这个点称上后缀,我们可以通过打开我们的资源管理器,利用我们的这个选项去进行查看。 下拉到最后面的时候,我们会发现这行文字隐藏已知文件类型的扩展名是勾选上的, 我们把它取消勾选,点击应用确定并且关闭, 我们的点上后缀就已经展示出来了,那么我们就可以通过修改他的名字,随心所欲的修改文件的后缀了,这是入门网页开发的第一步, 那么第二步呢?我们就可以进入招聘网站,查找相应的开发岗位,升职加薪,迎娶白富美了。

哈喽,大家好,之前发的视频下面的话,就有同学在问我这个预览插件啊,还有这个我这个浏览器布局这边东西是怎么弄的,对吧? 我这个插件其实很好玩,因为他每次都是我输了任何文字之后,他右边浏览器里面就会马上实时的反馈出来,就不需要我通过这个保存动作,对吧?因为你看我这左上角这他其实上是没有保存的,我每次输了任何东西,他都是马上能够实时反馈 这个插件的话是比较好找的,直接打开 vs 扣的这个插件里面,扩展里面,然后找到这个 live preview, 这个,对吧?因为它是微软官方的,可以看到就是微软官方的打了个勾的直接叫做 live preview 这么一个插件,我们点击安装了之后,我 已经安装过了啊,点击安装了之后,实际上我们回到这个 htm 这边,我们把它放大一点,回到这个去天猫这边的话,就是在这个 htm 里面,我们直接鼠标右键其实就能看到这个 supervi 有这样一个东西, 幸亏我们点了之后,他其实其实就直接会打开这样一个内置的这样一个预览东西,预览一个界面, 呃,因为它是内置的,所以用着我不太习惯,所以我每次都是让它在浏览器里面打开,直接直接在浏览器打开,然后我就把它关了, 然后我们我们把我就把这个浏览器放在窗口的右边,然后这样可以直接拖动,然后用浏览器来显示,对吧?然后这个浏览器的话,就是你就正常的一个浏览器盖的都有,就是比内置的要好用一些, 他这个除了右键的这样一个开关的以外的话,其实这这 vs 扣的的右上角,因为他不是微软自家的吗?呃,这个右上角,他其实这也有一个,就是这个带这个像放大镜一样这样一个他,你点开他也是这样一个窗口预览, 然后他同样的也是创客于兰,然后我反正就是不习惯,所以我每次都是让他在浏览器里面打开, 然后这是这个插件,好吧?另外一个就是我这个布局,我这个布局因为他本来就是一个乱器吗?我,我只是把他, 你看他就是一个浏览器,一个 app 浏览器,我只是把它放大了之后给他扔到了这个 visco 的的右边,对吧?这样的话他们两个比较好看,就是看起来比较方便一些,然后再加上浏览器功 比这个内置的要强大一些,对吧?然后就这么一个简单的插件,就是这样一个插件,我们这样把它关了,啊, 就是这么一个插件,一个 life preview 这么一个东西,好吧?就这样了,拜拜。

大家好,今天我们继续来分享一下 idea 提高工作效率的一些小技巧。那么今天的主题呢,就是 lifetime late, 那 lifetime late 是什么呢?听上去感觉挺玄乎的啊,那有同学用过之后觉得 简直太好用了啊,不能说大大提高了开花的工作效率吧,但至少也能够小小的提高一下,节省了很多这个敲重复代码的时间呢。那有的同学用过之后呢? 感觉没什么卵用对吧?奇迹银巧罢了,轻浮以及。嗯,就算你没有听过这个 概念啊,但是或多或少的你可能用到过其中的一点啊,就算没有用过,也可能见到过一些啊,就是,也就是说没没吃过猪肉对吧,也看见过猪跑对吧?比如咱们可以看 这里啊,有时候我们想这个快速的生成闷方法,其实咱们可以直接输入这个 man 啊,回车,他就会帮你生成这个闷方法了。还有比如说,咱们快速的想进行输出,那么 sout 回车,那么他会将你进行这个快速的输出。 那如果我想判断这个 user id 不等于空,那怎么办呢?其实咱们直接输入 user id, 点 n n 就可以了,回车,那么它会自动地帮你生成这个 if user id 不能纳这个条件的控制语句。那上述的这些操作呢?都是 id 内置的一些自动补全代码的功能,那它背后的原理呢? 或者它背后是怎么支持呢?其实它就是通过这个 level template 进行支持的。 ok, 那咱们下面来看一下如何自定义这个 level time 来减少你重复敲代码的时间。这里呢,咱们双击 shift, 然后输入 left tea level time later, 然后搜索选择上这个 land time tea, 然后回车就可以了,就可以了,咱们可以看一下上面呢这些就是 idea 内置或者预制的一些这个代码模板,或者叫做实时模板,咱们可以点开这个加入这个模板,可以看一下啊,包括咱们经常用的 for i 啊,这个 i n n 啊, iter 啊,还有下面的像这个 s o t 啊, s o t v 啊,打印变量啊,这些咱们都很熟悉啊,这些都是内置的,那咱们如何自自定义呢?嗯,咱们可以这样,点击右侧的这个加号,可以创建一个 timely to group, 也就是一个分组,对你这个模板进行一个分组嘛,咱们这里叫做 test, 然后选中这个 test 之后呢,咱们开始创建这个模板,那咱们这个输入框呢,其实就是数,你这个就是相当于你这条指令的名字,也就是你生成代码的一个简称。比如咱们也叫做 test, 这里面呢 咱们可以输入 test class test class, 然后我希望输出这个 当前类的名字,那咱们就可以用倒了,倒了两倒了,然后中间写上你变亮的名字,比如叫 class name, 然后点击这个 右侧 added verbos, 也就是编辑这个变量,那么我希望获取当前的这个类名字,它有一个方法叫 做 class name, 咱们来找一下这里 class name, 然后点击 ok, 就可怜这里呢,你可以生成一个描述,比如生叫做获取类的名字,获取当前类 名称,然后你可以点点上这个 reformat, 这个就是相当于给你这格化代码了吗?然后点击 upload, 然后这里 ok, 这里还需要选择一下它的范围啊,就是它作用的范围,咱们作用是加瓦,咱们把加瓦选上就可以了,然后点击 ok, 然后,呃,然后这里面呢?假如我输入了 test, 咱们来看一下,这里看后面他有这个描述,就是获取当前类的名称,然后咱们回车看,其实他已经帮咱们这个把这个模板 已经给输入出来,同时这克拉的内幕替换成了咱们的留字 conder。 那其实我平时呢主要是用这个,用这个 speed boot 进行开发,那其实我也是自己编写了一些比较快捷的 这个 left template, 咱们可以可以看一下,咱们来看这是 user ctrl 类,假如想快速的进行输入这个 rest controller, 那其实我已经咨询你好了,我直接输入 rest c, 然后回车,你看 它 rest ctrl 的一条这个注解呢,其实已经帮我加上了,同时自动帮我引入了 rest ctrl 的这个注解类。还有,嗯,比如这个 request myping i e q m, 然后回车,那么它就会帮我自动的输入这个 request me, 咱们在这里只需输入 users 就可以了,包括我会依赖注入或注入这个 user service, 一般我们会用这个 altwear 这个注解,那么其实我这里输入 aw aw, 然后回车他也会自动帮我生成。还有这里面我需要指一个 get 方法,我希望是 get 卖品,那么我这里就输入 get m 就可以了,这里呢 可以写上优字 id, 然后这里呢在方法的参数前面呢,我需要加上这个 passwhat 这个注解,那么就 pat 一直微回车,那么其实他一般我声卡,我只需输入优字 id 就可以了, 包括我的呃 application 的样文件,假如想快速的生成这个 水库连接值,比如我用的是这个 hackery, 我直接输入 h a k a, 我选择上 hackery, 然后回车,那么他也会自动帮我去生成这个配置文件。 还有假如我这个累,我需要这个,我这个病在出尔化的时候呢,我希望他给我生成这个注解 postcat。 呃,方法,那在这里呢,我只需要输入 post 保持 c 回车,那么他就会自动的生成这个生成这个方法,那我只需要在这个方法写我的相关的业务,相关出入化的语句代码块就可以了。包括我, 比如我想在这个病销毁之前需要做一些事情,我需要生成这个方法,我请输入 pre destroy, 然后回车,那么他就会帮我生成这个 close 方法,嗯,这就是这个 level template。 那其实这些珠姐呢,我提前已经注意已经生成好了,咱们可以来看一下, 打开这个 spring boot 看,这是我已经生成的一些模板,包括生成的配置文件,包括因为我 spring boot 启动的时候一般是一个问方法嘛,我也把它做成了这种 模板的方式,还有我的 room book, 还有我的 lamda, 比如 list 转卖吧。 ok, 今天的分享就到这里了,嗯,我希望大家真的能够把这个模板用起来,来节省你大量输入重复代码的时间啊。最后,希望小伙伴们呢,点赞关注,收藏起来,再见!

hello, 大家好,我是鱼仔。有句话叫做公欲善其事必先利其器。对 java 开发来说,学会如何熟练使用 ida 十分重要,本期视频就要介绍一个教你熟练使用 ida 的插件, id 一 futures trainer。 这款插件在插件商城里有三百多万次的下载量。 插件的安装很简单,点击 versions, 找到对应自己版本的 ida 即可。因为不同版本 ida 的功能会有所不同,因此这个插件的版本非常多。下载完成后,打开 ida 的设置,选择 plugins 离线安装插件,选中下载的安装包即可。接着按照提示重启 ida, 在 help 中找到人 id 一 futures, 然后就可以开始手把手的教学了。比如第一个案例,意思是使用 alt 加 incher, 会给出智 提示,然后就可以在右侧的学习代码中进行实践。第一个智能提示删除了无用的属性, 第二个智能提示优化了表达式的书写。第二个案例是搜索命令,按提示打出 ctrl 加 shift 加 a, 就来到了快速查找命令的窗口。也可以通过双击 shift 使用 search everywhere 功能,比如要查看 ida 信息 就输入 abut, 就会自动弹出 ida 的 abut 功能。接着完成下面的教程。 再来看一些辅助编程的教学功能。下面这个案例中,如果想要在这个代码中快捷的插入 if、 try、 return 等代码块,可以直接输入一个英文的点,接着就可以选择要申请的代码块,十分方便。最后再来看一个重命名变量的教程,有的时候想要给一个变 量改名字,如果一个个去改会十分麻烦,就可以通过下面这个 shift 加 f 六的方式,所有与这个变量相关的代码都会因此发生变化。我的 ida 版本是二零二一点二点一,这个版本下一共有四十个案例,每个案例都可以让你学习到 ida 的快捷特性, 甚至很多工作多年的程序员都不知道原来有些快捷键是多么的方便,赶紧去试一下这个插件吧。以上就是本期视频的全部内容了,我是鱼仔,我们下期再见。

哈喽,大家好,我是鱼仔,最近更新比较少,主要原因是接了一个新的项目进来,花了两周看了之前写了一年半的代码,分享一下对我来说比较有用的。提高使用 i d a 看项目原码效率的小技巧。第一个是查看类之间依赖的 diagrams, 刚拿到项目代码的时候,我们需要整理类之间的依赖关系,就可以使用 diagrams, 在对应的类下,右键选择收 diagrams。 首先看到的是一个比较简洁的内衣来关系,如果希望看到更多的内容,可以在导航栏侧选择展示属性、构造方法、方法等信息,也可以选择对文本进行导出等操作,对于理解代码的结构有很大的帮助。 第二个要介绍的技巧是书签,在看书时可以用书签将不同的内容分别标记。看代码也是一样,在 ida 中,只需要在代码的左侧栏右 键即可创建一个书签。 id 中的书签可以分为普通书签和标记书签。首先介绍普通书签,当你看到一个方法,但是没有很清晰的注视时,就可以打上一个普通标签,然后编辑上描述,比如我在这里给书签带上描述,然后随便再加一个新的, 这个时候就可以通过书签快速定位到代码了。在 windows 下,只需要通过 shift 加 f 十一就能将所有书签展示出来,十分方便。点击对应的书签就能跳转到对应的代码处。 第二种书签类型是标记书签。编辑书签可以给书签打上标记,比如标记为一、二、三等数字或者字母,接下来只需要按住 ctrl 加上对应的标记符号,就能直接跳转到标记位置了,标记书签再看那种来回跳转 代码,十分方便。第三个是使用一些常用的快捷键,快捷键在 windows 和 mac 上有差异,我用 windows 电脑演示几个很常用的快捷键,跳转到前一次或者后一次鼠标停留的位置就可以通过 ctrl 加 alt 加左右方向键即可。 效果接口直接到实线内,可以使用 ctrl 加 alt 加鼠标火箭来实现更多的快捷键。我在之前的视频中已经介绍了,有兴趣的小伙伴可以看往期视频。好了,以上就是本期视频的全部内容了,我是于仔,我们下期再见。

大家好,我是于仔,今天介绍一个使用 ai 帮你写代码的插件,可多特,这款插件号称学习了数以万计的优质开源框架,能给出最符合成宣讲话的提示,话不多说,直接开整。首先还是在插件商城里下载,这款插件 我已经下载完成,下载完成后需要重启 idea, 重启完成后启用口头塔,这款插件就能使用了。现在我想写一个读取文件的功能, 可以明显感觉到蛋白的提示功能变得十分智能。提示只是这款插件的其中一个功能,遇到不会使用的类方法可以 直接通过这款插件查询。比如我现在不知道怎么用 buffer 的 read, 就可以直接右键选择 get a relevant examples, 这款插件又会把 get up stack overflow 中的优质代码以及插件中自己提供的代码片段提取出来供你参考。作为 ctrl c p 程序员的我们,只需要简单借鉴一下一个功能就可以完成了, 携带码就是这么简单。除此之外,也可以手动去搜索鞋类或者方法的使用,比如我想知道 after the reader 和 list the stream 方法放在一起如何使用,我就可以在这里搜索 lit the stream so the。 关键信息越多,就越能定位到你想要找到的用法,这简直就是提高编程效率的神器啊。目前这款插件的提供商推出了一款新的 ai 插件, 我目前在试用中,如果觉得好用也会在之后的视频中推荐给大家。好了,本期视频就到这里了,我是鱼仔,我们下期再见。

在科目开发者工具的样式面板中,我们可以对一个元素的样式进行实时的修改和预纳,但是大家可能不知道,我们在对这些样式进行实时的修改的时候,其实我们也可以把这些修改同步到我们的原代码中, 比如说我在这把这个太极图的宽度改为四百,大家就可以看到,那么我左侧的原代码就时时的被改成四百了。那么这个操作是如何做到的呢?日要实现这个操作也很简单,我们打开 crom 的这个 son 面板,然后选择这个 five system 这样一个标签, 然后点击这添加文件到这个工作区,那么我们可以选择我们的这个项目的原码所在的目录,然后点击确定,那这个时候呢,他就会提醒我们需要对这个目录有完整的访问 权限,那么我们点击允许就可以了。那此时呢,我们就可以来到这个元素面板,然后对我们任何想要改的样式进行编辑,编辑之后呢,这些样式就会自动的被同步到我们的原单板当中。 不过有一点大家值得注意的哈,就是我们的这个样式文件呢,必须是由这个页面直接引入的,比如说我们常用的 view 或者是 reactor, 他们的原代码呢是经过编译后,然后再引入到这个 引入到这个页面的,那么这种情况下他就是不支持的,所以这种场景使用还是非常有限制的,但是呢,这也不妨碍我们多知道一个知识。好的,那么今天的分享就给大家说到这了,拜拜。

bilibili 好,大家好,我是旭峰,欢迎大家收看本期 tiktok。 那么今天这个视频呢,我们将一起来聊一下如何在 ida 当中进行数据库的一个管理。今天这一期视频之前啊,我们管理数据库是这样的啊,比如说有一个 mess circle, 我们就要去下载一个 navy cat 啊,有一个这个 oracle, 我们需要去下载相应的这个软件啊,包括这个啊,其他的这种各种各样的数据库很多很多数据库的协议很多啊,那么我们就需要去下载相应的这个数据库的一个管理软件啊,那么我相信你看完今天的这个视频以后呢,你只需要啊卸载这些软件,然后使用这个 ida 就可以了,对吧?啊? 首先呢,我们一起来看一下如何在 idea 当中进行这个数据库的一个管理。 ok, 首先我们需要去做的就是调出这个 dailybase 啊选项卡,如果你还没有调出的话呢,你可以在这个地方啊,有一个 view, 然后有一个 two windows, 然后在这个地方你只需要去找到这个 dailybase 啊,就可以了,对吧?点开这个 database, 然后呢?呃,首先你第一次点开的时候,这个地方是什么东西都没有的啊,然后我们这个地方来介绍一下他怎么样去创建一个链接啊?首先我们这个地方可以看到有一个 datasource 啊,当我们点击这个 datasource 的时候呢啊,在左侧他 列举出来了当前 ida 支持的这些数据库的协议啊,比如说这个 amazon 的这个 reshift 啊, my circle, 还有这个 hive 啊, click house, 还有这个 oracle, 对吧? pg circle, 对吧?很多很多啊,这种啊, circle light 也可以啊。然后今天呢,我们就举这个 my circle 的例子啊,然后这个地方我们点击 my circle 啊,可以给他一个名字啊,比如说有一个 test, 然后这个地方也是 test, 然后在这个时候呢,就会去输入一些 gpc 的一些啊参数了,比如说这个 host 是 logo host, 然后 user 是 root, 然后 哦密码也是 root database, 你可以去选择,也可以不选择啊。然后当你写完了以后呢,它这个地方会有一个 gdbc 协议的这样的一个 ul 啊,生成出来。如果说你这个地方没有啊,就是你之前没有下载过这个 mesoco 的一个 driver 的话呢,它这个地方会提示你啊,去下载一个 driver 啊,然后完成这个链接, 然后这个地方我们可以点击一下这个 test connection 啊,他这个地方说啊, ok, 对不对?然后我们点击这个 apply, 然后点击一个 ok 啊,你可以看到在这个地方就出现了一个我们刚才建立的这个 test, 那么如果你想要对你刚才所建立的这个输出连接进行修改的话呢?你只需要点击这个图标啊, details source properties 啊,他就会列举出来,对吧?然后这个地方有一个 scammas, 刚才我们在这个啊 general 这个面板,我们是没有去指定任何的这个 dailybase 名称的,对不对啊?所以说他这个地方会从上往下给你啊,列举一个,然后在这个地方他找到了啊 founding ai, 然后把它作为我们的这个 default schema, 就是我默认打开的那个数据库啊,如果你想让它显示你所有的这个数据库,你只需要这样来勾选一下就可以了,对吧?就是 all schemas 啊,或者说你也可以来指定,比如说我就想让它显示这个方力 ai, 还有这个 这个 fond, 还有这个 zero o b 啊,这三个数据库,对吧?然后我们点击一个 apply, 然后点击一个 ok, 然后在这个地方你就可以看到啊这三个数据库, ok, 那么接下来呢,我们就以这个方顶 ai 这个数据库为例啊,来看一下这个啊,如何在 ida 当中去进行表的,或者说这个数据的一个增商改查。好的,我们首先来到这个方顶 ai, 然后我们这个地方给他来一个 new 啊,这个地方 new 你可以去建立很多啊,通常我希望是直接 new query console 啊, 然后在这个 cross console 这个地方呢,我们就可以去呃,写很多的这个数据库的一个脚本啊,当然你也可以去通过这种方式啊 new, 然后一个 table 啊,它这个地方就给你一个 table 的名称,然后你来添加一些列啊,再添加一些列,再添加一些列啊,这个指定它的一个啊, 列的一个数据类型啊,等等等等,包括外界啊,缩影啊,这种图形化的一种界面呢,也是可以的啊,但是我推崇大家是使用这个啊 circle 脚本的方式啊,它其实不是很难,对吧?啊,比如说我们这个地方有一个 student 啊,这样的一个呃, 表,我们想要给他建立一下, ok, 我们只需要这样,对吧? creatable 啊,你会发现他你一边在打的时候呢,他一边在联想,而且联想是非常的这个迅速的啊,然后 creatable student 啊,给他来个括号,然后来个这个 啊,这个 student 他肯定是需要有一些这个啊,字短啊,比如说首先有一个 id, 然后我们给他来一个 primary key 啊,这个地方首先指定一下这个数据类型啊, int 类型, 然后是这个 out increment, ok, 然后再给他来一个这个 name 啊,他是这个 verchar, 然后 verchar 你给他指定一个长度二十,对吧?大概是这样的一个感觉,对吧?然后你 做完了以后呢,你这个地方就可以来执行当前的这个语句啊,在 mac 下面是 command 加 enter 键啊,就是你当前选中的这个区域的 circle 语句啊,它来进行执行,如果你想要全部执行的话呢,你只需要 点这个就可以了啊,然后现在呢,我们就可以来插入一点数据,对吧?啊?插入数据我觉得还是在这个叫什么 刷新一下啊,插入数据的话呢,我觉得还是这样来做比较好一点啊,这个地方直接有一个加号,对吧?然后加上一个,然后你可以看到他这个地方有一个 generator 的啊,所以你不需要去管这个 id, 你只需要来这个内幕就可以了啊,比如说这个叫 eric, 然后 然后当你打完了以后呢,他这个地方没有提交啊,但是你会看到这个地方有一个绿色的小按钮,一个箭头,箭头的上面是 db, 对吧?也就是说把你现在本地的一些修改提交给这个数据库啊,我们点击一下, ok, 然后他这个地方就 给我们插入进去了,对不对?好的,然后这个地方也生成了这个 id, 那么我们再搞一下数据吧,比如说这个 b 离 billy okay, billy billy 啊,然后这个地方呢,我们接下来还是回到这个 student okay, 然后我们这个地方 alter 一下这个 table 啊, student, 然后这是 add 叫什么? colon, 然后给它来一个 h, 然后给它的一个数据类型是 it after 这个 name 啊,哦,你会发现 这个很简单,对吧?就是我们现在是呃 d m l 啊,这个是去修改一个表的结构,对不对啊?我们之前建立了一个 student 这样的一个数据表,然后现在呢,我们想要去加一个啊,年龄的这样的一个字段啊,然后它的这个顺序呢,是在这个 name 这个字段的后面啊,然后我们来执行一下这个语句, ok 啊,然后我们现在看一下当前的一个表结构啊,他这个地方有了一个 age, 对吧?啊?没有任何的问题。然后如果你想要删除的话呢,很简单,只需要这个啊, delete 就可以了啊,这个地方是 drop, 你也可以用这个键盘上面的这个快捷键啊, delete 或者是 mac 上面的这个 删除键啊,很简单,我就不演示删除了啊。然后现在呢,我们就去啊做一些查询的演示吧啊,比如说这个地方是有些 query 啊,首先 select 啊,这个 select sure, 对吧? let's hear from student 啊,他的联想是很快的啊。然后这个地方我们来一个查询啊,在这个 girl console 这个下面呢,就会有这个查询的一个结果,然后在这个结果里面呢,我们也是可以去修改一些东西的啊,比如说这个地方我们给他添加一个十岁, 然后这个地方是一个二十岁啊,你会发现啊,如果你改了一些字段的内容的话呢,它是呈现的是大概这种颜色,对吧?然后你 submit dv 再查一次啊,再查一次看看啊, 然后他这个地方就已经写入到 d b 了, ok, 所以说这个还是很不错的啊。 ok, 那么接下来呢,我们打开一个数据量比较多的表啊,这个 found stocks 啊, 然后在左侧,对吧?那么接下来呢,我们一起来介绍一下他,呃,这个数据预览啊,这个窗口他的一些快捷操作啊,比如说这个地方你可以去选择他的一个分页区间啊,首先他显示的是一到五百行啊,然后他的整个的这个数据是超过五百, 对吧?你可以选择下一页,然后,呃,这个地方是直接回到最初的第一页啊,然后这个地方是直接到最后一页, ok, 这个没什么可说的,然后你还可以去调整他的一个分页的大小啊,个性化的来设置七页或者是十五页来分页,都是可以的,对吧? 然后这个地方呢是一个刷新按钮,就是比如说你在里面你改了一些东西,然后你不想提交,你刷新一下他就会回复,对吧?然后你提交完了以后呢,他自动会刷新啊,或者说别人那些程序正在往你的这个表当中写数据,你点这个刷新也是可以看到的。 然后这个地方呢就是去添加一行,删除一行,比如说你选中这个,然后删除一行,就把他删掉了,对吧?然后这个地方是一个 t x 啊,就是啊,失误提交的一个机制啊,我们通常是选择这个 out 啊,就是自动去提交,通常来讲的话呢啊,你改了一些字段之后,他这个地方会形成一个绿色啊,然后告诉你,你到底要不要提交给这个数据库啊?如果说你提交,那么你在 整个这个界面啊,你改的任何一个东西啊,他都会提交给数据库,而不是说你改一次,然后你提交一次,或者说你改一次,他自动就提交了,不是这样的, 你在你的这个界面里面啊,你改很多啊,改很多行的数据,改很多字段都没有任何问题,你只需要点一次提交,他就会把你基于当前绘画的本次所有的提交 全部都搞到数据库里面去啊,然后这个地方会有一个 ddl 啊,就是你可以去快速的来预览你当前这个表,它的一个结构啊,然后你可以把它复制啊给别人,对吧?啊,或者说你在这里改一下也是可以的。然后这个地方呢,会有一个啊 compare with 啊,我们点一下, 那如果说你现在是啊,有一个 dv 环境啊,开发环境,然后有一个测试环境,有一个与生产环境,有一个生产环境啊,就是各种环境啊,然后这个数据库呢,他是会有不一样的这个结构啊,有可能别人在线上改了,但是线下没改,或者说在 线下改了,线上还没有同步啊,那么这个时候呢,你就可以通过这个 compare 的这个方法来对比一下啊,这两个不同连接下面的同样的这个啊,数据表啊,他们的这个字段啊,其他的一些东西都可以通过这个来比较 ok, 然后这个地方你可以看到有一个 csv 啊,其实你把它点开了以后呢,他这个地方是一个 data extractors 啊,在实际的开发过程当中呢,我们通常有这样的一个需求,就是我们要把数据库里面的一些数据导出啊,然后我们这个地方点这个下载的这个图标啊,然后在这个地方呢,他会有一个 extractor, 就是你导出的一个格式啊,你可以选择这个 xmo 啊, circle insert 啊,它这个地方右侧会有一个,呃,导出的一个预览啊,就是比如说你选择了这个 circle insert 啊,它就会把当前表里面所有的数据啊,变成一条一条的这样的一个插入的记录,对吧?然后 circle update 啊,它是这样的,然后这个地方有一个 csv 啊,它是以逗号分 分割的,然后有一个 tab 分割的,对吧? tsb, 然后有一个 html 啊,这大概是这样的一个东西,然后还有一个 jason 啊, jason, jason, 是这样的,哎,这个 jason 是很不错的,对吧?啊?直接到时候就可以给前端或者说写那个啊,开发文档的时候直接就可以粘贴了,对吧? 然后整个这个地方呢,就是我们的一个 circle 的一个导出啊,然后这个地方他指示的是你当前的一个 session 啊,你现在是啊,打开的是这个 found stocks 这张表,然后他所在的一个连接是 test okay, 然后这个地方是怎么样去看你左侧的这个数据啊?你是以 tree 的这种方式还是以这种 table 的方式,对吧? ok, 大概就是这样的一个意思,我们再来看一下这个东西吧,就是比如说我们现在的这个 a b p v two found 啊,它这个地方有一个 diagrams 啊,就是一个数据表,然后我们可以来 show 这个 diagram grams, 然后我们帮他放大啊,他这个地方就有点像那个 power designer 啊,他会去显示你的这个表与表之间的一些啊, 实体关系啊,和这种外界关联关系之类的这种实体图,对吧?然后你可以把它打印出来,把它啊,就是导出为一张图片,然后保存什么之类的,大概是这样的一个东西,对吧?然后接下来我们看一下对于每一张表它的一个右键操作啊。首先第一个是我们的这个 generate jpa entits 啊,它是一个我自己安装的一个 jpa 的插件啊, 比如说我们来演示一下它的效果,当你点击了以后呢,你就会去啊生成相应的这个 n t t, 还有相应的这个 repaster 一样,就是类似于 my badest 那个,呃,实体类和这个 d a o 层啊,大概是这样的一个东西啊。 然后就是这个 new 啊, new 就是你可以去创建很多的,比如说这个 table 呀, colon 啊, foreign key 啊等等等等啊, 包括这个 dead sauce 啊,也是可以通过这个 new 来创建的。然后 rename 就是去呃改一下这个表的名称啊, modify table 啊,这个我们讲一下,就是这个地方,你可以去增加列,减少列,然后把列啊挪到上面去,挪到下面来,对吧? 然后你所有的这个当前绘画的一个修改,他都会生成一个 circle script 啊,就是一个 circle 的一个脚本啊,如果说你们公司还是使用那种 啊,手动人工去记录数据库的一个变更的话呢,那么这个时候就非常有用了啊,就是比如说我们现在把这个挪到上面去, 哎,你会发现他这个地方有一个搜索脚本,对吧?然后我们把这个 group name 啊,改成这个 test 啊,他这个地方又会有一个这样的一个东西生成,对不对?也就是说你本次在开发环境,或者说你在本地做了任何的这个啊, configuration 这个表的一个修改操作啊,他这个地方都会有一个相 的这个 circle script, 比如说你没有线上的这个数据库的一个操作权限啊,但是 dba 有,对吧?你的那个 dba 小伙伴他有,那么你就需要把这样的一个东西告诉 dba 啊,你帮我去在线上数据库操作一下, 这个是从上到下按照顺序去执行的,和你在本地从上往下按照顺序去操作是一样的顺序啊,所以说这个是非常实用的, ok, 我们把这个给他撤销啊,然后 find use it 啊,哪些地方用到这个表? circle scripts 这个 如果说你想要去啊,直接获取这个表的一个键表语句啊, generate ddl to clickboard 啊,然后这个地方你在任何一个地方粘贴一下啊,他就出来了,对吧?很简单啊, 然后下面的这些东西呢,大家可以自己去探索一下啊,就是你自己首先需要去啊,在你的本机装一个麦色口数据库,然后你这样建立一个连接, 按照我的这个视频来建立一个连接,非常的简单,对吧?然后完事以后呢,你就可以去啊,做一些愉快的操作了啊,然后这个地方它是一个快捷的这个 jump to carry console 的这样的一个叫什么? 呃,按钮,然后你这个地方有一个 jump to carry console files 啊,你可以在左侧你看到啊,它这个地方是根据你的这个连接名啊来分组管理的 啊,然后这个地方,比如说你可以给他做一个重命名啊啊,你保存了你的一些查询语句,你保存了你的一些这个啊表结构的修改语句和表结构的这个初始化建表语句啊,都是可以这样来进行修改的啊。 ok, 那么以上呢,就是本期视频的一个全部内容了,那么如果大家觉得这个视频还不错的话呢,请帮忙点赞,投币分享一件三件支持我一下, 那么如果你还没有关注我的这个频道,也请你点下关注啊,我的这个频道是专注于程序员干货,视频教程分享,关爱程序员身心健康的这样一个频道。 ok, 我们下个视频再见吧, peace。

我们讲一下如何解决文件,首先我们收到文件的话,在这里 邮箱,然后收件夹这里刚刚我测试发送了一个文件,点这里要点这个下载保存到桌面, 下载完成,然后我们解压的话,可以通过右键然后解压到这个目录下面, 然后文件就解压出来了,点 index 就可以测试越南网页效果了。 然后我们还可以这样双击打开, 然后点这个解压道,我们也可以解压到自己指定的目,比如说我们可以解压到这个低盘,立即解压,然后我们在低盘就可以看到这个文件, 然后这个文件解压之后呢要改成自己的学号名字,解压之后我们右键 可以查看他的网页效果,比如说我们可以用三六零二一或者遨游或者其他的浏览器打开,我们点这个奥迪奥来试一下 网页正常查看。然后我们如果要看代码的话,点这个右键打开方式,可以用这个军窝窝查看 这个是网页的效果。然后我们看其他页面,可以这样点打开子页面,这个 或者我们关掉,可以直接把文件直接拖到君窝窝里面,也可以打开网页看他的代码和效果这样的。

id 的图度窗口可以帮我们快速定位到代办任务中,提升开发效率。点击即可快速跳转到对应代码。 在编码时,我们可以通过添加图度注视标记暂时没时间实现的功能。添加好注视后,在图度窗口就能看到。当图度数量太多时,可以到 scope base 中调整范围。 如果要自定义图度注视格式,例如添加标注者,可以到 life template 中修改哦。

三个 id 小技巧哈,第一个是这个正则的编辑,我们都知道在家务里写正则的时候,这个杠要写两个杠,比如这个杠 d 要这样写,他不像 gs, 那其实 id 有个小工具,就按 op 神加回车,有一个这个, 然后呢我们可以在上面直接写,比如写杠 d, 大家看下边就是两个杠,然后呢我们再来一个杠 n, 好处是什么呢?我们还可以在下巴测试,比如一二三,这样是错误的,再来个换行看看就变成对了。那第二个小技巧呢,就是写 f, 我们还是拿这个麦池举例点麦池,然后呢这块 如果我们想给这个整个做一个非的处理,需要在前面加一感叹号,对吧?其实还有一种方法,就是我们在这 在选麦值的时候,注意一定要选上他,让他变成蓝色背景,比如你按下箭头选上他或者我这个快捷键,可以用 ctrl n 往下, ctrl p 往上,一定要让他背景变成蓝色这样选中的状态,然后按感叹号,就是 shift 加一吗? 这样他前面自动有这个感叹号了,我们可以直接在这写东西。好,那第三个小技巧,就是两个我最常用的回车的组合使用。第一种就是 shift 加肯慢的加回车,他会补全你后边的分号或者大括号,我们试一下这个哈,看看他就补全大括号,然后光标自动挪到下边。 那如果是这种呢?比如我们在这用 shift 加 club 加回车,他就会直接在后边加个分号,然后第二个组合呢,就是 shift 加回车, 他不管你光标在这一行的什么位置,他都会在下面插入一行,打开 shift 就是这样。