笔记总结！

1、注意点：

• 我们的方法要定义在methods中，千万别定义在method中，大坑！

• 计算属性一定要return

• computed是对data中的属性进行监听，而watch(监听器)是对方法进行监听！

• 组件祖册component是定义全局组件的，components是定义局部组件的!

• props自定义属性的含义，解决一个父子组件数据传递给子组件的一个机制。一定要通过v-bind: 去获取父组件的数据！但是这里不能跟函数进行打交道，所以需要自定义事件!

• this.$emit('myEvent') 记性对父组件的事件的定义！

• props是把父组件的数据传递给子组件，而自定义事件是把子组件的数据传递给父组件！

• 插槽：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

2、小技巧

对于取值的一个小技巧：(几种不同的写法！)

// 以下是对登录的集中方法进行判断
 // 这里的意思就是说如果我们对btntext进行了赋值就走赋值后的，如果没有就进行默认的，也就是这里的title！
 // 这是一个赋值问题！也就是说前面是null undefined "" 都是false相当于，然后把后面的默认值进行赋值给前面！
 if(!this.btntext)this.btntext = this.title //1
 ​
 {{btntext || title}} //2
 ​
 var age = $('#age').val();
 if(!age)age = 0;
 ​
 var age = $('#age').val() || 0;

3、如果在页面中遇到页面没有全适应的时候，我们需要将height 设置为 vh，而不是px与% !

4、如果发现我们的居中没有反应，不能实现的话，可以使用float实现：

css并没有float:center，但是实现水平居中浮动是可以实现的。

.el-form {
         text-align: center;
         align-items: center;
         width: 350px;
         left: 30%;
         position: relative;
     }

5、在element-ui中移入移出事件如果直接绑定在el-dropdown-item上就不生效，就必须放在el-dropdown-item里面的子组件上才能生效。我们需要如下这样写：

<el-dropdown-item @click.native="logout">退出</el-dropdown-item>

6、nodejs解决跨域问题，通过ROWS进行处理：https://blog.csdn.net/qq_52200979/article/details/124731700

7、AJAX遇到IE缓存的问题：我们可以在后面拼接一个时间戳，解决！

8、在vue中将路由设置去掉#：

const router = new VueRouter({
   mode: "history", // 默认为hash，更改为history去掉#！
  routes
})

9、Css中 !important 规则：

// 什么是 !important
// CSS 中的 !important 规则用于增加样式的权重。
// !important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。

// 如何使用：
p {
  background-color: red !important;
}

// 使用建议：

// 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
// 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
// 永远不要在你的插件中使用 !important
// 永远不要在全站范围的 CSS 代码中使用 !important

// 使用场景：比如我们要让网站上所有按钮的样式都一样，但是如果我们将按钮放在另一个具有更优先级的元素中，按钮的外观就会发生变化，并且属性会发生冲突，所以想要设置所有按钮具有相同的外观，我们可以将 !important 规则添加到按钮的样式属性中！

.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}
 
#myDiv a {
  color: red;
  background-color: yellow;
}

10、vue eslintrc.js文件配置：https://blog.csdn.net/lqh4188/article/details/123677186

11、vue eslintrc常用规范：

