如何限制一个账号只能在一处登录

要实现账号单点登录（一处登录限制），需结合 会话管理、实时状态同步 和 冲突处理机制。以下是完整技术方案：

一、核心实现方案

1. 服务端会话控制（推荐）

// 用户登录时生成唯一令牌并记录

public String login(String username, String password) {

    // 1. 验证账号密码

    User user = userService.authenticate(username, password);

  

    // 2. 生成新令牌并失效旧会话

    String newToken = UUID.randomUUID().toString();

    redis.del("user:" + user.getId() + ":token"); // 清除旧token

    redis.setex("user:" + user.getId() + ":token", 3600, newToken);

  

    // 3. 返回新令牌

    return newToken;

}

2. WebSocket实时踢出（增强体验）

// 前端建立长连接

const socket = new WebSocket(`wss://api.example.com/ws?token=${token}`);



socket.onmessage = (event) => {

    if (event.data === 'force_logout') {

        alert('您的账号在其他设备登录');

        location.href = '/logout';

    }

};

3. 登录设备指纹识别

// 生成设备指纹（前端）

function generateDeviceFingerprint() {

    const canvas = document.createElement('canvas');

    const ctx = canvas.getContext('2d');

    ctx.textBaseline = 'top';

    ctx.font = "14px Arial";

    ctx.fillText("BrowserFingerprint", 2, 2);

    return canvas.toDataURL().hashCode(); // 简化示例

}



// 服务端校验

if (storedFingerprint != currentFingerprint) {

    forceLogout(storedToken);

}

二、多端适配策略

客户端类型	实现方案
Web浏览器	JWT令牌 + Redis黑名单
移动端APP	设备ID绑定 + FCM/iMessage推送踢出
桌面应用	硬件指纹 + 本地令牌失效检测
微信小程序	UnionID绑定 + 服务端订阅消息

三、关键代码实现

1. JWT令牌增强方案

// 生成带设备信息的JWT

public String generateToken(User user, String deviceId) {

    return Jwts.builder()

        .setSubject(user.getId())

        .claim("device", deviceId) // 绑定设备

        .setExpiration(new Date(System.currentTimeMillis() + 3600000))

        .signWith(SignatureAlgorithm.HS512, secret)

        .compact();

}



// 校验令牌时检查设备

public boolean validateToken(String token, String currentDevice) {

    Claims claims = Jwts.parser().setSigningKey(secret).parseClaimsJws(token).getBody();

    return claims.get("device").equals(currentDevice);

}

2. Redis实时状态管理

# 使用Redis Hash存储登录状态

def login(user_id, token, device_info):

    # 删除该用户所有活跃会话

    r.delete(f"user_sessions:{user_id}")

  

    # 记录新会话

    r.hset(f"user_sessions:{user_id}", 

           mapping={

               "token": token,

               "device": device_info,

               "last_active": datetime.now()

           })

    r.expire(f"user_sessions:{user_id}", 3600)



# 中间件校验

def check_token(request):

    user_id = get_user_id_from_token(request.token)

    stored_token = r.hget(f"user_sessions:{user_id}", "token")

    if stored_token != request.token:

        raise ForceLogoutError()

四、异常处理机制

场景	处理方案
网络延迟冲突	采用CAS（Compare-And-Swap）原子操作更新令牌
令牌被盗用	触发二次验证（短信/邮箱验证码）
多设备同时登录	后登录者优先，前会话立即失效（可配置为保留第一个登录）

五、性能与安全优化

1. 会话同步优化：

   # Redis Pub/Sub 跨节点同步
   
   PUBLISH user:123 "LOGOUT"
   
   

2. 安全增强：

   // 前端敏感操作二次确认
   
   function sensitiveOperation() {
   
       if (loginTime < lastServerCheckTime) {
   
           showReauthModal();
   
       }
   
   }
   
   

3. 监控看板：

   指标	报警阈值
   并发登录冲突率	>5%/分钟
   强制踢出成功率	<99%

六、行业实践参考

1. 金融级方案：
   • 每次操作都验证设备指纹
   • 异地登录需视频人工审核
2. 社交应用方案：
   • 允许最多3个设备在线
   • 分设备类型控制（手机+PC+平板）
3. ERP系统方案：
   • 绑定特定MAC地址
   • VPN网络白名单限制

通过以上方案可实现：

• 严格模式：后登录者踢出前会话（适合银行系统）
• 宽松模式：多设备在线但通知告警（适合社交应用）
• 混合模式：关键操作时强制单设备（适合电商系统）

部署建议：

1. 根据业务需求选择合适严格度
2. 关键系统增加异地登录二次验证
3. 用户界面明确显示登录设备列表

作者：Epicurus
来源：juejin.cn/post/7485384798569250868

背景

如何彻底解决

方案：我的思路从请求层面判断相同请求只发送一次，将结果派发给各个订阅者

实现思路

核心代码

  private handleFinish(key: string, index: number) {

    const promises = this.store.get(key);

    // 只有一个promise时则删除store

    if (promises?.filter((item) => item).length === 1) {

      this.store.delete(key);

    } else if (promises && promises[index]) {

    // 还有其他请求，则将当前取消的、或者完成的置为null

      promises[index] = null;

    }

  }



  private async handleRequest(config: any) {

    const hash = sha256.create();

    hash.update(

      JSON.stringify({

        params: config.params,

        data: config.data,

        url: config.url,

        method: config.method,

      }),

    );

    const fetchKey = hash.hex().slice(0, 40);

    const promises = this.store.get(fetchKey);

    const index = promises?.length || 0;

    let promise = promises?.find((item) => item);

    const controller = new AbortController();



    if (config.signal) {

      config.signal.onabort = (reason: any) => {

        const _promises = this.store.get(fetchKey)?.filter((item) => item);

        if (_promises?.length === 1) {

          controller.abort(reason);

          this.handleFinish(fetchKey, index);

        }

      };

    }



    if (!promise) {

      promise = this.instance({

        ...config,

        signal: controller.signal,

        headers: {

          ...config.headers,

          fetchKey,

        },

      }).catch((error) => {

        console.log(error, "请求错误");

        // 失败的话，立即删除，可以重试

        this.handleFinish(fetchKey, index);

        return { error };

      });

    }



    const newPromise = Promise.resolve(promise)

      .then((result: any) => {

        if (config.signal?.aborted) {

          this.handleFinish(fetchKey, index);

          return result;

        }

        return result;

      })

      .finally(() => {

        setTimeout(() => {

          this.handleFinish(fetchKey, index);

        }, 500);

      });

    this.store.set(fetchKey, [...(promises || []), newPromise]);

    return newPromise;

  }

以下为完整代码（仅供参考）

index.ts

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";

import { sha256 } from "js-sha256";

import transformResponseValue, { updateObjTimeToUtc } from "./utils";



type ErrorInfo = {

  message: string;

  status?: number;

  traceId?: string;

  version?: number;

};



type MyAxiosOptions = AxiosRequestConfig & {

  goLogin: (type?: string) => void;

  onerror: (info: ErrorInfo) => void;

  getHeader: () => any;

};



export type MyRequestConfigs = AxiosRequestConfig & {

  // 是否直接返回服务端返回的数据，默认false， 只返回 data

  useOriginData?: boolean;

  // 触发立即更新

  flushApiHook?: boolean;

  ifHandleError?: boolean;

};



type RequestResult<T, U> = U extends { useOriginData: true }

  ? T

  : T extends { data?: infer D }

    ? D

    : never;



class LmAxios {

  private instance: AxiosInstance;



  private store: Map<string, Array<Promise<any> | null>>;



  private options: MyAxiosOptions;



  constructor(options: MyAxiosOptions) {

    this.instance = axios.create(options);



    this.options = options;

    this.store = new Map();

    this.interceptorRequest();

    this.interceptorResponse();

  }



  // 统一处理为utcTime

  private interceptorRequest() {

    this.instance.interceptors.request.use(

      (config) => {

        if (config.params) {

          config.params = updateObjTimeToUtc(config.params);

        }

        if (config.data) {

          config.data = updateObjTimeToUtc(config.data);

        }

        return config;

      },

      (error) => {

        console.log("intercept request error", error);

        Promise.reject(error);

      },

    );

  }



  // 统一处理为utcTime

