### 项目背景
有多个不同框架搭建的前端项目，例如vue、react，现两个项目之间有共性，但又不想同时维护两套代码，例如实现一个组件可以共用
### 实现方案
使用@originjs/vite-plugin-federation插件
@originjs/vite-plugin-federation 是一个基于 Vite 的 模块联邦（Module Federation） 插件，它允许你在多个独立的 Vite 构建项目之间共享代码和依赖，实现微前端架构或跨应用的组件共享。
### 实现步骤
1. 在react项目中正常开发组件，使用ref抛出回调函数
2. 在vite.config文件中导出组件
```js
// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "react_app", // 应用名称（唯一标识）
      filename: "remoteEntry.js", // 远程入口文件
      exposes: {
        // 导出的组件
        "./ReactButton": "./src/components/Button.jsx",
      },
      shared: ["react", "react-dom"], // 共享依赖
    }),
  ],
  build: {
    target: "esnext", // 需要支持动态 import
  },
});
```
3. vue项目中引入组件
```js
// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    vue(),
    federation({
      name: "vue_app",
      remotes: {
        // 引用远程 React 项目
        react_app: "http://localhost:5001/assets/remoteEntry.js",
      },
      shared: ["vue"], // 共享依赖
    }),
  ],
  build: {
    target: "esnext",
  },
});
```
4. 在vue中使用react
```js
<template>
  <div>
    <h1>Vue App</h1>
    <Suspense>
      <template #default>
        <ReactButton />
      </template>
      <template #fallback>
        Loading React Button...
      </template>
    </Suspense>
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue";

export default {
  components: {
    // 动态加载远程 React 组件
    ReactButton: defineAsyncComponent(() =>
      import("react_app/ReactButton").then((mod) => mod.default)
    ),
  },
};
</script>
```

使用模块联邦插件实现微前端架构或跨应用的组件共享

跨应用的组件共享

## 小程序开发遇到的问题
1. picker-view 选择日期为什么不能默认选中当前年
2. 设置元素absolute绝对定位但是没有设置其相对于哪个元素绝对定位的话显示不了当前元素
3. 需要考虑头部栏以及底部安全区域
wx.getMenuButtonBoundingClientRect()
margin-bottom: env(safe-area-inset-bottom)
4. 父子组件传值问题
父->子：通过属性
子->父：绑定事件
父：binddateChange="dateChange"
子：bindchange="bindChange"
```js
    bindChange(e) {
      const val = e.detail.value

      this.triggerEvent('dateChange', {
        date: `${this.data.years[val[0]]}-${this.data.months[val[1]]}-${this.data.days[val[2]]}`,
        fieldName: this.properties.type
      })
    }
父通过e.detail
  dateChange(e) {
    this.setData({
      info: {
        ...this.data.passportInfo,
        [e.detail.fieldName + 'Label']: e.detail.date,
        [e.detail.fieldName]: new Date(e.detail.date.replace(/-/g, '/')).getTime()
      }
    })
  },
```
5. data-*获取属性值dataset可能在target也可能在currentTarget
6. ios不支持“2024-12-27”这样的格式，需要将-替换成/
7. scroll-view滚动视图和页面原生监听滚动事件不能同时使用，如果使用了scroll-view就要使用组件内部的监听事件监听页面滚动，同时不能使用原生方法指定页面滚动到具体位置
```js
wx.pageScrollTo({
   scrollTop: 0,
   duration: 300
})
```

## 小程序开发记录
```js
<image>组件mode属性，widthFix设置宽度会根据固定宽度在不压缩的情况下自动匹配图片的高度
图片cdn
图片点击预览
<image src="" mode="widthFix" bindtap="previewImage" data-url="{{item.value}}" />
// 图片点击事件处理函数
previewImage: function (e) {
    const currentUrl = e.currentTarget.dataset.url
    wx.previewImage({
        current: currentUrl, // 当前显示图片的URL
        urls: this.properties.list // 需要预览的图片URL列表
    })
}

if判断 wx:if wx:elif wx:else

for循环 wx:for wx:key data-index="{{index}}" data-item="{{item}}"

绑定点击事件：bind:tap

scroll-view横向滚动案例
<scroll-view class="scroll" scroll-x show-scrollbar="{{false}}" scroll-with-animation="{{true}}" scroll-left="{{scrollLeft}}">
    <view class="list">
        <view bind:tap="activeTabHandle" class="tab-item {{activeIndex === index ? 'active' : ''}}" wx:for="{{actInfo.tabInfo}}" wx:key="index" data-index="{{index}}" data-item="{{item}}">
            <image src="{{filters.resizeImage(item.flowerImage ,{width:60}, 'jpg')}}" mode="widthFix" />
             <text>{{item.categoryName}}</text>
         </view>
    </view>
</scroll-view>
  swiperAnimation() {
    timer && clearInterval(timer)
    timer = setInterval(() => {
      const curActiveIndex = this.data.activeIndex
      const len = this.data.actInfo.tabInfo?.length || 0
      // 正向轮播还是反向轮播，轮播方向
      this.direction = curActiveIndex === len - 1 && this.direction === 1 ? -1 : (this.direction === -1 && curActiveIndex === 0 ? 1 : this.direction)

      if (this.direction === 1) {
        this.setData({
          activeIndex: curActiveIndex + 1,
          scrollLeft: len < 4 ? 0 : curActiveIndex * 160
        })
      } else {
        this.setData({
          activeIndex: curActiveIndex - 1,
          scrollLeft: len < 4 ? 0 : (len - 1) * 160 - (len - curActiveIndex + 1) * 160
        })
      }
    }, 2000)
  },
  // 切换tab
  activeTabHandle(e) {
    timer && clearInterval(timer)
    const { index } = e.currentTarget.dataset
    this.setData({
      activeIndex: index
    })

    setTimeout(() => {
      this.swiperAnimation()
    }, 3000)
  },

原生左右切屏
<view style="display: flex;transition: all 1s; transform: translateX(calc(-{{activeIndex}}*100vw));width: {{actInfo.tabInfo.length*100}}vw">
    <view class="item" wx:for="{{actInfo.tabInfo}}" wx:key="index" data-item="{{item}}" style="height: {{activeIndex === index ? 'fit-content': '0'}}">
     </view>
</view>
遇到的问题：高度会根据最高元素撑开，解决方案是非激活项高度置为0，外围宽度设置为100vw,overflow:hidden；

元素吸顶：设置position: sticky
// 页面滚动
onPageScroll: function(e) {
  // 根据滚动距离判断是否吸顶
  const scrollTop = e.scrollTop
  if (scrollTop > (this.data.menuButton.bottom)) {
    this.setData({
      opacity: (scrollTop - this.data.menuButton.bottom) / this.data.menuButton.bottom
    })
    return
  }
  this.setData({
    opacity: 0
  })
},
// 示例：吸顶tab，点击页面自动滚动到具体tab内容，监听页面滚动，滚动到具体tab内容，tab激活
1. tab吸顶设置position属性为sticky
2. 设置当前激活tab项，根据当前激活项切换tab激活样式
3. 给页面中的tab内容设置id，获取id距离页面顶部的高度，再减去顶部menuButton的高度以及tab高度（注意：当页面是动态加载的时候，需要在数据加载完成之后获取高度；当tab内容在页面的组件中时，需要调用子组件的获取元素高度的方法将元素位置信息存储在变量中），当点击tab时，使用wx.pageScrollTo自动滚动到tab内容位置
// 获取自定义组件的实例
const tabInfoComponent = this.selectComponent('#tabInfoComponent')
// 调用组件的方法
tabInfoComponent.getElementInfo()
4. 在onPageScroll方法中监听页面滚动距离顶部的距离，如果超过某个高度，则切换激活项（注意：给一个变量控制在点击tab切换激活项时不监听页面滚动距离，否则两者会冲突）
变量：
menuButton: wx.getMenuButtonBoundingClientRect(),
tabs: ['tab1', 'tab2', 'tab3', 'tab4'],
currentTab: 0,
componentPositions: [],
scrollTop: 0,
tabHeight: {},
页面tab：
<view class="tab-box" id="tab-box" style="top:{{menuButton.top+menuButton.height+10}}px">
    <view wx:for="{{tabs}}" wx:key="index" bind:tap="clickTab" data-index="{{index}}" wx:if="{{item}}" class="{{currentTab===index?'selectedTab':'unSelectedTab'}}">
        {{item}}
    </view>
</view>
在加载完数据时获取tab内容高度：
await this.getComponentHeight()
getComponentHeight() {
    let rect = []
    const query = wx.createSelectorQuery().in(this)
    this.data.tabs.forEach((tab, index) => {
      query.select(`#section${index}`).boundingClientRect()
    })
    query.exec(res => {
      rect = res.map(item => {
        if (item) return item.top + this.data.scrollTop
        else return 0
      })
      this.setData({
        componentPositions: rect
      })
    })
},
点击tab：
clickTab(e) {
    const curTabIndex = e.currentTarget.dataset.index
    this.clickTabChange = true
    this.setData({
      currentTab: curTabIndex
    })
    this.scrollToComponent(curTabIndex)
},
// 滚动到指定组件
async scrollToComponent(index) {
    if (!this.data.componentPositions[index]) return
    wx.pageScrollTo({
      scrollTop: this.data.componentPositions[index] - this.data.menuButton.top - this.data.menuButton.height - 10 - (this.data.tabHeight.height || 66),
      duration: 300,
      complete: function () {
        this.clickTabChange = false
      }
    })
    setTimeout(() => {
      this.clickTabChange = false
    }, 500)
},
getTabHeight() {
    return new Promise((resolve) => {
      const query = wx.createSelectorQuery()
      query.select('#tab-box').boundingClientRect(res => {
        resolve(res)
      }).exec()
    })
}
监听页面滚动：
onPageScroll(e) {
    const scrollTop = e.scrollTop
    this.setData({
      scrollTop
    })
    if (this.data.isPageScroll !== (scrollTop > 50)) {
      this.setData({ isPageScroll: scrollTop > 50 })
    }

    // 获取容器高度
    let containerHeight = 0
    if (wx.getWindowInfo) {
      containerHeight = wx.getWindowInfo().windowHeight
    } else {
      containerHeight = wx.getSystemInfoSync().windowHeight
    }
    if (scrollTop > containerHeight && !this.data.isShowTop) {
      this.setData({ isShowTop: true })
    }
    if (scrollTop <= containerHeight && this.data.isShowTop) {
      this.setData({ isShowTop: false })
    }

    if (this.clickTabChange) return
    const positions = this.data.componentPositions
    for (let i = positions.length - 1; i >= 0; i--) {
      if ((scrollTop >= positions[i] - this.data.menuButton.top - this.data.menuButton.height - 10 - (this.data.tabHeight.height || 66)) && positions[i]) {
        this.setData({
          currentTab: i
        })
        break
      }
    }
},


跳转到tab页面：
wx.switchTab({ url: '/pages/home/home' })

打开公众号文章
wx.openOfficialAccountArticle({
      url,
      success: res => {
      },
      fail: res => {
      }
})
打开公众号兼容问题：有些设备不支持openOfficialAccountArticle
跳转到一个新页面，用webview组件展示页面
<web-view src="{{url}}"></web-view>

跳转页面
wx.navigateTo({ url: url })

返回上一页
  back() {
    wx.navigateBack({
      delta: 1,
      fail: _ => {
        wx.switchTab({ url: '/pages/home/home' })
      }
    })
  },

分享
<button class="share" open-type="share">分享</button>
// 分享给朋友
  async onShareAppMessage(e) {
    return {
      title,
      path,
      imageUrl
    }
}

// 分享到朋友圈
  onShareTimeline() {
    return {
      title,
      query,
      imageUrl
    }
}

// 隐藏分享按钮
  wx.hideShareMenu({
    menus: ['shareTimeline']
  })

// 埋点
wx.reportEvent(string eventId, object data)

// 直播间内点击商品跳转到商品详情页面会自带用户openid，room_id
onLoad: function (options) {
  // options: { openid, room_id }
  this.setData({
    options
  })
}
// 商品详情页分享直播间，给直播间添加分享人id
let path = 'plugin-private://{appid}/pages/live-player-plugin?room_id=' + this.data.options?.room_id
const customParams = encodeURIComponent(JSON.stringify({ share_openid: this.data.options?.openid }))
path += `&custom_params=${customParams}`
// 在小程序app.js中监听路由判断是否在直播间，获取分享人id
const livePlayer = requirePlugin('live-player-plugin')
const liveInfo = await livePlayer.getShareParams()
log.info('直播间信息', liveInfo)
if (!liveInfo.share_openid) liveInfo.share_openid = liveInfo.custom_params?.share_openid
// 可以做直播分享计数等操作

// 使用微信内置地图
wx.openLocation({
   name,
   address,
   latitude,
   longitude,
   scale: 18
})

// markdown文本
<rich-text class="ich-text" nodes="" />

// 打电话
wx.makePhoneCall({
    phoneNumber: phone
})

// 收获地址
wx.chooseAddress({
    success(res) {
       // 选择收获地址回调函数  
    }
})

// open-type="contact"联系客服