"no-console": "error", 　　　　　　　　　　　　　　　　 // 禁止console
"no-alert": "error", 　　　　　　　　　　　　　　　　　 // 禁止alert,conirm等
"no-debugger": "error", 　　　　　　　　　　　　　　　 // 禁止debugger
"semi": ["error", "never"],　　　　　　　　　　　　   // 禁止分号
"no-tabs": "error", 　　　　　　　　　　　　　　　　　　// 禁止使用tab
"no-unreachable": "error", 　　　　　　　　　　　　　　// 当有不能执行到的代码时
"eol-last": "error", 　　　　　　　　　　　　　　　　　　// 文件末尾强制换行
"no-new": "error",　　　　　　　　　　　　　　　　　　　 // 禁止在使用new构造一个实例后不赋值
"quotes": ["error", "backtick"], 　　　　　　　　　　 // 引号类型 `` "" ''
"no-unused-vars": ["error", { "vars": "all", "args": "after-used" }], 　　// 不能有声明后未被使用的变量
"no-trailing-spaces": "error", 　　　　　　　　　　　　// 一行结束后面不要有空格
"space-before-function-paren": ["error", "never"], // 函数定义时括号前面要不要有空格
"no-undef": "error", 　　　　　　　　　　　　　　　　　　// 不能有未定义的变量,定义之前必须有var或者let
"curly": ["error", "all"], 　　　　　　　　　　　　　　 // 必须使用 if(){} 中的{}
'arrow-parens': "error", 　　　　　　　　　　　　　　　　// 箭头函数的参数要有()包裹
'generator-star-spacing': "error", 　　　　　　　　　　// allow async-await
"space-before-function-paren": ["error", "never"],  // 禁止函数名前有空格，如function Test (aaa,bbb)
"space-in-parens": ["error", "never"], 　　　　　　　　// 禁止圆括号有空格，如Test( 2, 3 )
"space-infix-ops": "error", 　　　　　　　　　　　　　　//在操作符旁边必须有空格， 如 a + b而不是a+b
"space-before-blocks": ["error", "always"], 　　　　　// 语句块之前必须有空格 如 ) {}
"spaced-comment":["error", "always"], 　　　　　　　　// 注释前必须有空格
"arrow-body-style": ["error", "always"], 　　　　　　// 要求箭头函数必须有大括号 如 a => {}
"arrow-parens": ["error", "always"], 　　　　　　　　//要求箭头函数的参数必有用括弧包住，如(a) =>{}
"arrow-spacing": ["error", { "before": true, "after": true }], // 定义箭头函数的箭头前后都必须有空格
"no-const-assign": "error",  　　　　　　　　　　　　  // 禁止修改const变量
"template-curly-spacing": ["error", "never"], 　　// 禁止末班字符串中的{}中的变量出现空格，如以下错误`${ a }`
"no-multi-spaces": "error", 　　　　　　　　　　　　// 禁止多个空格，只有一个空格的地方必须只有一个
"no-whitespace-before-property": "error", 　　　　// 禁止属性前有空格，如obj. a
"keyword-spacing":["error",{"before": true, "after": true}]　　 //关键字前后必须有空格 如 } else {

12、设置vetur代码缩进，在package.json中进行设置：

    "vetur.format.options.tabSize": 4,    "vetur.format.options.useTabs": false

13、忽略某个字段不展示给前端：(例如密码不想要展示出来！)

@JsonIgnore
private String password;

14、vue 创建项目时，对于eslint中的选择规则：

• ESLint with error prevention only --仅错误预防
• ESLint + Airbnb config --Airbnb配置
• ESLint + Standard config --标准配置
• ESLint + Prettier --Prettier风格规则

1、ESLint with error prevention only(只是错误而已)

    只配置使用 ESLint 官网的推荐规则

2、ESLint + Airbnb config 爱彼迎规范(名字规范)

    使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置

3、ESLint + Standard config 通用规范  vue2.x推荐使用！(标准规范)
    eslint(编码规范)+prettier(格式)统一代码风格
    使用 ESLint 官网推荐的规则 + Standard 第三方的配置

4、ESLint + Prettier 比较漂亮的规范  vue3.x推荐使用这个！

    使用 ESLint 官网推荐的规则 + Prettier 第三方的配置
    Prettier 主要是做风格统一。代码格式化工具
  - ESLint + Prettier 参考: https://blog.csdn.net/xs20691718/article/details/122727900
    
# 规则配置：https://blog.csdn.net/liming1016/article/details/122431647

15、密码展示后面的小眼睛：show-password 实现！

如图所示：

16、CSS渐变定义了两种渐变类型：

• 线性渐变(向下/向上/向左/向右/对角线)
• 径向渐变(由其中心定义)

