scp2是一个使用nodejs对于SSH2的模拟实现，它可以让我们编译之后将项目推送至测试环境，以方便测试。

项目安装scp2

npm i scp2 -D

编写配置文件

创建scp2的配置文件 upload.server.js

const serInfo = JSON.parse(process.env.npm_config_argv).cooked // 获取终端命令

const server = {

  host: serInfo[2], // 服务器ip

  port: '22', // 端口一般默认22

  username: serInfo[3] || 'root', // 用户名

  password: serInfo[4] || 'root', // 密码

  pathNmae: '', // 上传到服务器的位置

  locaPath: './dist/' // 本地打包文件的位置

}



const argv1 = process.argv

console.log(argv1)

console.log(serInfo)

// 引入scp2

const client = require('scp2')

const ora = require('ora')

const spinner = ora('正在发布到服务器...')



const Client = require('ssh2').Client

const conn = new Client()



console.log('正在建立连接')

conn.on('ready', () => {

  console.log('已连接')

  if (!server.pathNmae) {

    console.log('连接已关闭')

    conn.end()

    return false

  }



  conn.exec('rm -rf' + server.pathNmae + '/*', (err, stream) => {

    console.log(err + '删除文件')

    stream.on('close', (code, signal) => {

      console.log('开始上传')

      spinner.start()

      client.scp(server.locaPath, {

        'host': server.host,

        'port': server.port,

        'username': server.username,

        'password': server.password,

        'path': server.pathNmae

      }, err => {

        spinner.stop()

        if (!err) {

          console.log('项目发布完毕')

        } else {

          console.log('err', err)

        }

        conn.end()

      })

    })

  })

}).connect({

  host: server.host,

  port: server.port,

  username: server.username,

  password: server.password

  // privateKey: '' // 私秘钥

})

配置package.json

两种上传方式，个人比较喜欢第二种哟

1. build:pub：一键打包并上传服务器


2. build：打包上传然后执行npm run publish 上传服务器

实战例子

弄好以上配置，在终端上敲 npm run build 然后再敲 npm run publish 得到以下结果。

已经发布到指定IP知道目录的服务器啦，这样我们就不用通过第三方ftp工具去上传了哦，是不是方便了很多，如果觉得该文章对你有帮助，请点个小赞赞吧。

需求

下班路上新开了一家彩-票店，路过时总是心痒，本着小D怡情的心态，偶尔去刮几张，可是随着时间久了，发现也花了不少钱，看网上有人开发电子木鱼，突然奇想，为什么不做一张电子彩-票。

分析

传统View，网上有很多解决方案，大多数是通过混合模式进行两个图层的合并。

大致思路:

1、使用onDraw()方法中的Canvas绘制底层中奖层

2、在上面绘制一个蒙版层Bitmap, 在蒙版层Bitmap里面，放置一个新的Canvas

3、绘制一个灰色的矩阵，绘制一个path，将paint的Xfermode设置为 PorterDuff.Mode.DST_IN
4、手指移动时，更新Path路径

Compose实现

1、通过实现DrawModifier，重写draw() 方法

2、绘制原始内容层，drawContent()
3、绘制蒙版和手势层，

//配置画笔 blendMode = Xfermode

private val pathPaint = Paint().apply {

    alpha = 0f

    style = PaintingStyle.Stroke

    strokeWidth = 70f

    blendMode = BlendMode.SrcIn

    strokeJoin = StrokeJoin.Round

    strokeCap = StrokeCap.Round

} 



drawIntoCanvas {

    //设置画布大小尺寸

    val rect = Rect(0f, 0f, size.width, size.height)

    //从原始画布层，转换一个新的画布层

    it.saveLayer(rect, layerPaint)

    //设置新画布大小尺寸

    it.drawRect(rect, layerPaint)

    startPath.lineTo(moveOffset.x, moveOffset.y)

    //绘制手指移动path

    it.drawPath(startPath, pathPaint)

    it.restore()

}

完整代码

fun ScrapeLayePage(){

    var linePath by remember { mutableStateOf(Offset.Zero) }

    val path by remember { mutableStateOf(Path()) }

    Column(modifier = Modifier

        .fillMaxWidth()

        .pointerInput("dragging") {

            awaitEachGesture {

                while (true) {

                    val event = awaitPointerEvent()

                    when (event.type) {

                        //按住时，更新起始点

                        Press -> {

                            path.moveTo(

                                event.changes.first().position.x,

                                event.changes.first().position.y

                            )

                        }

                        //移动时，更新起始点 移动时，记录路径path

                        Move -> {

                            linePath = event.changes.first().position

                        }

                    }

                }

            }

        }

        .scrapeLayer(path, linePath)

    ) {

        Image(

            modifier = Modifier.fillMaxWidth(),

            painter = painterResource(id = R.mipmap.cat),

            contentDescription = ""

        )

        Text(text = "这是一只可爱的猫咪~~")

    }

}



fun Modifier.scrapeLayer(startPath: Path, moveOffset: Offset) =

    this.then(ScrapeLayer(startPath, moveOffset))



class ScrapeLayer(private val startPath: Path, private val moveOffset: Offset) : DrawModifier {



    private val pathPaint = Paint().apply {

        alpha = 0f

        style = PaintingStyle.Stroke

        strokeWidth = 70f

        blendMode = BlendMode.SrcIn

        strokeJoin = StrokeJoin.Round

        strokeCap = StrokeCap.Round

    }



    private val layerPaint = Paint().apply {

        color = Color.Gray

    }



    override fun ContentDrawScope.draw() {

        drawContent()

        drawIntoCanvas {

            val rect = Rect(0f, 0f, size.width, size.height)

            //从当前画布，裁切一个新的图层

            it.saveLayer(rect, layerPaint)

            it.drawRect(rect, layerPaint)

            startPath.lineTo(moveOffset.x, moveOffset.y)

            it.drawPath(startPath, pathPaint)

            it.restore()

        }

    }

}

参考资料

• 在Android中使用PorterDuff

密码是用户最重要的数据，也是系统最需要保护的数据，我们在登录的时候需要用账号密码请求登录接口，如果用户勾选记住密码，那么下一次登录时，我们需要将账号密码回填到输入框，用户可以直接登录系统。我们分别对这种流程进行说明：

记住密码

在请求登录接口成功后，我们需要判断用户是否勾选记住密码，如果是，则将记住密码状态、账号信息存入本地。
下次登录时，获取本地的记住密码状态，如果为true则获取本地存储的账号信息，将信息回填登录表单。

密码加密

我在这里例举两种加密方式MD5、Base64
MD5：
1、不可逆
2、任意长度的明文字符串，加密后得到的固定长度的加密字符串
3、实质是一种散列表的计算方式

Base64：
1、可逆性
2、可以将图片等二进制文件转换为文本文件
3、可以把非ASCII字符的数据转换成ASCII字符，避免不可见字符
4、实质是 一种编码格式，如同UTF-8