  private interceptorResponse() {

    this.instance.interceptors.response.use(

      (response): any => {

        // 对响应数据做处理，以下根据实际数据结构改动！！...

        const [checked, errorInfo] = this.checkStatus(response);



        if (!checked) {

          return Promise.reject(errorInfo);

        }



        const disposition =

          response.headers["content-disposition"] ||

          response.headers["Content-Disposition"];

        // 文件处理

        if (disposition && disposition.indexOf("attachment") !== -1) {

          const filenameReg =

            /filename\*?=['"]?(?:UTF-\d['"]*)?([^;\r\n"']*)['"]?;?/g;

          const filenames: string[] = [];

          disposition.replace(filenameReg, (r: any, r1: string) => {

            filenames.push(decodeURIComponent(r1));

          });

          return Promise.resolve({

            filename: filenames[filenames.length - 1],

            data: response.data,

          });

        }

        if (response) {

          return Promise.resolve(response.data);

        }

      },

      (error) => {

        console.log("request error", error);

        if (error.message.indexOf("timeout") !== -1) {

          return Promise.reject({

            message: "请求超时",

          });

        }

        const [checked, errorInfo] = this.checkStatus(error.response);

        return Promise.reject(errorInfo);

      },

    );

  }



  private checkStatus(

    response: AxiosResponse<any>,

  ): [boolean] | [boolean, ErrorInfo] {

    const { code, message = "" } = response?.data || {};

    const { headers, status } = response || {};



    if (!status) {

      return [false];

    }



    // 单地登录判断，弹出不同提示

    if (status === 401) {

      this.options?.goLogin();

      return [false];

    }



    if (code === "ECONNABORTED" && message?.indexOf("timeout") !== -1) {

      return [

        false,

        {

          message: "请求超时",

        },

      ];

    }



    if ([108, 109, 401].includes(code)) {

      this.options.goLogin();

      return [false];

    }

    if ((code >= 200 && code < 300) || code === 304) {

      // 如果http状态码正常，则直接返回数据

      return [true];

    }



    if (!code && ((status >= 200 && status < 300) || status === 304)) {

      return [true];

    }



    let errorInfo = "";

    const _code = code || status;

    switch (_code) {

      case -1:

        errorInfo = "远程服务响应失败,请稍后重试";

        break;

      case 400:

        errorInfo = "400: 错误请求";

        break;

      case 401:

        errorInfo = "401: 访问令牌无效或已过期";

        break;

      case 403:

        errorInfo = message || "403: 拒绝访问";

        break;

      case 404:

        errorInfo = "404: 资源不存在";

        break;

      case 405:

        errorInfo = "405: 请求方法未允许";

        break;

      case 408:

        errorInfo = "408: 请求超时";

        break;

      case 500:

        errorInfo = message || "500: 访问服务失败";

        break;

      case 501:

        errorInfo = "501: 未实现";

        break;

      case 502:

        errorInfo = "502: 无效网关";

        break;

      case 503:

        errorInfo = "503: 服务不可用";

        break;

      default:

        errorInfo = "连接错误";

    }



    return [

      false,

      {

        message: errorInfo,

        status: _code,

        traceId: response?.data?.requestId,

        version: response.data.ver,

      },

    ];

  }



  private handleFinish(key: string, index: number) {

    const promises = this.store.get(key);

    if (promises?.filter((item) => item).length === 1) {

      this.store.delete(key);

    } else if (promises && promises[index]) {

      promises[index] = null;

    }

  }



  private async handleRequest(config: any) {

    const hash = sha256.create();

    hash.update(

      JSON.stringify({

        params: config.params,

        data: config.data,

        url: config.url,

        method: config.method,

      }),

    );

    const fetchKey = hash.hex().slice(0, 40);

    const promises = this.store.get(fetchKey);

    const index = promises?.length || 0;

    let promise = promises?.find((item) => item);

    const controller = new AbortController();



    if (config.signal) {

      config.signal.onabort = (reason: any) => {

        const _promises = this.store.get(fetchKey)?.filter((item) => item);

        if (_promises?.length === 1) {

          controller.abort(reason);

          this.handleFinish(fetchKey, index);

        }

      };

    }



    if (!promise) {

      promise = this.instance({

        ...config,

        signal: controller.signal,

        headers: {

          ...config.headers,

          fetchKey,

        },

      }).catch((error) => {

        console.log(error, "请求错误");

        // 失败的话，立即删除，可以重试

        this.handleFinish(fetchKey, index);

        return { error };

      });

    }



    const newPromise = Promise.resolve(promise)

      .then((result: any) => {

        if (config.signal?.aborted) {

          this.handleFinish(fetchKey, index);

          return result;

        }

        return result;

      })

      .finally(() => {

        setTimeout(() => {

          this.handleFinish(fetchKey, index);

        }, 500);

      });

    this.store.set(fetchKey, [...(promises || []), newPromise]);

    return newPromise;

  }



  // add override type

  public async request<T = unknown, U extends MyRequestConfigs = {}>(

    url: string,

    config: U,

  ): Promise<RequestResult<T, U> | null> {

    // todo

    const options = {

      url,

      // 是否统一处理接口失败(提示)

      ifHandleError: true,

      ...config,

      headers: {

        ...this.options.getHeader(),

        ...config?.headers,

      },

    };



    const res = await this.handleRequest(options);



    if (!res) {

      return null;

    }



    if (res.error) {

      if (res.error.message && options.ifHandleError) {

        this.options.onerror(res.error);

      }

      throw new Error(res.error);

    }



    if (config.useOriginData) {

      return res;

    }



    if (config.headers?.feTraceId) {

      window.dispatchEvent(

        new CustomEvent<{ flush?: boolean }>(config.headers.feTraceId, {

          detail: {

            flush: config?.flushApiHook,

          },

        }),

      );

    }



    // 默认返回res.data

    return transformResponseValue(res.data)

  }

}



export type MyRequest = <T = unknown, U extends MyRequestConfigs = {}>(

  url: string,

  config: U,

) => Promise<RequestResult<T, U> | null>;



export default LmAxios;

utils.ts(这里主要用来处理utc时间，你可能用不到删除相关代码就好)

import moment from 'moment';



const timeReg =

  /^\d{4}([/:-])(1[0-2]|0?[1-9])\1(0?[1-9]|[1-2]\d|30|31)($|( |T)(?:[01]\d|2[0-3])(:[0-5]\d)?(:[0-5]\d)?(\..*\d)?Z?$)/;



export function formatTimeValue(time: string, format = 'YYYY-MM-DD HH:mm:ss') {

  if (typeof time === 'string' || typeof time === 'number') {

    if (timeReg.test(time)) {

      return moment(time).format(format);

    }

  }

  return time;

}



// 统一转化如参

export const updateObjTimeToUtc = (obj: any) => {

  if (typeof obj === 'string') {

    if (timeReg.test(obj)) {

      return moment(obj).utc().format();

    }

    return obj;

  }

  if (toString.call(obj) === '[object Object]') {

    const newObj: Record<string, any> = {};

    Object.keys(obj).forEach((key) => {

      newObj[key] = updateObjTimeToUtc(obj[key]);

    });

    return newObj;

  }

  if (toString.call(obj) === '[object Array]') {

    obj = obj.map((item: any) => updateObjTimeToUtc(item));

  }

  return obj;

};



const utcReg = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.*Z$/;



const transformResponseValue = (res: any) => {

  if (!res) {

    return res;

  }

  if (typeof res === 'string') {

    if (utcReg.test(res)) {

      return moment(res).format('YYYY-MM-DD HH:mm:ss');

    }

    return res;

  }

  if (toString.call(res) === '[object Object]') {

    const result: any = {};

    Object.keys(res).forEach((key) => {

      result[key] = transformResponseValue(res[key]);

    });

    return result;

  }

  if (toString.call(res) === '[object Array]') {

    return res.map((item: any) => transformResponseValue(item));

  }

  return res;

};

export default transformResponseValue;

3. Tinking打开后，可能出现error

需要关掉Thinking，重试

关掉Thinking即可提问（除非达到50次上限）

更多信息，请移步原文~

Hello，大家好，我是 Sunday

如果大家做过一段时间的前端开发，就会发现相比其他的技术圈而言，前端圈总显得 “乱” 的很。

因为，每隔几个月，圈里就会冒出一个“闪闪发光的全新 JavaScript 框架”，声称能解决你所有问题，并提供各种数据来证明它拥有：更快的性能！更简洁的语法！更多的牛批特性！

而对应的，很多同学都会开始 “追逐” 这些全新的框架，并大多数情况下都会得出一个统一的评论 “好牛批......”

但是，根据我的经验来看，通常情况下 过于追逐全新的框架，毫无意义。 特别是对于 前端初学者 而言，打好基础会更加的重要！

PS：我这并不是在反对新框架的创新，出现更多全新的框架，全新的创新方案肯定是好的。但是，我们需要搞清楚一点，这一个所谓的全新框架 究竟是创新，还是只是通过一个不同的方式，重复的造轮子？

全新的框架是追逐不完的

我们回忆一下，是不是很多所谓的全新框架，总是按照以下的方式在不断的轮回？

• 首先，网上出现了某个“全新 JS 框架”发布，并提供了：更小、更快、更优雅 的方案，从而吸引了大量关注


• 然后，很多技术人开始追捧，从 掘金、抖音、B 站 开始纷纷上线各种 “教程”


• 再然后，几乎就没有然后了。国内大厂不会轻易使用这种新的框架作为生产工具，因为大厂会更加看重框架的稳定性


• 最后，无非会出现两种结果，第一种就是：热度逐渐消退，最后停止维护。第二种就是：不断的适配何种业务场景，直到这种全新的框架也开始变得“臃肿不堪”，和它当年要打败的框架几乎一模一样。


• 重新开始轮回：另一个“热门”框架出现，整个循环再次启动。

Svelte 火了那么久，大家有见到过国内有多少公司在使用吗？可能有很多同学会说“国外有很多公司在使用 Svelte 呀？” 就算如此，它对比 Vue 、React、Angular（国外使用的不少） 市场占有率依然是寥寥无几的。并且大多数同学的主战场还不在国外。

很多框架只是语法层面发生了变化

咱们以一个 “点击计数” 的功能为例，分别来看下在 Vue、React、Svelte 三个框架中的实现（别问为啥没有 angular，问就是不会😂）

Vue3 实现

<template>

  <button @click="count++">点击了 {{ count }} 次</button>

</template>



<script setup>

import { ref } from 'vue';



const count = ref(0);

</script>

React 实现

import { useState } from 'react';



function Counter() {

  const [count, setCount] = useState(0);



  return (

    <button onClick={() => setCount(count + 1)}>

      点击了 {count} 次

    </button>

  );

}



export default Counter;

Svelte 实现

<script>

