Nb
Study
.com
🔍 请输入搜索关键字
< prev 4 / 4more >

基于typescript配置 axios的 interceptors拦截器

直接看示例代码吧

typescript 复制代码 
const axiosInstance = axios.create({
  baseURL: import.meta.env.DEV ? GlobalConsts.DevBaseUrl : GlobalConsts.ProdBaseUrl,
  withCredentials: true,
  timeout: 150000,
});

// request interceptor
axiosInstance.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    // 可以进行请求拦截处理，如添加请求头，token 等
    // config.headers?[GlobalConsts.TokenKey] = CommonUtils.getLocalStore(GlobalConsts.TokenKey)
    if(CommonUtils.getLocalStore(GlobalConsts.LocalTokenKey)) {
      config.headers.set(GlobalConsts.HeaderTokenKey, CommonUtils.getLocalStore(GlobalConsts.LocalTokenKey))
      config.headers.set(GlobalConsts.HeaderStemMarkKey, CommonUtils.getLocalStore(GlobalConsts.LocalStemMarkKey))
      // 早期版本配置
      // config.headers = {
      //   [GlobalConsts.HeaderTokenKey]: CommonUtils.getLocalStore(GlobalConsts.LocalTokenKey)!,
      //   [GlobalConsts.UsernameKeyToBackend]: CommonUtils.getLocalStore(GlobalConsts.CurrentLoginUserName)!
      // }
    }
    return config;
  },
  (error) => {
    console.log(error);
    return Promise.reject(error);
  }
);

git 分支开发流程及相关命令

Git分支策略允许开发人员在一个项目上进行协作，同时跟踪更改并维护多个版本的代码库。

查看分支命令

git 复制代码 
//查看本地分支
git branch
//查看远程分支
git branch -r
//查看本地+远程分支
git branch -a

两人以上分支开发命令

git 复制代码 
# 切换到主分支
git checkout master
# 拉取最新的代码
git pull
 
# 开发者A创建自己的分支，并切换到当前分支
git checkout -b feature-a
# 也可以先创建，再切换
git branch feature-a
git checkout feature-a
# 开发者A进行开发，然后提交自己的改动
git add .
git commit -m "Add feature A"
# 将分支的改动推送到远程仓库
git push -u origin feature-a
 
# 开发者B创建自己的分支
git checkout -b feature-b
# 开发者B进行开发，然后提交自己的改动
git add .
git commit -m "Add feature B"
# 将分支的改动推送到远程仓库
git push -u origin feature-b
 
# 开发者A完成开发后，合并到主分支
git checkout master
git merge feature-a
# 解决可能出现的冲突，并提交合并结果
git commit -m "Merge feature A"
git push
 
# 开发者B完成开发后，要先拉取最新的主分支
git checkout master
git pull
# 然后合并到主分支
git merge feature-b
# 解决冲突并提交合并结果
git commit -m "Merge feature B"
git push

注意：切换或合并分支前，应先拉取最新代码

git 中 git tag 标签的使用

Tag(标签)用来记录某个特定的提交(commit)。一个 Tag 被用来标记重要的历史节点，如版本发布或一些重大事件。Tag 通常是不会被修改或删除的，因为它们代表了项目在某个特定时刻的状态。

git 中可以 使用git tag 创建、查看、删除和推送Tag(标签).

git 复制代码 
# 创建标签
git tag -a v1.0 -m "平台修改前tag"
# 查看tag
git tag
# 删除本地tag
git tag -d  v1.0
# 推送tag到远程仓库
git push origin v1.0

package.json中的overrides和resolutions字段是什么意思？

在看一些开源项目是，package.js on 中常看到overrides和resolutions字段，具体是什么意思呢？
例如：

javascript 复制代码 
// overrides
{
  "overrides": {
    "foo": "1.0.0"
  }
}
// overrides
"resolutions": {
  "nitropack": "link:.",
  "undici": "^6.19.2"
},

如果一个项目只依赖一个包的一个版本，只需要在package.json 的声明就可以了. 但是如果项目中同时依赖了两个不同包，而这这两个不同的包，又分别依赖的 foo 包的不同版本，这时候就涉及到需要进行版本重写（overrides/resolution）了。

术语说明：
一级依赖：直接声明在 package.json 的 (dev | optional | peer) dependencies 中的依赖。
子依赖：一级依赖的依赖，无法由应用开发者直接指定版本。
嵌套重写：指仅重写某个依赖下的一级依赖或者子依赖（限制 Scope 重写依赖版本）。

其中，npm 支持overrides字段，yarn支持 resolutions字段，pnpm 两个字段都支持，一般使用 resolutions字段。

override

对override来说，常用规则如下：

javascript 复制代码 
{
  "overrides": {
    //foo is always installed as version 1.0.0 no matter what version your dependencies rely on
    "foo": "1.0.0"
    // 将 foo 替换成 dependencies 中声明的版本
    "foo": "$foo",
    // 表示仅将 1.0.0 的 foo 版本重写到 1.0.1
    "foo@1.0.0": "1.0.1", 
    // 嵌套中，用 “.“ 代表嵌套的包本身
    "foo": {
      ".": "1.0.0",
      // 重写 foo 下级所有的 bar 依赖版本至 1.0.0
      "bar": "1.0.0"
    }
  }
}

