## 简介

> 我们在创建新项目时，有时期望本地创建好项目初始架构后，直接上传至Github仓库，而不是先克隆下来仓库，然后再将初始架构代码拷贝过来提交。
> 
> 此时你可以参考本文操作。



## 详细步骤

本文以命令的方式操作，了解之后你会发现很简单。

> 提示：以下步骤有些顺序可以颠倒，为了便于理解，所以采用如下顺序编写文档，有兴趣的可以自行思考尝试每一步的不同顺序。

### 1. 初始化本地代码

> 这一步是提醒你准备好初始化的代码，放到一个文件夹下，没有命令，视自身情况操作即可（建议代码根目录文件夹名称就是项目名）。

### 2. 初始化本地仓库

```sh
git init
```
> 执行之后，会自动创建本地分支`master`，但github现在的默认主分支是`main`，所以建议执行下面第6步。

### 3. 设置用户信息

> 以下是全局配置，如果你以前已经全局配置过，则无需执行。如果不希望全局配置，去掉`--global`参数即可。
> 
> 注意修改以下命令的内容为你自己的信息，建议设置为github帐号对应的名字和邮箱。

```sh
# 设置用户名
git config --global user.name "John Doe"
# 设置邮箱
git config --global user.email johndoe@example.com
```

- 拓展

```sh
# 查看当前用户全局配置
git config --global  --list
# 查看当前仓库配置
git config --local  --list
```

### 4. 设置仓库地址

> 下方命令注意修改为你的仓库地址，其中`https://github.com`为仓库地址，`DingDangDog`为用户名，`learn`为项目名（仓库名）。

```sh
git remote set-url origin https://github.com/DingDangDog/learn.git
```

### 5. 创建远程仓库

> 此步骤无命令，需要在github网站手动操作创建仓库，注意仓库名要与上一步设置的项目名一致，如上一步中的`learn`。

### 6. 创建main分支

> 如果希望使用默认分支`master`，则不需要执行此步，且后续步骤中，`main`均替换为`master`即可。

```sh
# 创建并检出main分支
git checkout -b main
```

### 7. 添加本地文件到本地仓库

```sh
# 将本文件夹下全部文件添加到仓库
git add .
```

### 8. 提交代码到本地仓库

```sh
git commit -m "提交注释说明"
```

### 9. 推送本地分支到远程仓库

```sh
git push origin main
```

本地初始化项目并上传Github仓库

## 简介

> 本文用于记录一些`js`代码，包括函数、语法等等。
> 
> 目前包括：获取浏览器/系统参数 | 页面加载后自动执行 | 禁止div显示 | 设置滚动条固定在底部
> 
> 持续更新中。。。



## 获取浏览器/系统参数

```javascript
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight

网页可见区域宽：document.body.offsetWidth (包括边线和滚动条的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)

网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight

网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft

网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft

屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width

屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

你的屏幕设置是：window.screen.colorDepth 位彩色
你的屏幕设置：window.screen.deviceXDPI 像素/英寸
```

## 页面加载后自动执行

```javascript
    window.onload = function () {
        console.log("auto run")
    }
```

## 禁止div显示

1. 利用css的display属性

```js
var doc = document.getElementById('test'); //选取id为test的div元素

doc.style.display = 'none'; // 隐藏元素

doc.style.display = 'block'; // 显示元素
```

2. 利用css的visibility属性

```js
var doc = document.getElementById('test'); //选取id为test的div元素

doc.style.visibility = 'hidden'; // 隐藏元素

doc.style.visibility = 'visible'; // 显示元素
```

## 设置滚动条固定在底部

```js
var div = document.getElementById("div");
// 当一个div有滚动条时
// scrollHeight为其div真实高度
// scrollTop为已向下滚动的距离
// clientHeight为div可见区域的高度(一般是固定高度)
div.scrollTop=div.scrollHeight;
```

## 观察器

使用观察器（MutationObserver）可以监听页面元素变化，详情可参考：[MutationObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver)

