Skip to content

Latest commit

 

History

History
709 lines (569 loc) · 23.3 KB

框架介绍.md

File metadata and controls

709 lines (569 loc) · 23.3 KB

框架介绍

前端

技术架构

1. Vue

1. Vue2 常用基础

Vue2文档地址

  1. v-model(双向绑定)

  2. v-bind(绑定) 简写 : 如 v-bind:value => :value

  3. v-if/v-show(条件渲染)

  4. v-for(列表渲染) 注意设置key

  5. v-on(事件绑定) 简写 @ 如 v-on:change => @change

  6. slot(插槽)

  7. emit(自定义事件)

  8. mixin、自定义指令、过度动画

  9. watch 事件监听

  10. compute 计算属性

2. Vue3 比较

Vue3文档地址

Vue2

<template>
  <div>
    <!-- 使用 v-if 指令来根据条件显示元素 -->
    <div v-if="showMessage">
      <p>{{ message }}</p>
    </div>

    <!-- 使用 v-for 指令来渲染列表 -->
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }}
      </li>
    </ul>

    <!-- 使用 v-model 指令实现双向数据绑定 -->
    <input v-model="newItemName" type="text" placeholder="Add a new item">

    <button @click="onClickChildComponetRef">获取子组件ref</button>
    
    <button @click="onClickEmit">emit事件</button>
    <!-- 使用 props -->
    <child-component ref="childRef" :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: "demo",
  mixins:[demo],
  props: [
     prop: { 
        type: String,
        required: true,
        default: false
    },
  ],
  components: {
    ChildComponent
  },
  data() {
    return {
      showMessage: true,
      message: 'Hello, Vue!',
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
      newItemName: '',
      parentMessage: 'Message from parent component'
    }
  },
  methods: {
    onClickEmit() {
      this.$emit("change", "传递的参数");
    },
    onClickChildComponetRef() {
      // 调用子组件方法
      this.$refs.childRef.method();
    }
  },
  computed: {
    // 计算属性
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    // 监听属性
    newItemName(newName, oldName) {
      console.log(`newItemName changed from ${oldName} to ${newName}`)
    }
  },
  // 生命周期勾子
  mounted() {
    console.log("挂载了")
  }
}
</script>

Vue3 组合式API + setup+ Typescript

<template>
  <div>
    <!-- 使用 v-if 指令来根据条件显示元素 -->
    <div v-if="showMessage">
      <p>{{ message }}</p>
    </div>

    <!-- 使用 v-for 指令来渲染列表 -->
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }}
      </li>
    </ul>

    <!-- 使用 v-model 指令实现双向数据绑定 -->
    <input v-model="newItemName" type="text" placeholder="Add a new item">

    <button @click="onClickChildComponetRef">获取子组件ref</button>
    
    <button @click="onClickEmit">emit事件</button>
    <!-- 使用 props -->
    <child-component ref="childRef" :message="parentMessage"></child-component>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';

interface Props {
  prop: string;
}  
interface ListItem {
  id: number;
  name: string;
}

const props = withDefaults(defineProps<Props>(), {
  prop: "1"
});
  
const showMessage = ref(true);
const message = ref('Hello, Vue!');
const list = ref<ListItem[]>([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
]);
const newItemName = ref('');
const parentMessage = ref('Message from parent component');
const childRef = ref(null);

const onClickEmit = () => {
  emit("change", "传递的参数");
}

const onClickChildComponetRef = () => {
  // 调用子组件方法
  childRef.value.method();
}

const reversedMessage = computed(() => {
  return message.value.split('').reverse().join('')
});

watch(newItemName, (newName, oldName) => {
  console.log(`newItemName changed from ${oldName} to ${newName}`)
});

onMounted(() => {
  console.log("挂载了")
});
</script>

2. Element Plus

Element Plus文档地址

3. Vuex/Pinia

Vuex 文档地址

Pinia 文档地址

4. Tailwindcss

Tailwindcss 文档地址

5. Typescript

Typescript 文档地址

比较 Java Typescript
类 class{} class{}
接口 interface{} interface{}
方法/函数 Type function(){} function(): Type{}
外部调用 public class(){}

导出类 export class(){}

导出方法 export function(){}

...
泛型 public class { public T function(T data) { return data }}

export class(){}