  let count = 0;

</script>



<button on:click={() => count += 1}>

  点击了 {count} 次

</button>

这三个版本的核心逻辑完全一样，只是语法不同。

那么这就意味着：如果换框架，都要重新学习这些新的语法细节（哪里要写冒号、哪里要写大括号、哪里要写中括号）。

如果你把时间都浪费着这些地方上（特别是前端初学者），是不是就意味着 毫无意义，浪费时间呢？

掌握好基础才是王道

如果我们去看了大量的 国内大厂的招聘面经之后，就会发现，无论是 校招 ｜｜ 社招，大厂的考察重点 永远不在框架，而在于 JS 基础、网络、算法、项目 这四个部分。至于你会的是 vue ｜｜ react 并没有那么重要！

PS：对于大厂来说 vue 和 react 都有不同的团队在使用。所以不用担心你学的框架是什么，这并不影响你进大厂

因此，掌握好基础就显得太重要了。

所以说：不用过于追逐新的技术框架。

针对于 在校生 而言 打好基础，练习算法，多去做更多有价值的项目，研究框架底层源码 ，并且一定要注意 练习表达，这才是对你将来校招最重要的事情！

而对于 社招的同学 而言 多去挖掘项目的重难点，尝试通过 输出知识的方式 帮助你更好的梳理技术。多去思考 技术如何解决业务问题，这才是关键！

你有遇到过同样的需求吗？告诉我你的第一想法。存 Session storage ？可以，但是我更建议你使用 router.replace 。

为什么建议使用 router.replace 而不是浏览器自带的存储空间呢？

增加实用性，你有没有考虑过这种场景，也就是当我筛选好之后进行搜索，我需要将它发给我的同事。当使用storage时是实现不了的，同事只会得到一个初始的页面。那我们将这个筛选结果放入url中是不是就可以解决这个问题了。

router.replace

先给大家介绍一下 router.replace 的用法吧。

router.replace 是 Vue Router 提供的一个方法，用于替换当前的历史记录条目。与 router.push 不同的是，replace 不会在浏览器历史记录中添加新记录，而是替换当前的记录。这对于需要在 URL 中保存状态但不想影响浏览器导航历史的场景非常有用。

// 假设我们正在使用 Vue 2 和 Vue Router

methods: {

  updateFilters(newFilters) {

    // 将筛选条件编码为查询字符串参数

    const query = {

      ...this.$route.query,

      ...newFilters,

    };



    // 使用 router.replace 更新 URL

    this.$router.replace({ query });

  }

}

在这个示例中，updateFilters 方法接收新的筛选条件，并将它们合并到当前的查询参数中。然后使用 router.replace 更新 URL，而不会在历史记录中添加新条目。

具体实现

将筛选条件转换为适合 URL 的格式，例如 JSON 字符串或简单的键值对。以下是一个更详细的实现：

methods: {

  applyFilters(filters) {

    const encodedFilters = JSON.stringify(filters);



    this.$router.replace({

      path: this.$route.path,

      query: { ...this.$route.query, filters: encodedFilters },

    });

  },



  getFiltersFromUrl() {

    const filters = this.$route.query.filters;

    return filters ? JSON.parse(filters) : {};

  }

}

在这个实现中，applyFilters 方法将筛选条件编码为 JSON 字符串，并将其存储在 URL 的查询参数中。getFiltersFromUrl 方法用于从 URL 中读取筛选条件，并将其解析回 JavaScript 对象。

注意事项

• 编码和解码：在将复杂对象存储到 URL 时，确保使用 encodeURIComponent 和 decodeURIComponent 来处理特殊字符。


• URL 长度限制：浏览器对 URL 长度有一定的限制，确保不要在 URL 中存储过多数据。


• 数据安全性：考虑 URL 中数据的敏感性，避免在 URL 中存储敏感信息。


• url重置：不要忘了在筛选条件重置时也将 url 重置，在取消筛选时同时去除 url 上的筛选。

一些其他的应用场景

小结

简单来说就是把你的 url 当成浏览器的 sessionstorage 了。其实这就是我上周收到的任务，当时我甚至纠结的是该用localStorage还是sessionStorage，忙活半天，不停转类型，然后在开周会我讲了下我的思路。我的tl便说出了我的问题，讲了更加详细的需求，我才开始尝试 router.replace ，又是一顿忙活。。

背景简介

我们日常开发中，经常会遇到点击一个按钮或者进行搜索时，请求接口的需求。

如果我们不做优化，连续点击按钮或者进行搜索，接口会重复请求。

首先，这会导致性能浪费！最重要的，如果接口响应比较慢，此时，我们在做其他操作会有一系列bug！

那么，我们该如何规避这种问题呢？

如何避免接口重复请求

防抖节流方式（不推荐）

使用防抖节流方式避免重复操作是前端的老传统了，不多介绍了

防抖实现

<template>

  <div>

    <button @click="debouncedFetchData">请求</button>