CSS线性渐变

如需创建线性渐变，您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向(或角度)以及渐变效果。

语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

17、如果你是想定义变量的话推荐使用枚举enum进行定义！参考：https://blog.csdn.net/xgw1010/article/details/108402444

18、关于对象拷贝：如果你有很多属性要设置，但是对于当前你只有某几个属性需要用到，但是要把这些属性一个个再次进行设置又很麻烦，显得代码很臃肿，所以我们的解决方案是通过一个springboot推荐的方法,建立一个dto或者vo(根据自己情况进行设置！)，当然你也可以使用工具列进行封装：BeanUtils.copyProperties |  BeanUtil.copyProperties 后者来自于hutool！

19、对于我们的idea在进行复制的时候可能会遇到的问题：那就是复制进来之后出现 Illegal character: U+200B 问题：解决方案是：将编码改为GBK，删除哪些特殊字符，然后改为UTF-8，完美解决！

20、注解拓展：@PreDestroy    @PostContruct 实现Bean初始化之前和销毁之前的自定义操作。

如果想要深入了解，参考：https://blog.csdn.net/jiangyu1013/article/details/81629316

21、是否禁用前端设置：

<template slot-scope="scope">
    <el-switch v-model="scope.row.enable"  active-color="#13ce66" @change="changeEnable(scope.row)"  inactive-color="#ccc"></el-switch>
</template>

methods: {
    changeEnable(row) {
        this.request.post(`/file/update`, row).then(res => {
        if (res.code === '200') {
            this.$message.success('操作成功')
            }
        })
    }
}

效果如下所示：

     

22、文件下载的一中方式：通过 window.open()

<template slot-scope="scope">
    <el-button
    type="primary"
    @click="download(scope.row.url)"
    >下载</el-button>
</template>
methods: {
    download(url) {
        window.open(url)
    }
}

23、注意点：在这里如果你的后端是boolean，那么就不需要配置逻辑删除，否则会删除没有效果！

24、Java配置文件上传限制问题：

spring:
  servlet:
    multipart:
      max-file-size: 100MB
      max-request-size: 100MB

25、对于 multipartFile 与 file会有问题：(具体的报错原因我也很疑惑，但是以后可以在探索以下！)

// 以下两个字段再一次有一个坑，有一次我写文件上传的时候，发现使用 multipartFile 一直显示报错，于是改为file就可以正常实现功能了！
    MultipartFile multipartFile 
    MultipartFile file

26、禁止修改用户名通过这个字段 ：disabled

27、elementui中gutter和offset的区别：gutter是指栅格间间隔，offset是指栅格左侧的间隔格数

28、在vue中， 如果你在设置了新增与新增子菜单的话，且是共用了一个方法那么请在这里的方法加()，完美解决！  例： @click="handleAdd()"

29、 @Transactional 是声明式事务管理：详情请参考博客：https://blog.csdn.net/jiangyu1013/article/details/84397366

30、对于在实体类中存在，但是数据库中不存在的字段，定义方式：

// 这个代表这个字段在我们的实体类中有的，但是在我们的数据库表中是没有的！
    @TableField(exist = false)
    private List<Menu> children;

31、vueRouter设置404页面：(建立404页面！配置index.js中的配置！)

{
    path: '*',
    name: '404',
    component: () => import('../views/404.vue'),
  }

32、vue引入图片：(vue2、vue3！)

// 这里是vue2的引入方式！
<el-image :src="imgUrl"></el-image>

  data () {
    return {
      imgUrl :require('../assets/xx.png')
    }
  }

// vue3引入方式！
const getImage = (name) => {
  return new URL(`../assets/${name}`, import.meta.url).href
}

// vue背景图片 class 方式进行引入！例：class="bgImg"
bgImg {
    background: url("../assets/xxx.gif") no-repeat;
    background-size: 100% 100vh;
}

33、vue中nextTicket()处理异步回调：

参考博客：https://blog.csdn.net/weixin_43924228/article/details/106548886