关于overrides字段详解介绍 https://docs.npmjs.com/cli/v10/configuring-npm/package-json#overrides

resolutions规则

在pnpm 中 pnpm.overrides 和 resolutions 字段的功能相同，后者是前者的别名,主要是为了兼容resolutions 。

nuxt 3 动态路由关键点总结

Nuxt3 本身是基于文件的路由，即根据pages目录下的文件自动进行路由。

方括号

所谓动态路由，即可以根据$route.params 获取路径中的不同参数，当你把任何文件或文件夹放置于方括号[]中时,将自动生成动态路由。

例如：

复制代码 
-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue

对于上述文件结果，在模版文件中可以通过以下方式获取 group 和 id.

复制代码 
//  pages/users-[group]/[id].vue
<template>
  <p>{{ $route.params.group }} - {{ $route.params.id }}</p>
</template>

双方括号

如果你希望参数是可选的，可以使用双方括号。

~/pages/[[slug]]/index.vue or ~/pages/[[slug]].vue 这两种情形，都会匹配 / and /test.

上述规则务必要好好理解。

同时，目录下的 index.vue, 默认是匹配该目录，例如~/pages/course/index.vue 会匹配 /course 路由。

捕获所有路由

如果你希望捕获所有路由，可以将文件命名为[...slug].vue 样式。

例如，对 pages/course/[...slug].vue 会同时匹配 /course/list 或 /course/list/123 路由, 而且可以通过{{ $route.params.slug }} 获取到相关参数。

路由优先级

命名路由的优先级会高于动态路由。
例如：
对于 /foo/hello 路由, ~/pages/foo.vue 会优先于 ~/pages/foo/[slug].vue.

而 ~/pages/foo/index.vue and ~/pages/foo/[slug].vue 会分别匹配 /foo 和 /foo/hello.

实战

如果我们想通过/course 展示课程列表，通过/course/nuxt 或 /course/golang 动态展示具体的课程，该如何设计路由呢？

❎ 错误的方式

复制代码 
-| pages/
---| course.vue
---| course/
-----| [name].vue

因为，上述 /course/nuxt 会展示和 /course 一样的内容，即实际生成的是嵌套路由。

✅ 正确的方式

复制代码 
-| pages/
---| course/
-----| index.vue
-----| [name].vue

因为，index.vue 为命名路由，优先级较高，因此 /course 会匹配 pages/course/index.vue 文件。
而， /course/nuxt 为匹配 pages/course/[name].vue 文件

windows子系统Ubuntu上提示：bunx command not found

目前，JavaScript 生态中有三大运行时：Node.js、Bun、Deno。
其中，Bun号称是最快的，本想体验一下，结果坑还不少。

Nuxt3对Bun的支持较好，支持通过Bun创建项目，启动项目，那就以Nuxt3为例。

官方文档：https://nuxt.com/docs/getting-started/installation

假设已经全局安装了Bun(当前测试的是：bun 1.1.17)，按提示执行以下命令初始化一个项目：

bash 复制代码 
bunx nuxi@3.12.0 init vue-bun

结果提示：error: File not found: "nuxi@3.12.0"

事实上是，bunx 命令没有找到, 在github上找到一个Issue，解决方案如下：

bash 复制代码 
# for ubuntu users you can use this line in your terminal to fix it.
echo -e '\nalias bunx="bun x"' >> ~/.bashrc && source ~/.bashrc

再次执行，完美解决。

在window子系统安装bun报错：error: unzip is required to install bun

在window子系统安装bun报错：error: unzip is required to install bun

报错信息 "error: unzip is required to install bun" 表示在尝试安装名为 "bun" 的软件时，系统检测到需要使用 unzip 工具来解压缩一个文件，但是 unzip 并未安装在系统上。

由于我的windows子系统是 Ubuntu，因此可以使用 apt 安装：

bash 复制代码 
sudo apt-get update
sudo apt-get install unzip

执行以上命令后，再次安装bun即可。

bash 复制代码 
curl -fsSL https://bun.sh/install | bash

# 安装完成使用 bun -v 查询使用安装成功

如何用css实现当元素内容超过一定高度底部添加渐变背景？

要在元素内容超过一定高度时底部添加蒙版，可以使用CSS的线性渐变作为背景图片。

html代码

html 复制代码 
<div class="note-article-list-item">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

css代码

css 复制代码 
.note-article-list-item {
  height: 380px;
  overflow:hidden;
  margin-bottom: 20px;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px; /* 蒙版的高度 */
    background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
    pointer-events: none; /* 使蒙版不接收鼠标事件 */
  }
}

关键点：元素添加 height,overflow,position等css属性，伪类元素绝对定位，并添加background渐变

如何不同项目使用不同版本的pnpm

Using Corepack

Since v16.13, Node.js is shipping Corepack for managing package managers. This is an experimental feature, so you need to enable it by running:

bash 复制代码 
corepack enable pnpm

If you installed Node.js using Homebrew, you'll need to install corepack separately:

You can pin the version of pnpm used on your project using the following command:

bash 复制代码 
corepack use pnpm@latest

This will add a "packageManager" field in your local package.json which will instruct Corepack to always use a specific version on that project. This can be useful if you want reproducability, as all developers who are using Corepack will use the same version as you. When a new version of pnpm is released, you can re-run the above command.

< prev 4 / 4more >