  </div>

</template>

<script setup>

import { ref } from 'vue';

import axios from 'axios';



const timeoutId = ref(null);



function debounce(fn, delay) {

  return function(...args) {

    if (timeoutId.value) clearTimeout(timeoutId.value);

    timeoutId.value = setTimeout(() => {

      fn(...args);

    }, delay);

  };

}



function fetchData() {

  axios.get('http://api/gcshi)  // 使用示例API

    .then(response => {

      console.log(response.data);

    })

}



const debouncedFetchData = debounce(fetchData, 300);

</script>

防抖（Debounce） ：

• 在setup函数中，定义了timeoutId用于存储定时器ID。


• debounce函数创建了一个闭包，清除之前的定时器并设置新的定时器，只有在延迟时间内没有新调用时才执行fetchData。


• debouncedFetchData是防抖后的函数，在按钮点击时调用。

节流实现

<template>

  <div>

    <button @click="throttledFetchData">请求</button>

  </div>

</template>

<script setup>

import { ref } from 'vue';

import axios from 'axios';



const lastCall = ref(0);



function throttle(fn, delay) {

  return function(...args) {

    const now = new Date().getTime();

    if (now - lastCall.value < delay) return;

    lastCall.value = now;

    fn(...args);

  };

}



function fetchData() {

  axios.get('http://api/gcshi')  //

    .then(response => {

      console.log(response.data);

    })

}



const throttledFetchData = throttle(fetchData, 1000);

</script>

节流（Throttle） ：

• 在setup函数中，定义了lastCall用于存储上次调用的时间戳。


• throttle函数创建了一个闭包，检查当前时间与上次调用时间的差值，只有大于设定的延迟时间时才执行fetchData。


• throttledFetchData是节流后的函数，在按钮点击时调用。

节流防抖这种方式感觉用在这里不是很丝滑，代码成本也比较高，因此，很不推荐！

请求锁定（加laoding状态）

请求锁定非常好理解，设置一个laoding状态，如果第一个接口处于laoding中，那么，我们不执行任何逻辑！

<template>

  <div>

    <button @click="fetchData">请求</button>

  </div>

</template>



<script setup>

import { ref } from 'vue';

import axios from 'axios';



const laoding = ref(false);



function fetchData() {

  // 接口请求中，直接返回，避免重复请求

  if(laoding.value) return

  laoding.value = true

  axios.get('http://api/gcshi')  //

    .then(response => {

      laoding.value = fasle

    })

}



const throttledFetchData = throttle(fetchData, 1000);

</script>

这种方式简单粗暴，十分好用！

但是也有弊端，比如我搜索A后，接口请求中；但我此时突然想搜B，就不会生效了，因为请求A还没响应！

因此，请求锁定这种方式无法取消原先的请求，只能等待一个请求执行完才能继续请求。

axios.CancelToken取消重复请求

基本用法

axios其实内置了一个取消重复请求的方法：axios.CancelToken，我们可以利用axios.CancelToken来取消重复的请求，爆好用！

首先，我们要知道，aixos有一个config的配置项，取消请求就是在这里面配置的。

<template>

  <div>

    <button @click="fetchData">请求</button>

  </div>

</template>



<script setup>

import { ref } from 'vue';

import axios from 'axios';



let cancelTokenSource = null;





function fetchData() {

  if (cancelTokenSource) {

    cancelTokenSource.cancel('取消上次请求');

    cancelTokenSource = null;

  }

  cancelTokenSource = axios.CancelToken.source();

  

  axios.get('http://api/gcshi',{cancelToken: cancelTokenSource.token})  //

    .then(response => {

      laoding.value = fasle

    })

}



</script>

我们测试下，如下图：可以看到，重复的请求会直接被终止掉！

CancelToken官网示例

官网使用方法传送门：http://www.axios-http.cn/docs/cancel…

const CancelToken = axios.CancelToken;

const source = CancelToken.source();



axios.get('/user/12345', {

  cancelToken: source.token

}).catch(function (thrown) {

  if (axios.isCancel(thrown)) {

    console.log('Request canceled', thrown.message);

  } else {

    // 处理错误

  }

});



axios.post('/user/12345', {

  name: 'new name'

}, {

  cancelToken: source.token

})



// 取消请求（message 参数是可选的）

source.cancel('Operation canceled by the user.');

也可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token：

const CancelToken = axios.CancelToken;

let cancel;



axios.get('/user/12345', {

  cancelToken: new CancelToken(function executor(c) {

    // executor 函数接收一个 cancel 函数作为参数

    cancel = c;

  })

});



// 取消请求

cancel();

注意: 可以使用同一个 cancel token 或 signal 取消多个请求。

在过渡期间，您可以使用这两种取消 API，即使是针对同一个请求：

const controller = new AbortController();



const CancelToken = axios.CancelToken;

const source = CancelToken.source();



axios.get('/user/12345', {

  cancelToken: source.token,

  signal: controller.signal

}).catch(function (thrown) {

  if (axios.isCancel(thrown)) {

    console.log('Request canceled', thrown.message);

  } else {

    // 处理错误

  }

});



axios.post('/user/12345', {

  name: 'new name'

}, {

  cancelToken: source.token

})



// 取消请求 (message 参数是可选的)

source.cancel('Operation canceled by the user.');

// 或

controller.abort(); // 不支持 message 参数

在 React Scan 的 github 有这么一张 gif 图片。当用户在页面上操作时，对应的组件会有一个闪烁，表示当前组件更新了。用这样的方式来排查程序的性能是一个很直观的方式。

根据 React Scan 自己的介绍，React Scan 可以 通过自动检测和突出显示导致性能问题的渲染。

Vue Scan

但是我主要使用 vue 来开发我的应用，看到这个功能非常眼馋，所以就动手自己做了一个 demo，目前也构建了一个 chrome 扩展，不过扩展仅支持识别 vue3 项目 现在已经支持 vue2 和 vue3 项目了。

项目地址：Vue Scan

简单介绍，Vue Scan 通过组件的 onBeforUpdate 钩子，当组件更新时，在组件对应位置绘制一个闪烁的边框。看起来的效果就像这样。

用法

我更推荐在开发环境使用它，Vue Scan 提供一个 vue plugin，允许你在 mount 之前注入相关的内容。

// vue3

import { createApp } from 'vue'

import VueScan, { type VueScanOptions } from 'z-vue-scan/src'



import App from './App.vue'



const app = createApp(App)

app.use<VueScanOptions>(VueScan, {})

app.mount('#app')

// vue2

import Vue from 'vue'

import VueScan, { type VueScanBaseOptions } from 'z-vue-scan/vue2'

import App from './App.vue'



Vue.use<VueScanBaseOptions>(VueScan, {})



new Vue({

  render: h => h(App),

}).$mount('#app')

浏览器扩展

如果你觉得看自己的网站没什么意思，那么我还构建了一个浏览器扩展，允许你注入相关方法到别人的 vue 程序中。

你可以在 Github Release 寻找一下最新版的安装包，然后解压安装到浏览器中。

安装完成后，你的扩展区域应该会多一个图标，点击之后会展开一个面板，允许你控制是否注入相关的内容。

这是如果你进入一个使用 vue 构建的网站，可以看控制台看到相关的信息，当你在页面交互时，页面应该也有相应的展示。

缺陷

就像 React Scan 的介绍中提到的，它能自动识别性能问题，单目前 Vue Scan 只是真实地反映组件的更新，并不会区分和识别此次更新是否有性能问题。

结语

通过观察网站交互时组件的更新状态，来尝试发现网站的性能问题，我觉得这是一个很好的方式。希望这个工具可以给大家带来一点乐趣和帮助。

// 解决白屏问题

app.whenReady().then(() => {

  // 将创建窗口的代码放在 `app.whenReady` 事件回调中，确保主进程启动完成后再创建窗口

  const mainWindow = new BrowserWindow({ show:false });

  // 加载页面

  mainWindow.loadURL('index.html');

  // 在 ready-to-show 事件中显示窗口

  mainWindow..once("ready-to-show", () => {

     mainWindow.show();

  });

});

app.whenReady().then(() => {

  // 将创建窗口的代码放在 `app.whenReady` 事件回调中，确保主进程启动完成后再创建窗口

  const mainWindow = new BrowserWindow({ show:false });

  // 加载页面

  mainWindow.loadURL(indexPage);

  // 通过 webContents 对应事件来处理窗口显示

  mainWindow.webContents.on("did-finish-load", () => {

     mainWindow.show();

  });

});

此方案与上述方案的唯一区别就是，第一个使用的是 BrowserWindow 的事件来处理，而此方案通过判断 BrowserWindow.webContents 这个对象，这个对象是 Electron 中用来渲染以及控制 Web 页面的，因此我们可以更直接的使用 did-finish-load 或者直接 dom-ready 这两个事件来判断页面是否加载完成，这两个 API 的含义相信前端开发者都不陌生，页面加载完成以及 DOM Ready 都是前端的概念，通过这种方式也是可以解决启动白屏的。

相关文档：BrowserWindow、webCotnents

最后解决完成的效果如下：

总结

从上图来看最终的效果还是不错的，当窗口出现的一瞬间页面就直接加载完成了，不过细心的小伙伴应该会发现，这个方案属于偷梁换柱，给用户的感觉是窗口出现的时候页面就有内容了，但是其实窗口没出现的时间是有空档期的，大概就是下面这个意思：

从上图以及实际效果来看，其实我们的启动时间是没有发生改变的，但是因为端上应用和我们纯 Web 应用的使用场景不同，它自身就是有应用的启动时间，所以空档期如果不长，这个方案的体验还是可以的。但是如果前面的空档期过长，那么可能就是 Electron 启动的时候加载资源过多造成的了，就需要其他优化方案了。由此也可以见得其实对于用户体验来说，可能我们的产品性能并不一定有提升，只要从场景出发从用户角度去考虑问题，其实就能提升整个应用的体验。

回归本篇文章，我们从问题入手分析了 Electron 启动白屏出现的原因并提供了对应的解决方案，笔者其实对 Electron 的开发也并不深入，只是解决了一个需求一个问题用文章做记录，欢迎大家交流心得，共同进步~

浏览器这种东西工程量很唬人，但是有了electron+webview我们就相当于只需要干组装的活就可以了，而且产品目标就是给自己玩，
成品的效果

😄本来想写成专业的技术博客，但是发现大家好像对那种密密麻麻，全是代码的技术博客不感兴趣，我就挑重点来写吧。

下载拦截功能

下载逻辑如果不做拦截处理的话，默认就是我们平常写web那种弹窗的方式，既然是浏览器肯定不能是那样的。
electron中可以监听BrowserWindow的页面下载事件，并把拿到的下载状态传给渲染线程，实现类似浏览器的下载器功能。

//这个global.WIN =   global.WIN = new BrowserWindow({ ...})

 global.WIN.webContents.session.on('will-download', (evt, item) => {

 //其他逻辑

       item.on('updated', (evt, state) => {

       //实时的下载进度传递给渲染线程

       })

 })

页面搜索功能

当时做这个功能的时候我就觉得完了，这个玩意看起来太麻烦了，还要有一个的功能这不是头皮发麻啊。

查资料和文档发现这个居然是webview内置的功能，瞬间压力小了很多，我们只需要出来ctrl+f的时候把搜索框弹出来这个UI就可以了，关键字变色和下一个都是内部已经实现好了的。

function toSearch() {

  let timer

  return () => {

    if (timer) {

      clearTimeout(timer)

    }



    timer = setTimeout(() => {

      if (keyword.value) {

        webviewRef.value.findInPage(keyword.value, { findNext: true })

      } else {

        webviewRef.value.stopFindInPage('clearSelection')

      }

    }, 200)

  }

}

  function closeSearch() {

  showSearch.value = false

  webviewRef.value.stopFindInPage('clearSelection')

}



function installFindPage(webview) {

  webviewRef.value = webview

  webviewRef.value.addEventListener('found-in-page', (e) => {

    current.value = e.result.activeMatchOrdinal

    total.value = e.result.matches

  })

}

当前标签页打开功能

就是因为chrome和edge这些浏览器每次使用的时候开非常多的标签，挤在一起，所以我想这个浏览器不能主动开标签，打开了一个标签后强制所有的标签都在当前标签覆盖。

app.on('web-contents-created', (event, contents) => {

  contents.setWindowOpenHandler((info) => {

    global.WIN?.webContents.send('webview-url-is-change')

    if (info.disposition === 'new-window') {

      return { action: 'allow' }

    } else {

      global.WIN?.webContents.send('webview-open-url', info.url)

      return { action: 'deny' }

    }

  })

})

渲染线程监听到webview-open-url后也就是tart="_blank"的情况，强制覆盖当前不打开新窗口

ipcRenderer.on('webview-open-url', (event, url) => {

  try {

    let reg = /http|https/g

    if (webviewRef.value && reg.test(url)) {

      webviewRef.value.src = url

    }

  } catch (err) {

    console.log(err)

  }

})

标签页切换功能

这里的切换是css的显示隐藏，借助了vue-router

这里我们看dom就能清晰的看出来。

地址栏功能

地址栏支持输入url直接访问链接、支持关键字直接打开收藏的网站、还支持关键字搜索。优先级1打开收藏的网页 2访问网站 3关键字搜索

function toSearch(keyword) {

    if (`${keyword}`.length === 0) {

      return false

    }

    // app搜索

    if (`${keyword}`.length < 20) {

      let item = null

      const list = [...deskList.value, ...ALL_DATA]

      for (let i = 0; i < list.length; i++) {

        if (

          list[i].title.toUpperCase().search(keyword.toUpperCase()) !== -1 &&

          list[i].type !== 'mini-component'

        ) {

          item = list[i]

          break

        }

      }

      if (item) {

        goApp(item)

        return false

      }

    }



    // 网页访问

    let url

    if (isUrl(keyword)) {

      if (!/^https?:\/\//i.test(keyword)) {

        url = 'http://' + keyword

      } else {

        url = keyword

      }

      goAppNewTab(url)

      return false

    } else {

      // 关键字搜索

      let searchEngine = localStorage.getItem('searchEngine')

      searchEngine = searchEngine || CONFIG.searchEngine

      url = searchEngine + keyword



      if (!router.hasRoute('search')) {

        router.addRoute({

          name: 'search',

          path: '/search',

          meta: {

            title: '搜索',

            color: 'var(--app-icon-bg)',

            icon: 'search.svg',

            size: 1

          },

          component: WebView

        })

        keepAliveInclude.value.push('search')

      }



      router.push({

        path: '/search',

        query: { url }

      })



      setTimeout(() => {

        Bus.$emit('toSearch', url)

      }, 20)

    }

  }

桌面图标任意位置拖动

这个问题困扰了我很久，因为它不像电脑桌面大小是固定的，浏览器可以全屏也可以小窗口，如果最开始是大窗口然后拖成小窗口，那么图标就看不到了。后来想到我干脆给个中间区域固定大小，就可以解决这个问题了。因为固定大小出来起来就方便多了。这个桌面是上下两层

//背景格子

    <div v-show="typeActive === 'me'" class="bg-boxs">

      <div

        v-for="(item, i) in 224"  //这里有点不讲究了直接写死了

        :key="item"

        class="bg-box"

        @dragenter="enter($event, { x: (i % 14) + 1, y: Math.floor(i / 14) + 1 })"

        @dragover="over($event)"

        @dragleave="leave($event)"

        @drop="drop($event)"

      ></div>

    </div>

 // 桌面层

 // ...

import { ref, computed } from 'vue'

import useDesk from '@/store/deskList'

import { storeToRefs } from 'pinia'



export default function useDrag() {

  const dragging = ref(null)

  const currentTarget = ref()

  const desk = useDesk()



  const { deskList } = storeToRefs(desk)

  const { setDeskList, updateDeskData } = desk



  function start(e, item) {

    e.target.classList.add('dragging')

    e.dataTransfer.effectAllowed = 'move'

    dragging.value = item

    currentTarget.value = e

    console.log('开始')

  }

  let timer2

  function end(e) {

    dragging.value = null

    e.target.classList.remove('dragging')

    setDeskList(deskList.value)



    if (timer2) {

      clearTimeout(timer2)

    }

    timer2 = setTimeout(() => {

      updateDeskData()

    }, 2000)

  }

  function over(e) {

    e.preventDefault()

  }



  let timer

  function enter(e, item) {

    e.dataTransfer.effectAllowed = 'move'

    if (timer) {

      clearTimeout(timer)

    }



    timer = setTimeout(() => {

      if (item?.x) {

        dragging.value.x = item.x

        dragging.value.y = item.y

      }

    }, 100)

  }

  function leave(e) {}



  function drop(e) {

    e.preventDefault()

  }



  return { start, end, over, enter, leave, drop }

}

东西太多了就先介绍这些了

安装包地址

github.com/jddk/aweb-b…

也可以到官网后aweb123.com 如何进入微软商店下载，mac版本因为文件大于100mb没有传上去所以暂时还用不了。

背景

前置文章：浏览器: cookie机制完全解析

在考虑token是否应该存储在cookie或localStorage中时，我们需要综合考虑安全性、便利性、两者的能力边界以及设计目的等因素。

安全性：

Cookies的优势:

Set-Cookie: token=abc123; HttpOnly;Secure;SameSite=Strict;Domain=example.com; Path=/

• HttpOnly：将 HttpOnly 属性设置为 true 可以防止 JavaScript 读取 cookie，从而有效防止 XSS（跨站脚本）攻击读取 token。这一特性使得 cookies 在敏感信息存储上更具安全性。


• Secure：设置 Secure 属性后，cookie 只会在 HTTPS 连接时发送，从而防止中间人攻击。这确保了即使有人截获请求，token 也不会被明文传输。


• SameSite：SameSite 属性减少了 CSRF（跨站请求伪造）攻击的风险，通过指示浏览器在同一站点请求时才发送 cookie。


• Domain 和 Path：这些属性限制了 cookie 的作用范围，例如仅在特定子域或者路径下生效，进一步提高安全性。

localStorage的缺点:

XSS 风险：localStorage 对 JavaScript 代码完全可见，这意味着如果应用存在 XSS 漏洞，攻击者即可轻易获取存储在 localStorage 中的 token。

能力层面

Cookies可以做到更前置更及时的页面访问控制，服务器可以在接收到页面请求时，立即通过读取 cookie 判断用户身份，返回响应的页面（例如重定向到登录页）。

// 示例：后端在接收到请求时可以立即判断 

if (!request.cookies.token) { 

response.redirect('/login'); 

}

和cookie相比 localStorage具有一定的滞后性，浏览器必须先加载 HTML 和 JavaScript资源，解析执行后 才能通过在localStorage取到数据后 经过ajax网络请求 发送给服务端判断用户身份，这种方式有滞后性，可能导致临时显示不正确的内容。

管理的便利性

Cookies是由服务端设置的 由浏览器自动管理生命周期的一种方式

服务器可以直接通过 HTTP 响应头设置 cookie，浏览器会自动在后续请求中携带，无需在客户端手动添加。减少了开发和维护负担，且降低了人为错误的风险。

localStorage需要客户端手动管理

使用 localStorage 需要在客户端代码管理 token，你得确保在每个请求中手动添加和删除token，增加了代码复杂度及出错的可能性。

设计目的：

HTTP协议是无状态的 一个用户第二次请求和一个新用户第一次请求 服务端是识别不出来的，cookie是为了让服务端记住客户端而被设计的。

Cookie 设计的初衷就是帮助服务器标识用户的会话状态（如登录状态），因而有很多内建的安全和管理机制，使其特别适合承载 token 等这些用户状态的信息。

localStorage 主要用于存储客户端关心的、较大体积的数据（如用户设置、首选项等），而不是设计来存储需要在每次请求时使用的认证信息。

总结

在大多数需要处理用户身份认证的应用中，将 token 存储在设置了合适属性的 cookie 中，不仅更安全，还更符合 cookie 的设计目的。

通过 HTTP 响应头由服务端设置并自动管理，极大简化了客户端代码，并确保在未经身份验证的情况下阻断对敏感页面的访问。

因此 我认为 在大多数情况下，将 token 存储在 cookies 中更为合理和安全。

补充

然鹅 现实的业务场景往往是复杂多变的 否则也不会有token应该存储在cookie还是localStorage上？这个问题出现了。

localStorage更具灵活性: 不同应用有不同的安全需求，有时 localStorage 可以提供更加灵活和精细化的控制。 开发者可以在 JavaScript 中手动管理 localStorage，包括在每次请求时显式设置认证信息。这种 灵活性 对于一些高级用例和性能优化场景可能非常有用。

所以一般推荐使用cookie 但是在合适的场景下使用localStorage完全没问题。

• 为什么 MCP 是一个突破
  
  
  
  
  • MCP 官方集成教学：
  
  
  • 🎖️ 第三方平台官方支持 MCP 的例子
  
  
  • 🌎 社区 MCP 服务器
  
  
  
  


• 为什么是 MCP？
  
  
  
  
  • Function Calling
  
  
  • Model Context Protocol (MCP)
  
  
  • AI Agent
  
  
  • 思考
  
  
  
  


• MCP 如何工作
  
  
  
  
  • MCP Server 的工作原理
  
  
  
  


• 如何使用 MCP


• MCP 的一些资源
  
  
  
  
  • MCP 官方资源
  
  
  • 社区的 MCP Server 的列表
  
  
  
  


• 写在最后


• References

过去快一年的时间没有更新 AI 相关的博客，一方面是在忙 side project，另外一方面也是因为 AI 技术虽然日新月异，但是 AI 应用层的开发并没有多少新的东西，大体还是2023年的博客讲的那三样，Prompt、RAG、Agent。

但是自从去年 11 月底 Claude(Anthropic) 主导发布了 MCP(Model Context Protocol 模型上下文协议) 后，AI 应用层的开发算是进入了新的时代。

不过关于 MCP 的解释和开发，目前似乎还没有太多的资料，所以笔者决定将自己的一些经验和思考整理成一篇文章，希望能够帮助到大家。

为什么 MCP 是一个突破

我们知道过去一年时间，AI 模型的发展非常迅速，从 GPT 4 到 Claude Sonnet 3.5 到 Deepseek R1，推理和幻觉都进步的非常明显。

新的 AI 应用也很多，但我们都能感受到的一点是，目前市场上的 AI 应用基本都是全新的服务，和我们原来常用的服务和系统并没有集成，换句话说，AI 模型和我们已有系统集成发展的很缓慢。

例如我们目前还不能同时通过某个 AI 应用来做到联网搜索、发送邮件、发布自己的博客等等，这些功能单个实现都不是很难，但是如果要全部集成到一个系统里面，就会变得遥不可及。

如果你还没有具体的感受，我们可以思考一下日常开发中，想象一下在 IDE 中，我们可以通过 IDE 的 AI 来完成下面这些工作。

• 询问 AI 来查询本地数据库已有的数据来辅助开发


• 询问 AI 搜索 Github Issue 来判断某问题是不是已知的bug


• 通过 AI 将某个 PR 的意见发送给同事的即时通讯软件(例如 Slack)来 Code Review


• 通过 AI 查询甚至修改当前 AWS、Azure 的配置来完成部署

以上谈到的这些功能通过 MCP 目前正在变为现实，大家可以关注 Cursor MCP 和 Windsurf MCP 获取更多的信息。可以试试用 Cursor MCP + browsertools 插件来体验一下在 Cursor 中自动获取 Chrome dev tools console log 的能力。

为什么 AI 集成已有服务的进展这么缓慢？这里面有很多的原因，一方面是企业级的数据很敏感，大多数企业都要很长的时间和流程来动。另一个方面是技术方面，我们缺少一个开放的、通用的、有共识的协议标准。

MCP 就是 Claude(Anthropic) 主导发布的一个开放的、通用的、有共识的协议标准，如果你是一个对 AI 模型熟悉的开发人员，想必对 Anthropic 这个公司不会陌生，他们发布了 Claude 3.5 Sonnet 的模型，到目前为止应该还是最强的编程 AI 模型(刚写完就发布了 3.7😅)。

这里还是要多提一句，这个协议的发布最好机会应该是属于 OpenAI 的，如果 OpenAI 刚发布 GPT 时就推动协议，相信大家都不会拒绝，但是 OpenAI 变成了 CloseAI，只发布了一个封闭的 GPTs，这种需要主导和共识的标准协议一般很难社区自发形成，一般由行业巨头来主导。

Claude 发布了 MCP 后，官方的 Claude Desktop 就开放了 MCP 功能，并且推动了开源组织 Model Context Protocol，由不同的公司和社区进行参与，例如下面就列举了一些由不同组织发布 MCP 服务器的例子。

MCP 官方集成教学：

• Git - Git 读取、操作、搜索。


• GitHub - Repo 管理、文件操作和 GitHub API 集成。


• Google Maps - 集成 Google Map 获取位置信息。


• PostgreSQL - 只读数据库查询。


• Slack - Slack 消息发送和查询。

🎖️ 第三方平台官方支持 MCP 的例子

由第三方平台构建的 MCP 服务器。

• Grafana - 在 Grafana 中搜索查询数据。


• JetBrains – JetBrains IDEs。


• Stripe - 与Stripe API交互。

🌎 社区 MCP 服务器

下面是一些由开源社区开发和维护的 MCP 服务器。

• AWS - 用 LLM 操作 AWS 资源。


• Atlassian - 与 Confluence 和 Jira 进行交互，包括搜索/查询 Confluence 空间/页面，访问 Jira Issue 和项目。


• Google Calendar - 与 Google 日历集成，日程安排，查找时间，并添加/删除事件。


• Kubernetes - 连接到 Kubernetes 集群并管理 pods、deployments 和 services。


• X (Twitter)  - 与 Twitter API 交互。发布推文并通过查询搜索推文。


• YouTube - 与 YouTube API 集成，视频管理、短视频创作等。

为什么是 MCP？

看到这里你可能有一个问题，在 23 年 OpenAI 发布 GPT function calling 的时候，不是也是可以实现类似的功能吗？我们之前博客介绍的 AI Agent，不就是用来集成不同的服务吗？为什么又出现了 MCP。

function calling、AI Agent、MCP 这三者之间有什么区别？

Function Calling

• Function Calling 指的是 AI 模型根据上下文自动执行函数的机制。


• Function Calling 充当了 AI 模型与外部系统之间的桥梁，不同的模型有不同的 Function Calling 实现，代码集成的方式也不一样。由不同的 AI 模型平台来定义和实现。

如果我们使用 Function Calling，那么需要通过代码给 LLM 提供一组 functions，并且提供清晰的函数描述、函数输入和输出，那么 LLM 就可以根据清晰的结构化数据进行推理，执行函数。

Function Calling 的缺点在于处理不好多轮对话和复杂需求，适合边界清晰、描述明确的任务。如果需要处理很多的任务，那么 Function Calling 的代码比较难维护。

Model Context Protocol (MCP)

• MCP 是一个标准协议，如同电子设备的 Type C 协议(可以充电也可以传输数据)，使 AI 模型能够与不同的 API 和数据源无缝交互。


• MCP 旨在替换碎片化的 Agent 代码集成，从而使 AI 系统更可靠，更有效。通过建立通用标准，服务商可以基于协议来推出它们自己服务的 AI 能力，从而支持开发者更快的构建更强大的 AI 应用。开发者也不需要重复造轮子，通过开源项目可以建立强大的 AI Agent 生态。


• MCP 可以在不同的应用/服务之间保持上下文，从而增强整体自主执行任务的能力。

可以理解为 MCP 是将不同任务进行分层处理，每一层都提供特定的能力、描述和限制。而 MCP Client 端根据不同的任务判断，选择是否需要调用某个能力，然后通过每层的输入和输出，构建一个可以处理复杂、多步对话和统一上下文的 Agent。

AI Agent

• AI Agent 是一个智能系统，它可以自主运行以实现特定目标。传统的 AI 聊天仅提供建议或者需要手动执行任务，AI Agent 则可以分析具体情况，做出决策，并自行采取行动。


• AI Agent 可以利用 MCP 提供的功能描述来理解更多的上下文，并在各种平台/服务自动执行任务。

思考

为什么 Claude 推出 MCP 后会被广泛接受呢？其实在过去的一年中我个人也参与了几个小的 AI 项目的开发工作，在开发的过程中，将 AI 模型集成现有的系统或者第三方系统确实挺麻烦。

虽然市面上有一些框架支持 Agent 开发，例如 LangChain Tools, LlamaIndex 或者是 Vercel AI SDK。

LangChain 和 LlamaIndex 虽然都是开源项目，但是整体发展还是挺混乱的，首先是代码的抽象层次太高了，想要推广的都是让开发人员几行代码就完成某某 AI 功能，这在 Demo 阶段是挺好用的，但是在实际开发中，只要业务一旦开始复杂，糟糕的代码设计带来了非常糟糕的编程体验。还有就是这几个项目都太想商业化了，忽略了整体生态的建设。

还有一个就是 Vercel AI SDK，尽管个人觉得 Vercel AI SDK 代码抽象的比较好，但是也只是对于前端 UI 结合和部分 AI 功能的封装还不错，最大的问题是和 Nextjs 绑定太深了，对其它的框架和语言支持度不够。

所以 Claude 推动 MCP 可以说是一个很好的时机，首先是 Claude Sonnet 3.5 在开发人员心中有较高的地位，而 MCP 又是一个开放的标准，所以很多公司和社区都愿意参与进来，希望 Claude 能够一直保持一个良好的开放生态。

MCP 对于社区生态的好处主要是下面两点：

• 开放标准给服务商，服务商可以针对 MCP 开放自己的 API 和部分能力。


• 不需要重复造轮子，开发者可以用已有的开源 MCP 服务来增强自己的 Agent。

MCP 如何工作

那我们来介绍一下 MCP 的工作原理。首先我们看一下官方的 MCP 架构图。

总共分为了下面五个部分：

• MCP Hosts: Hosts 是指 LLM 启动连接的应用程序，像 Cursor, Claude Desktop、Cline 这样的应用程序。


• MCP Clients: 客户端是用来在 Hosts 应用程序内维护与 Server 之间 1:1 连接。


• MCP Servers: 通过标准化的协议，为 Client 端提供上下文、工具和提示。


• Local Data Sources: 本地的文件、数据库和 API。


• Remote Services: 外部的文件、数据库和 API。

整个 MCP 协议核心的在于 Server，因为 Host 和 Client 相信熟悉计算机网络的都不会陌生，非常好理解，但是 Server 如何理解呢？

看看 Cursor 的 AI Agent 发展过程，我们会发现整个 AI 自动化的过程发展会是从 Chat 到 Composer 再进化到完整的 AI Agent。

AI Chat 只是提供建议，如何将 AI 的 response 转化为行为和最终的结果，全部依靠人类，例如手动复制粘贴，或者进行某些修改。

AI Composer 是可以自动修改代码，但是需要人类参与和确认，并且无法做到除了修改代码之外的其它操作。

AI Agent 是一个完全的自动化程序，未来完全可以做到自动读取 Figma 的图片，自动生产代码，自动读取日志，自动调试代码，自动 push 代码到 GitHub。

而 MCP Server 就是为了实现 AI Agent 的自动化而存在的，它是一个中间层，告诉 AI Agent 目前存在哪些服务，哪些 API，哪些数据源，AI Agent 可以根据 Server 提供的信息来决定是否调用某个服务，然后通过 Function Calling 来执行函数。

MCP Server 的工作原理

我们先来看一个简单的例子，假设我们想让 AI Agent 完成自动搜索 GitHub Repository，接着搜索 Issue，然后再判断是否是一个已知的 bug，最后决定是否需要提交一个新的 Issue 的功能。

那么我们就需要创建一个 Github MCP Server，这个 Server 需要提供查找 Repository、搜索 Issues 和创建 Issue 三种能力。

我们直接来看看代码：

const server = new Server(

  {

    name: "github-mcp-server",

    version: VERSION,

  },

  {

    capabilities: {

      tools: {},

    },

  }

);



server.setRequestHandler(ListToolsRequestSchema, async () => {

  return {

    tools: [

      {

        name: "search_repositories",

        description: "Search for GitHub repositories",

        inputSchema: zodToJsonSchema(repository.SearchRepositoriesSchema),

      },

      {

        name: "create_issue",

        description: "Create a new issue in a GitHub repository",

        inputSchema: zodToJsonSchema(issues.CreateIssueSchema),

      },

      {

        name: "search_issues",

        description: "Search for issues and pull requests across GitHub repositories",

        inputSchema: zodToJsonSchema(search.SearchIssuesSchema),

      }

    ],

  };

});



server.setRequestHandler(CallToolRequestSchema, async (request) => {

  try {

    if (!request.params.arguments) {

      throw new Error("Arguments are required");

    }



    switch (request.params.name) {

      case "search_repositories": {

        const args = repository.SearchRepositoriesSchema.parse(request.params.arguments);

        const results = await repository.searchRepositories(

          args.query,

          args.page,

          args.perPage

        );

        return {

          content: [{ type: "text", text: JSON.stringify(results, null, 2) }],

        };

      }



      case "create_issue": {

        const args = issues.CreateIssueSchema.parse(request.params.arguments);

        const { owner, repo, ...options } = args;

        const issue = await issues.createIssue(owner, repo, options);

        return {

          content: [{ type: "text", text: JSON.stringify(issue, null, 2) }],

        };

      }



      case "search_issues": {

        const args = search.SearchIssuesSchema.parse(request.params.arguments);

        const results = await search.searchIssues(args);

        return {

          content: [{ type: "text", text: JSON.stringify(results, null, 2) }],

        };

      }



      default:

        throw new Error(`Unknown tool: ${request.params.name}`);

    }

  } catch (error) {}

});



async function runServer() {

  const transport = new StdioServerTransport();

  await server.connect(transport);

  console.error("GitHub MCP Server running on stdio");

}



runServer().catch((error) => {

  console.error("Fatal error in main():", error);

  process.exit(1);

});

上面的代码中，我们通过 server.setRequestHandler 来告诉 Client 端我们提供了哪些能力，通过 description 字段来描述这个能力的作用，通过 inputSchema 来描述完成这个能力需要的输入参数。

我们再来看看具体的实现代码：

export const SearchOptions = z.object({

  q: z.string(),

  order: z.enum(["asc", "desc"]).optional(),

  page: z.number().min(1).optional(),

  per_page: z.number().min(1).max(100).optional(),

});



export const SearchIssuesOptions = SearchOptions.extend({

  sort: z.enum([

    "comments",

    ...

  ]).optional(),

});



export async function searchUsers(params: z.infer<typeof SearchUsersSchema>) {

  return githubRequest(buildUrl("https://api.github.com/search/users", params));

}



export const SearchRepositoriesSchema = z.object({

  query: z.string().describe("Search query (see GitHub search syntax)"),

  page: z.number().optional().describe("Page number for pagination (default: 1)"),

  perPage: z.number().optional().describe("Number of results per page (default: 30, max: 100)"),

});



export async function searchRepositories(

  query: string,

  page: number = 1,

  perPage: number = 30

) {

  const url = new URL("https://api.github.com/search/repositories");

  url.searchParams.append("q", query);

  url.searchParams.append("page", page.toString());

  url.searchParams.append("per_page", perPage.toString());



  const response = await githubRequest(url.toString());

  return GitHubSearchResponseSchema.parse(response);

}

可以很清晰的看到，我们最终实现是通过了 https://api.github.com 的 API 来实现和 Github 交互的，我们通过 githubRequest 函数来调用 GitHub 的 API，最后返回结果。

在调用 Github 官方的 API 之前，MCP 的主要工作是描述 Server 提供了哪些能力(给 LLM 提供)，需要哪些参数(参数具体的功能是什么)，最后返回的结果是什么。

所以 MCP Server 并不是一个新颖的、高深的东西，它只是一个具有共识的协议。

如果我们想要实现一个更强大的 AI Agent，例如我们想让 AI Agent 自动的根据本地错误日志，自动搜索相关的 GitHub Repository，然后搜索 Issue，最后将结果发送到 Slack。

那么我们可能需要创建三个不同的 MCP Server，一个是 Local Log Server，用来查询本地日志；一个是 GitHub Server，用来搜索 Issue；还有一个是 Slack Server，用来发送消息。

AI Agent 在用户输入 我需要查询本地错误日志，将相关的 Issue 发送到 Slack 指令后，自行判断需要调用哪些 MCP Server，并决定调用顺序，最终根据不同 MCP Server 的返回结果来决定是否需要调用下一个 Server，以此来完成整个任务。

如何使用 MCP

如果你还没有尝试过如何使用 MCP 的话，我们可以考虑用 Cursor(本人只尝试过 Cursor)，Claude Desktop 或者 Cline 来体验一下。

当然，我们并不需要自己开发 MCP Servers，MCP 的好处就是通用、标准，所以开发者并不需要重复造轮子（但是学习可以重复造轮子）。

首先推荐的是官方组织的一些 Server：官方的 MCP Server 列表。

目前社区的 MCP Server 还是比较混乱，有很多缺少教程和文档，很多的代码功能也有问题，我们可以自行尝试一下 Cursor Directory 的一些例子，具体的配置和实战笔者就不细讲了，大家可以参考官方文档。

MCP 的一些资源

下面是个人推荐的一些 MCP 的资源，大家可以参考一下。

MCP 官方资源

• 官方的开源组织 Model Context Protocol。


• 官方的文档 modelcontextprotocol。


• 官方的 MCP Server 列表


• Claude Blog

社区的 MCP Server 的列表

• Cursor Directory


• Pulsemcp


• Glama MCP Servers

写在最后

本篇文章写的比较仓促，如果有错误再所难免，欢迎各位大佬指正。

最后本篇文章可以转载，但是请注明出处，会在 X/Twitter，小红书, 微信公众号 同步发布，欢迎各位大佬关注一波。

References

• guangzhengli.com/blog/zh/gpt…


• docs.cursor.com/context/mod…


• http://www.youtube.com/watch?v=Y_k…


• browsertools.agentdesk.ai/installatio…


• github.com/modelcontex…


• github.com/grafana/mcp…


• github.com/JetBrains/m…


• github.com/stripe/agen…


• github.com/rishikaviko…


• github.com/sooperset/m…


• github.com/v-3/google-…


• github.com/Flux159/mcp…


• github.com/EnesCinr/tw…


• github.com/ZubeidHendr…


• http://www.langchain.com/


• docs.llamaindex.ai/en/stable/


• sdk.vercel.ai/docs/introd…


• modelcontextprotocol.io/introductio…


• github.com/cline/cline


• github.com/modelcontex…


• http://www.anthropic.com/news/model-…


• cursor.directory


• http://www.pulsemcp.com/


• glama.ai/mcp/servers

The Ultimate Guide to MCP

相关系列文章推荐

• The Ultimate Guide to MCP


• GPT 应用开发和思考


• 向量数据库

需求交代

最近我们项目组开发了个互联网采集的功能，也就是后端合理抓取了第三方的文章，数据结构大致如下：

<h1>前端人</h1>

<p>学好前端，走遍天下都不怕</p>

数据抓取到后，存储到数据库，然后前端请求接口获取到数据，直接在页面预览

<div v-html='articleContent'></div>

整个需求已经交代清楚

这个需求有点为难后端了

前天，客户说要新增一个文章的pdf导出功能，但就是这么一个合情合理的需求，却把后端为难住了，原因是部分数据采集过来的结构可能是这样的：

<h1>前端人</h1>

<p>学好前端，走遍天下都不怕</p>

<div>前端强，前端狂，交互特效我称王！</div

<p>JS 写得好，需求改不了！</p>

<p>React Vue 两手抓，高薪 offer 到你家！</p>

<p>浏览器里横着走， bug 见我都绕道！</p>

<p>Chrome 调试一声笑， IE 泪洒旧时光！</p>

<span>Git 提交不留情，版本回退我最行！

仔细的人就能发现问题了，很多html元素存在没有完整的闭合情况

但浏览器是强大的，丝毫不影响渲染效果，原来浏览器自动帮我们补全结构了

可后端处理这件事就没那么简单了，爬取到的数据也比我举例的要复杂的多，使用第三方插件将html转pdf时会识别标签异常等问题，因此程序会抛异常

来自后端的建议

苦逼的后端折腾了很久，还是没折腾出来，终于他发现前端页面有个右键打印的功能，也就是：

于是他说：浏览器这玩意整挺好啊，前端能不能研究研究，尝试从前端实现导出

那就研究研究

我印象中，确实有个叫vue-print-nb的前端插件，可以实现这个功能

但.......等等，这个插件仅仅是唤起打印的功能，我总不能真做成这样，让用户另存为pdf吧

于是，只能另辟蹊径，终于我找到了这么个仓库：github.com/burc-li/vue…

里面实现了dom元素导出pdf的功能

效果很不错，技术用到了jspdf、html2canvas这两个第三方库，代码十分简单

const downLoadPdfA4Single = () => {

  const pdfContaniner = document.querySelector('#pdfContaniner')

  html2canvas(pdfContaniner).then(canvas => {

    // 返回图片dataURL，参数：图片格式和清晰度(0-1)

    const pageData = canvas.toDataURL('image/jpeg', 1.0)



    // 方向纵向，尺寸ponits，纸张格式 a4 即 [595.28, 841.89]

    const A4Width = 595.28

    const A4Height = 841.89 // A4纸宽

    const pageHeight = A4Height >= A4Width * canvas.height / canvas.width ? A4Height :  A4Width * canvas.height / canvas.width

    const pdf = new jsPDF('portrait', 'pt', [A4Width, pageHeight])



    // addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩

    pdf.addImage(

      pageData,

      'JPEG',

      0,

      0,

      A4Width,

      A4Width * canvas.height / canvas.width,

    )

    pdf.save('下载一页PDF（A4纸）.pdf')

  })

}

技术流程大致就是：

• dom -> canvas


• canvas -> image


• image -> pdf

似乎一切都将水到渠成了

困在眼前的难题

这个技术栈，最核心的就是：必须要用到dom元素渲染

如果你尝试将打印的元素设置样式：

display: none;

或

visibility: hidden;

或

opacity: 0;

执行导出功能都将抛异常或者只能导出一个空白的pdf

这时候有人会问了：为什么要设置dom元素为不可见？

试想一下，你做了一个导出功能，总不能让客户必须先打开页面等html渲染完后，再导出吧？

客户的理想状态是：在列表的操作列里，有个导出按钮，点击就可以导出pdf了

何况还需要实现批量勾选导出的功能，总不能程序控制，导出一个pdf就open一个窗口渲染html吧

寻找新方法

此路不通，就只能重新寻找新的方向，不过也没费太多功夫，就找到了另外一个插件html2pdf.js解决了这事

这插件用起来也极其简单

npm install html2pdf.js

<template>

  <div class="container">

    <button @click="generatePDF">下载PDF</button>

  </div>

</template>

<script setup>

import html2pdf from 'html2pdf.js'



// 使用示例

let element = `

  <h1>前端人</h1>

  <p>学好前端，走遍天下都不怕</p>

  <div>前端强，前端狂，交互特效我称王！</div

  <p>JS 写得好，需求改不了！</p>

  <p>React Vue 两手抓，高薪 offer 到你家！</p>

  <p>浏览器里横着走， bug 见我都绕道！</p>

  <p>Chrome 调试一声笑， IE 泪洒旧时光！</p>

  <span>Git 提交不留情，版本回退我最行！

`;



function generatePDF() {

    // 配置选项

    const opt = {

      margin:       10,

      filename:     'hello_world.pdf',

      image:        { type: 'jpeg', quality: 0.98 },

      html2canvas:  { scale: 2 },

      jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }

    };

    // 生成PDF并导出

    html2pdf().from(element).set(opt).save();

}

</script>

功能正常，似乎一切都完美

问题没有想的那么简单

如果我们的html是纯文本元素，这程序跑起来没有任何问题，但我们抓取的信息都源于互联网，html结构怎么可能会这么简单？如果我们的html中包含图片信息，例如：

// 使用示例

let element = `

  <div>

    <img src='http://t13.baidu.com/it/u=2041049195,1001882902&fm=224&app=112&f=JPEG?w=500&h=500' style="width: 300px;" />

    <p>职业：前端</p>

    <p>技能：唱、跳、rap</p>

  </div>

`;

此时你会发现，导出来的pdf，图片占位处是个空白块

思考一下：类似案例中的图片加载方式，都是get方式的异步请求，而异步请求就会导致图片还没渲染完成，但导出的程序已经执行完成情况（最直接的观察方式就是，把这个元素放到浏览器上渲染，会发现图片也是过一会才慢慢加载完成的）

不过我不确定html2pdf.js这个插件是否会发起图片请求，但不管发不发起，导出的行为明显是在图片渲染前完成的，就导致了这个空白块的存在

问题分析完了，那就解决吧

既然图片异步加载不行，那就使用图片同步加载吧

不是吧，你问我：什么是图片同步加载？我也不晓得，这个词是我自己当下凭感觉造的，如有雷同，纯属巧合了

那我理解的图片同步加载是什么意思呢？简单来说，就是将图片转成Base64，因为这种方式，即使说无网的情况也能正常加载图片，因此我凭感觉断定，这就是图片同步加载

基于这个思路，我写了个demo

<template>

