## 说明

> 本文写于2023年2月12日。
> 
> 这一天我重装了电脑系统，所以很多软件需要重新安装，`Navicat`安装目录虽然没删除，而且能运行，但是激活状态没了，而且重新激活还不行，所以想重新安装再激活试试。
> 
> 结果发现[navicat官网](https://www.navicat.com.cn/products/navicat-premium)已经更新到`16`版本了，网上找`15`版本还都是花里胡哨的费劲，最后还是在其他电脑上找到了以前的安装包，万幸。
> 
> 下面就将安装包分享出来（百度网盘），点击[阅读全文](https://oldmoon.top/post/42)可查看。




## 分享

链接：https://pan.baidu.com/s/1LabnWoyU_EEiYJtPlqHKnw?pwd=kjyf 
提取码：`kjyf` 
复制这段内容后打开百度网盘手机App，操作更方便哦

> ps：本文只用于分享文件，如果你不会使用激活工具，可以自行百度。

<div class="article-ads"></div>

Navicat Premium 15 windows中文版下载安装激活

## 说明

> 本文用于记录Vue一些函数、语法等技巧。主要基于`Vue3`。
> 
> 持续更新中。。。



## Vue3之ref和reactive

`ref` 和 `reactive` 都可以用于定义Vue3中的响应式对象，但有一些区别：
1. 可定义的数据类型不同：`ref` 支持所有的类型；`reactive`只可用于引用类型，如`Array`/`object`/`Map`/`set`。
2. 数据操作不一样：`ref` 取值/赋值都需要加 `.value`来操作数据；`reactive` 是不需要 `.value`。
3. 响应式破坏：`reactive`是`proxy`对象，不能直接赋值，否则会破坏响应式对象。（简单来说就是`reactive`定义的对象不能被重新赋值，否则会改变原本的对象，就不再是原来的对象了，所以也就不具有响应式的特点了）

下面是一些例子：
```typescript
// 正确：使用 ref 定义名为 ref_str 的字符串响应式对象
const ref_str = ref('aaa')
// 错误：reactive 不支持声明字符串类型数据
const reactive_str = reactive('aaa')
// 正确：使用 reactive 定义一个 Object 响应式对象，这个 Object 有一个 key 是 str 
const reactive_str_obj = reactive({str:'aaa'})


// 正确：修改 ref_str 的值为 bbb ，取值/赋值需要使用 .value 操作
ref_str.value = 'bbb'
// 正确：修改 reactive_str_obj 的属性 str 的值为 bbb
reactive_str_obj.str = 'bbb'

// 错误：重新赋值 reactive_str_obj 是不对的，将会改变 reactive_str_obj 的对象，也就失去了响应式特点
//     如果你这么做了，所有针对原先reactive_str_obj对象的操作都会失效
//     如：监听reactive_str_obj、页面数据绑定reactive_str_obj等
reactive_str_obj = {str:'bbb'}
```

## div动态ID并嵌入HTML

**使用```nextTick```函数**

- 父级vue，传入参数

```html
<OblongItem :i="id" />
```

- 子集vue，接收参数，并给予某个div动态id

```html
<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue';

const id = ref<any>();

const props = defineProps(['i']);

onMounted(() => {
  id.value = props.i;
  nextTick(() => {
    if (!id.value) {
      return;
    }
    let span = document.getElementById('span-' + id.value);
    if (span) {
      span.innerHTML = '<h1>ABC</h1>';
    }
  });
})
</script>

<template>
  <div>
    <span :id="'span-' + id">
    </span>
  </div>
</template>
```

## 路由跳转和参数接收

- 手动路由跳转：在任意地方手动路由跳转页面

```typescript
import router from '@/router';

// uri为路由地址
router.push(uri);
```

- 参数接收：在被跳转页面接收跳转时传递过来的参数

```typescript
import router from '@/router';

// 路由地址应为 /uri?i=xxx，其中i为参数名，xxx为参数值
const i = router.currentRoute.value.query.i;
```

Vue笔记

## 简介

> 本文用于记录常用的CSS技巧。
> 
> 持续更新中。。。



## 选择器

### 子选择器


```css
/* class为div的子元素中，class为sunDiv的元素，将其`margin-top`设置为`0.2rem` */
.div > .sunDiv {
  margin-top: 0.2rem;
}
```

## 布局

### Flex居中

> flex详解推荐阅读：[Flex 布局教程：语法篇](https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)

- 只需在想要其内部居中的盒子上增加以下css样式即可

```css
.div {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

## 事件

### div移入变色

```css
.div:hover {
  background-color: aliceblue;
}
```

### div移入变小手

```css
.div {
  cursor: pointer;
}
```

## 文本

### 字体加粗

```css
.bold-text {
    font-weight: bold;
}
```

### a标签去除下划线

```css
a {
  text-decoration: none;
}
```

## 函数

### calc()计算函数

```css
/* 使div高度与浏览器高度一致 */
.div {
  height: calc(100vh);
}
```

## @media

@media是一种响应式设计的技术，它可以根据不同的设备屏幕大小和分辨率，自适应地调整网页的样式和布局。下面是几个@media常见的使用示例：

1. 响应式布局

> 响应式布局是指网页的布局可以随着设备屏幕大小的变化而自适应调整。通常使用@media规则来实现响应式布局。
>
> 例如，下面的代码片段定义了当屏幕宽度小于等于768像素时，页面中的图片会缩小，以适应较小的屏幕大小：

```css
@media screen and (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
  }
}
```

2. 隐藏某些元素

> 有时候，我们希望在手机屏幕上隐藏某些较大的元素，以便页面更好地适应较小的屏幕。可以使用@media规则来实现这一功能。
> 
> 例如，下面的代码片段定义了当屏幕宽度小于等于768像素时，隐藏网页上的某个div元素：

```css
@media screen and (max-width: 768px) {
  #myDiv {
    display: none;
    
    /*display: block; 显示*/
    /*visibility: visible; 显示*/
    /*visibility: hidden; 隐藏*/
  }
}
```

3. 调整字体大小

> 当屏幕尺寸较小时，为了让文本在较小的屏幕上更容易阅读，我们可能需要调整字体大小。可以使用@media规则来实现这一功能。
>
> 例如，下面的代码片段定义了当屏幕宽度小于等于768像素时，将段落文本的字体大小调整为14像素：

```css
@media screen and (max-width: 768px) {
  p {
    font-size: 14px;
  }
}
```

这些都是@media规则的一些常见用法示例，开发者可以根据具体的需求，自由组合和使用这些规则，实现网页的响应式设计。

CSS笔记

## 前言

本篇文章主要介绍一个后端开发(我)，是如何一步一个坑的使用前端技术`Vue3`搭建前端项目的。

首先提一下技术选型，现在前端技术框架真的是如雨后春笋啊！对于我这种半吊子来说，了解的越多越迷茫，最后还是选则了以前有用过的`vue`，使用了比较新的`vue3`，用起来才发现，和以前的`vue2`差别好大呀！完全有点无从下手，还专门找了个B站教学视频简单了看了一下（【[vue3+Typescript项目实战](https://www.bilibili.com/video/BV1qt4y1h7Ew)】ps：感觉老师单词老是打错😂）。



## Vue3构建前端项目

### 创建项目

```sh
# 初始化vue项目。没有vue环境会提示安装，选择`y`，自动安装
npm init vue@latest
```

- 输出

```sh
Need to install the following packages:
  create-vue@3.3.4