我们这里使用Base64来为密码做加密处理。

npm install --save js-base64

引入Base64

// js中任意位置都可引入

let Base64 = require('js-base64').Base64;

可以通过encode和decode对字符串进行加密和解密

let Base64 = require('js-base64').Base64;



let pwd = Base64.encode('a123456'); 

console.log(pwd);  // YTEyMzQ1Ng==



let pws2 = Base64.decode('YTEyMzQ1Ng==');

console.log(pwd2);  // a123456

到这里我们对密码的简单加密和解密就完成了。
需要注意的是，Base64是可以解密的，所以单纯使用Base64进行加密是不安全的，所以我们要对Base64进行二次加密操作，生成一个随机字符串 + Base64的加密字符。

/***

 * @param {number} num 需要生成多少位随机字符

 * @return {string} 生成的随机字符 

 */

const randomString = (num) => {

  let str = "",

    arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

  let index = null;

  for (let i = 0; i < num; i++) {

    index = Math.round(Math.random() * (arr.length - 1));

    str += arr[index];

  }

  return str;

}

调用randomString函数，根据你传入的数字来生成指定长度的随机字符串，然后将随机字符串与Base64生成的随机字符凭借，完成对密码的二次加密。

let pwd = randomWord(11) + Base64.encode(password); // J8ndUzNIPTtYTEyMzQ1Ng==

到这里就完成了密码加密操作。
在用户登录时，将账号密码存入本地，存入本地方式有很多，例如：Cookies、localStorage、sessionStorage等，关于使用方法网上有很多，这里我们使用微信小程序的存储方式wx.setStorageSyn。

// 我们这里使用微信小程序的存储方式wx.setStorageSync

let account = {

   username: 'test‘,

   password: pwd

 }

wx.setStorageSync('account', account)

二次登录

用户勾选记住密码后，第二次进入系统，直接从本地获取账号密码，对密码进行解密后回填到表单。
先判断用户是否勾选记住密码，然后对密码进行解密。

init() {

   let state = wx.getStorageSync('rememberMe')

   if (state) {

      let account = wx.getStorageSync('account')

      let Base64 = require('js-base64').Base64;

      let pwd = Base64.decode(account.password.slice(11))

      this.setData({

        username: account.username,

        password: pwd

      })

    }

   this.setData({ rememberMe: state })

 }

将解密后的数据回显到表单上，用户就可以直接登录了。

最后

关于记住密码业务，需要保证用户的密码是加密存储，这里用的是微信小程序示例，在web上的流程也是如此，你可以在vue项目中使用本文提到的方法。

如何在前端实现自动或无感化的登录态管理，包括用户注册、登录、接口校验登录态以及实现自动化请求时自动携带访问令牌。我们将探讨两种常见的实现方式：使用 HTTP Cookie 和前端存储和发送访问令牌。

1. 注册和登录

首先，用户需要通过注册和登录来获取访问令牌。

1.1 注册接口

在注册接口中，用户提供必要的注册信息（如用户名和密码），服务器对用户进行验证并创建用户账户。

示例代码（Node.js + Express）：

// 注册接口

app.post('/register', async (req, res) => {

  try {

    const { username, email, password } = req.body;



    // 检查用户名和邮箱是否已被注册

    if (users.some(user => user.username === username)) {

      return res.status(400).json({ error: '用户名已被注册' });

    }



    if (users.some(user => user.email === email)) {

      return res.status(400).json({ error: '邮箱已被注册' });

    }



    // 使用bcrypt对密码进行哈希处理

    const hashedPassword = await bcrypt.hash(password, 10);



    // 创建新用户对象

    const user = {

      id: Date.now().toString(),

      username,

      email,

      password: hashedPassword

    };



    // 将用户信息存储到数据库

    users.push(user);



    // 创建访问令牌

    const token = jwt.sign({ userId: user.id }, 'secretKey');



    res.status(201).json({ message: '注册成功', token });

  } catch (error) {

    res.status(500).json({ error: '注册失败' });

  }

});

1.2 登录接口

在登录接口中，用户提供登录凭据（如用户名和密码），服务器验证凭据的正确性并颁发访问令牌。

示例代码（Node.js + Express）：

app.post('/login', (req, res) => {

  // 获取登录凭据

  const { username, password } = req.body;



  // 在此处进行用户名和密码的验证，如检查用户名是否存在、密码是否匹配等



  // 验证成功，颁发访问令牌

  const token = createAccessToken(username);



  // 将访问令牌写入 Cookie

  res.cookie('token', token, {

    httpOnly: true,

    secure: true, // 仅在 HTTPS 连接时发送 Cookie

    sameSite: 'Strict' // 限制跨站点访问，提高安全性

  });



  // 返回登录成功的响应

  res.status(200).json({ message: '登录成功' });

});

2. 接口校验登录态

在需要校验登录态的受保护接口中，服务器将校验请求中的登录凭据（Cookie 或访问令牌）的有效性。

示例代码（Node.js + Express）：

app.get('/protected', (req, res) => {

  // 从请求的 Cookie 中提取访问令牌

  const token = req.cookies.token;



  // 或从请求头部中提取访问令牌，如果采用前端存储和发送访问令牌方式

  // const token = req.headers.authorization.split(' ')[1]; // 示例代码，需根据实际情况进行解析



  // 检查访问令牌的有效性

  if (!token) {

    return res.status(401).json({ error: '未提供访问令牌' });

  }



  try {

    // 验证访问令牌

    const decoded = verifyAccessToken(token);



    // 在此处进行更详细的用户权限校验等操作



    // 返回受保护资源

    res.status(200).json({ message: '访问受保护资源成功' });

  } catch (error) {

    res.status(401).json({ error: '无效的访问令牌' });

  }

});

3. 自动化登录态管理

要实现自动或无感化的登录态管理，前端需要在每个请求中自动携带访问令牌（Cookie 或请求头部）。

3.1 使用 HTTP Cookie

当使用 HTTP Cookie 时，浏览器会自动将 Cookie 包含在每个请求的头部中，无需手动设置。

示例代码（前端使用 JavaScript）：

// 发送请求时，浏览器自动携带 Cookie

fetch('/protected');

3.2 前端存储和发送访问令牌

当使用前端存储和发送访问令牌时，前端需要在每个请求的头部中手动设置访问令牌。

示例代码（前端使用 JavaScript）：

// 从存储中获取访问令牌

const token = localStorage.getItem('token');



// 设置请求头部

const headers = {

  'Authorization': `Bearer ${token}`

};



// 发送请求时，手动设置请求头部

fetch('/protected', { headers });

在上述示例代码中，我们使用了前端的 localStorage 来存储访问令牌，并在发送请求时手动设置了请求头部的 Authorization 字段。

请注意，无论使用哪种方式，都需要在服务器端进行访问令牌的验证和安全性检查，以确保请求的合法性和保护用户数据的安全。

补充说明：