  <div class="container">

    <button @click="generatePDF">下载PDF</button>

  </div>

</template>

<script setup>

import html2pdf from 'html2pdf.js'



async function convertImagesToBase64(htmlString) {

  // 创建一个临时DOM元素来解析HTML

  const tempDiv = document.createElement('div');

  tempDiv.innerHTML = htmlString;



  // 获取所有图片元素

  const images = tempDiv.querySelectorAll('img');



  // 遍历每个图片并转换

  for (const img of images) {

    try {

      const base64 = await getBase64FromUrl(img.src);

      img.src = base64;

    } catch (error) {

      console.error(`无法转换图片 ${img.src}:`, error);

      // 保留原始URL如果转换失败

    }

  }



  // 返回转换后的HTML

  return tempDiv.innerHTML;

}



// 图片转base64

function getBase64FromUrl(url) {

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

    const img = new Image();

    img.crossOrigin = 'Anonymous'; // 处理跨域问题



    img.onload = () => {

      const canvas = document.createElement('canvas');

      canvas.width = img.width;

      canvas.height = img.height;



      const ctx = canvas.getContext('2d');

      ctx.drawImage(img, 0, 0);



      // 获取Base64数据

      const dataURL = canvas.toDataURL('image/png');

      resolve(dataURL);

    };



    img.onerror = () => {

      reject(new Error('图片加载失败'));

    };



    img.src = url;

  });

}



