背景
使用 uniapp 开发的小程序，想对接 AI 大模型。目前这个时间点，2024 年 12 月，直接为前端提供 api 的大模型，有百度的文心一言和讯飞的星火大模型，这篇先记录下文心一言的对接方式。
1、申请百度 AI 文心一言所需 key
首先要在文心千帆大模型平台控制台总览中，左侧菜单中选择 应用接入，创建自己的应用，配置服务，这里选择所有的预置服务就行。申请成功后，会得到一个 API_key 和 Secret_key，这两个 key 在后续的调用中会用到。
...大约 2 分钟
背景
使用 uniapp 开发的小程序，想对接 AI 大模型。目前这个时间点，2024 年 12 月，直接为前端提供 api 的大模型，有百度的文心一言和讯飞的星火大模型，这篇先记录下星火模型的对接方式。
1、申请星火模型所需 key
首先进入星火大模型 API，新用户要先注册。选择 Spark Lite，目前这个模型 token 是免费的。当然也可以选择其他更强大的模型。然后创建应用，获取到 APPID 和 APISecret、APIKey。
...大约 4 分钟
背景
之前用 uniapp 开发的小程序，使用了 echarts 用来展示折线图和饼状图。现在不需要再展示饼状图了，因为小程序前端代码大小有限制，所以干脆重新生成一个只包含折线图的 echarts.min.js 文件，发现报错 t.addEventListener is not a function。突然想起，这种定制的 echarts，在 5.3.0 版本以上，就会报错。手动选择低版本，重新生成一个就好了。
因为小程序代码大小限制，所以在小程序中使用 echarts，基本上都会采用定制方式，只选择自己需要的图标类型就行。定制地址：https://echarts.apache.org/zh/builder.html
...小于 1 分钟
背景
最近在做一个答题小程序，部分题型中试题数量比较大，一把带出来所有的试题，经过测试界面在试题数量大概在 100 道以上就会开始卡顿，而且试题越多，首次进来加载的时间越长。
一开始想的方案是分页进行加载，但是加载第二页的时候因为要请求接口，所以体验不是特别好。这种分页方式，还有个很大的问题，就是实现“答题卡”功能，在各个试题中跳转比较麻烦。于是在网上搜索，发现一种方案能完美解决这个问题。
简单说，就是 swiper 组件只需要准备三个 item，这三个 item 就相当于三个桶。然后设置 swiper 的 circular 属性为 true，这样可以实现循环滑动。而在滑动的过程中，我们可以通过监听 swiper 的 change 事件，来动态的更新桶中的内容。这样，不管试题有多少，我们只需要准备三个桶，就可以实现流畅的滑动效果。下面看代码：
...大约 3 分钟
背景
画前端页面的时候，偶尔会遇到一个需求。在一个 div 中，既有背景颜色，又有背景图片，而且背景图要在背景色之上。
/* 这种分开写的方式，把颜色写在图片之前，背景颜色会被图片覆盖，不显示 */
background-color: #f5f5f5;
background: url('./images/banner11.png') no-repeat scroll left bottom/cover;
/* 把背景色写在背景图之后就可以实现需求 */
background: url('./images/banner11.png') no-repeat scroll left bottom/cover;
background-color: #f5f5f5;
/* 也可以采用这种简写的方式，依然有效*/
background: #f5f5f5 url('./images/banner11.png') no-repeat scroll left
bottom/cover;...大约 1 分钟
背景
给一个 Vue2 项目开发新功能，在一个 el-dialog 中使用了 el-tabs 组件做了一个详情页，在第一个页面使用时候正常。在第二个页面使用的时候，浏览器卡死了，无法操作，强制刷新都不行。
首先排查了下自己代码中的逻辑问题，然后在网上找了下：
网上查到的方法，自己尝试后没用，但是可以参考下
- 切换 element-ui 的版本，我用的 2.15.6，换成 2.6.1，问题依旧;
- el-tabs 外面加 el-col，问题依旧;
- 给 el-tabs 添加一个 v-if 判断条件，定时器延时修改条件，问题依旧;
...小于 1 分钟
背景
用 node.js 开发一个项目，需要把之前 MongoDB 数据库中的数据，转换成 MySQL。因为对 SQL 语句不是特别熟悉，所以决定导出成 json 文件，然后手动转换。于是发现个之前没有遇到过的问题，在 node.js 中如何读取 json 文件。
首先要明确，node.js 项目默认遵循 CommonJS 模块化规范，所以读取 json 文件的方式和 ES6 模块化规范不一样。如果一定要使用 import 方法，需要在 package.json 中添加"type": "module"。注意两种规范不能混用。
...小于 1 分钟
背景
启动一个 Vue3 项目，报了上边的错误。网上查找后，发现有可能是端口没权限，手动在 package.json 中修改了端口，但是还是报错。最终使用下边方法解决：
1. 先判断端口是否被占用
netstat -ano| findstr 9527...小于 1 分钟
背景
给一个老项目加了一个功能，部署后当天是下午是正常的，第二天早上就报了 webpackJsonp is not defined，于是网上查了下原因。
网上的原因大概这么几种
- 生产的公共文件没有引入。
- 也有可能是运营商的问题，导致 JS 顺序错乱。
- 文件加载顺序错误，公共文件要先加载。
因为是老项目，之前是正常的，也没对引用文件做过修改，第一条就首先排除了。其次运行商的问题，自己也没法干预，也就先放一边。最后试了下第三种。
...大约 1 分钟
背景
做后台管理项目的时候，有时候会遇到可编辑表格的需求。还有一种需求，是在可编辑的表格表头上，加上 ElementUI 中表示必填的红色*。
1. 在需要加必填星号的 el-table-column 上添加 render-header 属性。
<el-table-column
:render-header="addRedStar"
prop="supportFund"
label="经费额（万元）"
align="center"
:render-header="addStar"
>
</el-table-column>...小于 1 分钟