export function(): Promise {} 

java:
String user = "admin"
ts:
let user: string = "admin"
  
java:
final String user = "admin"
ts:
const user: string = "admin"
  
java:
public class User {
  public String name;
  
  private Int age;
  
  User() {
    this.name = "admin";
    this.age = 18;
  }
}
ts:
export class User {
  public name: string;
  
  private age: number;
  
 	constructor() {
    this.name = "admin";
    this.age = 18;
  }
}

6. 其他第三方库

  1. VueUse

    VueUse 是一组实用程序函数（Utility Functions）的库，这些函数主要用于 Vue 3 Composition API。它提供了许多可重用的函数，可以帮助你在 Vue 3 中更有效地编写代码。

    VueUse 的主要优点是，它提供了一些常见功能的实现，这些功能在许多 Vue 项目中都很有用。这些功能包括：

    1. 状态管理：VueUse 提供了一些用于管理状态的函数，例如 useState、createState 等。
    2. 副作用管理：VueUse 提供了一些用于管理副作用的函数，例如 onMounted、onBeforeUnmount 等。
    3. 响应式工具：VueUse 提供了一些用于创建和管理响应式数据的函数，例如 reactive、ref、computed 等。
    4. Web API 集成：VueUse 提供了一些函数，用于更方便地在 Vue 中使用 Web API，例如 useFetch、useNavigator、useGeolocation 等。
    5. 实用工具：VueUse 还提供了一些其他的实用工具，例如 useDebounce、useThrottle 等。

  2. Lodash

    它提供了一系列强大的工具和函数，可以帮助开发者更高效、更便捷地处理数组、数字、对象、字符串、函数等数据类型。

    以下是Lodash提供的一些主要功能：

    1. 数组操作：Lodash提供了一系列的数组操作函数，如_.chunk（将数组拆分为多个指定大小的块）、.filter（根据条件筛选数组元素）、.map（遍历数组元素并返回新数组）等。
    2. 对象操作：Lodash也提供了一些对象操作函数，如_.assign（将源对象的所有可枚举属性复制到目标对象）、.get（获取对象的属性值）、.has（检查对象是否具有某个属性）等。
    3. 函数操作：Lodash还提供了一些函数操作工具，如_.debounce（防抖函数，用于控制函数调用频率）、_.throttle（节流函数，用于控制函数执行频率）等。
    4. 集合操作：Lodash提供了一些集合操作函数，如_.sortBy（根据迭代器的结果将集合排序）、.groupBy（将集合分组）、.countBy（根据迭代器的结果对集合元素进行计数）等。
    5. 工具函数：Lodash还提供了一些其他的实用工具，如_.random（生成指定范围的随机数）、_.now（获取当前时间戳）等。

  3. Lottie

    Lottie 是一种开源动画库，它可以让设计师和开发者更加简单地将动画添加到应用程序中。Lottie 的动画是由 Airbnb 的设计师使用 Adobe After Effects 制作并导出的，然后可以使用 Bodymovin 插件将其导出为 JSON 文件。这个 JSON 文件中包含了动画的所有内容和信息，Lottie 可以读取这个文件并在应用程序中渲染出对应的动画。

    Lottie 的优点主要包括：

    1. 高质量的动画效果：Lottie 支持许多在传统动画库中不常见的高级动画效果，包括渐变、遮罩、路径动画、形状动画等。
    2. 跨平台兼容：Lottie 支持 iOS、Android 和 Web，这意味着你可以在这些平台上使用相同的动画文件。
    3. 易于使用：使用 Lottie，设计师和开发者可以更方便地协作。设计师只需要使用 After Effects 制作动画，然后导出 JSON 文件，开发者可以直接使用这个文件在应用程序中渲染动画。
    4. 灵活性：Lottie 动画的大小、颜色、速度等都可以在运行时更改。此外，你还可以使用代码控制动画的播放、暂停、循环等。
    5. 小型和高效：由于 Lottie 动画是由向量图形构成的，所以它们通常比传统的 GIF 或视频文件小得多，同时也更高效。

常见问题

  1. 数据更改但是视图未重新渲染

    this.$set(obj, "key", value)

  2. 表单个别未触发表单验证

​ 确实是否初始化了对象里的字段属性

项目结构

Pure Admin前端项目说明