Ok to proceed? (y) y

# 会让你先输入项目名，此处输入books

# 下列为选择环境安装，根据自身所需选择 yes or no 即可
√ Add TypeScript? ... No / Yes 
√ Add JSX Support? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add Cypress for both Unit and End-to-End testing? ... No / Yes
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

Scaffolding project in E:\code\DingDangDog_sapce\ddd-cashbook\books...

Done. Now run:

  cd books
  npm install
  npm run dev

```

### 启动项目

- 进入`books`文件夹（上一步创建时，根据输入的项目名自动创建的源码文件夹），执行以下命令

```sh
# 1、安装依赖
npm install
# 输出
added 258 packages in 16s
# 2、运行
npm run dev
# 输出
> books@0.0.0 dev
> vite


  VITE v3.2.2  ready in 433 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

```

- 访问浏览器，Yes，You did it! （有点尬😂）

![image-20221102171938164](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1675758154.png)

### 结果

- 感觉还行，先用这个试试吧



## Vue3新建内容并显示

### 新建Components

- 新建文件`/src/components/FlowTable.vue`
- 其中`<script setup lang="ts">`这个叫做`语法糖`新东西？着实难为了我好久！！！

```html
<template>
    <div>{{ flowPage }}
    </div>
</template>

<script setup lang="ts">
import type { FlowPage } from '../types/flow';
// 初始化假数据，用于展示验证
const flowPage: FlowPage = {
    pageNum: 1,
    pageSize: 1,
    dataList: [{
        id: 1,
        day: new Date(),
        name: "测试",
        description: "测试流水",
        money: 1,
        type: "测试类型",
    }],
    totalNum: 1
};
// 将需要对外暴露的方法和对象添加到这里
defineExpose({
    flowPage
});
</script>

