记录一下新设备重新配置开发环境

办公软件安装​

• 语雀
• typora markdown 编辑器
• google chrome 浏览器
• snipaste 截图工具
• 百度网盘
• 钉钉
• Visual Studio Code
• sublime
• Git

环境安装​

安装 node（会同时下载 npm）​

终端中判断是否安装成功

node -v

{
  "terminal.integrated.defaultProfile.windows": "Git Bash"
}

下载 yarn （我更习惯使用 yarn，如果不需要，可省略此步骤）​

npm install -g yarn

>>
added 1 package in 3s
npm notice
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.5.1
npm notice Run npm install -g npm@10.5.1 to update!
npm notice

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

nvm node 管理工具​

直接访问 nvm 的 github 仓库下载即可判断是否安装成功

nvm -v

一些常用命令：

nvm list # 查看所有 node-npm 版本
nvm list available # 查看所有可用的 node 版本
nvm use xxx # 切换某个版本
nvm install xx # 安装某个版本
nvm uninstall xxx # 卸载某个版本
nvm alias default xxxx # 设置某个版本为默认版本

github 配置​

1. 本地生成 SSH 密钥对

   ssh-keygen -t rsa -b 4096 -C "your.email@example.com<这里换成你的邮箱，不需要引号>"
   

2. 生成完毕之后，定位到该目标文件夹中

   cd ~
   cd .ssh
   

3. 查看生成的 id_rsa.pub(默认是这个名称，如果你设置了文件名，那就是 xxx.pub)

   cat xxx.pub
   

summary​

vue3 相关与 JS 原生

基本类型​

number string boolean symbol undefined null

箭头函数与普通函数​

this 指向​

普通 - 根据运行时函数调用方式动态决定箭头 - 没有自己的 this，捕获上下文，不可改变

arguments 对象​

普通 - 可使用 arguments 获取所有传入参数箭头 - 没有 arguments，但是可通过 ...args 获取所有传入参数

prototype 属性​

普通 - 创建时自动拥有一个 prototype 属性箭头 - 没有 prototype 属性，无法创建对象的原型链

事件循环​

浏览器环境中事件循环有以下阶段：

• 同步任务执行阶段
• 消息队列检查阶段（先进先出）
• 微任务执行阶段
• 渲染阶段

(()=>{
    try(){
        new Promise(res=>{
            const a = 1
            console.log(a)
            a = 2
            console.log(a)
        })
    }catch(err){
        console.log(3)
    }
})()

数组方法与异步操作​

使用数组的方法的时候注意不要在循环提内部执行异步操作：

• forEach
• filter
• map
• every
• some

此时循环体内部的同步代码是不会被异常操作打断的，所以执行的代码会打印出很多个循环结束时候的结果，与预期的效果有出入

const a1 = ref(1)
const a2 = reactive(a1)
const a3 = reactive([a1])
const a4 = reactive({ key: a1 })

a1.value
a2.value
a3[0].value
a4['key'].value

博客迁移​

从 hexo 博客转移到 docusaurus 上

docusarus 环境要求​

• node 18+ （可以安装 nvm 管理多个 node 的切换）

安装 docusaurus​

npx create-docusaurus@latest your-blog-project-name classic

docusaurus 项目结构​

• blog 存放博客文章，默认会展示最新的几条博客
• docs 可以存放文档
• src 主要是针对博客本身做一些自定义操作
  • css 样式文件
  • pages 自定义页面
    • style.module.css 页面对应的样式文件
    • index.js 页面文件
• static 静态资源
  • img 图片
• docusaurus.config.js 配置文件（在这里可配置博客的一些基础信息）
• package.json 项目相关的一些三方依赖信息
• README.md 可以再此处补充你的项目信息
• sidebars.js 这里可以配置博客页面的侧边菜单信息（可以做一些超链接跳转）

安装依赖​

npm install

本地启动​

npm run start

手动构建​

npm run build

github 仓库 CI/CD 设置推送代码自动更新博客​

配置 github 账户 ACCESS_TOKEN 为后续做准备​

创建一个 workflow 来自动构建脚本​

拷贝脚本到 workflow 文件中​