├── .vscode  # IDE 工具推荐配置文件
│   │   ├── extensions.json  # 一键安装平台推荐的 vscode 插件
│   │   ├── settings.json  # 设置扩展程序或 vscode 编辑器的一些属性
│   │   └── vue3.2.code-snippets  # vue3.2 代码片段
├── build  # 构建工具
│   │   ├── cdn.ts  # 打包时采用 cdn 模式
│   │   ├── compress.ts  # 打包时启用 gzip 压缩或 brotli 压缩
│   │   ├── index.ts  # 导出环境变量、跨域代理函数
│   │   ├── info.ts  # 输出打包信息（大小、用时）
│   │   ├── optimize.ts  # vite 依赖预构建配置项
│   │   ├── plugins.ts  # vite 相关插件存放处
├── mock  # mock 模拟后台数据
│   │   ├── asyncRoutes.ts  # 模拟后台返回动态路由
│   │   ├── ...
├── node_modules  # 模块依赖
├── public  # 静态资源
│   │   ├── html  # 静态 iframe 页面
│   │   ├── favicon.ico  # favicon
│   │   ├── serverConfig.json  # 全局配置文件（打包后修改也可生效）
├── src
│   ├── api  # 接口请求统一管理
│   ├── assets  # 字体、图片等静态资源
│   ├── components  # 自定义通用组件
│   │   ├── ReAuth  # 按钮级别权限管理组件
│   │   ├── ReBarcode  # 条形码组件
│   │   ├── ReCountTo  # 数字动画组件
│   │   ├── ReCropper  # 图片裁剪组件
│   │   ├── ....
│   ├── directives  # 自定义指令
│   │   ├── auth  # 按钮级别权限指令
│   │   ├── elResizeDetector  # 监听容器改变指令
│   │   ├── ....
│   ├── layout  # 主要页面布局
│   ├── plugins  # 处理一些库或插件，导出更方便的 api
│   ├── router  # 路由配置
│   ├── store  # pinia 状态管理
│   ├── style  # 全局样式
│   │   ├── dark.scss  # 暗黑模式样式适配文件
│   │   ├── element-plus.scss  # 全局覆盖 element-plus 样式文件
│   │   ├── reset.scss  # 全局重置样式文件
│   │   ├── sidebar.scss  # layout 布局样式文件
│   │   ├── tailwind.css  # tailwindcss 自定义样式配置文件
│   │   ├── ...
│   ├── types  # 业务相关的类型定义
│   ├── utils  # 全局工具方法
│   │   ├── http  # 封装 axios 文件
│   │   ├── progress  # 封装 nprogress
│   │   └── auth.ts  # 处理用户信息和 token 相关
│   │   └── chinaArea.ts  # 汉字转区域码
│   │   └── globalPolyfills.ts  # 解决项目可能因为安装某个依赖出现 `global is not defined` 报错
│   │   └── message.ts  # 消息提示函数
│   │   ├── mitt.ts  # 触发公共事件，类似 EventBus
│   │   ├── print.ts  # 打印函数
│   │   ├── propTypes.ts  # 二次封装 vue 的 propTypes
│   │   ├── responsive.ts  # 全局响应式 storage 配置
│   │   ├── tree.ts  # 树结构相关处理函数
│   ├── views  # 存放编写业务代码页面
│   ├── App.vue  # 入口页面
│   ├── main.ts  # 入口文件
│   └── mockProdServer.ts  # mock 服务相关
├── types  # 全局 TS 类型配置
│   │   ├── global.d.ts  # 全局类型声明文件
│   │   ├── index.d.ts  # 全局类型声明文件
│   │   ├── index.ts  # 全局类型声明文件
│   │   ├── shims-tsx.d.ts  # 该文件是为了给 .tsx 文件提供类型支持，在编写时能正确识别语法
│   │   └── shims-vue.d.ts  # .vue、.scss 文件不是常规的文件类型，typescript 无法识别，所以我们需要通过下图的代码告诉 typescript 这些文件的类型，防止类型报错
├── .editorconfig  # 编辑器读取文件格式及样式定义配置 https://editorconfig.org/
├── .env  # 全局环境变量配置（当 .env 文件与 .env.development、.env.production、.env.staging 这三个文件之一存在相同的配置 key 时，.env 优先级更低）
├── .env.development  # 开发环境变量配置
├── .env.production  # 生产环境变量配置
├── .env.staging  # 预发布环境变量配置
├── .eslintignore  # eslint 语法检查忽略文件
├── .eslintrc.js  # eslint 语法检查配置
├── .gitignore  # git 提交忽略文件
├── .gitpod.yml  # gitpod 部署配置
├── .markdownlint.json  # markdown 格式检查配置
├── .npmrc  # npm 配置文件
├── .prettierrc.js  # prettier 插件配置
├── .stylelintignore  # stylelint 插件检查忽略文件
├── CHANGELOG.en_US.md  # 版本更新日志（英文版）
├── CHANGELOG.md  # 版本更新日志（英文版）
├── CHANGELOG.zh_CN.md  # 版本更新日志（中文版）
├── commitlint.config.js  # git 提交前检查配置
├── index.html  # html 主入口
├── package.json  # 依赖包管理以及命令配置
├── pnpm-lock.yaml  # 依赖包版本锁定文件
├── postcss.config.js  # postcss 插件配置
├── README.en-US.md  # README（英文版）
├── README.md  # README
├── stylelint.config.js  # stylelint 配置
├── tailwind.config.js  # tailwindcss 配置
├── tsconfig.json  # typescript 配置
└── vite.config.ts  # vite 配置

