2024年

3月

11日

1.Avoid using non-primitive value as key, use string/number value instead.

这句话是关于编程中对象键（key）使用的建议。在大多数编程语言（如JavaScript）中，对象的键应该是原始数据类型（primitive types），如字符串（string）或数字（number）。不建议使用非原始值（如对象、数组或其他复杂数据类型）作为键，因为这可能导致预期之外的行为和错误。

以下是为什么避免使用非原始值作为键的原因：

不一致性：非原始值（如对象或数组）在比较时可能不会像字符串或数字那样表现得一致。例如，两个看起来相似的对象可能在比较时并不相等，因为它们在内存中的位置不同。
性能问题：使用非原始值作为键可能会降低性能。因为每次比较键时，都需要进行深度比较，这比简单的字符串或数字比较要慢得多。
预期之外的行为：在某些情况下，使用非原始值作为键可能会导致预期之外的行为。例如，在JavaScript中，如果你使用对象作为键，它会被转换为字符串，这可能会导致混淆和错误。
因此，为了避免这些问题，最好始终使用字符串或数字作为对象的键。如果你需要存储复杂的数据结构，可以考虑将它们作为对象的值，而不是键。

2.Invalid value for option “methods”: expected an Object, but got Function.

3.Hint at VNodes identity for VDom diffing, e.g. list rendering

在虚拟DOM（VDom）差异化（diffing）的过程中，为了高效地更新UI，我们需要一种方式来识别哪些虚拟节点（VNodes）是新的，哪些是需要更新的，以及哪些是不变的。这种识别通常是通过一个称为“key”的特殊属性来实现的。

当你渲染一个列表时，例如，在一个React应用中，你可能会使用.map()方法来为每个列表项创建一个新的VNode。但是，如果没有一个唯一的标识符来区分这些VNodes，React将不得不进行全量的树比较来确定哪些节点需要更新，这会导致性能下降。

为了避免这种情况，你可以为每个列表项提供一个唯一的key属性。这个key应该是一个字符串或数字，它唯一地标识列表中的每一项。这样，当列表发生变化时，React可以使用这些key来识别哪些VNodes是新的，哪些是需要更新的。

以下是一个使用key属性的React列表渲染示例：

jsx
const items = ['Item 1', 'Item 2', 'Item 3'];  
  
return (  
  <div>  
    {items.map((item, index) => (  
      <div key={index}>  
        {item}  
      </div>  
    ))}  
  </div>  
);

在这个例子中，我们使用了数组索引作为每个列表项的key。然而，如果列表项的顺序可能会发生变化，那么使用索引作为key可能会导致问题。在这种情况下，你应该使用一个更稳定的唯一标识符作为key，例如，一个数据库ID。

注意，虽然key属性在虚拟DOM中被用作一个提示来帮助进行差异化，但它并不会被渲染到实际的DOM中。这意味着你可以在不影响性能的情况下，自由地选择key的值

4.Duplicate keys detected: ‘[object Object]’. This may cause an update error.

错误消息 “Duplicate keys detected: ‘[object Object]’” 通常出现在使用React或类似的前端库/框架时，尤其是在渲染列表时。这个错误表明在渲染过程中存在重复的key值，这是不允许的，因为key应该是唯一的，用于帮助React（或其他库）识别哪些组件需要更新、删除或保留。

这个错误通常发生在以下情况之一：

不正确的key赋值：当你为列表项指定key属性时，每个key的值应该是唯一的。如果你不小心使用了相同的值，就会出现这个错误。
对象作为key：有时，开发者可能会错误地使用对象作为key的值。由于对象是引用类型，即使两个对象看起来内容相同，它们在内存中的地址也是不同的，因此不应该作为key。
动态数据变更：如果你的数据源在渲染过程中发生变化，可能会导致原本唯一的key变得不唯一。

为了解决这个问题，你应该确保：

每个列表项都有一个唯一的key值。
key的值应该是字符串或数字，而不是对象或数组。
key的值在组件的生命周期内保持不变。
例如，如果你有一个用户列表，并且每个用户都有一个唯一的ID，你应该使用这个ID作为key：

jsx
const users = [  
  { id: 1, name: 'Alice' },  
  { id: 2, name: 'Bob' },  
  // ...其他用户  
];  
  
return (  
  <div>  
    {users.map(user => (  
      <div key={user.id}>  
        {user.name}  
      </div>  
    ))}  
  </div>  
);

在这个例子中，我们使用了user.id作为每个列表项的key，因为id是唯一的。

如果你确实遇到了重复的key问题，你需要检查你的数据源和渲染逻辑，确保每个key都是唯一的。如果key的值来自于动态数据，确保在组件渲染之前数据已经稳定且key值唯一。

5.The template root requires exactly one element.es

这个错误消息 “The template root requires exactly one element” 通常出现在使用前端框架或库（如React、Vue等）时，尤其是在编写组件或页面模板时。这个错误意味着在模板的根级别，你需要有一个单一的容器元素来包裹其他所有元素。

在React中，例如，一个组件的render方法或函数组件的返回值应该只包含一个顶级元素。如果你返回了多个并列的元素，React会抛出这个错误。为了解决这个问题，你需要确保所有并列的元素都被一个单一的父元素包裹。

错误的示例（可能导致 “The template root requires exactly one element” 错误）：

jsx
function MyComponent() {  
  return (  
    <div>First Child</div>  
    <div>Second Child</div>  
  );  
}

