1、注意点：
-
-
计算属性一定要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实现：
.el-form {
text-align: center;
align-items: center;
width: 350px;
left: 30%;
position: relative;
}5、在element-ui中移入移出事件如果直接绑定在el-dropdown-item上就不生效，就必须放在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/12243164715、密码展示后面的小眼睛：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、是否禁用前端设置：
效果如下所示：
22、文件下载的一中方式：通过 window.open()
下载
methods: {
download(url) {
window.open(url)
}
}23、注意点：在这里如果你的后端是boolean，那么就不需要配置逻辑删除，否则会删除没有效果！
24、Java配置文件上传限制问题：
spring:
servlet:
multipart:
max-file-size: 100MB
max-request-size: 100MB25、对于 multipartFile 与 file会有问题：(具体的报错原因我也很疑惑，但是以后可以在探索以下！)
// 以下两个字段再一次有一个坑，有一次我写文件上传的时候，发现使用 multipartFile 一直显示报错，于是改为file就可以正常实现功能了！
MultipartFile multipartFile
MultipartFile file26、禁止修改用户名通过这个字段 ：disabled
27、elementui中gutter和offset的区别：gutter是指栅格间间隔，offset是指栅格左侧的间隔格数
@click="handleAdd()"
@Transactional 是声明式事务管理：详情请参考博客：https://blog.csdn.net/jiangyu1013/article/details/84397366
// 这个代表这个字段在我们的实体类中有的，但是在我们的数据库表中是没有的！
@TableField(exist = false)
private List{
path: '*',
name: '404',
component: () => import('../views/404.vue'),
}// 这里是vue2的引入方式！
debugger 代码与debugger可以混合使用进行调试！
// 首先看源代码：在这里可以看到我们的导航栏一定要导入router
打单管理
设置
// 当然了肯定有人也会遇到这个问题，如果没有使用会怎么样呢？来自于console控制台的报错！
vue-router.esm.js?8c4f:406 Uncaught (in promise) TypeError: relative.charAt is not a functioncalc(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/105238309Java中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 领域驱动设计
需要和相关领域的专家讨论得出。spring:
devtools:
restart:
enabled: trueautofocus 自动获得焦点html页面中的一个属性
opacity 实现页面的透明度
const x = new Demo();
console.log(Demo.prototype) // 显示原型属性，只有函数才有！
console.log(x.__proto__) // 隐式原型对象checked 可以有以下几种选择：
- checked
- checked=""
- checked = "false"
- checked = "true"
// 你知道上面这四个复选框到底那些被选中了？其实原理是这样的，复选框里只要有checked属性，不管是否为其赋值，结果为空或true或false或任意值，均为选中状态。
// 这里需注意：
- 无论是用javascript还是jQuery来操作checked属性，其值均为true或false，切忌带引号，否则会出错。
例如，有这样一个例子，我要获取这三个复选框是否选中：
学习
code
听音乐
在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
//#region
代码块...
//#endregion在vscode编辑器中 vetur插件会把vue3项目当成vue2去检查，然后出现了eslint报错
在项目的 package.json 中添加以下代码，并重启编辑器就可以了
// package.json
···
"eslintConfig": {
"rules": {
"vue/no-multiple-template-root": "off"
}
}oninput 事件在用户输入时触发：
// 语法：
- HTML 中:
- JavaScript 中:
object.oninput=function(){myScript}
- JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener("input", myScript);
// 支持的 HTML 标签: , , 和