• createUser：自定义函数，用于创建用户账户并将其保存到数据库或其他持久化存储中。


• createAccessToken：自定义函数，用于创建访问令牌。


• verifyAccessToken：自定义函数，用于验证访问令牌的有效性。

写在最后

文章旨在答疑扫盲，内容简明扼要方便学习了解，请确保在实际应用中采取适当的安全措施来保护用户的登录凭据和敏感数据，保持学习，共勉~

Vue3 中定义的ref类型的变量，在setup中使用这些变量是需要带上.value才可以访问，但是在template中却可以直接使用。

询其原因，可能会说 Vue 自动进行ref解包了，那具体如何实现的呢？

proxyRefs

Vue3 中有有个方法proxyRefs，这属于底层 API 方法，在官方文档中并没有阐述，但是 Vue 里是可以导出这个方法。

例如：

<script setup>

import { onMounted, proxyRefs, ref } from "vue";



const user = {

  name: "wendZzoo",

  age: ref(18),

};

const _user = proxyRefs(user);



onMounted(() => {

  console.log(_user.name);

  console.log(_user.age);

  console.log(user.age);

});

</script>

上面代码定义了一个普通对象user，其中age属性的值是ref类型。当访问age值的时候，需要通过user.age.value，而使用了proxyRefs，可以直接通过user.age来访问。

这也就是为何template中不用加.value的原因，Vue3 源码中使用proxyRefs方法将setup返回的对象进行处理。

实现proxyRefs

单测

it("proxyRefs", () => {

  const user = {

    name: "jack",

    age: ref(10),

  };

  const proxyUser = proxyRefs(user);



  expect(user.age.value).toBe(10);

  expect(proxyUser.age).toBe(10);



  proxyUser.age = 20;

  expect(proxyUser.age).toBe(20);

  expect(user.age.value).toBe(20);



  proxyUser.age = ref(30);

  expect(proxyUser.age).toBe(30);

  expect(user.age.value).toBe(30);

});

定义一个age属性值为ref类型的普通对象user。proxyRefs方法需要满足：

1. proxyUser直接访问age是可以直接获取到 10 。


2. 当修改proxyUser的age值切这个值不是ref类型时，proxyUser和原数据user都会被修改。


3. age值被修改为ref类型时，proxyUser和user也会都更新。

实现

既然是访问和修改对象内部的属性值，就可以使用Proxy来处理get和set。先来实现get

export function proxyRefs(objectWithRefs) {

  return new Proxy(objectWithRefs, {

    get(target, key) {}

  });

}

需要实现的是proxyUser.age能直接获取到数据，那原数据target[key]是ref类型，只需要将ref.value转成value。

使用unref即可实现，unref的实现参见本专栏上篇文章，文章地址：mp.weixin.qq.com/s/lLkjpK9TG…

get(target, key) {

  return unref(Reflect.get(target, key));

}

实现set

export function proxyRefs(objectWithRefs) {

  return new Proxy(objectWithRefs, {

    get(target, key) {

      return unref(Reflect.get(target, key));

    },

    set(target, key, value) {},

  });

}

从单侧中可以看出，我们是测试了两种情况，一种是修改proxyUser的age为ref类型， 一种是修改成不是ref类型的，但是结果都是同步更新proxyUser和user。那实现上也需要考虑这两种情况，需要判断原数据值是不是ref类型，新赋的值是不是ref类型。

使用isRef可以判断是否为ref类型，isRef的实现参见本专栏上篇文章，文章地址：mp.weixin.qq.com/s/lLkjpK9TG…

set(target, key, value) {

  if (isRef(target[key]) && !isRef(value)) {

    return (target[key].value = value);

  } else {

    return Reflect.set(target, key, value);

  }

}

当原数据值是ref类型且新赋的值不是ref类型，也就是单测中第 1 个情况赋值为 10，将ref类型的原值赋值为value，ref类型值需要.value访问；否则，也就是单测中第 2 个情况，赋值为ref(30)，就不需要额外处理，直接赋值即可。

验证

执行单测yarn test ref

最近在线看直播年会。有一个点赞的按钮，点击点赞按钮喷射表情，表情在屏幕上向上浮动之后消失。觉得这个效果挺具有代表性，所以想实现一下。

找了一个别人的效果图

就来实现这个效果。

写一个点赞按钮

  <style>

    .like-box {

      width: 48px;

      height: 48px;

      border-radius: 50%;

      background-color: #ddd;

      position: relative;

      top: 360px;

      display: flex;

      align-items: center;

      justify-content: center;

      left: 300px;

      cursor: pointer;

    }



    .like-box i {

      font-size: 25px;

    }

  </style>

  <div class="like-box" id="like-box">

    <i class="icon-dianzan iconfont"></i>

  </div>

其中中间的图标用的是阿里巴巴矢量图标库的图标字体。

动态创建表情

动态表情用一个div表示。背景是表情图片。有6个备选表情

div样式

 .like-box div {

      position: absolute;

      width: 48px;

      height: 48px;

      background-image: url("./public/images/bg1.png");

      background-size: cover;

      z-index: -1;

    }

使用js创建表情图标，并插入到点赞div中

const likeBox = document.getElementById('like-box') // id为like-box

const createFace = function () {

    const div = document.createElement('div')

    return div

}



likeBox.addEventListener('click', function () {

    const face = createFace()

    likeBox.appendChild(face)

})

实现表情动画效果

从最终效果图中可以看出，最终效果是由多个表情组成，更准确的说是由多个不同运动轨迹表情实现。所以关键是表情的轨迹实现。

而在运动轨迹过程中，有大小缩放效果、有淡出效果。所以至少有三个animation。

实现缩放效果

使用animation实现缩放效果，添加animation样式

    @keyframes scale {

      0% {

        transform: scale(0.3);

      }



      100% {

        transform: scale(1.2);

      }

    }

当动态创建表情div时，将缩放效果添加到div上，添加后效果

实现淡出效果

使用animation实现淡出效果，添加animation样式

    @keyframes opacity {

      0% {

        top: 0;

      }



      10% {

        top: -10px;

      }



      75% {

        opacity: 1;

        top: -180px;



      }



      100% {

        top: -200px;

        opacity: 0;

      }

    }

当动态创建表情div时，将淡出效果添加到div上，添加后具体效果

实现不同轨迹效果

单一轨迹

创建单一轨迹样式效果

 @keyframes swing_1 {

      0% {}



      25% {

        left: 0;

      }



      50% {

        left: 8px;

      }



      75% {

        left: -15px;

      }



      100% {

        left: 15px;

      }

    }

当动态创建表情div时，将单一轨迹样式效果添加到div上，添加后具体效果

多轨迹

多轨迹有点麻烦，但是也不是很麻烦。具体思路是创建多个轨迹样式，然后在动态创建表情时给表情div随机添加各种轨迹样式，添加后具体效果

最终js代码

const likeBox = document.getElementById('like-box')