```

小程序开发记录

## 项目前端知识点
### uniapp特性
#### 1. UniApp 简介
UniApp 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一次代码，可发布到多个平台（如微信小程序、H5、App等），极大地提高了开发效率。

#### 2. uniapp原理
跨平台编译
UniApp 的一大特点是能够将一套代码同时编译成多个平台的应用（如 H5、小程序、App 等）。这种能力主要是通过一套自定义的编译器来实现的，编译器会根据目标平台的不同，将通用的 Vue.js 代码转换成相应的平台代码。例如，H5 平台可能需要生成标准的 HTML、CSS 和 JavaScript 文件，而小程序平台则需要生成符合微信小程序规范的 WXML、WXSS 和 JS 文件。

平台适配层
为了使应用能够在不同的平台上运行，UniApp 引入了一个平台适配层，这个层负责处理不同平台之间的差异。例如，某些 API 可能在微信小程序中可用但在 H5 平台上不可用，适配层会确保在调用这些 API 时能够正确地分发到相应的平台实现。

自定义组件和插件
UniApp 提供了一套丰富的组件库和插件系统，允许开发者使用通用的组件和插件来快速构建应用。这些组件和插件通常都经过优化，可以在多个平台上高效运行。

扩展的生命周期等

这里不得不提到taro
Taro 与 UniApp 的比较
虽然 Taro 和 UniApp 都是用于跨平台开发的框架，但它们在设计理念和技术实现上存在一些差异：

基础框架：Taro 基于 React，而 UniApp 基于 Vue.js。
语法和组件化：Taro 使用 JSX 和 React Hooks，而 UniApp 使用 Vue.js 的模板语法和组件化开发。
平台支持：Taro 支持微信小程序、H5、React Native 等平台，而 UniApp 支持微信小程序、H5、App 等平台。
生态和社区：两者都有活跃的社区和丰富的插件生态，但各自的侧重点不同。
选择哪个框架取决于你的个人偏好、团队的技术栈以及具体的项目需求。

#### 3. UniApp中的生命周期与Vue.js生命周期的区别和联系
UniApp 是基于 Vue.js 的一套框架，用于开发跨平台的应用（如微信小程序、H5、App 等）。因此，UniApp 的生命周期钩子在很大程度上继承了 Vue.js 的生命周期概念，但为了适应更多的平台特性，也做了一些扩展。

Vue.js 生命周期
Vue.js 的生命周期钩子包括：

beforeCreate：实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

UniApp 生命周期
UniApp 的生命周期钩子与 Vue.js 类似，但也有一些特定于 UniApp 的扩展，例如：

onLaunch：全局生命周期钩子，应用启动时触发一次。
onShow：应用前台显示时触发。
onHide：应用后台隐藏时触发。
onError：全局错误监听函数。
onPageNotFound：页面不存在监听函数。
onPullDownRefresh：下拉刷新事件处理。
onReachBottom：触底事件处理。
onShareAppMessage：用户点击右上角菜单的“转发”按钮时触发此事件。
区别与联系
联系：UniApp 的生命周期钩子大部分都是基于 Vue.js 的生命周期设计的，因此它们之间有很多相似之处。例如，onLaunch 对应于 Vue.js 的 created 阶段，onShow 和 onHide 分别对应于 Vue.js 中的 mounted 和 beforeDestroy 的某种扩展。

区别：UniApp 添加了一些特定于小程序或跨平台开发的功能，比如 onPullDownRefresh 和 onReachBottom，这些是专门为处理用户交互（如下拉刷新、滚动到底部）而设计的。此外，UniApp 还引入了全局的生命周期钩子，如 onLaunch，用于处理应用级别的生命周期事件。

总结来说，UniApp 继承并扩展了 Vue.js 的生命周期机制，以更好地适应跨平台开发的需求。

#### 4. uniapp常用api及组件
```
常用 API

网络请求
uni.request: 发起网络请求。
uni.uploadFile: 上传文件。
uni.downloadFile: 下载文件。

数据存储
uni.setStorage: 设置本地数据缓存。
uni.getStorage: 获取本地数据缓存。
uni.removeStorage: 删除本地数据缓存。
uni.clearStorage: 清空本地数据缓存。

设备信息
uni.getSystemInfo: 获取系统信息。
uni.getDeviceInfo: 获取设备信息。

界面操作
uni.showToast: 显示消息提示框。
uni.showModal: 显示模态弹窗。
uni.showLoading: 显示 loading 提示框。
uni.hideLoading: 隐藏 loading 提示框。

导航
uni.navigateTo: 保留当前页面，跳转到应用内的某个页面。
uni.redirectTo: 关闭当前页面，跳转到应用内的某个页面。
uni.switchTab: 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.reLaunch: 关闭所有页面，打开到应用内的某个页面。

媒体
uni.chooseImage: 从本地相册选择图片或使用相机拍照。
uni.previewImage: 预览图片。
uni.saveImageToPhotosAlbum: 保存图片到本地相册。

常用组件

基础组件
<view>: 视图容器。
<text>: 文本。
<image>: 图片。
<button>: 按钮。
<input>: 输入框。
<textarea>: 多行输入框。

布局组件
<scroll-view>: 可滚动视图区域。
<swiper>: 轮播图组件。
<swiper-item>: 轮播图项目。

表单组件
<form>: 表单。
<label>: 标签。
<picker>: 选择器。
<radio>: 单选框。
<checkbox>: 复选框。

导航组件
<navigator>: 导航链接。
<tabbar>: 底部标签栏。

其他组件
<map>: 地图。
<canvas>: 画布。
<rich-text>: 富文本。
<progress>: 进度条。

这些只是 UniApp 中一部分常用 API 和组件，UniApp 还提供了更多丰富的功能和组件，可以根据具体需求查阅官方文档以获取更多信息。
```

### vue3新特性
1. 更好的性能
编译优化：Vue 3 的编译器对静态节点进行了更好的优化，减少了不必要的渲染和更新。
更快的虚拟 DOM 更新：Vue 3 使用了新的 Proxy 代理机制来跟踪响应式数据的变化，而不是 Vue 2 中使用的 Object.defineProperty。这使得 Vue 3 在处理复杂数据结构时性能更好。
2. 响应式系统
Proxy 代理：Vue 3 使用 Proxy 代理来实现响应式系统，这比 Vue 2 中的 Object.defineProperty 更强大和灵活。Proxy 可以监听到对象的所有属性变化，而不仅仅是属性值的变化。
Composition API：Vue 3 引入了 Composition API，这是一种新的组合式 API，它允许你更灵活地组织和重用逻辑代码。Composition API 通过 setup 函数来定义组件的行为，使得逻辑复用更加直观和自然。
3. 新的组件
Teleport：Teleport 允许你将组件的内容渲染到 DOM 中的任何位置，而不仅仅是父组件的子节点。这对于模态框、提示框等场景非常有用。
Fragments：Vue 3 支持多个根节点的组件，即 Fragments。这使得组件的结构更加清晰和灵活。
4. Composition API
setup 函数：setup 函数是 Composition API 的入口点，你可以在这里定义组件的状态、方法和生命周期钩子。
生命周期钩子：Vue 3 将生命周期钩子改名为更具描述性的名称，如 onMounted、onUnmounted 等。这些钩子可以在 setup 函数中使用。
响应式状态：使用 ref 和 reactive 创建响应式状态。ref 用于基本类型的数据，而 reactive 用于对象和数组。
计算属性和监听器：computed 和 watch 函数用于创建计算属性和监听状态变化。
5. 更小的体积
Tree-shaking 支持：Vue 3 的模块化设计使得你可以只导入你需要的部分，从而减小最终打包后的体积。Vue 3 的核心库体积更小，更适合现代前端应用。
6. 更好的 TypeScript 支持
内置 TypeScript 支持：Vue 3 对 TypeScript 的支持更为友好，提供了更好的类型推断和类型定义，使得在 TypeScript 项目中使用 Vue 3 更加方便。
7. 其他改进
更好的错误处理：Vue 3 改进了错误处理机制，使得调试更加容易。
自定义渲染器：Vue 3 提供了自定义渲染器的能力，这使得开发者可以更容易地将 Vue 3 应用扩展到不同的渲染环境。
这些新特性和改进使得 Vue 3 成为一个更强大、更灵活、更高效的前端框架。

### 技术栈
[uniapp](https://zh.uniapp.dcloud.io) [vue3](https://cn.vuejs.org) [vant-ui](https://vant-ui.github.io/vant/#/zh-CN) [tailwindCSS](https://www.tailwindcss.cn/) axios mysql [Express](https://www.expressjs.com.cn/)
### 开发工具
[微信公众平台](https://mp.weixin.qq.com/)：获取开发AppID
Hbuilder：用于代码开发以及打包到小程序开发者工具进行测试
微信开发者工具：Hbuilder进行相关配置，指定微信开发者平台在本地的可运行地址，打包后就可以直接唤起微信开发者工具进行测试。
### 相关配置文件
#### pages.json
页面配置
包含path、style、globalStyle、tabBar等属性
path：配置页面路由
style：配置导航条、使用的第三方组件或自定义组件等
```js
//使用vant-ui
{
    "pages": [ 
        //pages数组中第一项表示应用启动页
        {
	    "path": "pages/index/index",
	    "style": {}
	},
	{
	    "path": "pages/myBill/myBill",
	    "style": {
	        "navigationBarTextStyle": "black",
		"usingComponents": {
		    "van-datetime-picker": "/wxcomponents/vant/dist/datetime-picker/index",
		    "list-item": "/pages/components/listItem"
		}
	    }
	},
    ],
    "globalStyle": {
	//全局设置自定义导航栏
	"navigationStyle": "custom"
    },
    "tabBar": {
	//配置底部tabBar
	"color": "#cdcdcd",
	"selectedColor": "#6C9EF3",
	"borderStyle": "black",
	"backgroundColor": "#ffffff",
	"list": [{
	    "pagePath": "pages/index/index",
	    "iconPath": "static/images/home-icon.png",
	    "selectedIconPath": "static/images/home-active-icon.png",
	    "text": "tabBarText"
	}, ...]
    }
}
```

#### manifest.json
配置各端AppID，这边填入自己的微信AppID，在微信开发平台上下载微信开发者工具，后期就可以使用微信开发者工具进行测试。

### 相关API
#### 获取导航栏高度
```js
//获取屏幕导航栏高度
getHeight() {
    if (wx.canIUse('getMenuButtonBoundingClientRect')) {
	let sysInfo = wx.getSystemInfoSync(); //状态栏的高度
	this.statusBarHeight = sysInfo.statusBarHeight;
	// 胶囊位置信息
	let rect = wx.getMenuButtonBoundingClientRect();
	this.menuButtonRect = JSON.parse(JSON.stringify(rect));
	// 导航栏高度
	let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
	this.navBarHeight = navBarHeight;
	// 自定义导航栏的高度
	this.height = sysInfo.statusBarHeight + navBarHeight;
    } else {
	wx.showToast({
	    title: '您的微信版本过低，界面可能会显示不正常',
	    icon: 'none',
	    duration: 4000
	});
    }
}
```

#### 判断是否在可视范围
```js
observer = uni.createIntersectionObserver(this);
observer.relativeTo('.mybill-page').observe('.amount-main', (res) => {
    // 判断当前元素是否在可视范围，从而显示或隐藏某个元素
    if (res.intersectionRatio > 0 && this.showAmountSimple) {
	this.showAmountSimple = false;
    } else if (!res.intersectionRatio > 0 && !this.showAmountSimple) {
	this.showAmountSimple = true;
    }
})
```

#### 数据存储
```js
// 存取
uni.setStorage({
    key: 'mini_token',
    data: result?.data?.token,
    success: function() {
	recall.headers.Authorization = `Bearer ${result?.data?.token}`
	axios(recall)
    }
})

// 读取
uni.getStorageSync('mini_token')
```

#### 登录
```js
// 下面这段代码是在登录401的时候，重新获取用户token并进行接口的重新请求
// 微信登录方式有静默登录，不需要用户授权，而已获取用户openID
uni.login({
    provider: 'weixin',
    success: async function(res) {
	const result = await wxLogin({
	    code: res?.code
	})

	if (result?.data?.token) {
	    uni.setStorage({
		key: 'mini_token',
		data: result?.data?.token,
		success: function() {
		    recall.headers.Authorization = `Bearer ${result?.data?.token}`
		    axios(recall)
		}
	    })
	}
    }
});
```

#### 选择本地文件并上传
```js
function chooseMediaHandle() {
    uni.chooseMedia({
	success: (res) => {
	    // 返回选定照片的本地文件路径列表 tempFiles
	    const token = uni.getStorageSync('mini_token');
	    Promise.all(res.tempFiles?.map(file => {
		return new Promise((resolve, reject) => {
		    uni.uploadFile({
			url: server?.apiUrl + '/api/diary/uploadFile',
			filePath: file?.tempFilePath,
			name: 'media',
			header: {
    			    'Authorization': `Bearer ${token}`
			},
			success: (uploadFileRes) => {						 
			  
  resolve(JSON.parse(uploadFileRes.data)?.data)
						},
			fail: (err) => {
			    reject(false)
			}
		    });
		})
	    })).then(res => {
		showEditDiary.value = true
		mediaList.value = [...mediaList.value, ...res]
	    }).catch(error => {
		// 如果任何一个请求被拒绝，这里的代码会被执行
		console.error(error);
	    })
	},
	fail: (err) => {
	    // 选择图片失败的回调
	    console.log('选择图片失败', err);
	}
    });
}
```

#### 路由跳转
```js
//跳转
uni.navigateTo({
    url: `路由地址`, 
})