```js
/**
 * 监听body变化
 */
function listener_body() {

    // 选择要观察的目标节点
    const body = document.body;

    // 观察器的配置（需要观察什么变动）
    var config = { childList: true };

    // 当观察到变动时执行的回调函数
    var callback = function (mutationsList, observer) {
        console.log("body发生变化");
    };

    // 创建一个观察器实例并传入回调函数
    var observer = new MutationObserver(callback);

    // 用配置文件初始化观察器实例
    observer.observe(body, config);
}
```

JS笔记

## 简介

> 本文用于记录工作中遇到的，或道听途说的，奇奇怪怪的注解。主要包括但不限于`springboot`相关注解。
> 
> 记录内容主要包括：记录日期、所属依赖包、官方说明、源码、个人理解、用法示例。 如果个人理解有误，欢迎评论指出。



## @ConditionalOnProperty

- 记录日期：`2023-02-27`

- 所属依赖包：`org.springframework.boot.autoconfigure.condition`

- 官方说明：详见：[property-conditions](https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#features.developing-auto-configuration.condition-annotations.property-conditions)

> The @ConditionalOnProperty annotation lets configuration be included based on a Spring Environment property. Use the prefix and name attributes to specify the property that should be checked. By default, any property that exists and is not equal to false is matched. You can also create more advanced checks by using the havingValue and matchIfMissing attributes.

- 源码：根据源码可知，该注解可用于类、方法，由于类注释较长，此处不贴出。

```java
@Retention(RetentionPolicy.RUNTIME)
@Target({ ElementType.TYPE, ElementType.METHOD })
@Documented
@Conditional(OnPropertyCondition.class)
public @interface ConditionalOnProperty {

	/**
	 * Alias for {@link #name()}.
	 * @return the names
	 */
	String[] value() default {};

	/**
	 * A prefix that should be applied to each property. The prefix automatically ends
	 * with a dot if not specified. A valid prefix is defined by one or more words
	 * separated with dots (e.g. {@code "acme.system.feature"}).
	 * @return the prefix
	 */
	String prefix() default "";

	/**
	 * The name of the properties to test. If a prefix has been defined, it is applied to
	 * compute the full key of each property. For instance if the prefix is
	 * {@code app.config} and one value is {@code my-value}, the full key would be
	 * {@code app.config.my-value}
	 * <p>
	 * Use the dashed notation to specify each property, that is all lower case with a "-"
	 * to separate words (e.g. {@code my-long-property}).
	 * @return the names
	 */
	String[] name() default {};

	/**
	 * The string representation of the expected value for the properties. If not
	 * specified, the property must <strong>not</strong> be equal to {@code false}.
	 * @return the expected value
	 */
	String havingValue() default "";

	/**
	 * Specify if the condition should match if the property is not set. Defaults to
	 * {@code false}.
	 * @return if the condition should match if the property is missing
	 */
	boolean matchIfMissing() default false;

}

```

- 个人理解

> `@ConditionalOnProperty`可以与`@Bean`结合使用，当配置项符合`@ConditionalOnProperty`限制条件时，`@Bean`才会生效。

- 用法示例：用在方法上，作用可以理解为当`spring.datasource.druid.slave.enabled`属性的值为`true`时，该方法才能够生效。

```java
@Bean
@ConfigurationProperties("spring.datasource.druid.slave")
@ConditionalOnProperty(prefix = "spring.datasource.druid.slave", name = "enabled", havingValue = "true")
public DataSource slaveDataSource(DruidProperties druidProperties)
{
    DruidDataSource dataSource = DruidDataSourceBuilder.create().build();
    return druidProperties.dataSource(dataSource);
}
```

## @CrossOrigin

- 记录日期：`2023-02-27`

- 所属依赖包：`org.springframework.web.bind.annotation`

- 官方说明：详见：[CrossOrigin](https://docs.spring.io/spring-framework/docs/6.0.5/javadoc-api/org/springframework/web/bind/annotation/CrossOrigin.html)

> Cross-origin resource sharing (CORS) is a W3C specification implemented by most browsers that lets you specify in a flexible way what kind of cross-domain requests are authorized, instead of using some less secure and less powerful approaches such as IFRAME or JSONP.
> 
> As of version 4.2, Spring MVC supports CORS. Using controller method CORS configuration with @CrossOrigin annotations in your Spring Boot application does not require any specific configuration. Global CORS configuration can be defined by registering a WebMvcConfigurer bean with a customized addCorsMappings(CorsRegistry) method, as shown in the following example:
> ```java
> @Configuration(proxyBeanMethods = false)
> public class MyCorsConfiguration {
> 
>     @Bean
>     public WebMvcConfigurer corsConfigurer() {
>         return new WebMvcConfigurer() {
> 
>             @Override
>             public void addCorsMappings(CorsRegistry registry) {
>                 registry.addMapping("/api/**");
>             }
> 
>         };
>     }
> 
> }
> ```

- 源码：可用于类、方法。源码都是英文注释，太长，有兴趣自行查看吧，要不然太水了。。。

- 个人理解

> 使用`@CrossOrigin`注解，可以解决部分因前后端分离出现的跨域问题，现在处理跨域问题的方法有很多，例如我工作中常用的处理方式是，前端在http工具类中处理。还有nginx代理处理等等，可视情况自行选用。

- 使用示例：用在类上

```java
@RestController
@CrossOrigin
@RequestMapping("/api")
public class ApiController {
//……此处具体省略代码
}
```

## @ComponentScan

> 配置Springboot自动扫描包，`@SpringbootApplication`有相同功能，所以一般无需适用，剔除某个想要的包时使用。

```java
// 剔除com.hlkj.core.*报下类的自动扫描
@ComponentScan(excludeFilters = @ComponentScan.Filter(type = FilterType.REGEX, pattern = "com.hlkj.core.*"))
```

奇奇怪怪的注解

## 简介

> 前端开发使用的包管理工具`yarn`安装。




## 安装

官方文档：[Installation | Yarn](https://yarnpkg.com/getting-started/install)

### Node.js >= 16.10

如果安装的node版本大于等于`16.10`。

使用管理员权限运行以下命令，开启核心包管理工具，cmd | powershell 均可。

> corepack enable

验证yarn，输出yarn版本：

> yarn -v

### Node.js <16.10

手动安装`corepack`相关工具

> npm i -g corepack


**其他情况安装可参考官方文档**

## Powershell开启yarn

参考文章：[解决PowerShell或vscode无法启动yarn的问题](https://blog.csdn.net/weixin_40136189/article/details/128834086)

因为在windows上，vscode使用的命令终端是powershell，但默认powershell的配置执行yarn是会报错的，如下错误信息：

```
yarn : 无法加载文件 D:\Program Files\nodejs\yarn.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.micros
oft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ yarn -v
+ ~~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess
```

解决以上错误需要更改一个策略，修改方式如下：

- 方法一：
    - 打开设置 ——> 更新和安全 ——> 开发者选项，找到PowerShell
    - 勾选上“更改执行策略，以允许本地PowerShell脚本在未签名的情况下运行。”，
    - 点击应用，更改成功

- 方法二：
    - 管理员身份打开 PowerShell
    - 执行命令 set-ExecutionPolicy RemoteSigned
    - 如果提示询问是否要更改执行策略?，则选择 A 或 Y
    - 执行完毕后即可更改成功

Windows10安装yarn

```bash
# 查看当前镜像源
npm config get registry
```

```bash
# 设置淘宝镜像源
npm config set registry https://registry.npm.taobao.org
```

```
# 官方仓库
https://registry.npmjs.org/

# 淘宝仓库
https://registry.npm.taobao.org/

# cnpm
https://r.cnpmjs.org/
```

npm切换源

twitter:card

twitter:title

twitter:site

twitter:image

努力做一只帅气、有才、豁达的老狗！

twitter:description

程序员,笔记,Bug记录,编程技术,AI,Java,Node,Golang,个人博客,资源分享,月上老狗,dingdangdog