const createFace = function () {

    // 随机表情

    const face = Math.floor(Math.random() * 6) + 1;

    // 随机轨迹

    const trajectory = Math.floor(Math.random() * 11) + 1; // bl1~bl11



    const div = document.createElement('div')



    div.className = `face${face} trajectory${trajectory}`;

    return div

}





likeBox.addEventListener('click', function () {

    const face = createFace()

    likeBox.appendChild(face)

})

移除产生的表情div

为了避免一直添加div，乃至最后降低动画性能，需要等animation结束后移除动画div

const likeBox = document.getElementById('like-box')



const createFace = function () {

    const face = Math.floor(Math.random() * 6) + 1;

    const trajectory = Math.floor(Math.random() * 11) + 1; // bl1~bl11



    const div = document.createElement('div')



    div.className = `face${face} trajectory${trajectory}`;

    // 移除div

    div.addEventListener("animationend", () => {

        if(likeBox.contains(div)){

            likeBox.removeChild(div)

        }

    });

    return div

}



likeBox.addEventListener('click', function () {

    const face = createFace()

    likeBox.appendChild(face)

})

总结

所有的效果实现都通过css的animation实现。实际还可以使用canvas实现。关键是实现的思路。

核心思路：使用css的animation实现，基于对动画效果的拆分；拆出单一效果，之后所有效果同时发挥作用。

最近想到一件事，初高中学到的数学知识应该可以应用在开发中。有些前端效果实际就是数学知识的一种应用。更准确的说是高中数学函数图形以及几何图形那块，这两块都有曲线的函数或者方程表示。

如果要实现的效果是曲线或者轨迹的话，完全可以考虑它的坐标关系是不是数学中学到的。进而知道关系，进而开发出效果。

我一直想把中学和大学的知识应用，我想上面就是应用的一个点。

代码地址：github.com/zhensg123/r…

(本文完)

参考文章

H5 直播的疯狂点赞动画是如何实现的？(附完整源码)

现在当你想去找一个无感刷新的方案的时候，搜出来的大多都是教你在aioxs的相应拦截器里面去截取当前请求的config。然后当token刷新后再去请求失败的接口。首先声明，这个方案完全没有任何问题。只是有可以优化的地方，这个优化的地方可以在我将要写的第二种方案中得到解决。

准备工作

接口服务

在实行方案之前需要准备好相关的接口服务，我会用node写一些登录刷新和正常的业务接口, 点这里查看 。

简单介绍下准备的接口及其作用

• /login: 模拟登录并返回token和refreshToken


• /refreshToken: 当token过期，请求这个接口会获得新的token和refreshToken，接口需要传入通过/login接口或者/refreshToken接口返回的refreshToken。当refreshToken也判断过期，就只能去登陆页。


• /test1: 模拟正常的业务请求接口，会验证token是否有效及是否过期，过期返回401


• /test2: 模拟正常的业务请求接口，会验证token是否有效及是否过期，过期返回401


• /test3: 模拟正常的业务请求接口，会验证token是否有效及是否过期，过期返回401

token的过期时间设置为5秒。

axios的封装

我们使用axios都会进行二次封装，都会在拦截器里面处理一些逻辑。这里给出一个最基本的封装，后面都会用到。

import axios from "axios";



export const service = axios.create({

  timeout: 1000 * 30,

  baseURL: "http://192.168.0.102:9001",

});



service.interceptors.request.use(

  (config) => {

    let token = localStorage.getItem("token");

    config.headers["Authorization"] = token;

    return config;

  },

  (err) => Promise.reject(err)

);



service.interceptors.response.use(

  (res) => {

    return res.data;

  },

  (err) => {

    return Promise.reject(err);

  }

);



export const get = (url, params) => {

  return new Promise((resolve, reject) => {

    service

      .get(url, { params })

      .then((res) => {

        resolve(res);

      })

      .catch((err) => {

        reject(err);

      });

  });

};



export const post = (url, data = {}) => {

  return new Promise((resolve, reject) => {

    service

      .post(url, data)

      .then((res) => {

        resolve(res);

      })

      .catch((err) => {

        reject(err);

      });

  });

};

首先还是介绍下最广泛的使用方案

在axios的响应拦截器里面处理

这种方案的工作流程都是在相应拦截器里面处理的，当判断到接口401，则请求刷新token接口，并改变一个状态来表明当前正在执行刷新token，这样可以避免多个请求同时401的时候所导致的一次401就会请求一次刷新token接口。接着将紧随着报401的接口保存起来，等到刷新token接口成功后再去执行这些失败的接口。完整代码，在上文的二次封装的axios基础上进行更改。

import axios from "axios";

----------------------------------------------------------------新增

import { refreshToken } from "@/api/login";

----------------------------------------------------------------新增



export const service = axios.create({

  timeout: 1000 * 30,

  baseURL: "http://192.168.0.102:9001",

});



service.interceptors.request.use(

  (config) => {

    let token = localStorage.getItem("token");

    config.headers["Authorization"] = token;

    return config;

  },

  (err) => Promise.reject(err)

);



----------------------------------------------------------------新增

let inRefreshing = false; // 当前是否正在请求刷新token

let wating = []; // 报401的接口 加入等待列表 刷新接口成功后统一请求

----------------------------------------------------------------新增



service.interceptors.response.use(

  (res) => {

    return res.data;

  },

  (err) => {

  ----------------------------------------------------------------新增

    let { config } = err.response;



    if (inRefreshing) { // 刷新token正在请求，把其他的接口加入等待数组

      return new Promise((resolve) => {

        wating.push({

          config,

          resolve,

        });

      });

    }



    if (err?.response?.status === 401) {

      inRefreshing = true;



      refreshToken({ refreshToken: localStorage.getItem("refreshToken") }).then(

        (res) => {

          const { success, response } = res;

          if (success) {

            inRefreshing = false;



            const { token, refreshToken } = response;

            localStorage.setItem("token", token);

            localStorage.setItem("refreshToken", refreshToken);



            // 刷新token请求成功，等待数据的失败接口重新发起请求

            wating.map(({ config, resolve }) => {

              resolve(service(config));

            });

            wating = []; // 请求完之后清空等待请求的数组



            return service(config); // 当前接口重新发起请求

          } else {

            // 刷新token失败  重新登录

          }

        }

      );

    }

----------------------------------------------------------------新增

    return Promise.reject(err);

  }

);



export const get = (url, params) => {

  return new Promise((resolve, reject) => {

    service

      .get(url, { params })

      .then((res) => {

        resolve(res);

      })

      .catch((err) => {

        reject(err);

      });

  });

};



export const post = (url, data = {}) => {

  return new Promise((resolve, reject) => {

    service

      .post(url, data)

      .then((res) => {

        resolve(res);

      })

      .catch((err) => {

        reject(err);

      });

  });

};

有些同学可能对上面代码有些疑问，感觉wating里面的数据不对，比如同时发送三个接口报401，wating只会加入两条接口数据，还有一条在哪儿。其实就在第60行返回了。