34、对于前端vscode的调试，可以使用： debugger 代码与debugger可以混合使用进行调试！

35、对于前端的Element UI导航栏中使用router的问题：

// 首先看源代码：在这里可以看到我们的导航栏一定要导入router
<el-menu
      :default-active="$route.path"//将初始的activeIndex更改为$route.path 
      //注意:route不是router!! 下同
      class="el-menu-demo"
      mode="horizontal"
      text-color="#393939"
      active-text-color="#1D4DFB"
      @select="handleSelect"
      style="border: 0"
      router//激活router
    >
      <el-menu-item
        index="/orderManagement"
        style="border: 0; line-height: 80px; font-size: 20px"
        route="/orderManagement" //route="跳转的路由" 路径前面需要加"/"
        >打单管理</el-menu-item
      >
      <el-menu-item
        index="/orderSet"
        style="border: 0; line-height: 80px; font-size: 20px; margin-left: 30px"
        route="/orderSet"//route="跳转的路由"  路径前面需要加"/"
        >设置</el-menu-item
      >
    </el-menu>

// 当然了肯定有人也会遇到这个问题，如果没有使用会怎么样呢？来自于console控制台的报错！
vue-router.esm.js?8c4f:406 Uncaught (in promise) TypeError: relative.charAt is not a function

36、css中的calc函数：用于动态计算长度值：语法： calc(expression)  必须，一个数学表达式，结果将采用运算后的返回值。  例：width: calc(100% - 1em);

37、@RequiredArgsConstructor // 生成final属性的构造函数，如果没有final就是无参构造函数!如果添加了@Data就包括了它！

38、IDEA插件提升开发效率：

https://blog.csdn.net/qq_41521682/article/details/122881854 
http://events.jianshu.io/p/5bccec4eb652 
https://blog.csdn.net/bealei/article/details/122353097
https://blog.csdn.net/sinat_27933301/article/details/105571549 
https://blog.csdn.net/qq_35427589/article/details/105238309

39、Java中POJO、VO、DTO、PO、Entity的区别

Java中POJO、VO、DTO、PO、Entity的区别
在看一些实际的项目的源码的时候，我们会发现POJO、VO、DTO、PO、Entity、domain的区别,那它们分别是什么呢，与我们学习Java时遇到的POJO有什么不同呢。下面就来简单的谈谈一下我对它们的一个理解。
1、POJO(Plain Ordinary Java Object)：即无规则简单Java对象，就是一个我们最常见的普通Java对象，这个概念是被大家叫出来的，它具有一些属性，然后提供对应的getter和setter。即不与数据库打交道的简单对象。
一个中间对象，可以转化为VO、DTO、PO

2、VO(View Object)：视图对象【表示层对象】，用于展示层，它的作用是把某个指定页面(或组件)的所有数据封装起来。即和html、jsp等页面属性对应的java对象。
对应页面显示的数据对象，可以和表对应，也可以不对应。一般在Controller层使用

3、DTO(Data Transfer Object)：数据传输对象，这个概念来源于J2EE的设计模式，原来的目的是为了EJB的分布式应用提供粗粒度的数据实体，以减少分布式调用的次数，从而提高分布式调用的性能和降低网络负载，但在这里，我泛指用于展示层与服务层之间的数据传输对象。即提取数据库中所需要的的属性减少不需要的属性来提高传输速度、流量。
传递数据。如PO有100个属性，页面VO只显示10个，那么DTO就也传输10个。一般在Service层使用

4.、Entity ：entity里的每一个字段，与数据库相对应。
实体，和PO的功能类似，和数据表一一对应，一个实体一张表

5、PO(Persistent Object持久化对象)持久化对象，它跟数据表形成一一对应的映射关系。
一般在Dao层使用

6、domain：即领域模型 银行 保险 电商 物流 医疗 DDD 领域驱动设计
需要和相关领域的专家讨论得出。

40、idea中yaml语法的一些问题：参考博客： https://blog.csdn.net/TrayLei/article/details/124993952