脚本文件​

name: Deploy Docusaurus Blog to GitHub Pages # 本次操作的名称定义

on:
  push:
    branches:
      - master # 可以根据实际情况修改分支名称（监听该分支的更新,因此只有更新该分支才会触发自动部署）

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set up Node.js # 安装 node 环境
        uses: actions/setup-node@v2
        with:
          node-version: '18'

      - name: Install dependencies # 下载依赖
        run: yarn

      - name: Build static files # 打包
        run: yarn build

      - name: Deploy to GitHub Pages # 发布到 gh-pages 分支
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.ACCESS_TOKEN }} # 这个 ACCESS_TOKEN需要在 github 账户中去配置
          publish_dir: build
          user_name: yanadev
          user_email: 1245485816@qq.com
          commit_message: 'Deploy Docusaurus blog to GitHub Pages'

创建 gh-pages 分支支持自动化部署​

一些自定义使用的 api​

useDocusaurusContext 站点的配置信息​

• siteConfig 可以访问 docusaurus.config.js 中的 title 、tagline 等字段信息
• 对于 docusaurus.config.js 中不支持的字段，使用 customFields 自定义你需要的属性

import React from 'react'
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'

const Hello = () => {
  const { siteConfig } = useDocusaurusContext()
  const { title, tagline } = siteConfig

  return <div>{`${title} · ${tagline}`}</div>
}

首次登录​

shopify theme dev --store <your-store-name>

eg: shopify theme dev --store xxx.myshopify.com

随后就会打开一个网页链接，要求你登陆账号，才能继续后续操作登录成功之后，会在控制台显示当前状态 logged in 可以 ctrl+c 推出当前进程

切换店铺账号操作​

如果需要在账户之间切换，可先注销当前用户之后，再重新登录

shopify auth logout

查看当前登陆账号信息​

shopify theme info
## 执行该命令会列出你当前登录的店铺信息

$ shopify theme info
THEME CONFIGURATION
Store                  na2demo.myshopify.com
Development Theme ID   Not set

TOOLING AND SYSTEM
Shopify CLI    3.58.2
OS             windows-amd64
Shell          E:\develop\Git\usr\bin\bash.exe
Node version   v18.20.1
Ruby version   3.2.3

theme 常用命令​

shopify theme dev 本地预览（热更新）
shopify theme check 分析 code 是否有误
shopify theme list 列出所有主题
shopify theme open 返回线上可预览的链接
shopify theme pull 拉取主题
shopify theme push 上传主题覆盖原主题
shopify theme share 上传主题（以新主题的形式上传）
shopify theme publish 发布主题
shopify theme package 将本地主题打包成可上传的 zip 格式
shopify theme delete  从商店中删除主题
shopify theme info 查看本地主题的运行环境

一个小案例​

# 退出登录 如果已经登录了账户，需要切换（可选）
shopify auth logout

# 登录账户
shopify dev --store <your-store-name>

# 主题拉取：执行之后会出出先一个theme列表让你选择，你可以选择想要拉取的主题
## 会在当前的执行目录中，直接存放拉取来的代码
shopify theme pull

# 本地运行预览
shopify theme dev

# 开发完毕之后，可以执行查看线上的预览链接
shopify theme open

# 如果不想覆盖当前的主题，想要重新创建一个主题副本（新主题）
shopify theme share

# 更新覆盖主题
shopify theme push

至此 theme 项目已经可以在本地运行了

git 存储​

# 初始化 git
git init

# 在 github 上创建新的仓库
# 获取仓库地址之后连接远程仓库
git remote add origin <your-github-repo-address>

# 本地提交代码、合并分支
git add .
git commit -m 'init: init project'

# your-branch-name 换成你在编辑的分支名称
git pull origin <your-branch-name>

# 拉取远程分支
git pull --allow-unrelated-histories origin <your-branch-name>

# 合并之后重新 commit 一下，提交代码
git commit -m 'update: merge'
git push origin <your-branch-name>

概览​

总共分三个步骤：