然后再对接口进行简单的封装

import { post } from "./index";



export const login = () => post("/login");

export const refreshToken = (data) => post("/refreshToken", data);



export const test1 = () => post("/test1");

export const test2 = () => post("/test2");

export const test3 = () => post("/test3");

接下来看结果。点击按钮会发送三条接口请求。

第一次点击发送请求token还未过期，第二次点击发送请求token已过期。

完美，没啥问题！因为上面给大家展示的是最简单的axios封装，所以在响应拦截器里面加上一些接口重发的逻辑好像没啥问题。但是如果还有对接口数据的加密解密过程呢？还有控制加载的时候loading窗完美展示的问题呢？这样一看在二次封装的axios里面加上接口重发就有点儿太多了。再比如说我用的不是axios怎么办，是不是又得根据请求的插件去改一些东西。

那么与axios拦截器解耦就成了需要做的事了。

与axios拦截器解耦

我们需要创建一个构造函数，这个构造函数会将报401的接口收集起来，等到刷新token接口成功后再去请求

import { refreshToken } from "@/api/login";



function requestCollection() {

  let inRefreshing = false; // 当前是否正在请求刷新token

  let wating = []; // 报401的接口 加入等待列表 刷新接口成功后统一请求



  return (request) => {

    return new Promise((resolve) =>

      request()

        .then((res) => {

          resolve(res);

        })

        .catch(async (err) => {

          if (err.response.status == 401) {

            if (inRefreshing) {

              // 加入等待执行的数组

              return wating.push({

                request,

                resolve,

              });

            }



            inRefreshing = true;



            await RT();



            wating.map(({ resolve, request }) => {

              resolve(request());

            });

            wating = [];



            return resolve(request());

          }

        })

    );

  };

}



const RT = () => {

  return new Promise((resolve) =>

    refreshToken({

      refreshToken: localStorage.getItem("refreshToken"),

    }).then((res) => {

      const { success, response } = res;

      if (success) {

        const { token, refreshToken } = response;

        localStorage.setItem("token", token);

        localStorage.setItem("refreshToken", refreshToken);



        resolve();

      }

    })

  );

};



export default requestCollection;

其实内在的处理逻辑与第一种大同小异，主要在于将这一部分逻辑抽离出来。

使用

import { post } from "./index2";

import requestCollection from "./RequestCollection";



const check = new requestCollection();



export const login = () => check(() => post("/login"));

export const refreshToken = (data) => check(() => post("/refreshToken", data));



export const test1 = () => check(() => post("/test1"));

export const test2 = () => check(() => post("/test2"));

export const test3 = () => check(() => post("/test3"));

效果演示

这种方案存在的一个小问题
因为需要对接口进行一层包裹，所以如果你的项目已经运行有一段时间了突然来个需求说想要个无感刷新token，那其实这个方案会随着你的项目的大小而加大你的工作量。

上述两种方案都存在的不足
当我们都在讨论无感刷新token的方案都是如何接口重发的时候，大家都忽略了一个问题，那就是接口重发的过程是发送了原本两倍+1的接口数量。如果这个接口本来就慢，恰好碰上了401，那用户就得花约两倍时间去等一个结果，相信你不愿意等，我也不愿意等。

那么被大家诟病会造成一定性能浪费的定时任务刷新就可以解决这个问题，并且定时任务刷新也是解耦于二次封装的axios。 其实都到了2023年，一个定时任务会对最终用户所使用的页面造成卡顿的影响可以说完全感知不到。但是我也不推荐大家无意识的随便使用定时器或者闭包一类能通过一点点累加所造成的内存泄露的性能问题。

定时任务刷新

这个就不给代码了，主要注意几个点就行

• 后端需要配合返回一个token的过期时间


• 定时任务全局存在


• 刷新token成功后需要更新过期时间重新计算

总结

其实上面三种方案都有自己的好处和缺点，无论你使用哪一种方案，都没有问题。这些需要你结合自己的项目来选择适合你的方案。

前言

在互联网时代，我们每天都在进行着与网络有关的活动，而网络安全问题也因此成为大家越来越关注的话题。http协议作为最常用的网络传输协议之一，其设计缺陷让黑客攻击变得更加容易。相比之下，https协议通过加密通信，能够更有效地保护用户隐私和数据安全。

本文将为您介绍什么是https，为什么它比http更安全，帮助您更好地了解网络安全问题。

什么是https

https是http的加强版（HTTP+SSL），因为http特性是明文传输，因此到每个传输的环节中数据都有可能被第三方篡改的可能，也就是我们所说是中间人攻击。为了数据的安全，提出了https这个方案

但它不是一个新的协议，原理上是在http和tcp层之间建立一个中间层（也叫安全层），在不像之前http一样，直接进行数据通信，这个中间层会对数据进行加密处理，将加密后的数据给TCP，TCP再将数据包进行解密处理才能传给上游的http。

http是位于OSI网络模型中的应用层

SSL(Secure Sockets Layer 安全套接字协议),及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议

在采用了SSL后，http就拥有了https的加密，证书，完整性保护功能。

换句话说，安全性是由SSL来保证的

SSL/TLS

SSL 即 安全套接层(Secure Sockets Layer)，在OSI模型中处于第5层。在1999年SSL更名为TLS(传输层安全)，正式标准化。

在TLS中使用了两种加密技术，分别是对称加密和非对称加密

提到 TLS ,就要说下 OpenSSL ,它是一个开源密码学程序库和工具包，支持了所有公开的加密算法和协议，许多应用软件都适用它作为底层库来实现 TLS 功能，例如 Apache、Nginx等。

加密技术

对称加密 Symmetric Cryptography

对称加密常见的加密算法有：DES、AES、IDEA等

这个很好理解，对称加密指的是加密和解密的方式都是使用同一把钥匙（密保）

缺点：

• 服务器端也会把密钥提供给对方进行解密，如果密钥传递的过程中被窃取那就没有加密的意义了

非对称加密 Asymmetric Cryptography

非对称加密常见的算法有：RSA、DSA、DH等

非对称加密会有两把解密的密钥分别是A和B，A加密后的数据包只能通过密钥B来解密，反之，B加密的数据包只能通过A来解密

其中，A是公钥，B是私钥，这两把钥匙是不一样，公钥可以给任何人使用，私钥则必须保密。

这样子做可以防止密钥被攻击者窃取后用来获取数据

缺点：

• 公钥是公开的，攻击者可以截获公钥后解密服务器发送过来的密钥


• 公钥不包含服务器信息，使用这个方案无法确保服务器身份的合法性，存在中间人攻击风险


• 使用非对称加密在数据加密解密过程需要消耗一定时间，降低了数据传输效率

hash算法

例如sha256、sha1、md5这些用来确定数据的完整性，是否有被篡改过，主要用来生成签名信息。

混合加密