// 使用示例

let element = `

  <div>

    <img src='http://t13.baidu.com/it/u=2041049195,1001882902&fm=224&app=112&f=JPEG?w=500&h=500' style="width: 300px;" />

    <p>职业：前端</p>

    <p>技能：唱、跳、rap</p>

  </div>

`;



function generatePDF() {

  convertImagesToBase64(element)

  .then(convertedHtml => {

    // 配置选项

    const opt = {

      margin:       10,

      filename:     '前端大法好.pdf',

      image:        { type: 'jpeg', quality: 0.98 },

      html2canvas:  { scale: 2 },

      jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }

    };



    // 生成PDF并导出

    html2pdf().from(convertedHtml).set(opt).save();

  })

  .catch(error => {

    console.error('转换过程中出错:', error);

  });

}

</script>

此时就大功告成啦！不过得提一句：图片的URL链接必须是同源或者允许跨越的，否则就会存在图片加载异常的问题

修复图片过大的问题

部分图片的宽度会过大，导致图片加载不全的问题，这在预览的情况下也存在

因为需要加上样式限定

img {

  max-width: 100%;

  max-height: 100%;

  vertical-align: middle;

  height: auto !important;

  width: auto !important;

  margin: 10px 0;

}

这样就正常啦

故此需要在导出pdf前，给元素添加一个图片的样式限定