41、了解js中的require、define、export、import：参考博客：https://www.cnblogs.com/libin-1/p/7127481.html

42、springboot设置热部署：

spring:
  devtools:
      restart:
        enabled: true

43、关于a链接的一些问题：

// 这里如果你的href写的是javascript:void(0)就相当于执行function() {return 0}
<a href="javascript:void(0);" class="pug-notification-close"></a>
// 如果是# 就是相当于指定了一个锚点，也可以写成你想要调到地址！

44、 autofocus 自动获得焦点html页面中的一个属性

45、focus() 自动获取焦点，例：input.focus() 这个是在js中的获取焦点

46、 opacity 实现页面的透明度

47、关于原型属性的关系：

const x = new Demo();

console.log(Demo.prototype) // 显示原型属性，只有函数才有！

console.log(x.__proto__) // 隐式原型对象

48、checked 设置默认勾选状态！

checked 可以有以下几种选择：
- checked
- checked=""
- checked = "false"
- checked = "true"
// 你知道上面这四个复选框到底那些被选中了？其实原理是这样的，复选框里只要有checked属性，不管是否为其赋值，结果为空或true或false或任意值，均为选中状态。
// 这里需注意：
- 无论是用javascript还是jQuery来操作checked属性，其值均为true或false，切忌带引号，否则会出错。
例如，有这样一个例子，我要获取这三个复选框是否选中：

    <input type="checkbox" name="checkbox1" id="checkbox1" checked>学习
    <input type="checkbox" name="checkbox2" id="checkbox2">code
    <input type="checkbox" name="checkbox3" id="checkbox3" checked>听音乐

在js中，我们可以这样来写：

    var checkbox1 = document.getElementById("checkbox1");
    var checkbox2 = document.getElementById("checkbox2");
    var checkbox3 = document.getElementById("checkbox3");
    console.log(checkbox1.checked); // true
    console.log(checkbox2.checked)  // false
    console.log(checkbox3.checked)  // true

在jQuery中，可以这样获取：

    $(function(){
        console.log($("#checkbox1").attr('checked'))  // checked
        console.log($("#checkbox2").attr('checked'))  // undefined
        console.log($("#checkbox3").attr('checked'))  // checked
    })

从上面例子可以看出同样是获取复选框是否选中，js的获取值是布尔值，即true 或者 false，而jQuery的获取值则是checked或者undefined

49、html5 中的媒体标签： <video/>

<video controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is
     a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>

<!--参数详情:
    - autoplay 	 	如果出现该属性，则视频在就绪后马上播放。
    - controls 	controls 	如果出现该属性，则向用户显示控件，比如播放按钮。
    - height 	pixels 	设置视频播放器的高度。
    - loop 	loop 	如果出现该属性，则当媒介文件完成播放后再次开始播放。
    - muted 	muted 	规定视频的音频输出应该被静音。
    - poster 	URL 	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
    - preload 	preload  如果出现该属性，则视频在页面加载时进行加载，并预备播放。 
                         如果使用 "autoplay"，则忽略该属性。
    - src 	url 	要播放的视频的 URL。
    - width 	pixels 	设置视频播放器的宽度。
-->

50、对于vscode中的代码如果遇到了折叠代码但是没有没有完全折叠时：

//#region
    代码块...
//#endregion

51、在vscode中，如果vetur和volar起冲突：

在vscode编辑器中 vetur插件会把vue3项目当成vue2去检查，然后出现了eslint报错

在项目的 package.json 中添加以下代码，并重启编辑器就可以了

// package.json

···
 "eslintConfig": {
    "rules": {
      "vue/no-multiple-template-root": "off"
    }
  }

52、js中的 oninput 事件在用户输入时触发：

// 语法：
- HTML 中:
<element oninput="myScript">
    
- JavaScript 中:
object.oninput=function(){myScript}

- JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener("input", myScript);