HTTPS采用的是混合加密方案（即：对称加密和非对称加密的结合）

非对称加密的安全性比较高，但是解密速度会比较慢。

当数据进行第一次通信时，使用非对称加密算法（解决安全性问题）交互对称密钥，在这之后的每一次通信都采用对称加密来进行交互。这样子性能和安全也可以得到均衡。

混合加密总用了4把钥匙

• 非对称加密A+私钥B


• 对称加密私钥C和私钥D

内容传输时使用对称加密，证书验证阶段使用非对称加密

HTTPS工作过程

1. 客户端发起一个网络请求。


2. 服务器将自己的信息以数字证书的方式给了客户端（证书里面含有密钥公钥，地址，证书颁发机构等信息），其中的公钥是用来加密信息的。


3. 当客户端接收到这个信息之后，会验证证书的完整性。（当证书有效继续下一步，否则显示警告信息）


4. 客户端生成一个对称密钥并用第二步中的证书公钥进行加密发送给服务器端，


5. 服务器用私钥解密获取对此密钥。（也证明了服务器是私钥的持有者）


6. 接下来的通话使用该密钥进行通讯。

HTTPS运行原理

浏览器拿到证书后，会先读取issuer（发布机构），然后在操作系统中内置的受信任的发布机构中查找证书，是否匹配，如果没有找到证书，说明证书有问题，如果找到了，就会拿上级证书的公钥去解密本级证书，得到数字指纹hash，然后对本级证书进行数字摘要算法（证书中提供的指纹加密算法）计算结果，与解密得到的指纹对比。如果一样，说明证书没有被修改过。公钥可以放心使用，可以开始握手通信了。

证书从哪里来

• 在安装系统的时候，受信任的证书发布机构的数字证书就已经被微软安装在操作系统中

什么时候证书不可信

• 证书不是权威CA颁发（一些企业贪图便宜使用盗版证书，没有经过CA认证，也就无法通过使用浏览器内置CA公钥进行验证）


• 证书过期


• 证书部署错误，例如证书和域名信息不匹配

HTTPS优劣势

优势

• 提高Web数据安全性


• 加密用户数据


• 提高搜索引擎排序


• 浏览器不会出现非“不安全”警告


• 提高用户对站点的信赖


• 增加了中间人攻击成本

缺点

• https协议在握手时耗时会大一些，影响整体加载速度


• 客户端和服务器端会使用更大的性能来处理数据加解密


• SSL证书需要支付一定的费用来获取


• 也不是绝对的安全，当网站被攻击，服务器被劫持时，HTTPS起不到任何作用


• SSL证书通常需要绑定IP，不能在同一IP上绑定多个域名，IPv4资源不可能支撑这个消耗

关于数字证书认证

结合了两种加密方式可以实现数据的加密传输，但安全性还远远不够

如果攻击者采用了DNS劫持，将目标地址替换成攻击者指定的地址，之后服务器再伪造一份公钥和私钥，也能对数据进行处理，而客户端此时也不知道正在访问一个危险的服务器

HTTPS在混合加密的基础上，再追加了数字证书认证步骤，目的就是为了让服务器证明自己的身份

在传输过程中，服务器运营者需要向第三方认证机构（CA，Certificate Authority）获取授权，在认证通过之后CA会给服务器颁发数字证书

这个证书的作用就是用来证明服务器身份，还有就是把公钥传递给客户端

当客户端获取到数字证书后，会读取其明文内容，CA在对数字证书签名时会保存一个hash函数，这个函数是用来计算明文的内容得到数据A，然后用公钥解密明文内容得到数据B，再对这两份数据进行对比，如果一致就代表认证合法。

为什么要使用https？

它们之间有什么区别吗？

通过上面的介绍，我们可以了解到http在传输过程是明文的，数据容易被黑客截取或者篡改，这会导致用户信息泄露，而https通过ssl进行通讯加密处理，就算被截取了，也无法解读数据

另外，除了安全性方面，https和http还有以下区别：

• 由于https需要对数据进行加解密，所以会增加服务器和客户端的消耗更多的性能资源来处理，同时也增加了响应速度


• https需要申请证书和验证，http则不需要

表单校验是前端项目广泛存在的一个功能，因为Ant Design的引入，所谓的表单校验功能其实已经被抽象成了一个又一个的表单校验规则。以前并未注意到表单校验规则的可维护性，哪个组件用到，就在组件内完成即可。直到PM问了我2个问题：

“我们的账号名字符数限制区间是多少？”

“项目中所有涉及命名的字符数都要限制在3-26个，啥时候能改好？”

“好的”，我习惯性的打开了编辑器全局搜索。。。

后来的日子以上对话又重复了好几轮，每次内容略有不同啊！终于无法忍受的我开始动手对这部分内容专门做了重构，经过几个版本的迭代，似乎已经找到了一个好的方案将前端项目中的众多表单校验规则维护得体，便记下此文与各位前端大佬分享探讨。

影响维护性的几个问题

1. 校验规则靠近并耦合业务组件，散落在项目各处


2. 校验规则的复用


3. 校验规则难以理解和可读


4. 需要传参的校验规则


5. 异步校验的规则

可维护的方案

该方案将所有的表单校验规则整理在src/formRules目录下统一管理，带来的收益是明显的：统一管理本身解决了问题1；./rules.ts & ./rulesHooks.tsx 作为所有业务组件消费校验规则的统一输出口，针对了问题1、2；./baseRuleCreator.tsx 针对了问题4；./baseSemiRule.tsx & ./utils.ts 针对了问题5；问题3么写注释就好了！

我们来看具体的内容：

./baseRules.tsx

// 必填的

export const requiredRule: RuleObject = {

  required: true,

}



// 输入必须以字母开头

export const startLetterRule: RuleObject = {

  pattern: /^[a-zA-Z]/,

  message: 'Must start with a letter',

}

可以看到我们将表单校验规则拆成了原子级别，相同的规则我们只会写1遍，意外的收益在于每个校验报错信息也将是精准的。

./rules.ts

// Email

export const emailRules: RuleObject[] = [requiredRule, emailPatternRule]



// 密码

export const passwordRules: RuleObject[] = [requiredRule, length8_32Rule, passwordBanRule]

我们在该文件下自由组合复用原子化的校验规则，并导出给业务组件消费，达到了复用的目的。如果业务校验规则有修改，我们也可以仅在该文件统一做修改，完成了业务逻辑与校验规则的解耦。

./baseRuleCreator.tsx

// 校验是否与目标值匹配

export function createMatchTargetValueRule(targetValue: any): RuleObject {

  return {

    message: 'Does not match',

    validator(rule: Rule, value: string) {

      return value === targetValue ? Promise.resolve() : Promise.reject()

    },

  }

}

很明显该文件放的规则都是需要有入参的，不再赘述。

./baseSemiRule.tsx

// 异步校验邮箱是否重复