后端

技术架构

1. Spring Boot
2. Mybatis Plus

Mybatis 文档

Mybatis Plus 文档

分页查询的count查询优化导致Unknown column

// 关闭查询优化
page.setOptimizeJoinOfCountSql(false)
3. Sa-token

satoken 文档 

StpUtil   => LoginHelper
4. easy-excel

Easy Excel 文档

简单表格可以使用注解完成/或者使用模版填充

复杂表格使用模版填充或者自定义拦截器

5. mapstruct

mapstruct 文档

相比BeanUtils,BeanCopier等实现有更好的性能，主要转换是可见的，可以在字节码文件中找到。

6. hutool

hutool 文档

IoUtils

FileUtil

StrUtil

ObjectUtil

CollUtil

IdUtil

7. springdoc

springdoc 文档

8. redisson

redisson 文档

分布式锁

延时队列

9. just-auth

just-auth 文档

第三方平台集成

10. jdk

JDK 8

  • Lambda表达式和函数式接口：引入了函数式编程的概念，使得编写简洁、易读的代码成为可能。
  • Stream API：用于处理数据的新工具，可以结合lambda表达式进行非常强大的数据处理操作。
  • Optional 类：用于防止NullPointer异常的类。
  • 接口的默认和静态方法：允许在接口中添加默认方法和静态方法。
  • 日期/时间 API：全新的日期时间API。

JDK 9

  • 模块系统：这是JDK 9的主要特性，它允许将JDK本身和你的应用程序分割成模块，有助于更好地组织代码和改善安全性。
  • JShell：交互式Java REPL工具，用于运行Java代码片段。
  • 改进的Javadoc：现在支持HTML 5，并且可以包含你自己的搜索框。

JDK 10

  • 局部变量类型推断：可以使用var关键字在局部变量声明中省略类型。
  • 并行Full GC：对G1垃圾收集器的改进，使其可以并行地完成Full GC。

JDK 11

  • HTTP Client API：新的HTTP客户端API，支持HTTP/2和WebSocket通信。
  • Epsilon垃圾收集器：一种不执行任何垃圾收集的垃圾收集器，对于那些对延迟有严格要求或者只运行短时间的应用程序很有用。

JDK 12

  • Switch表达式预览：引入了新的switch表达式，可以返回值，并且可以使用新的箭头语法。
  • JVM常量API：新的API，用于模型JVM的底层常量。

JDK 13

  • 文本块（预览）：多行字符串字面量，大大简化了处理多行字符串的任务。
  • 动态CDS存档：改进了类数据共享（CDS）以提高启动性能。

JDK 14

  • Record类（预览）：用于创建不可变的数据携带对象的新类型，可以减少模板代码。
  • instanceof模式匹配（预览）：扩展了instanceof操作符，可以更方便地处理类型检查和类型转换。

JDK 15

  • 封闭类（预览）：允许类或接口声明它们的直接子类。
  • ZGC：一种新的、高性能的、可扩展的低延迟垃圾