// 支持的 HTML 标签:	<input type="password">, <input type="search">, <input type="text"> 和 <textarea>

53、HTML标签： <dl></dl>  <dt></dt> ：

// <dl> 标签定义了定义列表(definition list)。
// <dl> 标签用于结合 <dt> (定义列表中的项目)和 <dd> (描述列表中的项目)。
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

效果如图所示：

 54、总结 HTML标签：

标签	描述
<em>	呈现为被强调的文本。
<strong>	定义重要的文本。
<dfn>	定义一个定义项目。
<code>	定义计算机代码文本。
<samp>	定义样本文本。
<kbd>	定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>	定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。

 55、HTML中的16个全局属性：参考文章：https://www.cnblogs.com/xiaohuochai/p/5033039.html

 56、防抖、节流基本原理及实现：

1. 防抖：防抖是指在事件触发n秒后再执行回调，如果在n秒内再次被触发，则重新计算时间。(就是在触发某个事件后，在下一次触发之前，中间的间隔时间如果超过设置的时间才会发送请求，一直触发就不会发送请求)

// func代表一个函数，里面可能会频繁发生回调或ajax请求，delay表示隔多少秒触发才触发，immediate表示是否立即执行，可传true或false，默认false
function debounce(func,delay,immediate) {
    // result表示返回值
    let timeout,result

    let debounced = function () {
        // 存储触发当前事件的this
        let _this = this
        // 存储event对象
        let args = arguments
        clearTimeout(timeout)
        // 判断是否立即执行，如果不传默认不立即执行
        if (immediate){
            // 立即执行
            let callNow = !timeout
            timeout = setTimeout(()=>{
                timeout = null
            },delay)
            if (callNow) result = func.apply(_this,args)
        } else{
            timeout = setTimeout(function () {
                func.apply(_this,args)
            },delay)
        }
        return result
    }
    debounced.cancel=function () {
        clearTimeout(timeout)
        timeout = null
    }
    return debounced
}

主要应用场景有：a、scroll事件滚动触发，b、搜索框输入查询c、表单验证d、按钮提交事件e、浏览器窗口缩放，resize事件

1. 2.节流：节流是指如果持续触发某个事件，则每隔n秒执行一次。

// func代表可能会频繁发生回调或ajax请求的函数，delay表示等待时间，options为一个对象，leading =true时代表第一次立即执行，training = true 表示最后一次也会被执行
function throttle(func, delay,options) {
    // 使用定时器和时间戳完成的第三版(第一次会触发，最后一次会触发)
    let context,args,timeout;
    // 之前的时间戳
    let oldTime = 0
    if (!options) options={}
    let later = function () {
        oldTime = new Date().valueOf()
        timeout = null
        func.apply(context,args)
    }
    return function () {
        context = this
        args = arguments

        // 获取当前时间戳
        let now = new Date().valueOf()

        // 判断第一次是否执行
        if (options.leading === false){
            // 不执行
            oldTime = now
        }

        // 第一次会触发
        if (now-oldTime > delay){
            if (timeout){
                // 清空定时器
                clearTimeout(timeout)
                timeout = null
            }
            // 立即执行
            func.apply(context,args)
            // 每隔delay秒执行一次
            oldTime = now
        }else if (!timeout && options.trailing!==false){
            timeout = setTimeout(later,delay)
        }
    }
}

主要应用场景： a、DOM元素的拖拽功能实现 b、射击游戏类 c、计算鼠标移动的距离 d、监听scroll事件

57、Object.assign()方法，实现对象合并：MDN参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

58、对于如果你是id置空的话可以选择,参数是可有无的那么： '' 也可以选择 undefined 区别是如果设置为undefined那么久下次不会将参数在传递给服务器，优化的一种策略！

59、CSS属性：vertical-align 属性设置一个元素的垂直对齐方式。

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	使元素及其后代元素的底部与整行的底部对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length	将元素升高或降低指定的高度，可以是负数。
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

60、关于Element UI中的面包屑颜色问题：