export const duplicatingAccountEmailSemiRule: TSemiRule = {

  message: 'Email already exists',

  callbackValidator: (value, resolve, reject) => {

    return fetch(value).then(res => (res.data.exists ? reject() : resolve(undefined)))

  },

}

显然该文件放了需要网络异步校验的规则，但为什么被命名为Semi？难道阁下忘了防抖？虽然我们还需要一个防抖函数来统一加工这些校验规则才可实用。但非常棒的地方在于，这些规则在逻辑上已经自洽了，报错信息和校验逻辑都已经完整了。所以我们并不关心防抖函数的具体实现和校验规则在业务组件中的具体应用，如有修改则我们在这里维护即可，做到了关注点的分离。

./utils.ts

export function createDebounceRule(semiRule: TSemiRule): RuleObject {

  const { message, callbackValidator, delayTime = 500 } = semiRule

  let timeId: NodeJS.Timeout = null



  return {

    message,

    validator(rule, value) {

      return new Promise((resolve, reject) => {

        clearTimeout(timeId)

        timeId = setTimeout(() => {

          callbackValidator(value, resolve, reject)

        }, delayTime)

      })

    },

  }

}

防抖函数的具体实现，不再赘述。

./rulesHooks.tsx

export function useVpcConnectionNameRules(target: string) {

  const rules = useMemo(() => [

    requiredRule, 

    startLetterRule,

    createMatchTargetValueRule(target),

    createDebounceRule(duplicatingAccountEmailSemiRule),

  ], [target])



  return rules

}

需要入参的校验规则和异步校验规则利用hooks做抽象，实现复用。

千里之堤溃于蚁穴，勿以事小而不为！表单校验规则虽然是代码维护性一个鲜有前端boy关注的微小领域，但如果我们能关注到项目中一砖一瓦的维护性，则可以相信整个项目大厦也将是健壮无比的。

以上方案仅个人在项目中的实践，维护性的提升无可止境，各位前端大佬如有更好的方案，希望留言不吝赐教！

vue-draggable-plus

前言

前段时间偶然翻掘金的过程中发现有人宣传 vue 的拖拽库断代了，那么我也来蹭一下热度。

Sortablejs

Sortablejs 是一个功能强大的 JavaScript 拖拽库，并且提供了 vue 相关的组件 vue-draggable，并且在 vue3 的前期，提供了 vue-draggable-next，但是可能由于作者的生活过于繁忙的原因，这个库已经两年没有更新了，在当前 vue3 的版本中并不适用，于是乎本人突发奇想，写了一个 vue-draggable-plus（其实很久之前就写好了，没有可以宣传），它用于兼容 vue2.7 和 vue3 以上的版本，下面我们来介绍一下它。

vue-draggable-plus

vue-draggable-plus 它用于延续 vue-draggable 核心理念，提供 vue 组件用于双向绑定数据列表，实现拖拽排序、克隆等功能，同时它还支持函数式、指令式的使用方式，让你使用起来更加方便，废话不多生活，我们先上图

更多演示请参考：demo

安装

npm install vue-draggable-plus

使用

vue-draggable-plus 支持三种使用方式：组件使用、函数式使用、指令式使用

下面我们来一一介绍：

1. 组件式使用：

它和传统的vue组件的使用方式一样，支持双向绑定数据：

<template>

    <VueDraggable

      v-model="list"

      :animation="150"

      ghostClass="ghost"

      @start="onStart"

      @update="onUpdate"

    >

      <div

        v-for="item in list"

        :key="item.id"

      >

        {{ item.name }}

      </div>

    </VueDraggable>

</template>



<script setup lang="ts">

import { ref } from 'vue'

import { type UseDraggableReturn, VueDraggable } from 'vue-draggable-plus'

const list = ref([

  {

    name: 'Joao',

    id: 1

  },

  {

    name: 'Jean',

    id: 2

  },

  {

    name: 'Johanna',

    id: 3

  },

  {

    name: 'Juan',

    id: 4

  }

])



</script>



<style scoped>

.ghost {

  opacity: 0.5;

  background: #c8ebfb;

}

</style>

2. 函数式使用：

<template>

    <div

      ref="el"

    >

      <div

        v-for="item in list"

        :key="item.id"

      >

        {{ item.name }}

      </div>

</template>



<script setup lang="ts">

import { ref } from 'vue'

import { useDraggable } from 'vue-draggable-plus'

const list = ref([

  {

    name: 'Joao',

    id: 1

  },

  {

    name: 'Jean',

    id: 2

  },

  {

    name: 'Johanna',

    id: 3

  },

  {

    name: 'Juan',

    id: 4

  }

])

const el = ref()



const { start } = useDraggable(el, list, {

  animation: 150,

  ghostClass: 'ghost',

  onStart() {

    console.log('start')

  },

  onUpdate() {

    console.log('update')

  }

})

</script>



<style scoped>

.ghost {

  opacity: 0.5;

  background: #c8ebfb;

}

</style>

它就像你使用 vueuse 一样接受一个 element 的引用，和一个响应式列表数据

3. 指令式使用

由于指令的特殊性，指令只能绑定您在 setup 中绑定的数据，它并不能支持异步绑定数据，如果您的数据来自于异步获取，那么请您使用组件或者函数式实现

<template>

    <ul

      v-draggable="[

        list,

        {

          animation: 150,

          ghostClass: 'ghost',

          onUpdate,

          onStart

        }

      ]"

    >

      <li

        v-for="item in list"

        :key="item.id"

      >

        {{ item.name }}

      </li>

    </ul>

</template>



<script setup lang="ts">

import { ref } from 'vue'

import { vDraggable } from 'vue-draggable-plus'

const list = ref([

  {

    name: 'Joao',

    id: 1

  },

  {

    name: 'Jean',

    id: 2

  },

  {

    name: 'Johanna',

    id: 3

  },

  {

    name: 'Juan',

    id: 4

  }

])



function onStart() {

  console.log('start')

}



function onUpdate() {

  console.log('update')

}

</script>



<style scoped>

.ghost {

  opacity: 0.5;

  background: #c8ebfb;

}

</style>

指定目标容器

在 Sortablejs 官方以往的 Vue 组件中，都是通过使用组件作为列表的直接子元素来实现拖拽列表，当我们使用一些组件库时，如果组件库中没有提供列表根元素的插槽，我们很难实现拖拽列表，vue-draggable-plus 完美解决了这个问题，它可以让你在任何元素上使用拖拽列表，我们可以使用指定元素的选择器，来获取到列表根元素，然后将列表根元素作为 Sortablejs 的 container，我们来看一下用法：

• Table.vue

<template>

  <table>

    <thead>

      <tr>

        <th>Id</th>

        <th>Name</th>

      </tr>

    </thead>

    <tbody class="el-table"> <-- 我们会将 .el-table 的选择器传递给 vue-draggable-plus -->

      <tr v-for="item in list" :key="item.name" class="cursor-move">

        <td>{{ item.id }}</td>

        <td>{{ item.name }}</td>

      </tr>

    </tbody>

  </table>