在这个错误的示例中，MyComponent 返回了两个并列的 div 元素，没有一个单一的父元素来包裹它们。

正确的示例：

jsx
function MyComponent() {  
  return (  
    <div>  
      <div>First Child</div>  
      <div>Second Child</div>  
    </div>  
  );  
}

在这个正确的示例中，两个 div 元素都被一个外部的 div 元素包裹，这样就只有一个顶级元素。

同样的规则也适用于其他前端框架和库。确保你遵循了框架的文档和最佳实践，特别是关于如何组织组件结构和返回JSX/模板的部分。

请问bilibili的网页 header 是如何做到一直置顶的
在 Vue.js 中，你可以使用 scroll 事件监听器来检测页面滚动的位置，并据此改变 header 的样式。以下是一个简单的 Vue 组件示例，展示了如何在页面向下滚动时改变 header 的样式：

vue
<template>  
  <div id="app" @scroll="handleScroll">  
    <header :class="{ scrolled: isScrolled }">  
      <!-- Header content -->  
      <h1>Bilibili Header</h1>  
    </header>  
      
    <!-- Main content of the page -->  
    <div style="height: 2000px;">  
      Scroll down to see the effect!  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      isScrolled: false, // 用于控制header样式的布尔值  
    };  
  },  
  methods: {  
    handleScroll() {  
      // 获取页面滚动的距离  
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;  
        
      // 判断是否滚动了页面  
      this.isScrolled = scrollTop > 0;  
    },  
  },  
  mounted() {  
    // 在组件挂载后添加滚动事件监听器  
    window.addEventListener('scroll', this.handleScroll);  
  },  
  beforeDestroy() {  
    // 在组件销毁前移除滚动事件监听器  
    window.removeEventListener('scroll', this.handleScroll);  
  },  
};  
</script>  
  
<style>  
header {  
  background-color: #333;  
  color: white;  
  padding: 10px;  
  transition: background-color 0.3s ease; /* 平滑过渡效果 */  
}  
  
/* 当页面滚动时，改变 header 的背景色 */  
header.scrolled {  
  background-color: #222;  
}  
</style>

在这个 Vue 组件中，我们做了以下几件事：

在 data 中定义了一个 isScrolled 的布尔值，用于控制 header 是否应该应用滚动后的样式。

创建了一个 handleScroll 方法，它会在页面滚动时被调用。这个方法会检查页面滚动的距离（scrollTop），并据此设置 isScrolled 的值。

在 mounted 钩子中，我们向 window 对象添加了一个滚动事件监听器。

在 beforeDestroy 钩子中，我们移除了之前添加的滚动事件监听器，以避免内存泄漏。

在 template 中，我们使用 v-bind:class（简写为 :class）来动态地根据 isScrolled 的值给 header 添加或移除 scrolled 类。

在 style 中，我们定义了 header 的基本样式和滚动后的样式，并使用 CSS 过渡效果来平滑地改变背景色。

这样，当页面向下滚动时，header 的背景色会平滑地过渡到 #222，而当页面向上滚动回到顶部时，背景色又会平滑地过渡回 #333。

2023年

10月

10日

POJO 数据类型和数据库数据类型不同导致 Controller Serivece 无法运作

25日

查询分页问题
报错

HTTP Status 500 - Request processing failed; nested exception is com.github.pagehelper.PageException: 分页查询缺少必要的参数:pageNumber

原因
需要传入pagehlep.stater(pageNumber,size)

pageNumber：前往第几分页
size：按照多少数量分页

控制层初始化失败问题
报错
xxxController 对象初始化失败
原因
web.xml

<listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>

28日

前后端定义的name属性名不一致导致数据丢失问题
原因
前端传输的name属性和后端对象属性不一致
解决
使用 @JsonProperty() 注解起别名方式，关联前端

Mybatisplus分页问题
解决
在 ==config/mybatisPlusConfigure== 设置Bean类，配置分类

@Configuration
@MapperScan("top.wabisabifag.dao")
public class MybatisPlusConfig {
 @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

Maven的Tomcat插件乱码问题
原因
Tomcat插件默认不支持中文识别
解决

<plugin>
    <groupId>org.apache.tomcat.maven</groupId>
    <artifactId>tomcat7-maven-plugin</artifactId>
    <version>2.1</version>
    <configuration>
          <path>/</path>
          <port>8080</port>
          <uriEncoding>UTF-8</uriEncoding>
    </configuration>
</plugin>

解决SpringBoot和Vue 跨域问题
解决

package top.wabisabifag.config;


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.format.FormatterRegistry;
import org.springframework.format.datetime.DateFormatter;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.ViewResolverRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    // 配置全局 跨域问题
    @Bean
    public CorsFilter corsFilter(){
        // 添加CORS配置信息
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //1.访问地址
        corsConfiguration.addAllowedOrigin("http://localhost:8081");
        //2.cookie传入
        corsConfiguration.setAllowCredentials(true);
        //3.允许的请求方法
        corsConfiguration.addAllowedMethod("*");
        //4.允许的头信息
        corsConfiguration.addAllowedHeader("*");

        // 添加映射路径，拦截请求  过滤资源
        UrlBasedCorsConfigurationSource url = new UrlBasedCorsConfigurationSource();
        url.registerCorsConfiguration("/**",corsConfiguration);

        return new CorsFilter(url);
    }
}