11. 吐槽一下一个产品设计问题
公司要求每天填报工时，项目这一栏是个选项框，需要经常添加选项，可是这个平台，没有菜单入口让使用者添加项目选项，每次都要找后端同事去改数据库，找的次数多了，别人也有点不耐烦。感觉使用起来不是很方便。
10. pnpm报ERR_PNPM_REGISTRIES_MISMATCH 如何处理？
pnpm默认使用的下载源是https://registry.npmjs.org/,安装ant-design-vue时下载不下来，切换为淘宝安装源后
bash
pnpm config set registry https://registry.npmmirror.com报错如下: ERR_PNPM_REGISTRIES_MISMATCH This modules directory was created using the following registries configuration: {"default":"https://registry.npmjs.org/"}. The current configuration is {"default":"https://registry.npmmirror.com/"}. To recreate the modules directory using the new settings, run "pnpm install".
这个错误的处理方式是在项目下重新执行pnpm install指令，安装依赖。
9. 数据字典是什么，有什么优势?
将界面上的下拉选项值存成代号还是实际值，实用更灵活？从扩展性的角度来看，定义成数据字典(属性-内容键值对),当选项值名称改变时，数据字典方式修改起来更灵活。举例说明一下:普通的《职员表》是这样定义的，其中的证件是通过下拉选项选择出来的，落库的时候存储的是属性值。
| 姓名 | 证件 | 国籍 |
|---|---|---|
| 张三 | 身份证 | 中国 |
| 李四 | 身份证 | 美国 |
如果要改变证件名称，要把其中的"身份证"改成"居民身份证"，如果存储的是属性值，那么相关的库表都得改一遍。而如果使用数据字典的思想，增加一个系统代码分类表，系统代码表和属性表，那么当身份证的名称要被修改成居民身份证时，只需修改一处。
系统代码分类表
arduino
分类标识 分类名称
ID 证件
Country 国籍
// ...系统代码表
arduino
标识 分类 内容
501 ID 居民身份证
502 ID 暂住证
// ...
001 Contry 中国
002 Contry 美国
// ...职员表
arduino
职员ID 姓名
1 张三
2 李四
// ...属性表
arduino
属性ID 职员ID 系统代码表_标识
1 1 001 （表示张三是中国籍）
2 1 501 （表示张三的证件是居民身份证）
3 2 002 （表示李四是美国籍）
4 2 501 （表示李四的证件是居民身份证）
// ...数据字典表(Dictionary)的一般设计：
| 字段名 | 类型 | 说明 |
|---|---|---|
| 编号 | Char(16) | 间断增量(Not Null,PK) |
| 分类名称 | Varchar(64) | 用来进行过滤选取字典表相关域 |
| 内容 | Varchar(255) | |
| 父级编号 | Char(16) | 取Dictionary的编号(FK)，用来进行等级设计。使之成为树型结构。 |
数据字典的优势：
- 在一定程度上，通过系统维护人员即可改变系统的行为（功能），不需要开发人员的介入。使得系统的变化更快，能及时响应客户和市场的需求。
- 提高了系统的灵活性、通用性，减少了主体和属性的耦合度
- 简化了主体类的业务逻辑
- 能减少对系统程序的改动，使数据库、程序和页面更稳定。特别是数据量大的时候，能大幅减少开发工作量
- 使数据库表结构和程序结构条理上更清楚，更容易理解，在可开发性、可扩展性、可维护性、系统强壮性上都有优势
8. 你是否好奇, Authorization : Bearer Tokenxxxxxx为什么要加Bearer字样?
Bearer的含义是搬运工，带信人。这是 W3C 的 HTTP 1.0 规范
sql
Authorization: <type> <authorization-parameters>HTTP 1.0 中的 Authorization 头部用于包含客户端的认证凭证。其中 <type> 表示认证机制类型,常见的有以下几种:
- Basic: 基本的用户名密码认证。客户端将用户名和密码使用 Base64 编码后发送给服务器。格式为:
makefile
Authorization: Basic <base64-encoded-value>- Digest: 基于 MD5 算法的消息摘要认证。服务器会发送一个随机值(nonce),客户端使用这个值、用户名、密码等信息计算出一个摘要值作为凭证。格式为:
makefile
Authorization: Digest <digest-response-parameters>- Bearer: 基于持有者令牌的认证。通常用于 OAuth 2.0 的访问令牌认证。格式为:
makefile
Authorization: Bearer <token>- AWS4-HMAC-SHA256: 用于AWS API的安全认证,使用HMAC加密方式和时间戳等参数生成认证字符串。格式为:
makefile
Authorization: AWS4-HMAC-SHA256 <aws-auth-parameters>这些是HTTP 1.0中Authorization头部类型的常见类型。还有一些其他类型如 Negotiate、NTLM 等,根据不同的认证场景使用。具体使用哪种类型需要根据服务端的认证要求来决定。
使用 "Authorization: Bearer" 的形式可以带来一些好处：
- 一致性：它遵循了 HTTP 规范中关于认证方案的标准格式，使得在不同的系统和框架之间可以更好地进行互操作性。
- 可扩展性："Bearer" 方案可以与不同类型的令牌一起使用，如基于 JSON Web Token (JWT) 的令牌，OAuth 2.0 的访问令牌等。
- 安全性：通过将访问令牌放置在请求头部中，可以避免令牌泄露在 URL 参数或请求主体中的潜在风险。
7.json字符串如何用ts进行类型约束？
不能直接约束json字符串, 但可以约束json字符串转换成对象之后的json对象,示例如下
ts
interface Person {
name: string;
age: number;
email?: string; // 可选属性使用 ?
}
const jsonStr = '{"name": "John", "age": 30, "email": "john@example.com"}';
const person: Person = JSON.parse(jsonStr);
console.log(person.name); // John
console.log(person.age); // 30
console.log(person.email); // john@example.com6. 请求接口也会进行页面跳转？
对，现在的项目，就遇到这种场景。前端定义了一个错误静态页面，这个静态页面的呈现不受前端控制，而是由后端执行redirect跳转到此错误信息展示静态页。所以接口的功能不仅仅是请求数据，也能执行错误跳转。
5.发现项目中，flex布局滥用现象很常见，如下的一段样式，我注释到了两处flex布局，样式布局未受到丝毫影响。尤其是第2处可注释的地方，还引起顶部悬浮卡片信息，在IOS12,三星手机上文字换行出现问题。
css
.headerWrap {
position: fixed;
top: 0;
left: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 1.38rem;
padding: 0 0.2rem 0 0.3rem;
background-color: #fff;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
.headerContent {
flex: 1;
// 第1处注释
// display: flex;
// flex-direction: column;
// ...
.headerName {
display: flex;
align-items: center;
p {
// ....
}
.editInfo {
// ...
}
}
.headerDesc {
// 第2处可注释
// display: flex;
// flex-wrap: wrap;
// ...
.headerDescLine {
// ...
}
}
}
}4.发现chrome浏览器时亮时暗，看到chrome有个节能模式的设置，猜测可能与此开关被打开有关，关闭之后，果然发现笔记本电脑屏幕亮度稳定了好多，虽然偶尔屏幕还是会变暗，但已有很大程度缓解。
3. 打包造成的样式问题
发现一个奇怪的现象，就是在本地开发环境和线上环境，Ant-Design-Vue Select右侧的三角箭头 表现不一致，在本地开发环境，展示位置异常，打包部署到线上环境，三角箭头正常。 猜测可能是本地和线上编译之后，样式的书写顺序不一致引起的，目前的做法是多写几个类名，通过提高样式的权重，规避此问题。
2. IOS上的两个兼容性问题
- 在iOS13上
flex-wrap: wrap无换行效果，需要改成flex-direction: column; - 在IOS17上, 当父容器设置了
flex-direction: column;,内容块<div class='info'>里面的内容原本只允许显示一行，超出显示省略号，却会换行，添加display:flex;属性之后，才是不换行的效果
html
<div style="display:flex;flex-direction: column;">
<div class='avatar'></div>
<div class='info'>
<span>1111超级长...</span>
<span>2222超级长...<</span>
</div>
</div>1. html标签的title属性，如果内容过长，不同的浏览器会有不同的处理
对于HTML中的<div>标签,title属性用于指定该元素的额外信息,通常以工具提示的形式显示出来。 当title的值比较长时,不同的浏览器会有略微不同的处理方式:
- 大多数浏览器会省略过长的title值,在工具提示中只显示开始部分,并在末尾显示省略号表示被截断。这是出于美观和可用性的考虑。
- 一些浏览器可能会完整显示整个title值,不管它有多长,但工具提示框的大小是有限制的。过长的内容还是可能被截断,并显示省略号。
- 少数浏览器会完整显示全部title内容,即使超出工具提示框的大小,并显示滚动条以便查看全部内容。
- 对于极长的title,不同浏览器也可能有不同的处理长度阈值。
所以对于<div>的title属性值,为了兼容各浏览器,还是建议控制在一个合理的长度范围内,避免过长内容被截断显示。