</template>

<script setup lang="ts">

interface Props {

  list: Record<'name' | 'id', string>[]

}

defineProps<Props>()

</script>

• App.vue

<template>

  <section>

    <div>

       <-- 传递 .el-table 作为根元素，将 .el-table 的子元素作为拖拽项 -->

      <VueDraggable v-model="list" animation="150" target=".el-table">

        <Table :list="list"></Table>

      </VueDraggable>

    </div>

    <div class="flex justify-between">

      <preview-list :list="list" />

    </div>

  </section>

</template>



<script setup lang="ts">

import { ref } from 'vue'

import { VueDraggable } from 'vue-draggable-plus'

import Table from './Table.vue'



const list = ref([

  {

    name: 'Joao',

    id: '1'

  },

  {

    name: 'Jean',

    id: '2'

  },

  {

    name: 'Johanna',

    id: '3'

  },

  {

    name: 'Juan',

    id: '4'

  }

])

</script>

来看效果：

结尾

如果您有使用需求，请参考文档：vue-draggable-plus，当然如果您不需要高度定制化，使用 vueuse 中的 useSortable 也是一样的。

如果它对您有用，请帮忙点个star：GitHub

友情链接：svelte-draggable-plus

前言

这是一个轻量级的 react 音乐播放器，前端使用 UmiJS，后端采用网易云音乐 NODEJS API 制作。项目的 TS 声明写的比较乱，后续有空的话会发布重写 TS 的版本或者直接重构该播放器。

后续计划将右侧播放器抽离为一个单独的组件，可供页面直接使用。

功能

现有功能

1. 登陆 / 退出个人网易云账号


2. 获取私人雷达歌单


3. 播放歌曲


4. 播放自己已有的网易云音乐歌单 / 订阅的歌单


5. 单曲播放 / 全部循环 / 随机播放


6. 搜索歌曲


7. 背景图切换

计划中功能（先把饼画着）

1. 音质选择


2. 歌曲切换 -> 背景图变化


3. 保存播放列表并同步到网易云


4. 双语歌词对照


5. 歌词自定义字体大小


6. 歌曲查看评论 / 点赞 / 留言


7. 详情页相似歌曲推荐


8. 无版权歌曲或加载出错歌曲增加标记


9. 将右侧播放器抽离成独立组件

比较有特色的地方

1、右侧全局播放栏

播放栏可以清空播放列表，查看当前歌曲歌词，对播放列表的歌曲可以使用拖拽进行顺序调整。

2、主页左上角频谱图的实现

开始构建使用

1.安装项目

npm install

2.设置后台接口地址

第一个：网易云 NODEJS 服务器，到 src/utils/request.ts 将其设置为你的网易云后台 API 地址。

switch (process.env.NODE_ENV) {

  case 'production':

    // 你的生产环境地址 / Your production mode api

    axios.defaults.baseURL = '';

    break;



  default:

    // development

    axios.defaults.baseURL = 'http://localhost:3000';

    break;

}

第二个：天气地址，到 src/constant/api/weather.ts 进行设置。

然后到 src/redux/modules/Weather/action.ts 下根据你设置的天气接口改变传入数据结构，文件内均有注释。

      const info = {

        // 空气质量

        airQuailty: dewPt,

        // 当前气温

        currentTemp: temp,

        // 体感气温

        feelTemp: feels,

        // 湿度

        humidity: rh,

        // 气压

        baro,

        // 天气描述，如晴或多云

        weatherDescription: cap,

      }

如果想高度自定义样式或内容的话可以到 src/pages/IndexPage/topRightWeather 进行调整。

打包发布

npm run build

部分功能预览

前言

无意中在Nuxt官网发现一组高亮卡片元素的效果，发现还挺好看的，就自己试着写了一下，下面是Nuxt官网效果图,边框会随着鼠标移动，并且周围的卡片也会“染上”。

我实现的效果如下

实现过程

写好六个卡片

下面看代码，先用HTML写六个div元素，并设置好基础样式。

    <div class="box">

        <div class="col">

            <div class="element">

                <div class="mask">

                div>

            div>

        div>

        <div class="col">

            <div class="element">

                <div class="mask">div>

            div>

        div>

        <div class="col">

            <div class="element">

                <div class="mask">div>

            div>

        div>

        <div class="col">

            <div class="element">

                <div class="mask">div>

            div>

        div>

        <div class="col">

            <div class="element">

                <div class="mask">div>

            div>

        div>

        <div class="col">

            <div class="element">

                <div class="mask">div>

            div>

        div>

        <div class="col">

            <div class="element">

                <div class="mask">div>

            div>

        div>

        <div class="col">

            <div class="element">

                <div class="mask">div>

            div>

        div>

    div>

body {

    margin: 0;

    padding: 0;

    display: flex;

    min-height: 100vh;

    align-items: center;

    justify-content: center;

    background-color: #0D1428;

}



.box {

    width: 1200px;

    display: flex;

    flex-wrap: wrap;

}



.col {

    width: calc((100% - 4 * 20px) / 4);

    height: 180px;

    padding: 10px;

}

.element {

    background: #172033;

    height: 100%;

    position: relative;

    border-radius: 10px;

}

JS获取卡片坐标距离鼠标坐标的距离

使用JS获取每一个卡片坐标距离鼠标坐标的距离，并将这个值设置到元素的style中作为一个变量。

var elements = document.getElementsByClassName("element");

    // 添加鼠标移动事件监听器

document.addEventListener("mousemove", function (event) {

    // 获取鼠标位置

    var mouseX = event.pageX;

    var mouseY = event.pageY;



    // 遍历元素并输出距离鼠标的坐标

    for (var i = 0; i < elements.length; i++) {

        var element = elements[i];

        var rect = element.getBoundingClientRect();

        var elementX = rect.left + window.pageXOffset;

        var elementY = rect.top + window.pageYOffset;



        var distanceX = mouseX - elementX;

        var distanceY = mouseY - elementY;

        

        // 将距离值设置到每一个卡片元素上面

        element.style.setProperty('--x', distanceX + 'px');

        element.style.setProperty('--y', distanceY + 'px');

    }

});

我们检查控制台可以看到，值已经设置上去了，并且随着鼠标的移动，这个值是在不断变化的。

给元素设置径向渐变

随后我们在element这个伪元素上设置一个径向渐变的CSS效果, 径向渐变的圆心坐标为当前元素距离当前鼠标坐标的距离。再使用mask遮罩，只留出3px的距离作为渐变效果展示。

.element::before {

        content: '';

        position: absolute;

        width: calc(100% + 3px);

        height: calc(100% + 3px);

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        border-radius: 10px;

        background: radial-gradient(250px circle at var(--x) var(--y),#00DC82 0,transparent 100%);;

    }

.element .mask {

    position: absolute;

    inset: 3px;

    background: #172033;

    border-radius: 10px;



}