<style scoped>

</style>

```

### 将新建的文件添加到页面

- 在`/src/App.vue`文件中添加刚才新建的文件，并使用，如下代码中的`import FlowTable from './components/FlowTable.vue'`和`<FlowTable/>`

```html
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
import FlowTable from './components/FlowTable.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <FlowTable/>
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

```

### 启动测试

- 项目根目录下，直接执行`npm run dev`即可

![image-20221102215544987](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1675754854.png)

## Vue3使用接口获取并展示数据

> 建议先具备一个正常访问的后端服务，后续会有跨域调用测试。
> 
> 经过以上步骤，基本架构路线只差最后一步，就是调用真实的数据接口，将上一步展示的数据替换成接口获取到的数据，如果这一步走通了，剩下的就是填充代码的问题了。接下来就来做这一步吧！

### 创建接口调用方法

#### 编写Http工具

- 新建`/src/api/index.ts`
- 去百度搜`axios-http调用工具封装`应该能找到很多类似的源码，以下代码是我看了个教程自己手打：

```typescript
/**
 * 封装http请求工具
 */
import axios from 'axios'
import { ElMessage } from 'element-plus'

// 创建http调用者
const $http = axios.create({
    // 服务地址
    baseURL: 'http://localhost:3000/api',
    timeout: 2000,
    headers: {
        "Content-Type": "application/json;chartset=utf-8"
    }
})

// 拦截请求，为请求header中增加token【暂时无用】
$http.interceptors.request.use(config => {
    // baseURL/headers 属性可能不存在，若不存在设置默认值
    config.baseURL = config.baseURL || '';
    config.headers = config.headers || {};
    // 如果访问登录接口，则清除当前缓存token
    if (config.baseURL?.indexOf('/login') >= 0) {
        localStorage.removeItem('token');
        config.headers.token = null;
        return config;
    }
    if (localStorage.getItem('token')) {
        config.headers.token = localStorage.getItem('token') || '';
    }
    return config;
})

// 响应拦截：解析响应结果，返回数据或捕获异常
$http.interceptors.response.use(res => {

    if (res.data.code != 200) {
        ElMessage.error(res.data.message);
        return Promise.reject(res.data);
    }
    return res.data
}, err => {
    console.log(err);
})

export default $http;
```

#### 编写接口调用方法

- 新建`/src/api/api.ts`

```typescript
import $http from './index'
import type { FlowPage } from '../types/flow';

/**
 * 查询流水
 * @returns FlowPage
 */
export async function getFlows(): Promise<FlowPage> {
    return $http({ url: "/flow/getAll", method: "get" })
}
```

### 调用接口方法

- 修改`FlowTable.vue`文件

```html
<template>
    <div>{{ flowPage }}
    </div>
</template>

<script setup lang="ts">
import { getFlows } from '../api/api'
import type { FlowPage } from '../types/flow';
// 初始化假数据，用于展示验证
// const flowPage: FlowPage = {
//     pageNum: 1,
//     pageSize: 1,
//     dataList: [{
//         id: 1,
//         day: new Date(),
//         name: "测试",
//         description: "测试流水",
//         money: 1,
//         type: "测试类型",
//     }],
//     totalNum: 1
// };
const flowPage: FlowPage = await getFlows();
// 将需要对外暴露的方法和对象添加到这里
defineExpose({
    flowPage
});
</script>