1. 通过飞书机器人助手设置 webhook 触发器，发起一个 HTTP 请求，触发群组机器人群内消息通知
2. 启动 sentry webhook 通知，并设置对应 webhook 地址为 飞书触发器的 webhook 地址
3. 设置 sentry alert 信息，开启消息通知到 webhook，因为 sentry 类型限制，默认设置下，同类型的预警 5 分钟内不通知，仅显 示在后台

创建飞书机器人指令​

设置并获取指令 webhook 地址（该 webhook 地址用于 sentry 后台 webhook 设置）​

{
  "event": {
    "exception": {
      "values": [
        {
          "stacktrace": {
            "frames": []
          }
        }
      ]
    },
    "type": "Error",
    "title": "Event Title",
    "user": {
      "data": {
        "time": "",
        "environment": ""
      }
    }
  },
  "level": "error",
  "project": "payssion-dashboard-frontend",
  "url": ""
}

{
  "msg_type": "post",
  "content": {
    "post": {
      "zh_cn": {
        "title": "event.user.data.time 【 project 】异常通知：",
        "content": [
          [
            {
              "tag": "text",
              "text": "【 event.type 】event.tile"
            }
          ],
          [
            {
              "tag": "text",
              "text": "event.exception.values[0].stacktrace.frames"
            }
          ],
          [
            {
              "tag": "text",
              "text": "【环境】："
            },
            {
              "tag": "text",
              "text": "event.user.data.environment"
            }
          ],
          [
            {
              "tag": "text",
              "text": "【操作】："
            },
            {
              "tag": "a",
              "text": "查看详情",
              "href": "url"
            }
          ]
        ]
      }
    }
  }
}

开始​

1. 注册 sentry

2. 点击 Qucik Start 快捷创建项目，选择项目对应的前端框架及项目所属的团队

3. 新建完毕根据 Configure SDK 指引，在项目中做引入

   • Install 安装依赖（React）

     # Using yarn
     yarn add @sentry/react
     
     # Using npm
     npm install --save @sentry/react
     

   • Configure

     import { createRoot } React from "react-dom/client";
     import React from "react";
     import * as Sentry from "@sentry/react";
     import App from "./App";
     
     Sentry.init({
       dsn: "https://******.ingest.sentry.io/******",
       integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
       // Performance Monitoring
       tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
       // Session Replay
       replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
       replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
     });
     
     const container = document.getElementById("app");
     const root = createRoot(container);
     root.render(<App />)
     

   • Verify（代码中手动创造一个 error）

     return <button onClick={() => methodDoesNotExist()}>Break the world</button>;
     

   • Next Steps

     • Source Maps: Learn how to enable readable stack traces in your Sentry errors.
     • React Features: Learn about our first class integration with the React framework.

数据上报​

前端常见方案​

1. 代码埋点：开发自行定义
2. 可视化埋点：第三方方案，通过配置，对 UI 通用类的元素进行设置
3. 无痕埋点：通过嵌入 SDK，来监控前端页面或者 http 请求的数据埋点

一般情况下，通过与后台约定好具体的数据格式，前端在埋点采集的时候自动转换成接口需要的数据格式进行本地存储，然后进行上报

react 项目接入​

Sentry 注册与配置​

注册账号​

点击该链接注册 sentry 账号

登录账号并创建项目​

• 新建项目

  • platform：REACT

  • ProjectName： xxxxxx-dashboard-frontend

获取项目 DSN （SENTRY_DSN）​

项目 >>> 设置 >>> 客户端密钥（DSN）

获取项目 ORG（SENTRY_ORG）​

头像 >>> 组织设置 >>> Organization Slug

SENTRY_RELEASE_VERSION：v1.0.1（源码版本号：可自行维护）​

生成 API_AUTH_TOKEN 定位线上源码（SENTRY_AUTH_TOKEN）​

获取以上 key 之后，可修改项目根目录下 .env 文件​

SENTRY_DSN='******'

SENTRY_AUTH_TOKEN='*********'

SENTRY_RELEASE_VERSION='v1.0.1'

SENTRY_ORG='payssion',

SENTRY_PROJECT='payssion-dashboard-frontend',

Sentry 配置 webhook 通知​

弹窗​

中断用户操作，对当前操作进行强制反馈的交互形式