element =`<style>

img {

  max-width: 100%;

  max-height: 100%;

  vertical-align: middle;

  height: auto !important;

  width: auto !important;

  margin: 10px 0;

}

</style>` + element;

完整代码：

<template>

  <div class="container">

    <button @click="generatePDF">下载PDF</button>

  </div>

</template>

<script setup>

import html2pdf from 'html2pdf.js'

async function convertImagesToBase64(htmlString) {

  // 创建一个临时DOM元素来解析HTML

  const tempDiv = document.createElement('div');

  tempDiv.innerHTML = htmlString;



  // 获取所有图片元素

  const images = tempDiv.querySelectorAll('img');



  // 遍历每个图片并转换

  for (const img of images) {

    try {

      const base64 = await getBase64FromUrl(img.src);

      img.src = base64;

    } catch (error) {

      console.error(`无法转换图片 ${img.src}:`, error);

      // 保留原始URL如果转换失败

    }

  }



  // 返回转换后的HTML

  return tempDiv.innerHTML;

}

// 图片转base64

function getBase64FromUrl(url) {

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

    const img = new Image();

    img.crossOrigin = 'Anonymous'; // 处理跨域问题



    img.onload = () => {

      const canvas = document.createElement('canvas');

      canvas.width = img.width;

      canvas.height = img.height;



      const ctx = canvas.getContext('2d');

      ctx.drawImage(img, 0, 0);



      // 获取Base64数据

      const dataURL = canvas.toDataURL('image/png');

      resolve(dataURL);

    };



    img.onerror = () => {

      reject(new Error('图片加载失败'));

    };



    img.src = url;

  });

}