// 如果你需要使用面包屑功能，但是你的顶部导航色是黑色的，你会发现这个功能实现之后会很诡异，修改面包屑！
## 样式重写

- 面包屑演示
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item class="myColor">第一层</el-breadcrumb-item>
  <el-breadcrumb-item class="myColor">第二层</el-breadcrumb-item>
</el-breadcrumb>

- style演示
//重写面包屑的字体颜色
.myColor /deep/ .el-breadcrumb__inner {
  color: #3A6DF3 ;
}
//或者这样写
.myColor >>> .el-breadcrumb__inner {
  color: #3A6DF3 ;
}

61、 判断数组还是对象

1. constructor

2. instanceof

3. isArray

4. Object.prototype.toString.call

// instanceof 的弊端 constructor的弊端
 var iframe = document.createElement('iframe')
   document.body.appendChild(iframe)
   var xArray = window.frames[window.frames.length - 1].Array
   var arr = new xArray(1,2,3)
   console.log(arr instanceof Array) //false
   console.log(arr.constructor === Array) //false
   console.log(Object.prototype.toString.call(arr) === '[Object Array]') // 判断数组
   console.log(Object.prototype.toString.call(arr) === '[Object Object]') // 判断对象

62、记录一个插件的坑： JS-CSS-HTML Formatter 的插件，建议直接卸载！太坑了，直接格式化乱了！

63、vue3 + vite对于静态资源的处理：需要使用 new URL( url : string | URL , base ?: string | URL )

const getImgSrc = (user) => {
    return new URL(`../assets/images/${user}.jpg`, import.meta.url).href
}

return {
    getImgSrc
}

<img class="user" :src="getImgSrc('user')" alt="" /> // 这样传递可以实现动态

64、对于idea中的Test测试中遇到@Autowired注入爆红的问题解决：

方法一：command + , 打开设置，然后点击 Preferences | Editor | Inspections --->找到spring Core中的@Autowired设置警告为：warning

方法二：将@Autowired(required = false)

方法三：@Resource 注解

65、idea如果你是直接复制文件到idea中，那么可能会报如下这个错误：

java: 找不到符号
  符号:   类 PasswordNotMatchException
  位置: 程序包 com.cy.store.service.ex

解决方法：
    - 可以尝试重新build项目
    - 可以尝试clean 、install
    - 清除缓存

66、String.valueOf()方法的作用：

在读取数据时需要对数据的强制转换，可采用String.valueOf(a)，把a强制转换成字符串类型
有时候a本来就已经是字符串类型了，但是为了代码的严谨性，也会加入String.valueOf(a)，这时String.valueOf(a)省略也不会出错的。
但有时会涉及到服务器的问题，所以还是加入String.valueOf(a)比较好。

使用 String.valueOf() 进行数据转换，如果被转换的数据为 null, 则这种方法将返回一个 "null"字符串
(String) 方法进行转换时，如果被转换的数据为 null, 则返回 null 对象而不是一个 "null" 字符串。

67、阻止表单自动提交：如果表单是submit，阻止表单自动提交的方式：

// 方式一：
<form action="" method="post" class="form-horizontal" onsubmit="return false;">

// 方式二：
<form action="" method="post" class="form-horizontal" onsubmit="checkUserProduct()">
/* 我们试图在checkUserProduct()中return false来阻止表单的提交。实际上的效果是即使return false ，表单还是会提交。但是如果改成 οnsubmit=”return checkUserProduct()”就没有问题了。
原来onsubmit属性就像是这个html对象的一个方法名，其值(字符串)就是其方法体，默认返回true；如果你没有改变他的返回值，那么他将默认返回true。
就好像java里面，checkUserProduct()方法调用另一个自定义方法，虽然自定义方法return false，但是checkUserProduct()不受影响，本身还是返回自己定义的要返回的值。我们只执行了此自定义方法，没有对其结果进行任何处理。*/

// 方式三：
/* 使用button按钮进行表单的提交 */