收集器。

JDK 16

  • Records（正式版）：JDK 14中引入的Record类在此版本中成为正式特性。
  • 模式匹配 instanceof（正式版）：JDK 14中引入的模式匹配 instanceof 在此版本中成为正式特性。

JDK 17

  • 封闭类（正式版）：在JDK 17中，封闭类和接口已成为正式特性。
  • 其他一些改进包括对macOS上的AARCH64架构的支持，对Unicode 13.0的支持，以及一些性能和安全性的改进。
项目结构
├── .idea  # IDE 工具推荐配置文件
│   │   ├── httpRequests # http client 请求记录
│   │   └── ...
├── atom-admin   # web层，为前端提供接口
│   │   ├── src  # 打包时采用 cdn 模式
│   │   ├── target  # 编译文件
│   │   ├── pom.xml  # 依赖打包配置
├── atom-common  # 通用模块
│   │   src/main/java/common
│   │   │  ├── annotation   # 项目中使用到的自定义注解
│   │   │  ├── aspect				# AOP切面
│   │   │  ├── captcha			# 验证码生成
│   │   │  ├── config			  # 项目通用配置
│   │   │  ├── constants		# 项目通用常量
│   │   │  ├── convert  		# 数据转换
│   │   │  ├── core  	    	# 基础业务类，通用业务接口
│   │   │  ├── encrypt  	  # 加解密
│   │   │  ├── enums  	    # 通用枚举
│   │   │  ├── excel  	    # excel相同处理
│   │   │  ├── exception  	# 自定义异常，全局异常处理
│   │   │  ├── filter  	    # 过滤器
│   │   │  ├── handler  	  # 各种处理器
│   │   │  ├── helper   	  # 数据权限，用户信息操作
│   │   │  ├── interceptor  # 拦截器
│   │   │  ├── jackson      # jackson自定义序列化
│   │   │  ├── satoken      # satoken相关
│   │   │  ├── translation  # 翻译 如根据机构编号添加注解获取机构名
│   │   │  ├── utils        # 工具类
│   │   │  ├── xss          # xss
├── atom-crcc  # 中铁数据模块
│   │   src/main/java/crcc
│   │   │  ├── config       # 当前模块配置 
│   │   │  ├── aspect				# AOP切面
│   │   │  ├── constants		# 当前模块常量
│   │   │  ├── convert		  # mapstruct 转换接口
│   │   │  ├── domain		    # 实体类
│   │   │  ├── facade		    # 中铁HR接口
│   │   │  ├── justauth		  # oauth2.0验证
│   │   │  ├── manager		  # 综合服务类
│   │   target 
│   │   │  ├── generated-sources/annotations/...convert		  # mapstruct字节码文件
├── atom-gennerate  # 代码生成模块
│   │   ├── ...
├── atom-multimedia # 融媒体模块
│   │   ├── ...
├── atom-oss        # 对象存储模块
│   │   ├── ...
├── atom-quartz     # 定时任务模块
│   │   ├── ...
├── atom-system     # 系统管理模块
│   │   ├── ...
├── db    				  # 数据库初始化代码
├── lombok.config   # lombok全局配置
└── Scratches and Consoles  # 
   ├── Scratches    #idea http客户端请求

常见问题

  1. 权限过滤

    在对应的方法上使用@SaIgnore 注解

  2. 事务没有回滚

    确定调用的方法能被spring 代理到
1. 方法是否为pubilc
2. 是否为不同服务内调用

其他

Idea 快捷操作
  1. 自动导包
  2. option + entry / Alt + Entry 快速接受代码建议/插件定义的一些快捷操作
  3. command + 1 / alt + 1 左侧导航栏目
  4. command + e / ctrl + e 查看最近使用的文件
  5. command + b / ctrl + b || command + 鼠标左击 ctrl + 鼠标左击 查看声明，调用啥的
  6. option + F7 / Alt + F7 查看所以使用到当前对象的文件
  7. command + shift + A / ctrl + shift + A. 搜索快捷指令
  8. 双击shift 搜文件
  9. ctrl + Entry 构造器/getter,setting等操作 lombok
  10. 点操作
  11. live templates
Chorme

chorme调试技巧

vscode

  1. 代码块code-snippets

  2. 各种插件。插件