// 使用示例

let element = `

  <div>

    <img src='http://t13.baidu.com/it/u=2041049195,1001882902&fm=224&app=112&f=JPEG?w=500&h=500' style="width: 300px;" />

    <p>职业：前端</p>

    <p>技能：唱、跳、rap</p>

  </div>

`;



function generatePDF() {

  element =`<style>

  img {

      max-width: 100%;

      max-height: 100%;

      vertical-align: middle;

      height: auto !important;

      width: auto !important;

      margin: 10px 0;

    }

  </style>` + element;

  convertImagesToBase64(element)

  .then(convertedHtml => {

    // 配置选项

    const opt = {

      margin:       10,

      filename:     '前端大法好.pdf',

      image:        { type: 'jpeg', quality: 0.98 },

      html2canvas:  { scale: 2 },

      jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }

    };



    // 生成PDF

    html2pdf().from(convertedHtml).set(opt).save();

  })

  .catch(error => {

    console.error('转换过程中出错:', error);

  });

}

</script>

后话

前天提的需求，昨天兜的底，今天写的文章记录

这种问题，理应该后端处理，但后端和我吐槽过他处理起来的困难与问题，寻求前端帮助时，我也会积极配合。可在现实中，我遇过很多后端，死活不愿意配合前端，例如日期格式化、数据id类型bigint过大不字符化返回给前端等等，主打一个本着前端可以做就前端做的原则，说实在：属实下头

前后端本应该就是相互打配合的关系，谁方便就行个方便，没必要僵持不下

今天的分享就到此结束，如果你对技术/行业交流有兴趣，欢迎添加howcoder微信，邀你进群交流

往期精彩

《你不了解的Grid布局》

《就你小子还不会 Grid布局是吧？》

《超硬核：从零到一部署指南》

《私活2年，我赚到了人生的第一桶金》

《接入AI后，开源项目瞬间有趣了😎》

《肝了两个月，我们无偿开源了》

《彻底不NG前端路由》

《vue项目部署自动检测更新》

《一个公告滚动播放功能引发的背后思考》

《前端值得学习的开源socket应用》