//返回到上一页
uni.navigateBack({
    delta: 1
})
```

### 相关组件
#### webview
webview只能引入绑定的域名，不能随便引入第三方网站；可通过微信公众平台进行域名授权；微信有很多限制，小程序也不能唤起第三方小程序，除非授权过...
```js
<web-view :src="src"></web-view>
```

## 后端知识点
就是一些CRUD的接口，写点sql语句

#### 1. 登录流程
```js
// 1. 根据前端获取到的code，以及开发者AppID、secret获取openID
// 2. 查询数据库中是否存在当前用户，存在则jwt签名获取token，后续请求接口就通过token去请求
router.get('/login', async function (req, res, next) {
    let url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=${req.query?.code}&grant_type=authorization_code`
    const data = await getRequestJSON(url);
    if (data?.openid) {
        const response = await getRequestJSON('/api/user', { openid: data?.openid }, 'post')
        if (response?.wxOpenid) {
            // 验证成功
            res.send(Result.success({ token: jwt.sign({ wxOpenid: response?.wxOpenid }, secret, { expiresIn: '7200s' }) }))
        } else res.send(Result.fail('登录失败，请稍候再试~'))
    } else res.send(Result.fail('登录失败，请稍候再试~'))
})
```

uniapp vue3 开发个人小程序记录

## [nextJS](https://nextjs.org/docs)特性
### fullstack framework(全栈框架)
相较于React，nextJS更全面，React只是个UI框架，开发项目还需要引入其他服务；使用nextJS可以在一个项目里干所有的事情，包括使用nodejs访问数据库...
### Server-side Rendering(服务端渲染)
相较于React，使用服务端渲染页面，页面预渲染加快页面的渲染速度，便于SEO；使用场景：注重页面渲染速度以及SEO的项目可以使用nextJS
### file-system based router(基于文件系统的路由)
相较于React，不用额外配置路由
路由包含[App Router](https://nextjs.org/docs/app/building-your-application/routing)和[Pages Router](https://nextjs.org/docs/pages/building-your-application/routing)两个方式
#### 项目初始化命令
```js
npx create-next-app@latest
```
脚手架初始化会提示是否要以App Router作为路由方式，默认是App Router，
#### 页面跳转方式
1. [<Link>](https://nextjs.org/docs/app/api-reference/components/link)组件
```js
// Navigate to /about
<Link href='/about'></Link>
// Navigate to /about?name=test
<Link href={{
    pathname: '/about',
    query: { name: 'test' },
}}

```
2. [useRouter](https://nextjs.org/docs/app/api-reference/functions/use-router)(Client Components)
```js
import { useRouter } from 'next/navigation'

export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}
```
3. [redirect](https://nextjs.org/docs/app/api-reference/functions/redirect)(Server Components)
```js
import { redirect } from 'next/navigation'
 
async function fetchTeam(id) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}
 
export default async function Profile({ params }) {
  const team = await fetchTeam(params.id)
  if (!team) {
    redirect('/login')
  }
 
  // ...
}
```
4. history API
[window.history.pushState](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState)
[window.history.replaceState](https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#windowhistoryreplacestate)

### [数据获取](https://nextjs.org/docs/app/building-your-application/data-fetching)
React 扩展了 fetch 以提供自动请求重复数据删除，多次调用同一个请求，请求只发送一次；服务端/客户端数据缓存；并行/顺序执行等功能。

对于是使用服务端获取数据以及预渲染还是选择客户端获取数据，个人认为如果考虑到首屏加载速度以及seo的页面或数据可以使用服务端，对于复杂交互的ui可以使用客户端渲染，就目前的React项目代码该怎么写就怎么写。
#### 服务端预渲染获取数据
数据获取建立在原生fetch API之上
```js
let data = await fetch('https://api.vercel.app/blog' })
```
#### 客户端数据获取
在React生命周期钩子函数中获取数据

### 一些组件/API
#### [<Image>](https://nextjs.org/docs/app/building-your-application/optimizing/images)
使用webp等现代图像格式，自动为每台设备提供正确尺寸的图像
当图片进入视口时加载图片
```js
import Image from 'next/image'
```
#### [metadata](https://nextjs.org/docs/app/building-your-application/optimizing/metadata)
定义页面元数据信息，便于SEO
```js
import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}
```

## 本站开发记录
### 涉及到的知识点
#### 1. 页面路由
##### 首先通过官方文档介绍创建nextjs项目：npx create-next-app@latest
创建过程会发现，nextjs默认使用TypeScript、[Tailwind CSS](https://tailwindcss.cn/)、App Router路由方式；根据自身需求去选择用TypeScript还是JavaScript开发；Tailwind CSS 通过给元素设置具体的类名可以简化我们的css代码；

重点讲下App Router路由方式：
根据nextjs官网描述，nextjs支持 App Router 和 Pages Router 两种路由方式，默认情况下是 App Router，因为 App Router 可以使用最新的React特性，比如 
 Server Components 和 Streaming，就是 nextjs 可以将一个页面分成静态渲染部分和动态渲染部分，免于等待所有组件全加载完才渲染，造成页面 blocking。

两种路由方式下的页面路由也有差异，App Router 模式下，任意目录下可访问页面，必须固定定义为 page.tsx；Pages Router 模式下所有pages目录下的文件都被定义为路由。

#### 2. api路由
根据上面提到的 App Router 与 Pages Router 的区别，两种路由方式下的api路由也有差异，App Router 模式下，api目录要放置在app目录下，而且必须命名 route.ts；而 Pages Router 模式下，api目录下的文件都被定义为api路由，具体api定义方式如下：
```js
// App Router
export async function GET(request: NextRequest) {
   // 获取数据逻辑
   const data = await ...
   return NextResponse.json({ data });
}

export async function POST(request: NextRequest) {
   const body = await request.json();
   // 插入数据逻辑
   return NextResponse.json({ msg: 'Created success' });
}

export async function DELETE(request: NextRequest) {
   const id = request.nextUrl.searchParams.get('id')!;
   if (!id) {
     return NextResponse.json({ msg: 'Delete Failed' });
   }
   // 删除数据逻辑
   return NextResponse.json({ msg: 'Deleted Success ' });
}

export async function PUT(request: NextRequest) {
   const id = request.nextUrl.searchParams.get('id');
   if (!id) {
     return NextResponse.json({ msg: 'Update Failed' });
   }
   // 更新数据逻辑
   return NextResponse.json({ msg: 'Updated Success' });
}
```

```js
// Pages Router
function handler(req, res) {
  switch (req.method) {
    case 'GET':
       // ...
    case 'POST':
       // ...
    case 'DELETE':
       // ...
    case 'PUT':
       // ...
    default:
        // ....
  }
}
```

#### 3. layout
设置全局公共布局、公共样式或metadata等
App Router 模式下可以设置全局或单个页面下的layout.ts、template.ts文件，针对整个项目或单个页面下的布局文件。Pages Router 模式下可以设置_app.ts文件、—_document.ts文件，分别是设置布局以及设置html属性等。

#### 4. 图片优化
请看上面说明

#### 5. 导航
请看上面说明

#### 6. SSG 与 SSR
SSG： 静态渲染，在服务端构建部署时，数据重新生效，产生的静态页面内容都是不变的，可以设置revalidate，没多少秒后刷新内容也会改变，访问速度快、利于SEO，针对不会变化、多页面使用的数据；SSR：动态渲染，在服务端接收到每个用户请求时，重新请求数据，重新渲染页面，针对显示实时的数据。

#### 7. Client Component 与 Server Component
NextJs 默认将所有组件都视为服务端组件

Client Component: 客户端组件，组件顶部有 'use client'标识，，用户可以在浏览器进行页面交互，比如使用 useState、useEffect等，它既在服务器又在浏览器运行，先服务器，然后浏览器
Server Component: 服务端组件，完全在服务端渲染，因此无法进行用户交互
可以在不同的位置分别使用'use client'、'use server'，标识某个部分使用client component，某个部分使用server component，从而加快页面的访问速度。

#### 8. fetch data
请看上面说明

#### 9. Database(mongodb)
1. 连接本地数据
2. 创建数据表模型
3. 通过模型操作数据库

#### 10. jwt 身份验证和授权
安装 jsonwebtoken 安装包，整个身份验证和授权过程如下：
1. 通过账号密码注册用户，密码加密存取，查询数据库中是否存在当前用户，jwt签名获取token，发送用户邮箱进行确认
2. 用户点击邮箱地址进行身份验证，根据拿到的token使用jwt验证格式是否正确，如正确将用户账号密码存入数据库的user表中，并将用户信息存入header且自动登录
3. 用户退出登录则清除header中的用户信息
4. 如果用户再次登录，用注册的账号密码进行登录，验证账号是否存在于数据表中，如果没有就是不存在当前账户，如果存在下一步
5. 将数据库中查询到的账户信息的密码与前端输入的密码（加密后）进行比对，如果比对失败就是密码错误，比对成功下一步
6. 使用jwt根据用户的账户信息进行签名获取token，可以对token设置有效期，签名过程中需要设置只有你自己才能知道的密钥，后续在请求的过程中就会使用token，只有设置的密钥才能解出用户信息，从而进行身份验证
7. 将获取到的token存放在header中
```js
const cookie = serialize('userInfo', JSON.stringify({token, role: user.role, userId: user._id }), {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    maxAge: 60 * 60 * 24 * 7, // One week
    path: '/',
})
res.setHeader('Set-Cookie', cookie)
```
8. 后续获取token可以通过req.cookies获取
#### 11. middleware 路由守卫
上面通过jwt获取token进行身份验证和授权，可以通过设置middleware.js文件，对部分页面或部分接口进行身份验证，从而限制部分功能或页面只有登录后的用户才能使用。

#### 12. AI 接入， SSE即时数据更新技术
除了大家熟知的chatgpt以外，国内也有很多AI服务商，不需要外网就可以进行访问，比如阿里云的千问产品，接入方式很简单，可以参考官方文档，选择适合自己的产品，都是有赠送的token的，随便试着玩一玩~

接入方式有一次性返回结果和流式返回结果，参考chatgpt流式传输，这边使用到的server-side-event（SSE）技术。

SSE 是一种基于HTTP的服务器推送技术，允许服务器实时地向客户端推送数据。

SSE是一种服务器端到客户端的单向流式消息推送协议，它通过HTTP连接发送事件流。与传统的轮询或长轮询技术相比，SSE具有更低的延迟、更高的效率和更低的资源消耗。

实时通信技术也有我们熟知的websocket技术，websockert是双向通信，既可以从客户端推送消息到服务端，也可以从服务端推送消息到客户端，这边只需要服务端进行推送，所以SSE技术就足够了。
```js
const completionStream = await openai.chat.completions.create({
    model: "模型名称",
    messages: messages,
    stream: true,
    max_tokens: 4096
});

const responseStream = new ReadableStream({
    async start(controller) {
        const encoder = new TextEncoder()

        for await (const part of completionStream) {
            const text = part.choices[0]?.delta.content ?? ''
            // todo add event
            const chunk = encoder.encode(`data:${text}`)
            controller.enqueue(chunk)
        }
        controller.close()
    },
})

return new Response(responseStream, {
    headers: {
        'Content-Type': 'text/event-stream; charset=utf-8',
        'Connection': 'keep-alive',
        'Cache-Control': 'no-cache, no-transform',
    },
})
```
```js
    // 前端获取数据
    const reader = data.getReader();
    const decoder = new TextDecoder();
    let done = false;

    while (!done) {
        const { value, done: doneReading } = await reader.read();
        done = doneReading;

        const chunkValue = decoder.decode(value)?.replace(/data:/g, '')?.replace(/^\n{2}/, '')?.replace(/\n{2}$/, '');
	// 更新值，将返回的chunkValue拼接在一起
        dispatch({ type: "updatePromptAnswer", payload: chunkValue });
   }
   if (done) {
       // 获取数据结束，可以进行存库等操作
       dispatch({ type: "done" });
   }
```

使用 nextJS 开发本站记录

## 登录
### token失效问题
日常项目都是用token作为登录凭证，token都具有有效期，用户长时间停留在当前页面未做任何操作情况下，超过有效期token则会失效，为了避免用户在进行繁杂的操作过程中token突然失效退出登录导致前面的操作都无效的问题，可以有以下解决方案：
1. 设计用户自行暂存功能
2. token自动刷新并继续请求当前接口
http请求保存当前请求，监测401状态值，调用刷新token接口并重新发送当前请求
3. 监测用户鼠标移动，利用防抖定时请求用户信息接口
```JavaScript
    // 监听鼠标是否在移动，若在移动则定时请求用户信息接口以防在操作过程中token失效问题
    window.addEventListener('mousemove', throttle(() => {
      if (token) getUserInfo()
    }, 1000 * 60 * 10))
```

## 审批流程
Activiti是一个开源的工作流引擎，用于在Java应用程序中集成业务流程管理（BPM）。在Activiti中，审批流程通常涉及以下步骤：

部署流程定义：将BPMN 2.0兼容的流程定义文件部署到Activiti引擎。
启动流程实例：使用流程定义创建一个新的流程实例。
任务列表：查询并获取参与者的任务。
完成任务：处理任务，可能会触发流程中的下一个节点。

## 动态获取菜单并根据平铺的菜单节点生成树
```JavaScript
const permissions = [
    {
    	"menuId": 1,
    	"name": "首页",
    	"permission": "/",
    	"parentId": 0,
    	"path": "/",
    	"sort": 0,
    	"type": "0", // 是否是菜单
    	"keepAlive": null,
    	"privilegeIcon": "home"
    },
    ...
]

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
  permission: boolean = true
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
    permission
  } as MenuItem
}

const getFormatItem = (item, children) => {
    return getItem(item?.name, item?.path, item?.parentId === 0 && item?.privilegeIcon ? <img src={`/images/menu-icon-${item?.privilegeIcon}.svg`} /> : '', children)
}

/**
    格式化菜单树，对生成菜单包括子节点都进行排序以及添加图标，最后返回菜单
*/
const getFormatTree = (tree) => {
    const res = [];
    tree?.sort((a, b) => a?.sort - b?.sort)?.forEach((item) => {
      if (item?.children && item.children.length) {
        res.push(getFormatItem(item, getFormatTree(item?.children)?.sort((a, b) => a?.sort - b?.sort)))
      } else res.push(getFormatItem(item))
    })

    return res;
}

/**
    对每个节点递归查找父节点直到没有父节点位置，最后生成每个对象树
    {
    	"menuId": 1,
        "children": [
	    {
		"menuId": 2,
		"children": [
		    "parentId": 1
		    ...
		],
		...
	    }
	],
	...
    }
*/
const getObj = (data, menus) => {
    if (data?.parentId === 0) {
      return data;
    } else {
      const parent = menus.find((childItem) => childItem?.menuId === data?.parentId)
      if (!parent) return null;
      if (parent?.children && parent.children?.length > 0) {
        const curItemExistIndex = parent.children?.findIndex((resItem) => resItem.menuId === data.menuId);
	// 避免重复添加子菜单
        if (curItemExistIndex !== -1) parent.children?.splice(curItemExistIndex, 1, data);
        else parent.children.push(data);
      } else parent.children = [data];
      if (parent?.parentId === 0) {
        return parent;
      } else {
        return getObj(parent, menus)
      }
    }
}

/**
    生成菜单树
*/
const getTree = (menus) => {
    const res = [];
    menus?.forEach((item) => {
      const curData = getObj(item, menus);
      if (curData) {
        const curItemExistIndex = res?.findIndex((resItem) => resItem.menuId === curData.menuId);
        if (curItemExistIndex !== -1) res?.splice(curItemExistIndex, 1, curData);
        else res.push(curData)
      }
    })

    const formatTree = getFormatTree(res)
    setMenus(formatTree)
}

const getMenus = () => {
    // 获取菜单列表
    const menus = permissions?.filter((item) => item?.type === '0')
    // 菜单去重
    let uniqueMenus = Array.from(menus.reduce((map, obj) => {
      if (!map.has(obj.menuId)) map.set(obj.menuId, obj);
      return map;
    }, new Map()).values());

    getTree(uniqueMenus)
}
```

## antd Table拆分单元格
```JavaScript
// 返回数据格式
const list = [
    {
	children: [
	    {
		field1: 'xxx',
		...    	
	    },
	    ...	
	],
	field1: 'xxx',
	...    	
    },
    ...
]
/*
    以children中最终子元素作为一行，标记每行的rowSpan以及所属的groupIndex
*/
const formatTableData = (list) => {
  const finalList = []
  let rowIndex = 0;
  list?.forEach((item, itemIndex) => {
    const { children, ...otherItemParams } = item
    const childrenLen = children?.length
    if (childrenLen) {
      children?.forEach((child, childIndex) => {
        rowIndex++;
        finalList.push({
          rowIndex,
          ...child,
          ...otherItemParams,
          rowSpan: childIndex === 0 ? childrenLen : 0,
          groupIndex: itemIndex
        })
      })
    } else {
      rowIndex++;
      finalList.push({ rowIndex, ...otherItemParams, rowSpan: 1, groupIndex: itemIndex })
    }
  })

  return finalList
}

// 最后设置onCell
const columns = [
    {
      title: 'xxx',
      dataIndex: 'xxx',
      key: '',
      onCell: (record) => ({
        rowSpan: record?.rowSpan,
      })
    },
    ...
]
```
```JavaScript
// 如果返回的数据中出现多个维度的，彼此之间没有从属关系的个情况下，比较每个children的长度，哪个子节点多就设为最小行单位
const list = [
    {
	children1: [
	    {
		field1: 'xxx',
		...    	
	    },
	    ...	
	],
	children2: [
	    {
		field1: 'xxx',
		...    	
	    },
	    ...	
	],
	field1: 'xxx',
	...    	
    },
    ...
];

const formatTableData = (list) => {
    const finalList = []
    let rowIndex = 0;
    list?.forEach((item, itemIndex) => {
        const { children1, children2, ...otherItemParams } = item
        const children1Len = children1?.length
        const children2Len = children2?.length
        const array = children1Len >= children2Len ? children1?.map((child, childIndex) => {
            const avgRow = Math.floor(children1Len / children2Len)
            return {
                children1Field1: child?.field1,
                children2Field1: children2?.[Math.floor(childIndex / avgRow)]?.field1,
                children2SingleRow: childIndex % avgRow === 0 ? (Math.floor(childIndex / avgRow) < children2Len ? avgRow : 1) : 0,
            }
        }) : children2?.map((child, childIndex) => {
            	...
            }
        })
        if (array?.length) {
            array?.forEach((arrayItem, arrayIndex) => {
                rowIndex++;
                finalList.push({
                    rowIndex,
                    ...arrayItem,
                    ...otherItemParams,
                    rowSpan: arrayIndex === 0 ? array?.length : 0,
                    groupIndex: itemIndex
                })
            })
        } else {
            rowIndex++;
            finalList.push({ rowIndex, ...otherItemParams, rowSpan: 1, groupIndex: itemIndex })
        }
    })

    return list
}
```
添加删除单元格就是添加删除子节点

## mobx
‌MobX‌是一个简单、可扩展的状态管理库，通过透明的函数响应式编程（TFRP）使得状态管理变得简单且可扩展。它通过观察状态的变化来自动更新组件，而不需要手动编写更新逻辑。‌

‌MobX的核心概念和原理‌

MobX的核心概念包括：

‌‌Observable‌：将数据转变为可观察的，当数据变化时，自动通知依赖的数据。
‌Action‌：任何用来修改状态的操作，通过action修改状态后，会自动触发相关的更新。
‌‌Computed‌：根据现有状态计算得出的值，当依赖的状态变化时，自动重新计算。
‌‌Reaction‌：对状态变化做出的反应，用于执行副作用操作。
MobX通过使用响应式编程，当状态发生变化时，自动通知依赖的数据进行更新。这与‌Redux不同，Redux每次修改状态都需要显式地通知所有依赖的组件进行更新，而MobX可以更高效地处理依赖关系。‌

‌MobX的使用场景和优缺点‌

MobX适用于需要高效状态管理的场景，特别是在React应用中。它的优点包括：
‌上手容易‌：相比Redux等状态管理库，MobX的学习曲线较平缓。
‌性能优越‌：由于MobX只更新变化的部分，而不是全局重新渲染，因此在大型应用中表现更好。
‌灵活性高‌：可以组织状态为类或对象，而不是函数式的reducer。

缺点包括：
‌生态不如Redux丰富‌：虽然功能强大，但在一些复杂场景下的解决方案可能不如Redux多样。
‌兼容性问题‌：不同版本的MobX在语法和支持的浏览器上有所不同，需要特别注意版本兼容性。‌

#### 页面搜索条件，页码查询接口请求等都可以写到mobx中，避免重复请求接口以及可以记住搜索条件避免重复搜索

## 布局
### Grid布局
用于涉及多行多列
```JavaScript
// 设置两行三列的网格布局
.parentBox {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
}
// 第一个盒子占两行两列，第二个和第三个盒子分别占一行一列
.childBox1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
.childBox2 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
.childBox3 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}
```
### flex布局
用于涉及一行多列

## 格式化金额
```JavaScript
/**
 * 千分位加逗号
 */
export function formatMoney(value) {
  return value?.toString()?.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
```
## 获取选中文本
```JavaScript
/**
 * 获取选中文本
 */
export const getSelectedText = () => {
  let selectedText = ''
  if (window.getSelection) {
    selectedText = window.getSelection().toString()
  } else if (document.selection && document.selection.type !== 'Control') {
    selectedText = document.selection.createRange().text
  }
  return selectedText
}
```
## 递归平铺路由
```JavaScript
/**
 * 平铺路由
 */
export const flattenRoutes = (routes) => {
  let data: any = []
  routes.forEach((item) => {
    if (item.children) {
      data = data.concat(flattenRoutes(item.children))
    } else {
      data.push(item)
    }
  })

  return data
}
```


开发记录

## 加载器
‌Three.js‌提供了多种加载器，这些加载器可以帮助开发者加载不同类型的3D资源。以下是一些常用的Three.js加载器：

‌TextureLoader‌：用于加载图片，可以返回一个纹理对象Texture。通过TextureLoader的.load()方法加载一张图片，可以创建一个纹理对象，该对象可以用于设置材质的颜色贴图属性，从而实现纹理贴图的应用‌。

‌CubeTextureLoader‌：用于加载立方体纹理，即环境贴图。通过加载6张图片（每个面一张），返回一个立方体纹理对象CubeTexture。这种纹理通常用于模拟真实世界中的环境光照射效果‌。

‌GLTFLoader‌：用于加载glTF格式的3D模型。glTF是一种流行的3D场景和模型格式，被广泛用于现代Web和移动应用中。GLTFLoader支持加载.glb和.gltf格式的文件‌。

‌DRACoLoader‌：用于加载压缩的3D模型数据，特别是针对Draco压缩算法的数据。Draco是一种高效的几何压缩算法，用于减少3D模型的数据大小，同时保持高质量的几何信息‌。

‌FBXLoader‌、‌OBJLoader‌、‌TDSLoader‌、‌ThreeMFLoader‌、‌AMFLoader‌、‌GCodeLoader‌、‌KMZLoader‌、‌PCDLoader‌、‌PLYLoader‌等：这些加载器用于加载不同格式的3D模型文件，如FBX、OBJ、TDS、ThreeMF、AMF、GCode、KMZ、PCD和PLY等。这些加载器提供了对各种3D模型格式的支持，使得开发者能够轻松地将不同的3D模型集成到Three.js项目中‌。
## 获取模型对应的结构
加载器返回的对象树中存在children字段，包含物体各个结构，可以通过getObjectByName获取到对应结构对象。
## 核心代码
```js
function onProgress(xhr) {
    if (xhr.lengthComputable) {
        const percentComplete = xhr.loaded / xhr.total * 100;
        console.log(Math.round(percentComplete, 2) + '% downloaded');
    }
}

const loader = new MMDLoader();
const modelFile = '/assets/mmd.pmd';

let mmdMesh;
loader.load(modelFile, function (object) {
    mmdMesh = object;
    scene.add(mmdMesh);

    // 获取头部
    const head = mmdMesh.getObjectByName("首");

    // 创建一个Timeline对象，用于管理动画序列
    const tl = gsap.timeline({ repeat: -1, yoyo: true }); // 设置动画无限循环且往返播放

    // 设置动画从0到1
    tl.to(mmdMesh.morphTargetInfluences, { duration: 1, 8: 1, 15: 1, delay: 1 }); // 针对对象修改属性值。

    // 设置动画从1回到0
    tl.to(mmdMesh.morphTargetInfluences, { duration: 1, 8: 0, 15: 0 }); 

    window.addEventListener("mousemove", (e) => {
        let x = (e.clientX / window.innerWidth) * 2 - 1;
        let y = (e.clientY / window.innerHeight) * 2 - 1;
	// x，y保证在-1至1的区间

        let timeline = gsap.timeline()
        timeline.to(head.rotation, 0.5, {
            duration: 0.5,
            x: y,
            y: x,
            duration: 1
        })
    })
}, onProgress, null);
```


threejs实现载入模型

## 音频分析
创建AudioAnalyser对象, 使用[ AnalyserNode ](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode)去分析音频数据。将声波的波动转化为图形线条的起伏变化，从而表现出声音的音高、音量等信息。
## 核心代码
```js
function createAudio() {
    const fftSize = 1024;
    if (!audio) {
        const listener = new THREE.AudioListener();
        audio = new THREE.Audio(listener);
        const file = '/assets/video.mp4'; // 音视频都可以

        mediaElement = new Audio(file);
        mediaElement.play();
        audio.setMediaElementSource(mediaElement);
    }

    analyser = new THREE.AudioAnalyser(audio, fftSize);

    bufferLength = analyser.analyser.frequencyBinCount;
    dataArray = new Uint8Array(bufferLength);
    analyser.getFrequencyData(dataArray);
    dataArray = analyser.data

    // 获取 ID 为 "oscilloscope" 的画布
    canvas = document.getElementById("oscilloscope");
    canvasCtx = canvas.getContext("2d");

    var canvasTexture = new THREE.CanvasTexture(canvas);
    // 创建平面
    var geometry = new THREE.PlaneGeometry(18, 2);
    var material = new THREE.MeshPhongMaterial({
        map: canvasTexture, // 设置纹理贴图
        transparent: true,
    });
    // 创建一个矩形平面网模型，Canvas画布作为矩形网格模型的纹理贴图
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // 绘制一个当前音频源的示波器
    function draw() {
        drawVisual = requestAnimationFrame(draw);
        canvasTexture.needsUpdate = true;

        analyser.getFrequencyData(dataArray);
        dataArray = analyser.data

	// 绘制柱形
        // canvase背景色透明
        canvasCtx.fillStyle = 'rgba(255, 255, 255, 0)';
        canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

        var barWidth = canvas.width / bufferLength * 4
        var barHeight;
        var x = 0;

        for (var i = 0; i < bufferLength; i++) {
            barHeight = dataArray[i];

            canvasCtx.fillStyle = 'rgb(' + barHeight + 100 + ',200,130)';
            canvasCtx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
            x += barWidth + 1;
        }

	// 绘制波形
        // canvasCtx.lineWidth = 2;
        // canvasCtx.strokeStyle = "rgb(0, 0, 0)";

        // canvasCtx.beginPath();

        // var sliceWidth = (canvas.width * 1.0) / bufferLength;
        // var x = 0;

        // for (var i = 0; i < bufferLength; i++) {
        //     var v = dataArray[i] / 128.0;
        //     var y = (v * canvas.height) / 2;

        //     if (i === 0) {
        //         canvasCtx.moveTo(x, y);
        //     } else {
        //         canvasCtx.lineTo(x, y);
        //     }

        //     x += sliceWidth;
        // }

        canvasCtx.lineTo(canvas.width, canvas.height / 2);
        canvasCtx.stroke();
    }

    draw();
}
```


threejs实现音频可视化效果

[threejs网址](https://threejs.jaclynshi.top/)
## 核心原理
### 深度图
用于记录场景中每个像素的深度信息。

通过深度图可以看出图片中距离每个像素距离摄像机的距离，距离越近越靠近镜头，距离越远就是图片中所谓的背景。

可以通过深度图对图片中的每个像素根据鼠标移动实时计算偏移量，深度较浅的（即靠近镜头的物体）偏移量增加，与背景偏移形成一定的层次感，这样就能实现图片3D效果。
### 着色器
着色器（Shader）是一种在图形渲染管线中运行的程序，它可以对渲染过程中的顶点、像素等进行各种计算和处理，从而实现各种复杂的渲染效果。

着色器通常分为两种类型：顶点着色器和片元着色器。顶点着色器是用来计算顶点的位置、法线、纹理坐标等信息，并将其传递给片元着色器进行处理；片元着色器则是用来计算每个像素（片元）的颜色值，通常根据纹理、灯光、材质等信息进行计算，并输出最终颜色值到屏幕上。
## 核心代码
```js
// 加载图片纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('assets/xx.webp');
const deptTexture = textureLoader.load('assets/xx_depth.png');

// 创建平面
const geometry = new THREE.PlaneGeometry(19.2, 10.8);
// 鼠标坐标
const mouse = new THREE.Vector2();
// 着色器材料
const material = new THREE.ShaderMaterial({
    uniforms: {
        uTexture: { value: texture },
        uDepthTexture: { value: deptTexture },
        uMouse: { value: mouse }
    },
    vertexShader: `
        varying vec2 vUV;
        void main() {
          vUV = uv;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }`,
        fragmentShader: `
        uniform sampler2D uTexture;
        uniform sampler2D uDepthTexture;
        uniform vec2 uMouse;
        varying vec2 vUV;
        void main() {
          vec4 color = texture2D(uTexture, vUV);
          vec4 depth = texture2D(uDepthTexture, vUV);
          float depthValue = depth.r;
      	  float x = vUV.x + uMouse.x*0.01*depthValue;
      	  float y = vUV.y + uMouse.y*0.01*depthValue;
      	  vec4 newColor = texture2D(uTexture, vec2(x, y));
      	  gl_FragColor = newColor;
    	}`
});

const plane = new THREE.Mesh(geometry, material);
scene.add(plane);
```


首页图片转3D效果

## threejs官网速度慢
[github](https://github.com/mrdoob/three.js/) git clone threejs最新版本到本地
```js
git clone https://github.com/mrdoob/three.js.git
npm install // 安装依赖包
npm run start // 运行
```
即可在本地运行threejs，选择example目录即可在本地查看threejs案例，也可在本地查看文档，速度相当快～

## 创建第一个threejs项目
这里使用vite前端构建工具，vite快的原因是在开发过程中可以更快的启动项目，更便于开发；
```js
npm init vite@latest my-vue-app --template vue
npm install // 安装依赖包
npm install three --save // 安装threejs
npm run dev // 运行
```

## 快速生成代码
vscode添加相关ai插件，可以自动生成代码

## threejs核心
threejs使用WebGL作为底层技术
Three.js的核心原理主要包括：

场景图的构建：Three.js使用一个树状的场景图来表示3D空间中的各种元素，如摄像机、灯光、几何体、材质和纹理等。

WebGL渲染管线：Three.js封装了WebGL渲染流程，让开发者能够更简单地使用WebGL。

动画渲染：Three.js提供了一种方法来更新场景中的对象，以实现动画效果。

事件处理：Three.js提供了事件处理机制，如鼠标事件、键盘事件等，以便用户与3D场景交互。

扩展和插件：Three.js有一个活跃的社区，许多开发者为Three.js提供扩展和插件，以增强其功能。
```js
// 引入Three.js
import * as THREE from 'three';
 
// 创建场景
const scene = new THREE.Scene();
 
// 创建摄像机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 
/* 参数说明：
fov: 摄像机视野的角度，通常定义为视野的垂直视角度，范围从0到180度。
aspect：画布的宽度与高度的比例。
near：摄像机的近剪裁面，这个距离以外的物体不会被渲染。
far：摄像机的远剪裁面，这个距离以内的物体不会被渲染。
/*

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建几何体，threejs有很多几何体类型，具体参考文档
// 这里创建了立方体
const geometry = new THREE.BoxGeometry();
 
// 创建材质，threejs有很多材质类型，具体参考文档
// 这里创建基础颜色值为0x00ff00的基础材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
 
// 创建物体
// 创建了一个基础颜色值为0x00ff00的基础材质的立方体
const cube = new THREE.Mesh(geometry, material);
 
// 将物体添加到场景
scene.add(cube);
 
// 设置摄像机位置
// 物体摄像机默认添加到场景时坐标为(0,0,0),所以将摄像机设置z轴为5时，摄像机的位置在物体的正前方，这样才能清楚地看到物体
camera.position.z = 5;
 
// 渲染循环
function animate() {
 //requestAnimationFrame 是一个浏览器的API，用于在下一个动画帧上执行某段代码
  requestAnimationFrame(animate);
 
  // 旋转物体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
 
  // 渲染场景
  renderer.render(scene, camera);
}
 
animate();
```





初识threejs

[React 学习脑图](http://naotu.baidu.com/file/d6a1de7d6dba966b444803df37ae5dfb?token=818c09a7a8ab4fb8)
敬请期待...

学习脑图汇总

## TS的出现
### TypeScript是JavaScript的超集，是具有静态类型的JavaScript。
### TypeScript增强了代码的可维护性，因为正常写代码的时候鼠标悬浮上去就会给各种提示，告诉你当前这个变量接收什么类型的，如果类型不正确编译就不通过，直接提示错误信息；其次主流的框架Vue/React都全面支持了TypeScript（关键是国内大部分公司也开始陆陆续续使用了TypeScript开发项目），这门语言确实很好，但是需要学习成本...

## 运行条件
### 目前JavaScript可以在浏览器或node环境下直接运行，TypeScript是不能直接在浏览器或node环境下直接运行的，因为不认识。那怎么样才能认识TS呢？其实就是需要一些工具将类型擦除，那么最后生成的就是JS代码，就可以直接运行在以上两个环境了。
- esbuild
- swc
### 以上两种工具在类型擦除的时候不会进行类型检查，比如你定义了type A = numbbbber;这里的number是拼错了，但是以上两种工具不会报错提示类型numbbbber不存在，所以速度会比较快
- tsc
- babel
### 以上两种工具会进行类型检查。以上四种工具的使用方法可以查官网，最后就是生成一个新的可执行的js文件
### 也可以直接运行ts文件，可以在一些在线编辑器，比如playcode.io...也可以在本地使用ts-node,swc-node工具

## 数据类型
||数据类型|
|-|-|-|
|JS数据类型|null、undefined、string、number、boolean、bigint、symbol、Object（包括Array、Function、Date...）|
|TS数据类型|以上所有JS的数据类型+void、nerver、enum、unknown、any+自定义类型type、interface|
### JS的数据类型是具体的值的类型，TS的数据类型是集合
```js
// js
let a = 1;

//ts
type number = 1 | 1.1 | ...
type Object = {?} | Array | Function | Sting | Number | Boolean | RegExp ...
// 类就是构造函数，比如Array，Function...
```
### Object太大了一般都不会用到，以及String，Number，Boolean，这些构造函数只用于包装对象，正常开发中不用他们
```js
// 包装对象
var n = 12;
console.log(n.toFixed(2));  //12.00
// 本身n是个number类型，n.toFixed的时候其实是对n进行new Number()的操作
```

## 如何在TS中描述对象的数据类型？
### 基本对象
- class/constructor
- type | interface
```js
// class/constructor
const a: Array<number> = [1,2]

// type
type Person = {
    name: string
    age: number
}

// 索引签名
type A1 = {
    [k: string]: number
}

//等价于Record泛型
type A2 = Record<string, number>

const p1: Person = {
    name: 'jaclyn',
    age: 25
}

const A3:A1 = {
    xxx: 123
}
```
### 其他对象
- class(构造函数)
```js
const d: Date = new Date();
const r: RegExp = new RegExp('a+b');
const r1: RegExp = /a+b/;
const m: Map<string,number> = new Map();
const wm: WeakMap<{name: string},number> = new WeakMap();
const s: Set<number> = new Set();
const ws: weakSet<{name:string}> = new weakSet();
```


## 如何描述数组对象？
### 由于Array太大不清晰所以TS开发者一般使用string[],Array<?>,[string, string]来描述数组
```js
type A = string[]  <==>   type A = Array<string>  // Array<string>就是泛型
type D = [string, string, string]  // 三元组
```

## 如何描述函数对象？
### 由于Function太不精确，所以TS开发者一般用() => ？来描述函数
```js
type fn = (a: number, b: number) => void
type fn2 = (a:string, b: string) => string

const uFn:fn = (x, y) => {
    console.log('hello')
}

const uFn2:fn2 = (x, y) => {
    return [x,y].join(' ');
}

uFn(1,2)
console.log(uFn2("hello", "jaclyn"))

// 箭头函数没有this，如何使用this
type Person = {
    name: string
    age: number
}

type fnWithThis = (this: Person, name: string) => void

const fnThis: fnWithThis = function() {
    console.log(this.name)
}
// 这里使用的是普通函数，如果使用箭头函数，这里的this指向的就是GlobalThis

const x:Person = {
    name: 'jaclyn',
    age: 25
}

fnThis.call(x, 'xxx');  // jaclyn

// 带有属性的函数声明
type fnWithProps = {
    (a: number, b: number) => number
    props: string
}

const a: fnWithProps = (x, y) => {
    return x + y;
}

a.props = "hello"
console.log(a.props)
```

## any和unknow的区别
### any代表任何类型，ts绝大部分规则对any不生效；unknow代表不知道是什么类型，比如从外部获取到的数据可以通过一个unknow类型的变量进行接收并对变量进行as断言，这样就可以使用对应的方法
```js
const uk: unknow = ajax.get('xxx'); 
const b = uk as string;   // 类型断言
b.split('a');  // 因为进行了断言所以就可以使用string下的split方法
```

## nerver类型怎么用？
### 一般nerver类型就是不能用了，因为他就是个空集，一般可以作为类型判断
```js
type A = string | number | boolean;
const B: A = ajax.get('xxx');
if(typeof B === 'string') {
	// 此时B就是个string类型
}else if(typeof B === number) {
	// 此时B就是个number类型
}else if(typeof B === boolean) {
	// 此时B就是个boolean类型
}else {
	// 此时B就是个nerver类型不能被使用
}
```

## enum的使用
### 一般在需要被映射的时候使用，如果需要遍历就正常看做是个对象使用for in进行key的遍历就行了
```js
enum A {
	todo: 0,
	done, //不定义默认+1
}
let status: A = 0;
let status1: A = A.todo;
```

## type和interface什么时候用？
- type类型别名，只是给其他类型取个名字，type可以描述所有类型包括基本类型string，number，boolean等以及对象类型；interface是类型声明，interface只能描述对象类型，包括普通对象以及Array，Function，Date...interface就是为了迎合面向对象（oop）编程而出的
- type不可扩展，不可重复赋值；interface可扩展，重复赋值的话会自动合并。所以一般对外api尽量使用interface，方便别人扩展，对内api尽量用type，防止代码分散

## 提示类型系统有哪些运算？
### 联合类型（A | B）
### 联合类型就是并的意思，可以是A也可以是B，所以不确定类型到底属于哪一种，所以需要类型收窄，使用的方法包括：
- js方法：typeof对简单类型的判断，instanceof对象类型的判断
- ts方法：类型谓词/类型判断 is
- ts方法：x.kind（添加一个同名的可辨别的简答类型的key）
- ts方法：断言，断言了就类似强制性的属于某种类型

```js
// typeof
const f1 = (a: number | string) => {
    if(typeof a === 'number') {
        //此时a就是number类型
    }else if(typeof a === 'string') {
        // 此时a就是string类型
    }else {
        // 此时a就是nerver类型
    }
}

// instanceof
const f2 = (a: Date | Date[]) => {
    if(a instanceof Date) {
        // 此时a就是Date类型
    }else if(a instanceof Array) {
        // 此时a就是Array类型
    }else {
        // 此时a就是nerver类型
    }
}

// 以上type和instanceof可以判断基本类型以及复杂类型，但是不能判断ts类型
// 通过key in的方式判断
type Person = {
    name: string
    age: number
}

type Animal = {
    x: string
}

const f3 = (a: Person | Animal) => {
    if('name' in a) {
        // Person类型
    }else if('x' in a) {
        // Animal类型
    }else // 此时a就是nerver类型
}

// 通过类型谓词is，可以支持所有ts类型，但是很麻烦
type Rect = {
    width: number
    height: number
}

type Circle = {
    center: number
    radius: number
}

const fn = (a: Rect | Circle) => {
    if(isRect(a)) {
        // 此时a就是Rect类型
    }else if(isCircle(a)) {
        // 此时a就是Circle类型
    }
}

function isRect(x: Rect | Circle) : x is Rect {
    return 'width' in x && 'height' in x;
    // 这里的逻辑判断可以随便写，最后返回true|false就行，关键是x is Rect
}

function isCircle(x: Rect | Circle) : x is Circle {
    return 'center' in x && 'radius' in x;
}

// 通过a.kind，其实就是添加一个同名的可辨别的简单类型的key
type Circle = { kind: 'Circle', x?: [number, number] };
type Square = { kind: 'Square', x: number }; // 这里都有x所以不能通过key in的方式判断
type Shape = Circle | Square;
const fn2 = (x: Shape) => {
    if(x.kind === 'Circle') {
        // 此时a就是Circle类型
    }else if(x.kind === 'Square') {
        // 此时a就是Square类型
    }else // 此时a就是nerver类型
}
```

### 交叉类型
### type使用&模拟继承；interface使用extends实现继承
```js
type A = {
    name: string
}

type B = {
    age: number
} & A

interface C {
    name: string
}

interface D extends C {
    age: number
} 

const a: B = {
    age: 13,
    name: 'hh'
}

const b: D = {
    age: 13,
    name: 'hh'
}
```












TypeScript笔记

### 浏览器缓存（Browser Caching）是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，整体上加速网页展示给用户。打开浏览器地调试模式->application左侧。

## http缓存
### 什么是http缓存
#### http缓存指的是: 当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。
#### 常见的http缓存只能缓存get请求响应的资源，对于其他类型的响应则无能为力
#### http缓存都是从第二次请求开始的。第一次请求资源时，服务器返回资源，并在respone header头中回传资源的缓存参数；第二次请求时，浏览器判断这些请求参数，命中强缓存就直接200，否则就把请求参数加到request header头中传给服务器，看是否命中协商缓存，命中则返回304，否则服务器会返回新的资源。
### http缓存的分类：
#### 根据是否需要重新向服务器发起请求来分类，可分为(强制缓存，协商缓存) 根据是否可以被单个或者多个用户使用来分类，可分为(私有缓存，共享缓存) 强制缓存如果生效，不需要再和服务器发生交互，而协商缓存不管是否生效，都需要与服务端发生交互
### 1.1、强制缓存
#### 强制缓存在缓存数据未失效的情况下（即Cache-Control的max-age没有过期或者Expires的缓存时间没有过期），那么就会直接使用浏览器的缓存数据，不会再向服务器发送任何请求。强制缓存生效时，http状态码为200。这种方式页面的加载速度是最快的，性能也是很好的，但是在这期间，如果服务器端的资源修改了，页面上是拿不到的，因为它不会再向服务器发请求了。
### 1.2、协商缓存
#### 当第一次请求时服务器返回的响应头中没有Cache-Control和Expires或者Cache-Control和Expires过期还或者它的属性设置为no-cache时(即不走强缓存)，那么浏览器第二次请求时就会与服务器进行协商，与服务器端对比判断资源是否进行了修改更新。如果服务器端的资源没有修改，那么就会返回304状态码，告诉浏览器可以使用缓存中的数据，这样就减少了服务器的数据传输压力。如果数据有更新就会返回200状态码，服务器就会返回更新后的资源并且将缓存信息一起返回。跟协商缓存相关的header头属性有（ETag/If-Not-Match 、Last-Modified/If-Modified-Since）请求头和响应头需要成对出现
### 为什么要使用HTTP缓存 ？
#### 1. 减少了冗余的数据传输，节省了网费。
#### 2. 缓解了服务器的压力， 大大提高了网站的性能
#### 3. 加快了客户端加载网页的速度
### 如何使用HTTP缓存 ？
#### 一般需要缓存的资源有html页面和其他静态资源：
#### 1、html页面缓存的设置主要是在<head>标签中嵌入<meta>标签，这种方式只对页面有效，对页面上的资源无效
```js
//1.1、html页面禁用缓存的设置如下：
<meta http-equiv="pragma" content="no-cache">
// 仅有IE浏览器才识别的标签，不一定会在请求字段加上Pragma，但的确会让当前页面每次都发新请求
<meta http-equiv="cache-control" content="no-cache">
// 其他主流浏览器识别的标签
<meta http-equiv="expires" content="0">
// 仅有IE浏览器才识别的标签，该方式仅仅作为知会IE缓存时间的标记，你并不能在请求或响应报文中找到Expires字段

//1.2、html设置缓存如下：
<meta http-equiv="Cache-Control" content="max-age=7200" />
// 其他主流浏览器识别的标签
<meta http-equiv="Expires" content="Mon, 20 Aug 2018 23:00:00 GMT" />
// 仅有IE浏览器才识别的标签
```
#### 2、静态资源的缓存一般是在web服务器上配置的，常用的web服务器有：nginx、apache。

## websql
#### websql这种方式只有较新的chrome浏览器支持，并以一个独立规范形式出现，主要有以下特点
#### - Web Sql 数据库API 实际上不是HTML5规范的组成部分；
#### - 在HTML5之前就已经存在了，是单独的规范；
#### - 它是将数据以数据库的形式存储在客户端，根据需求去读取；
#### - 跟Storage的区别是： Storage和Cookie都是以键值对的形式存在的；
#### - Web Sql 更方便于检索，允许sql语句查询；
#### - 让浏览器实现小型数据库存储功能；
#### - 这个数据库是集成在浏览器里面的，目前主流浏览器基本都已支持；
#### websql API主要包含三个核心方法：
#### - openDatabase : 这个方法使用现有数据库或创建新数据库创建数据库对象。
#### - transaction : 这个方法允许我们根据情况控制事务提交或回滚。
#### - executeSql : 这个方法用于执行真实的SQL查询。
#### openDatabase方法可以打开已经存在的数据库，不存在则创建
```js
var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);
```
#### openDatabasek中五个参数分别为：数据库名、版本号、描述、数据库大小、创建回调。创建回调没有也可以创建数据库
#### database.transaction() 函数用来查询，executeSql()用于执行sql语句
#### 例如在mydatabase数据库中创建表t1：
```js
  var db = openDatabase(' mydatabase ', '1.0', 'Test DB', 2 * 1024 * 1024);  
   db.transaction(function (tx) {    
      tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');  
   });
```
#### 插入操作
```js
var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);

   db.transaction(function (tx) { 
      tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');  
      tx.executeSql('INSERT INTO t1 (id, log) VALUES (1, "foobar")');  
      tx.executeSql('INSERT INTO t1 (id, log) VALUES (2, "logmsg")');  
   });
```
#### 在插入新记录时，我们还可以传递动态值，如：
```js
   var db = openDatabase(' mydatabase ', '2.0', 'my db', 2 * 1024);  
   db.transaction(function (tx) {    
     tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');  
     tx.executeSql('INSERT INTO t1 (id,log) VALUES (?, ?'), [e_id, e_log];  //e_id和e_log是外部变量
   });
```
#### 读操作，如果要读取已经存在的记录，我们使用一个回调捕获结果：
```js
   var db = openDatabase(mydatabase, '2.0', 'my db', 2*1024);     
	  db.transaction(function (tx) { 
      tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');  
      tx.executeSql('INSERT INTO t1 (id, log) VALUES (1, "foobar")');  
      tx.executeSql('INSERT INTO t1 (id, log) VALUES (2, "logmsg")');  
   });  
   db.transaction(function (tx) { 
      tx.executeSql('SELECT * FROM t1', [], function (tx, results) { 
      var len = results.rows.length, i;  
      msg = "<p>Found rows: " + len + "</p>";  
      document.querySelector('#status').innerHTML +=  msg;  
      for (i = 0; i < len; i++){ 
         alert(results.rows.item(i).log );  
      } 
    }, null);  
   });
```


## indexDB
#### 通俗地讲，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。
### 操作步骤
#### 1. 创建/打开数据库。
#### 2. 在数据库中创建一个对象仓库（object store）。
#### 3. 启动一个事务，并发送一个请求来执行一些数据库操作，像增加或提取数据等。
#### 4. 通过监听正确类型的 DOM 事件以等待操作完成。
#### 5. 在操作结果上进行一些操作（可以在 request 对象中找到）
#### 打开数据库
```js
var db = null;
var request = window.indexedDB.open("MyTestDatabase");
request.onerror = function(event) {
  // 错误处理
  console.log(' 打开数据库报错');
};
request.onsuccess = function(event) {
  // 成功处理
  db = event.target.result;
  console.log('打开数据库成功');
};
```
#### 创建和更新数据库版本号
#### 如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded。这时通过事件对象的target.result属性，拿到数据库实例。
```js
var db = null;
request.onupgradeneeded = function (event) {
  db = event.target.result;
}
```
#### 新建数据库
#### 新建数据库与打开数据库是同一个操作。如果指定的数据库不存在，就会新建。不同之处在于，后续的操作主要在upgradeneeded事件的监听函数里面完成，因为这时版本从无到有，所以会触发这个事件。
#### 通常，新建数据库以后，第一件事是新建对象仓库（即新建表）。
```js
request.onupgradeneeded = function(event) {
  db = event.target.result;
  var objectStore = null;
  if (!db.objectStoreNames.contains('imgLists')) {
    objectStore = db.createObjectStore('imgLists', { keyPath: 'id' });
    // unique name可能会重复
    objectStore.createIndex('name', 'name', { unique: false });
  }
}
//创建一张叫imgLists的表格，主键是id。
```
#### 写入数据
#### 新增数据指的是向对象仓库写入数据记录。这需要通过事务完成。
```js
// new 一个blob对象
var obj1 = {hello: "world"};
var blob = new Blob([JSON.stringify(obj1, null, 2)], {type : 'application/json'});

function add() {
  var request = db.transaction(['imgLists'],  'readwrite')
    .objectStore('imgLists')
    .add({ id: 1, name: '图片1', path: '/static/image', blob:  blob});

  request.onsuccess = function (event) {
    console.log('数据写入成功');
  };

  request.onerror = function (event) {
    console.log('数据写入失败');
  }
}
```
#### 查询数据
#### 查询数据也是通过事物完成。
```js
function read() {
   var transaction = db.transaction(['imgLists']);
   var objectStore = transaction.objectStore('imgLists');
   // 用户读取数据，参数是主键
   var request = objectStore.get(1);

   request.onerror = function(event) {
     console.log('事务失败');
   };

   request.onsuccess = function( event) {
      if (request.result) {
        console.log(request.result);
      } else {
        console.log('未获得数据记录');
      }
   };
}
```
#### 遍历数据
#### 遍历数据表格的所有记录，要使用指针对象 IDBCursor。
```js
function readAll() {
  var objectStore = db.transaction('imgLists').objectStore('imgLists');

   objectStore.openCursor().onsuccess = function (event) {
     var cursor = event.target.result;

     if (cursor) {
       console.log(cursor);
       cursor.continue();
    } else {
      console.log('没有更多数据了！');
    }
  };
}
```
#### 更新数据
```js
function update() {
  var request = db.transaction(['imgLists'], 'readwrite')
    .objectStore('imgLists')
    // 主动更新主键为1
    .put({ id: 1, name: '图片2',  path: '/static/image2'});

  request.onsuccess = function (event) {
    console.log('数据更新成功');
  };

  request.onerror = function (event) {
    console.log('数据更新失败');
  }
}
```
#### 删除数据
```js
function remove() {
  var request = db.transaction(['imgLists'], 'readwrite')
    .objectStore('imgLists')
    .delete(1);

  request.onsuccess = function (event) {
    console.log('数据删除成功');
  };
}

remove();
```
#### 创建/使用索引
#### 索引的意义在于，可以让你搜索任意字段，也就是说从任意字段拿到数据记录。如果不建立索引，默认只能搜索主键（即从主键取值）。
```js
objectStore.createIndex('name', 'name', { unique: false });
```
```js
    function findIndex() {
      var transaction = db.transaction(['imgLists'], 'readonly');
      var store = transaction.objectStore('imgLists');
      var index = store.index('name');
      var request = index.get('图片1');

      request.onsuccess = function (e) {
        var result = e.target.result;
        if (result) {
          console.log(result);
        } else {
          // ...
        }
      }
    }
```

## cookie
#### Cookie（或者Cookies），指一般网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）。cookie一般通过http请求中在头部一起发送到服务器端。一条cookie记录主要由键、值、域、过期时间、大小组成，一般用户保存用户的认证信息。cookie最大长度和域名个数由不同浏览器决定
#### 不同域名之间的cookie信息是独立的，如果需要设置共享可以在服务器端设置cookie的path和domain来实现共享。浏览器端也可以通过document.cookie来获取cookie，并通过js浏览器端也可以方便地读取/设置cookie的值。
## localstorage
#### localStorage是html5的一种新的本地缓存方案，目前用的比较多，一般用来存储ajax返回的数据，加快下次页面打开时的渲染速度。
```js
//localStorage核心API:
localStorage.setItem(key, value)	//设置记录
localStorage.getItem(key)		//获取记录
localStorage.removeItem(key)		//删除该域名下单条记录
localStorage.clear()			//删除该域名下所有记录
```
#### 值得注意的是，localstorage大小有限制，不适合存放过多的数据，如果数据存放超过最大限制会报错，并移除最先保存的数据。

## sessionstorage
#### sessionStorage和localstorage类似，但是浏览器关闭则会全部删除，api和localstorage相同，实际项目中使用较少。

## application cache
#### application cahce是将大部分图片资源、js、css等静态资源放在manifest文件配置中。当页面打开时通过manifest文件来读取本地文件或是请求服务器文件。HTML5 使用ApplicationCache 接口可以解决由离线带来的部分难题。前提是你需要访问的web页面至少被在线访问过一次。
#### 使用缓存接口可为您的应用带来以下三个优势：
#### - 离线浏览 – 用户可在离线时浏览您的完整网站
#### - 速度 – 缓存资源为本地资源，因此加载速度较快。
#### - 服务器负载更少 – 浏览器只会从发生了更改的服务器下载资源。
#### 一个简单的离线页面主要包含以下几个部分：
#### index.html
```js
<html manifest="clock.manifest">
  <head>
    <title>AppCache Test</title>
    <link rel="stylesheet" href="clock.css">
    <script src="clock.js"></script>
  </head>
  <body>
    <p><output id="clock"></output></p>
    <div id="log"></div>
  </body>
</html>
```
#### clock.mainfest
```js
CACHE MANIFEST
#VERSION 1.0
CACHE:
clock.css
clock.js
```
#### clock.js和clock.css为独立的另外文件。   另外需要注意的是更新缓存。在程序中，你可以通过window.applicationCache 对象来访问浏览器的app cache。你可以查看 status 属性来获取cache的当前状态：
```js
var appCache = window.applicationCache;
switch (appCache.status) {
  case appCache.UNCACHED: // UNCACHED == 0
    return 'UNCACHED';
    break;
  case appCache.IDLE: // IDLE == 1
    return 'IDLE';
    break;
  case appCache.CHECKING: // CHECKING == 2
    return 'CHECKING';
    break;
  case appCache.DOWNLOADING: // DOWNLOADING == 3
    return 'DOWNLOADING';
    break;
  case appCache.UPDATEREADY:  // UPDATEREADY == 4
    return 'UPDATEREADY';
    break;
  case appCache.OBSOLETE: // OBSOLETE == 5
    return 'OBSOLETE';
    break;
  default:
    return 'UKNOWN CACHE STATUS';
    break;
};
```
#### 为了通过编程更新cache，首先调用 applicationCache.update()。这将会试图更新用户的 cache（要求manifest文件已经改变）。最后，当 applicationCache.status 处于 UPDATEREADY 状态时， 调用applicationCache.swapCache()，旧的cache就会被置换成新的。
```js
var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user’s cache.
…
if (appCache.status == window.applicationCache.UPDATEREADY) {
  appCache.swapCache();  // The fetch was successful, swap in the new cache.
}
```
#### 这里是通过更新menifest文件来控制其它文件更新的。

## cacheStorage
#### CacheStorage是在ServiceWorker的规范中定义的。CacheStorage 可以保存每个serverWorker申明的cache对象，cacheStorage有open、match、has、delete、keys五个核心方法，可以对cache对象的不同匹配进行不同的响应。
#### cacheStorage.has() 如果包含cache对象，则返回一个promise对象。 cacheStorage.open() 打开一个cache对象，则返回一个promise对象。 cacheStorage.delete() 删除cache对象，成功则返回一个promise对象，否则返回false。 cacheStorage.keys() 含有keys中字符串的任意一个，则返回一个promise对象。 cacheStorage.delete() 匹配key中含有该字符串的cache对象，返回一个promise对象。
```js
caches.has('v1').then(function() {
  caches.open('v1').then(function(cache) {
      return cache.addAll(myAssets);
  });
}).catch(function() {
  someCacheSetupfunction();
});;
```
```js
var response;
var cachedResponse = caches.match(event.request).catch(function() {
  return fetch(event.request);
}).then(function(r) {
  response = r;
  caches.open('v1').then(function(cache) {
    cache.put(event.request, response);
  });  
  return response.clone();
}).catch(function() {
  return caches.match('/sw-test/gallery/myLittleVader.jpg');
});
```
```js
then.addEventListener('activate', function(event) {
  var cacheWhitelist = ['v2'];

  event.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (cacheWhitelist.indexOf(key) === -1) {
          return caches.delete(keyList[i]);
        }
      });
    })
  );
});
```


浏览器端缓存方法

## 项目源码

本项目源码已上传到[github](https://github.com/jaclynshi/springBoot-SSM-Thymeleaf-Bootstrap)

## 前言

此项目从0开始，1天入门java，制作一个简易的微博系统。参考网上的资料基于springtool工具搭建springboot项目，仅供自己学习参考，同时希望能给您带来帮助，都是最基础的功能，不喜勿喷哦。

## 功能说明

```js
前台
1、用户登录登出
2、增删改查心情文章
3、关注其他用户
4、查看关注用户的心情微博
后台
1、用户管理
2、心情微博管理
```

## 项目部分截图
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/20/172d09295fd4f3ab~tplv-t2oaga2asx-image.image)

![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/20/172d093127bbb6a7~tplv-t2oaga2asx-image.image)

## 环境搭建
首先下载一个专为Spring设计的eclipse版本——[Spring Tool Suite](http://spring.io/tools)

## 创建项目
下载完安装就行了，然后点击左上角，File —> new —> Spring Starter Project
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/20/172d0250e7cda87c~tplv-t2oaga2asx-image.image)
下一步填入项目名称，自定义名称就行
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/20/172d0283f80f3234~tplv-t2oaga2asx-image.image)
在输入框中依次输入以下五个选项，并选中，会在右侧出现你选中的选项，这些都会在后面的开发过程中用到，如果忘记添加也没关系，后续可以在项目的pom.xml中添加即可，项目的pom.xml是个依赖管理的配置文件
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/20/172d02df01510db9~tplv-t2oaga2asx-image.image)
点击finish即可，到目前为止创建项目成功，静静等待编译结束就可以开始开发啦，这个过程可能比较漫长，这个时候可以选择吃吃零食，看看剧，玩玩游戏...☺

## 项目目录
### 入口文件
首先来看一下项目的入口文件，
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/20/172d0377372a7a47~tplv-t2oaga2asx-image.image)
右击这个类，run as——Spring Boot App，就会启动该项目，看一眼就ok了，不用管它。
### 配置文件
项目最关键两个配置文件，一个是上面提到的依赖管理pom.xml文件，就在项目的根目录下，需要什么包在这里引入就好了;其次就是resources目录下的application.properties文件，可以用来设置连接mysql的配置信息。

```java
# mysql
spring.datasource.url: jdbc:mysql://localhost:3306/springboot?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
spring.datasource.username: root
spring.datasource.password: root
```
以上代码是在application.properties文件中定义连接了本地springboot数据库，mysql连接用户名以及密码，在我的github项目的resouces目录下有个sql.java文件，在mysql中打开此文件运行就能在本地数据库中生成该数据库。

## 开发项目
好啦，数据库也建好了，对于web开发来说，我的理解是最基本的就是后台与数据库的交互获取数据，传给前端，前端通过thymeleaf模板引擎展示数据。首先就是需要建立模型，这样才能通过控制器获取到数据库中的数据。

### 建立模型
在model下新建bean目录，定义一个模型类，以user表为例，在bean目录下新建User.java文件

```java
package com.example.demo.model.bean;
import java.io.Serializable;
public class User implements Serializable {
	private static final long serialVersionUID = -5611386225028407298L;
	private Integer id;
	private String account;
	private String name;
	private String password;
	private Integer agent;
	private String image;
	private String phone;
	private String address;
	private Integer permission;
	private Followuser followuser;

    // 省略get和set方法，大家自己设置即可
	public Followuser getFollowuser() {
		return followuser;
	}
	public void setFollowuser(Followuser followuser) {
		this.followuser = followuser;
	}
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getAccount() {
		return account;
	}
	public void setAccount(String account) {
		this.account = account;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public Integer getAgent() {
		return agent;
	}
	public void setAgent(Integer agent) {
		this.agent = agent;
	}
	public String getImage() {
		return image;
	}
	public void setImage(String image) {
		this.image = image;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	public Integer getPermission() {
		return permission;
	}
	public void setPermission(Integer permission) {
		this.permission = permission;
	}
}
```
有了这个就可以和数据库表有个映射关系，现在还需要一个接口，定义项目中所有关于user表的查询方法，在model目录下新建dao目录，在dao目录下新建UserDAO.java，

```java
package com.example.demo.model.dao;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import com.example.demo.model.bean.User;
import java.util.List;
@Mapper
public interface UserDAO {
	public User find(@Param("account")String account, @Param("password")String password);
	public User findByAccount(@Param("account")String account);
	public User findByID(@Param("userID")String userID);
	public Integer create(@Param("account")String account, @Param("password")String password, @Param("name")String name, @Param("agent")Integer agent, @Param("phone")String phone, @Param("address")String address, @Param("image")String image);
	public List<User> findMyFollow(@Param("userID")String userID);
	public List<User> findAll();
	public Integer remove(@Param("userID")Integer userID);
	public Integer updatePassword(@Param("password")String password, @Param("userID")String userID);
	public List<User> findSearch(@Param("keyword")String keyword);
	// 注： CRTL+Shift+O，快捷导入所有import
}
以上需要注意的是，如果需要查询user表中一条数据多个字段，用上面定义的User类接收，如果查询一条数据的单个字段，可以根据数据表中定义的字段类型去接收，比如create方法返回的是创建此条记录的id值是Integer类型的，如果返回多条数据就用list接收。

```
有了上面的方法接口后，还需要mybatis映射接口到SQL语句的文件，根据application.properties中的配置mybatis.mapper-locations: classpath:mapper/*.xml,在resources文件夹下新建mapper文件夹，下面放入UserDAO.xml文件，都是sql语句就不多说了。

```java
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.example.demo.model.dao.UserDAO">
  <select id="find" resultType="com.example.demo.model.bean.User">
    SELECT id, account, name, password, address, image, phone, agent, permission from user where account = #{account} and password = #{password}
  </select>
  
  <select id="findAll" resultType="com.example.demo.model.bean.User">
    SELECT id, account, name, password, address, image, phone, agent, permission from user where permission = 0
  </select>
  
  <select id="findByAccount" resultType="com.example.demo.model.bean.User">
    SELECT id, account, name, password, address, image, phone, agent, permission from user where account = #{account}
  </select>
  
  <select id="findByID" resultType="com.example.demo.model.bean.User">
    SELECT id, account, name, password, address, image, phone, agent, permission from user where id = #{userID}
  </select>
  
  <select id="findMyFollow" resultMap="userFollowMap">
    SELECT u.name, u.id from user u left join followuser fu on u.id = fu.followTo where fu.followFrom = #{userID}
  </select>
  
  <select id="findSearch" resultType="com.example.demo.model.bean.User">
    SELECT id, account, name, password, address, image, phone, agent, permission from user where account like '%${keyword}%' or name like '%${keyword}%'
  </select>
  
  <resultMap id="userFollowMap" type="com.example.demo.model.bean.User">
		<id property="id" column="id"></id>
		<result property="account" column="account"></result>
		<result property="name" column="name"></result>
		<result property="password" column="password"></result>
		<result property="image" column="image"></result>
		<result property="agent" column="agent"></result>
		<result property="phone" column="phone"></result>
		<result property="address" column="address"></result>
		<association property="followuser" column="id" javaType="com.example.demo.model.bean.Followuser">
			<id property="id" column="id"></id>
			<result property="followFrom" column="followFrom"></result>
			<result property="followTo" column="followTo"></result>
		</association>
	</resultMap>
  
  <insert id="create" parameterType="com.example.demo.model.bean.User">
    INSERT into user(account, password, name, agent, phone, address, image) VALUES(#{account}, #{password}, #{name}, #{agent}, #{phone}, #{address}, #{image})
  </insert>
  
  <delete id="remove" parameterType="com.example.demo.model.bean.User">
    DELETE FROM user where id = #{userID}
  </delete>
  
  <update id="updatePassword" parameterType="com.example.demo.model.bean.User">
    UPDATE user set password = #{password} where id = #{userID}
  </update>
</mapper>
```

### 控制器
有了数据之后就可以通过控制器去接收数据了，比较常用的请求方式是get请求和post请求，我就以两个请求方式为例
#### get请求
以后台用户管理为例

```java
@GetMapping(value = "admin/userManager")  //vaule代表路由
	public Object userManager(Map<String, Object> map, HttpSession session) {
		if(!StringUtils.isEmpty(session.getAttribute("userID"))) {
			User user = userDAO.findByID(session.getAttribute("userID").toString());
			if(user.getPermission()==1) {
				map.put("userID", session.getAttribute("userID"));
				map.put("username", session.getAttribute("username"));
				List<User> allUser = userDAO.findAll();  //这里就是调用dao里面的方法
				if(allUser != null) {
					map.put("allUser", allUser);  //map.put就是向前端传输数据
				}
			}else {
				return new ModelAndView("redirect:/");  //如果验证成功那就
			}
		}else {
			return new ModelAndView("redirect:/");
		}
		return new ModelAndView("admin/userManager");
	}
```

前端通过thymeleaf展示数据

```java
<table class="table">
	  <thead class="thead-dark">
	    <tr>
	      <th scope="col">用户账号</th>
	      <th scope="col">用户密码</th>
	      <th scope="col">用户名称</th>
	      <th scope="col">性别</th>
	      <th scope="col">用户手机</th>
	      <th scope="col">用户地址</th>
	      <th scope="col">操作</th>
	    </tr>
	  </thead>
	  <tbody>
	    <tr th:each="item,stat:${allUser}" >
	    <form method="post">
	      	<th th:text="${item.account}"></th>
	      	<th th:text="${item.password}"  th:id="'password_'+${item.id}"></th>
	      	<th th:id="'passwordInput_'+${item.id}"  style="display:none">
	      		<input type="password" name="password" class="form-control">
	      		<input type="text" name="userID" class="form-control" th:value="${item.id}" style="display:none">
	      	</th>
	      	<th th:text="${item.name}"></th>
	      	<th th:text="${item.agent==1?'女':'男'}"></th>
	      	<th th:text="${item.phone}"></th>
	      	<th th:text="${item.address}"></th>
	      	<th>
	      		<a class="btn btn-primary editPassoword" th:id="'editPassword_'+${item.id}" th:onclick="'editPassword('+${item.id}+')'">编辑</a>
	      		<input class="btn btn-primary savePassword" th:id="'savePassword_'+${item.id}" type="submit" value="保存" style="display:none">
	      		<a class="btn btn-danger" th:href="@{'removeUser?userID=' + ${item.id}}">删除</a>
	      	</th>
	      	</form>
	    </tr>
	  </tbody>
</table>
```
#### post请求

```java
@RequestMapping(value = "admin/login", method = RequestMethod.POST)
	public Object login1(Map<String, Object> map,@RequestParam(value = "account", required = false) String account,
			@RequestParam(value = "password", required = false) String password, HttpSession session) {
		session.removeAttribute("userID");
		session.removeAttribute("username");
		if(StringUtils.isEmpty(account)) {
			map.put("errors", "账号不能为空！");
		}else if(StringUtils.isEmpty(password)){
			map.put("errors", "密码不能为空!");
		}else {
			User user = userDAO.find(account, password);
			System.out.println(user);
			if (user != null && user.getPermission()==1) {
				session.setAttribute("userID", user.getId());
				session.setAttribute("username", user.getName());
				return new ModelAndView("redirect:/admin/userManager");
			} else {
				map.put("errors", "账户或者密码错误！");
			}
		}
			
		return new ModelAndView("admin/login");
	}
	
	//通过@RequestParam接收前端post过来的数据
```

### 同样根据github上的项目进行修改开发另一套选课系统。后台管理系统使用vue前端框架搭建页面，应用ElementUI组件，vuex数据管理；微信小程序使用uni跨平台技术，可以打包运行在微信开发平台进行调试；后端用的springboot框架搭建的服务端，包含各种接口。springboot项目目录介绍：关键目录是在system目录，controller目录是控制器，控制页面请求的接口地址映射，entity目录实现和数据库表字段之间的映射，vo目录实现的是在entity基础上表关联关系的数据库表字段之间的映射，控制器中访问的服务接口在service中统一管理，对应service.impl目录下的相关文件，具体实现在service.impl中体现，数据库表查询对应dao文件的接口，对应resource目录下mapper目录，实现sql表查询操作。
### 放上部分截图
![微信图片_20220207212348.png](https://www.jaclynshi.top/img/1644240650991.png)
![微信图片_20220207212434.png](https://www.jaclynshi.top/img/1644240651243.png)
![微信图片_20220207212454.png](https://www.jaclynshi.top/img/1644240651376.png)
![微信图片_20220207212506.png](https://www.jaclynshi.top/img/1644240651521.png)




springboot+ssm+thymeleaf+bootstrap 创建简易微博系统

react hooks使用记录以及所有常用的api

#### 本文档针对react进行开发使用，创建react项目使用create-react-app初始化项目，参考自[domesy](https://www.yuque.com/domesy/react-mobile)
## 创建项目配置文件
### 插件
#### react-app-rewired customize-cra
### 执行命令
#### npm install react-app-rewired customize-cra --save
#### 官方介绍customize-cra扩展了create-react-app的功能，customize-cra依赖于react-app-rewired，所以需要安装两个包。
## 配置：
### 在 package.json 中的 script 下的 react-scripts 替换为 react-app-rewired 即可
```js
{
 ...
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  ...
}
```
### 然后在更目录下创建 config-overrides.js 文件，以后所有的配置就在此文件中

## 配置装饰器
#### 装饰器只能用于class组件
### 插件 @babel/plugin-proposal-decorators
### 执行命令 npm install @babel/plugin-proposal-decorators -S
### 配置
```js
const { override, addDecoratorsLegacy } = require('customize-cra');

module.exports = override(
 	...,
  addDecoratorsLegacy(),
 	...
);
```

## MUI组件
### 插件 @material-ui/core 
### 执行命令 npm install @material-ui/core  -S

## Testing library
#### Testing libraryshi React官方推荐的单元测试库，提供了一系列拟人化的API来帮助我们测试UI组件。具体使用参考官方文档
### 插件 @testing-library/jest-dom @testing-library/react @testing-library/user-event
#### 如果使用的是create-react-app新建的应用，项目中应该默认会安装以上三个插件，如果不是的话，需要手动安装,官方推荐Jest+testing library
### 执行命令 npm install @testing-library/react @testing-library/user-event @testing-library/jest-dom -S

## @types
#### 当我们用 npm 等包管理工具安装第三方包的时候，有些包并不是 TypeScript 编写的，自然也不会导出 TypeScript 声明文件。这种情况下，如果我们在 TypeScript 项目中引入了这种包，则会编译报错(没有设置 allowJS)。比如，当我们通过npm install jquery --save 安装 jquery 包并引用的时候，typeScript 会报错：TypeScript 没有找到 jquery 这个包的定义，你可以通过npm install @types/jquery安装相关声明，或者自己定义一份.d.ts 文件，并将 jquery 声明为 module。

## @types/axios
#### 用于浏览器和node.js的基于Promise的HTTP客户端
### 1. 从浏览器制作XMLHttpRequests
### 2. 让HTTP从node.js的请求
### 3. 支持Promise API
### 4. 拦截请求和响应
### 5. 转换请求和响应数据
### 6. 取消请求
### 7. 自动转换为JSON数据
### 8. 客户端支持防止XSRF

## @types/jest
#### 一般我们写完代码会通过console.log的方式去测试，上线的时候再删掉，使用Jest测试，可以避免这样的问题出现。Jest 是当下最主流的前端测试框架；对于初学者，Jest 配置入门并不算友好，尤其是选择了 Typescript 做开发语言，教程很烦琐。选择ts-jest 的预处理库 ，配置非常简单，一共就三步。
### 执行命令npm install -D jest typescript ts-jest @types/jest
### 生成配置npm ts-jest config:init
### 运行npm jest
#### 这里推荐一款 vscode 插件——Jest Runner。可以对单个case进行debug，在每个test case上会有run|debug的按钮，可以给代码打断点进行debug也可以直接run这个case。

## @types/mockjs
#### 一般开发前后端都是并行开发的，等待接口的同时数据需要前端自己mock， 具体使用参考文档[mockjs](http://mockjs.com/)
### 执行命令 npm install @types/mockjs -S

## @types/qrcode.react
#### react使用qrcode.react生成二维码
### 执行命令 npm install @types/qrcode.react -S

## @types/qs
#### 是用来处理url中参数的一个js库
### 1. qs.parse 方法可以把一段格式化的字符串转换为对象格式a=1&b=2 => {a: 1, b: 2}
### 2. qs.stringify 则和 qs.parse相反，是把一个参数对象格式化为一个字符串。{a: 1, b: 2} => a=1&b=2
### 3. 可以对格式化后的参数进行排序：qs.stringify(params, (a,b) => a.localeCompare(b))

## @types/react-dom
#### 我们在使用react开发网页时，会下载两个包，一个是react，一个是react-dom，其中react包是react的核心代码，react-dom则是React剥离出的涉及DOM操作的部分。
#### react的核心思想是虚拟DOM，react包含了生成虚拟DOM的函数react.createElement，及Component类。当我们自己封装组件时，就需要继承Component类，才能使用生命周期函数等。而react-dom包的核心功能就是把这些虚拟DOM渲染到文档中变成实际DOM。
#### react-dom主要包含三个API：findDOMNode、unmountComponentAtNode 和 render。
#### 重点讲解render用于将React渲染的虚拟DOM渲染到浏览器DOM，一般在顶层组件使用。该方法把元素挂载到 container 中，并且返回 element 的实例（即 refs 引用），如果是无状态组件，render 会返回 null。当组件装载完毕时，callback 就会被调用。
```js
render(ReactElement element,DOMElement container,[function callback])
```

## ahooks
#### 阿里的一套hook方案， 详情参考官方文档[ahooks](https://ahooks.js.org/hooks/use-request/index)
### 执行命令 npm install ahooks -S

## antd-mobile
#### antd移动端UI组件
### 执行命令 npm install antd-mobile -S

## chalk & clear & figlet
### clear: 清屏
### chalk: 装饰作用，使之终端上的输出加上颜色
### figlet: 作用是将字母转化为图片，使之更加醒目
### 执行命令 npm install figlet clear chalk@^4.1.0 -S

## compression-webpack-plugin
#### 压缩js、css

## cross-env
#### 在内置中分为开发环境和生成环境，对应的分别为 production 和 development 模式，使用cross-env就可以进行分模块打包了
### 执行命令npm install cross-env -S
### 配置：在 package.json
```js
{
	...,
  "scripts": {
    "start": "react-app-rewired start ",
    "start:pre": "cross-env REACT_APP_ENV=pre react-app-rewired start",
    "build": "react-app-rewired build",
    "starbuildt:pre": "cross-env REACT_APP_ENV=pre react-app-rewired start ",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  ...
}
```

## dva-core & dva-loading & dva-dva-model-persist & dva-type
#### dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。当然我们在配置项目的时候没必要要完整的dva，只需要 以下两个插件 在配合 react-redux 配合就可以了dva-core dva-loading
### 执行命令 npm install react-redux -S & npm install dva-core dva-loading -S
### 数据持久化 dva-model-persisit
### 执行命令 npm install dva-model-persisit -S

## html2canvas
#### 将html转化为base64图片
### 执行命令 npm install html2canvas -S

## less & less-loader
#### less预处理器，可以识别less文件内容
### 执行命令npm install less less-loader -D

## lib-flexible & postcss-px2rem-exclude
#### 页面自适应，px转rem
### 执行命令 npm install postcss-px2rem-exclude lib-flexible -S

## react-keeper
#### 路由为什么选择 react-keeper，主要的原因是，在H5，他有一个非常常见的功能，那就是缓存页面，在Vue中这个功能非常好实现 通过 keeper-alive 就可以实现
#### 但在 react 中就比较难以实现了，而 react-keeper 这个库，可以说是很好的解决了这个问题，甚至比 Vue的keeper-alive更加简便，更好配置
#### 以移动端的配置而言，个人觉得 react-keeper 比 React-Router 更加适合~
### 执行命令 npm install react-keeper -S
#### 可以查看[这篇文章](https://zhuanlan.zhihu.com/p/25081540)

## webpack-bundle-analyzer
#### 分析包大小插件
### 执行命令 npm install webpack-bundle-analyzer -S


package.json 项目配置以及依赖包的使用记录

## https原理
#### 在说HTTPS之前先说说什么是HTTP，HTTP就是我们平时浏览网页时候使用的一种协议。HTTP协议传输的数据都是未加密的，也就是明文的，因此使用HTTP协议传输隐私信息非常不安全。为了保证这些隐私数据能加密传输，于是设计了SSL（Secure Sockets Layer）协议用于对HTTP协议传输的数据进行加密，从而就诞生了HTTPS。
#### 先从对称加密说起。什么是对称加密？简单说就是一个密钥，可以加密一段信息也可以对加密后的信息进行解密，不能只用对称加密，秘钥会被劫持。
![微信图片_20220123202456.png](https://www.jaclynshi.top/img/1642942558261.png)
#### 所以有了非对称加密。什么是非对称密钥？简单说就是有两把密钥，一把公钥一把私钥。只能保证客户端用公钥加密过的数据只能通过服务端的私钥能解开，但是服务端传输给客户端的公钥是明文传输的，可能被劫持，所以只能保证单向传输安全。
![微信图片_20220123202510.png](https://www.jaclynshi.top/img/1642942558124.png)
#### 改良的非对称加密：两组公钥私钥，客户端和服务端分别持有一对公私钥，这样就能保证双向传输安全。
![微信图片_20220123202515.png](https://www.jaclynshi.top/img/1642942558422.png)
#### 因为非对称加密算法非常耗时性能不好，非对称加密+对称加密：浏览器拿到公钥后随机生成一个对称加密的密钥，然后通过对称加密进行传输。这个方法的漏洞是，攻击者可以替换公钥。
![微信图片_20220123202522.png](https://www.jaclynshi.top/img/1642942558330.png)
#### 如何证明浏览器收到的公钥一定是该网站的公钥？通过CA机构颁发的数字证书。如何防止数字证书被篡改？数字签名：CA机构拥有非对称加密的公钥和私钥，CA机构对证书明文数据T进行hash，对hash后的值用私钥加密，得到数字签名S，明文和数字签名共同组成数字证书。
#### 非对称加密算法：RSA，DSA/DSS  
#### 对称加密算法：AES，RC4，3DES    
#### HASH算法：MD5，SHA1，SHA256

#### 验证证书是否是上级CA签发的
#### windows中保留了所有受信任的根证书，浏览器可以查看信任的根证书，自然可以验证web服务器的证书，是不是由这些受信任根证书颁发的或者受信任根证书的二级证书机构颁发的（根证书机构可能会受权给底下的中级证书机构，然后由中级证书机构颁发中级证书）
#### 在验证证书的时候，浏览器会调用系统的证书管理器接口对证书路径中的所有证书一级一级的进行验证，只有路径中所有的证书都是受信的，整个验证的结果才是受信
#### 有些证书本身就存在在操作系统中，浏览器可以识别，如果是自己签发的证书需要自己手动导入到浏览器中

### 如何抓取HTTPS的请求数据
#### 当站点由HTTP转成HTTPS后是更安全了，但是有时候要看线上的请求数据解决问题时却麻烦了，因为是HTTPS的请求，你就算拦截到了那也是加密的数据，没有任何意义。
#### - （1）Fiddler根证书导出
#### - （2）浏览器中导入Fiddler根证书
#### 这里的关系是：浏览器 -> Fiddle（代理）-> 服务器，Fiddler在客户端发出Https请求时，充当了服务器的角色，需要返回一个证书给客户端，但是Fiddler的证书并不是CA机构颁发的，客户端一验证就知道是假的连接肯定就断了，那就想办法让客户端信任这个服务端，于是就在客户端安装一个Fiddler的根证书。所以只要是通过Fiddler的Https请求，验证根证书时自然会通过，因为Fiddler的根证书已经受信了！现在只是客户端和Fiddler这个伪服务端的Https验证通过了，还没有到真正的服务端去取数据的，此时Fiddler会以客户端的身份与真正的服务端再进行一次HTTPS的验证，最后拿到数据后又以服务端的身份与客户端通信。也就是说在一次请求中数据被两次加解密，一次是手机到Fiddler，一次是Fiddler到真正的服务端。

## 双向验证
#### 日常我们看到的是单向验证，是通过https实现的，但对于一些金融行业，不是所有客户端都能访问当前网站，所以就需要双向验证。具体实现方式是通过个人签发证书，在需要访问网站的客户端安装证书，通过在代理（nginx等）配置，或者不使用代理的情况下通过代码的形式手动延签的方式验证。
### 具体实现步骤
```js
//git进入openssl

//生成ca私钥和根证书
openssl>genrsa -out Server.key 4096
openssl>req -new -x509 -days 3650 -key Server.key  -out Server.crt

//生成客户端私钥
openssl>genrsa -out client.key 4096
//生成客户端证书请求文件
openssl>req -new -key client.key -out client.csr
//根据请求文件生成客户端证书
openssl>x509 -req -in client.csr -CA Server.crt -CAkey Server.key -CAcreateserial -out client.crt -days 3650

//将生成的根证书传到服务器中
//nginx增加相关配置
ssl_verify_client on; 
ssl_client_certificate Server.crt; 

//导出客户端pfx证书，用于windows安装
openssl>pkcs12 -export -inkey /c/Users/sjq/Desktop/Cert/client.key -in /c/Users/sjq/Desktop/Cert/client.crt -out /c/Users/sjq/Desktop/Cert/client.pfx
```
#### 以上安装过证书的客户端就能正常访问网站，没有安装过证书的客户端就会显示400无法正常访问。

https原理&双向验证

## 方案介绍
#### 新版本的gitlab已经集成了CI/CD，可以通过配置，实现在推送代码到仓库，合并分支，创建tag等时机时来触发整个流程。我们一般可以将整个项目流程大致可以分为：
#### 代码拉取 -> 构建（编译）-> 执行自动化测试 -> 部署到服务器 -> 重启服务

## 实现步骤
#### 需要提供一台构建服务器，代码拉取，构建，自动化测试，部署到目标服务器，重启服务都是在构建服务器上门完成。
![微信图片_20220120095033.png](https://www.jaclynshi.top/img/1642648091070.png)
#### 需要在在构建服务器上安装git和gitlab-runner两个应用，git负责从仓库拉取最新的代码，gitlab-runner负责和gitlab 的cicd服务进行通信，触发对应的操作。
#### gitlab-runner需要进行配置后才可与gitlab通信，安装及配置流程如下：
### 安装gitlab-runner
```js
>wget -O /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64
>chmod +x /usr/local/bin/gitlab-runner
>useradd --comment 'GitLab Runner'--create-home gitlab-runner --shell /bin/bash
>gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner
>gitlab-runner start
```
### 注册gitlab-runner
#### 注册gitlab-runner与gitlab的连接，在gitlab的对应的项目设置菜单中找到CI/CD，展开Runner，找到Specific runners，找到如下图：
![图片2.png](https://www.jaclynshi.top/img/1642648091178.png)
#### 在部署服务器上执行
```js
>gitlab-runner register

Enter the GitLab instance URL (for example, https://gitlab.com/):
输入上图显示的URL
Enter the registration token:
输入上图显示的token
Enter a description for the runner:
[stepping-machine]: 
输入当前gitlab-runner的描述
Enter tags for the runner (comma-separated):
输入当前grunner的名称
Registering runner... succeeded                     runner=e1sRrUZi
Enter an executor: docker-ssh, parallels, ssh, virtualbox, docker+machine, kubernetes, custom, docker, shell, docker-ssh+machine:
暂时输入shell
Runner registered successfully. Feel free to start it, but if it's running already the config should be automatically reloaded!
```
#### 执行完上述命令后，回到gitlab项目的runner配置页面，下面显示可用的指定Runner，表示已经配置成功，即完成项目对应的runner配置。
### 配置项目，.gitlab.yml文件结构
#### 要启用项目的cicd，还需要在项目的根目录添加.gitlab.yml文件，
#### 一旦你已经添加了.gitlab-ci.yml到仓库中，GitLab将检测到该文件，并使用名为GitLab Runner的工具运行你的脚本，文件的结构如下图所示：
![微信图片_20220120101329.png](https://www.jaclynshi.top/img/1642648091289.png)
#### stages 节表示整个流水线的步骤，例如上图分为4个步骤
#### build_test（构建测试环境项目）
#### deploy_test （部署到测试环境）
#### build_test（构建生产环境项目）
##### deploy_test （部署到生产环境）

#### cache 节表示缓存内容，可以不设置
#### variables 节表示设置的变量，可以在执行脚本时动态传入

#### build_test_job 节表示具体执行的步骤信息，改名称可以随意指定，具体的配置如下
#### -stage 对应的步骤名称，在stages节中
#### -script 需要执行的脚本，在此处设置要执行的shell命令
#### -only 触发此步骤的分支
#### -tags 执行的runner名称，输入上面注册的runner名称
#### -artifacts 生成的附件，此处可以不配置

#### 经过上述配置后就完成了整个cicd相关的配置了，另外为了方便部署及执行远程命令，需要配置构建服务器到应用服务器的免密登录（公钥登录）
#### 我用的是xshell，通过xshell创建本地公钥，将本地拷贝的公钥放入服务器~/.ssh/authorized_keys文件内，重启ssh即可： service ssh restart

#### 根据以上配置，在推送代码到develop分支的时候，会触发build_test和deploy_test两个步骤，会在构建服务器上面调用对应的构建脚本build.sh和部署脚本deploy_webpack.sh

#### gitlab做的事情就是把gitlab上的代码拷贝到构建服务器上，所以脚本需要做的是打包，将静态资源包拷贝到目标服务器上。

#### build.sh 安装依赖包打包静态资源文件
![微信图片_20220120103745.png](https://www.jaclynshi.top/img/1642648232511.png)
#### deploy_webpack.sh 将打包文件传送到目标服务器中
![微信图片_20220120110939.png](https://www.jaclynshi.top/img/1642648232631.png)
![微信图片_20220120105047.png](https://www.jaclynshi.top/img/1642648091476.png)

## 实现细节
### 配置文件的维护
#### 可将配置文件模板放置于构建服务器，在部署时同步推送内容覆盖服务器的配置文件进行覆盖即可。
#### 关于敏感变量如秘钥，用户名密码等，可以托管在gitlab平台，然后在.gitlab-ci.yml文件中通过变量名获取值在传递给shell进行处理。
#### 在项目中点击设置->CI/CD 找到变量，展开即可设置变量，如下图
![图片3.png](https://www.jaclynshi.top/img/1642648091568.png)

### 构建环境的安装
#### 为了完成项目的构建和编译，需要安装各种环境，比如前端构建需要安装nodejs环境

### ci/cd运行情况监测
#### 流程将会以一些列流水线的形式运行，在项目菜单CI/CD菜单中可以检测运行情况，点击流水线，可以看到整体的每一条流水线的运行情况。

### 回滚方案
#### 需要在.gitlab-ci.yml对应的阶段作业配置下面配置了environment变量


J'Blog

Hi, I'm Jaclyn

置顶文章