分类​

• 模态弹窗
  • 需要做出对应交互，，模态才会消失
  • 对话弹窗、内嵌表单弹窗、分布表单弹窗、文件选择弹窗、复杂信息展示
• 非模态弹窗
  • 不打扰用户，短暂停留
  • 通知提醒、全局提示、警告提示、气泡卡片、文字提示

做一个思维导图总结

结构拆解​

• 模态层
• 关闭入口
• 弹窗主体

模态层​

颜色​

多层级​

避免多层级​

• 流程优化

检查流程是否足够精准，可否通过精简流程，减少不必要的多层模态的使用

• 内容量优化

内容量较少的时候，可以采取下拉菜单进行优化，解决多层模态层叠加的问题

• 弹窗形式选择

当涉及到很多交互时，不建议直接使用弹窗

处理多层模态​

整体注意：

• 多层模态超过两层，最好展示固定的遮罩颜色

• 模态过多时，给出最大值，如超过 3 层只展示固定颜色即可

如何选择弹窗、抽屉、新建页​

• 页面内容量

内容量维度：新建页 > 抽屉页 > 弹窗

深度较深（长度较长）：抽屉形式最佳

宽度较宽：弹窗形式更合理

深度深且宽度宽：新建页面更合适

• 页面连贯性

抽屉 < 弹窗 < 新建页

• 页面切换成本

当一个二级页面使用频率过高，即用户需要在 AB 页面之间来回切换，此时需要考虑 切换成本

ESLint 的规则有三种级别​

• “off”或者 0: 不启用这个规则
• “warn”或者 1: 出现问题会有警告
• “error”或者 2: 出现问题会报错

eslint 文件修改了一定要重新手动编译运行。

修改 ESLint 空格检测​

修改 .eslintrc.js 文件，一定要编译运行，ctrl+c停止，npm run serve重新编译

 'no-irregular-whitespace' : 'off'//这禁止掉 空格报错检查

没必要的返回语句​

Unnecessary return statement no-useless-return

login() {
  // console.log(this)登陆时候的预校验。
  this.$refs.loginFormRef.validate(valid => {
    if (!valid) return
  })
}
// ========= 修改 ============
login() {
  // console.log(this)登陆时候的预校验。
  this.$refs.loginFormRef.validate(valid => {
    if (!valid) return false
  })
}

汇总 post​

应用场景中的区别​

GET 参数通过 URL 传递，POST 放在 Request Body（请求体）

URL 中传送的参数是有长度限制的，而 Request Body 没有（浏览器对 URL 长度有限制，并不是 http 协议对 get 请求参数的限 制）

GET 比 POST 更不安全，因为参数直接暴露在 URL 上，所以不能用来传递敏感信息

GET 请求参数会被完整的保留在浏览器的历史记录里，而 POST 中的参数不会被保留

GET 请求只能进行 url 编码，而 POST 支持多种编码方式

GET 请求会被浏览器主动 cache，而 POST 不会，除非手动设置

GET 请求产生的 URL 地址可以被 bookmark（书签：登记 url），而 POST 不可以

GET 在浏览器 回退/刷新 时是无害的，而 POST 会再次提交请求

本质​

两者并无区别，都是 HTTP 协议中发送请求的方法

HTTP 是基于 TCP/IP 的关于数据如何在万维网中通信的协议，底层是 TCP/IP，即 GET/POST 都是 TCP 链接

GET 请求也可以带 request body ，但不能保证一定被接收到（服务器处理方式不同）；同样，POST 请求也可以在 URL 地址中传参数

相册表（albums）​

用于记录相册信息

收藏表（collections）​

用于记录用户收藏作品信息

点赞表（likes）​

用于记录用户点赞作品信息

浏览表（views）​

用于记录用户浏览作品信息

用户表（users）​

用于记录用户信息

作品表（posts）​

用于记录作品信息

评论表（comments）​

用于记录作品评论信息

分类表（categories）​

用于记录作品分类信息

关注表 （follows）​

粉丝表（fans）​

选项表（options）​

用于记录网站的一些配置属性信息，如：站点标题，站点描述等