<style scoped>

</style>

```

- 这里发现个坑，vue内引用其他`typescript`文件不能写`src/api`，启动会报找不到文件的错，所以我都改成了`../api`，报错如下：

```sh
21:48:26 [vite] Internal server error: Failed to resolve import "src/api/api" from "src\components\FlowTable.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: E:/code/DingDangDog_sapce/ddd-cashbook/books/src/components/FlowTable.vue:7:25
  1  |  import { withAsyncContext as _withAsyncContext, defineComponent as _defineComponent } from "vue";
  2  |  import { getFlows } from "src/api/api";
     |                            ^
  3  |  const _sfc_main = /* @__PURE__ */ _defineComponent({
  4  |    __name: "FlowTable",
      at formatError (file:///E:/code/DingDangDog_sapce/ddd-cashbook/books/node_modules/vite/dist/node/chunks/dep-c842e491.js:41168:46)
      at TransformContext.error (file:///E:/code/DingDangDog_sapce/ddd-cashbook/books/node_modules/vite/dist/node/chunks/dep-c842e491.js:41164:19)
      at normalizeUrl (file:///E:/code/DingDangDog_sapce/ddd-cashbook/books/node_modules/vite/dist/node/chunks/dep-c842e491.js:38032:33)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async TransformContext.transform (file:///E:/code/DingDangDog_sapce/ddd-cashbook/books/node_modules/vite/dist/node/chunks/dep-c842e491.js:38165:47)       
      at async Object.transform (file:///E:/code/DingDangDog_sapce/ddd-cashbook/books/node_modules/vite/dist/node/chunks/dep-c842e491.js:41421:30)
      at async loadAndTransform (file:///E:/code/DingDangDog_sapce/ddd-cashbook/books/node_modules/vite/dist/node/chunks/dep-c842e491.js:37808:29)

```

### 启动测试：失败！

- 依然是直接执行`npm run dev`
- 如下图，你会发现启动正常，但是页面并没有展示出来数据。此时用处你前端技术的基本功：`F12`，可以看到接口报错了，但是你又会发现，错误码是`200`，什么鬼，`200`不是成功吗？此时就是遇到了前后端分离必然的、闻名不如见面的`跨域问题`！

![image-20221102220647992](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1675757914.png)

- 接口我已经偷偷摸摸的写了，不是接口有问题，就是`跨域问题`，`Postman`截图为证：

![image-20221102220514815](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1675757974.png)

### 解决跨域问题

#### 理论解决

- 可参考该文章：[vue3 vite.config.js 解决跨域问题](https://blog.csdn.net/qq_36164225/article/details/126748616)
- 但是，我依据此文章改完后，还是有问题，百度了半小时才解决。。。

#### 最终解决

【[vue技巧（九）跨域及跨域配置不生效原因探究](https://www.cnblogs.com/nmgwap/p/16331611.html)】感谢这篇博客最后的总结！！！

**推荐再axios请求发送时不要添加ip port，而是再代理转发时通过target参数配置**

- 修改`index.ts文件`，把`baseURL`中的`http://localhost:3000`删掉即可，修改后如下

  ```typescript
  /**
   * 封装http请求工具
   */
  import axios from 'axios'
  import { ElMessage } from 'element-plus'
  
  // 创建http调用者
  const $http = axios.create({
      baseURL: '/api',
      timeout: 2000,
      headers: {
          "Content-Type": "application/json;chartset=utf-8"
      }
  })
  
  // 拦截请求，为请求header中增加token
  $http.interceptors.request.use(config => {
      // baseURL/headers 属性可能不存在，若不存在设置默认值
      config.baseURL = config.baseURL || '';
      config.headers = config.headers || {};
      // 如果访问登录接口，则清除当前缓存token
      if (config.baseURL?.indexOf('/login') >= 0) {
          localStorage.removeItem('token');
          config.headers.token = null;
          return config;
      }
      if (localStorage.getItem('token')) {
          config.headers.token = localStorage.getItem('token') || '';
      }
      return config;
  })
  
  // 响应拦截：解析响应结果，返回数据或捕获异常
  $http.interceptors.response.use(res => {
  
      if (res.data.code != 200) {
          ElMessage.error(res.data.message);
          return Promise.reject(res.data);
      }
      return res.data
  }, err => {
      console.log(err);
  })
  
  export default $http;
  ```

- 修改`vite.config.ts`文件

  ```typescript
  import { fileURLToPath, URL } from 'node:url'
  
  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  // https://vitejs.dev/config/
  export default defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    server: {
      // 本服务暴露的端口
      host: '127.0.0.1',
      port: 8080,
      // 跨域配置
      proxy: {
        // /api相关接口跨域配置
        '/api': {
          //实际请求地址
          target: 'http://127.0.0.1:3000/api',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, "")
        },
      }
    }
  })
  
  ```

### 启动测试：失败！

- 经过[解决跨域问题](#解决跨域问题)最终是把跨域问题解决了，但是又出现了新的问题，那就是数据请求出来了，但是没有展示出来。。。我就不说问题发现和解决的详细经过了，直接放问题原因和解决办法。

#### Vue3异步组件调用特殊引用

- 官方异步组件说明：【[异步组件](https://cn.vuejs.org/guide/components/async.html)】
- 官方异步组件引用说明：【[Suspense](https://cn.vuejs.org/guide/built-ins/suspense.html#suspense)】
- 其他参考：【[Vue3学习笔记3](https://blog.csdn.net/gegegegege12/article/details/122676698)】其中搜索`Suspense`会有使用说明及示例

#### 解决异步引用

- 修改`App.vue`（即引用异步组件的文件），`FlowTable.vue`的引用和使用方式均有改变。。

```html
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'

import { defineAsyncComponent } from 'vue'
const FlowTable = defineAsyncComponent(() => import("./components/FlowTable.vue"));
</script>

<template>
  
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <Suspense>
        <template #default>
          <FlowTable/>
        </template>
        <template #fallback>
          <div>加载中...</div>
        </template>
      </Suspense>
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

```

### 启动测试：成功！！！

- 直接上图吧，乏了。。。

![image-20221102230638541](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1677054154.png)

使用vue3搭建前端项目框架

## 简介

``volatile``在Java中，是一个关键字，只能用于修饰属性，作用是保证数据一致性，是一种线程安全的简单实现。



## 与`static`比较

理论上讲，`static`修饰的属性，在全局中只有一个内存，无论何时何地何处，读取其属性值，都是那一个内存，那么起作用是不是与`volatile`作用一样呢？

- `volatile`声明变量值的一致性；`static`声明变量的唯一性。

## 与`synchronized`比较

既然说到了线程安全，就不得不讲讲`synchronized`关键字了。

- `volatile` 关键字是线程同步的轻量级实现，所以 `volatile` 性能肯定要比 `synchronized` 关键字好；
- `volatile` 关键字只能修饰变量，而 `synchronized` 关键字可以修饰方法以及代码块；
- 多线程访问 `volatile` 关键字不会发生阻塞，而 `synchronized` 关键字可能会发生阻塞；
- `volatile` 关键字是保证数据的可见性，但不保证数据的原子性，而 `synchronized` 关键字两者都能保证；
- `volatile` 关键字解决的是变量在多个线程之间的可见性，而 `synchronized` 关键字解决的是多个线程间访问资源的同步性。

## `volatile`的真实作用

`volatile`的真实作用是：**防止Java指令重排序！**

Java自身有一个机制：在某些情况下，改变代码执行顺序，不会改变其最终的结果，这类代码在Java底层编译执行时，可能会自动进行重新排序，并不严格按照代码的编写顺序去执行。这种机制一般称之为**Java指令重排序**。

> ps：想要详细了解Java指令重排序可自行百度。

有时，Java指令重排序会导致预料之外的代码逻辑bug，当出现这种情况时，可以对确定不希望重排序的代码增加`volatile`关键字。

Java：volatile关键字和static的区别

twitter:card

twitter:title

twitter:site

twitter:image

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

twitter:description

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