每月进步一点点--202309持续记录每月在工作中遇到的一些问题的解决方案，如何查看文件被哪个应用占用，css语法点深入

17. Whitelabel Error Page是什么含义?

这个错误是后端的SpringBoot框架报的错，可能的原因是:

没有启动Springboot
请求路径出错
创建controller、service、dao的目录在主程序类的目录之上

16. 如何科学地搜索接口是否仍在使用？

接到一个任务，搜索项目中哪些接口已经废弃，刚开始的搜索方式，是查接口是否存在于项目文件中，后面发现很多接口可以搜到，但却已经不在使用。正确的搜索方式是：

挨个搜索，不然要反复检查。并把搜索到的文件都列出来，搜索接口时，如果用全路径搜不出来，用后半部分接口路径去搜
查看一下这些接口是仅仅是定义还是调用
查看调用的地方的文件有没有被使用，如果是组件，要查看被哪个页面使用，搜索时稳妥的搜索方法是搜索路径最后一级，因为有些人引入组件，使用的是相对路径。
看引用这些组件的页面，能否在路由列表中查询出来

15. 如何查看文件被哪个程序占用?

按下ctrl+alt+del之后==> 点击任务管理器
点击性能面板下方的资源监视器

切换到CPU标签，在关联的句柄，搜索被占用的文件夹，即可查询到文件被哪个进程占用。

14. 说说下面这道题的第11和12行，文字分别是什么颜色，然后自己运行一下，看看是否与自己的预期相符？

如果与自己的期望不符的话，应该刷新一下自己对样式冲突时，后面写的样式会生效的认知，这个靠后是样式规则定义的顺序而不是给元素添加样式类的顺序。

<style>
.red {
    color: red;
}

.green {
    color: green;
}
</style>

<div class="red green">123</div>
<div class="green red">456</div>

13. 在项目中，发现有时脚本报错之后，整个页面的逻辑都无法运行，而有时候却不是这样，为什么？

与出错的地方，所在的作用域有关。如果是全局作用域，那么整个页面的逻辑都会停止运行，如果是在函数作用域，只影响当前当次，如下例所示：分别点击funA和funB之后，再点击funA,并不会因为上一次点击funB报错了，再次点击funA函数就不再执行。

<template>
  <div class="count" @click="fun('foo')">funA</div>
  <div class="count" @click="fun(a.b)">funB</div>
</template>

<script setup>
import { defineComponent, ref } from 'vue';
function fun(params) {
  alert(params);
}
</script>

12. 开展工作，怎么避免无序和重复？

说起来也很简单，就是列一个工作清单, 按照优先级开展工作，完成一项划掉一项，这样能避免做事情没有头绪，东一榔头西一棒槌，事情很多的时候，都不记得哪些事情已经做了，重复的检查与核实。而另外一些事，却没投入时间。过程混乱无序，感觉比较累。

11. 什么时候选择用Grid比Flex布局好?

如果让九个等宽的元素，从上到下排成三排，每个元素之间有 20px 的间隙，此种场景, 用Grid更简单

.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 200px;
	gap: 20px;
}

同样的效果用flex布局实现，就要给flex容器设置负的margin值进行抵消，不如使用Grid布局省心省事。

.grid {
	display: flex;
	flex-wrap: wrap;
	margin: -10px;
	width: calc(100% + 20px);
}

.item {
	width: calc((100% / 3) - 20px);
	flex: 0 0 auto;
	margin: 0 10px 20px 10px;
}

10. 如何设置一个隔离的运行环境？

// 沙箱全局代理对象类
class SandboxGlobalProxy {
  constructor(blacklist) {
    // 创建一个 iframe 标签，取出其中的原生浏览器全局对象作为沙箱的全局对象
    const iframe = document.createElement("iframe", { url: "about:blank" });
    iframe.style.display = "none";
    document.body.appendChild(iframe);

    // 获取当前HTMLIFrameElement的Window对象
    const sandboxGlobal = iframe.contentWindow;

    const blacklistSet = new Set(blacklist);
    return new Proxy(sandboxGlobal,{
      has:(target,prop) => {
   
        if (blacklistSet.has(prop)) {
          throw new Error(`Can't use ${prop} in sandbox`);
        }
        return Reflect.has(target, prop)
      }
    });
  }
}

// 使用with关键字，来改变作用域
function withedYourCode(code) {
  code = "with(sandbox) {" + code + "}";
  return new Function("sandbox", code);
}

// 将指定的上下文对象，添加到待执行代码作用域的顶部
function makeSandbox(code, ctx) {
  withedYourCode(code).call(ctx, ctx);
}

// 待执行的代码code，获取document对象
const code = `console.log(new Date().getTime())`;

// 设置黑名单
// 经过小伙伴的指导，新添加Image字段，禁止使用new Image来调接口
const blacklist = ['window', 'document', 'XMLHttpRequest', 'fetch', 'WebSocket', 'Image'];

// 将globalProxy对象，添加到新环境作用域链的顶部
const globalProxy = new SandboxGlobalProxy(blacklist);

makeSandbox(code, globalProxy);

9. link中rel的alternate属性的含义和用途是什么？

<link>rel属性值同时包含alternate stylesheet的CSS文件作为备选样式加载，默认不渲染，如下例中的red.css；这种属性可以用于换肤, 因为浏览器已经把换肤的CSS文件预加载好了,rel=alternate方法实现换肤是瞬间切换，体验较好。

<link href="reset.css" rel="stylesheet" type="text/css">
                
<link href="default.css" rel="stylesheet" type="text/css" title="默认">
<link href="red.css" rel="alternate stylesheet" type="text/css" title="红色">
<script>
// 切换到red.css这个皮肤
document.querySelector('link[href="red.css"]').disabled = false;
</script>

8.如何避免发版时，不小心把后端还未上线的接口调用功能发布到线上？

建立两道防线

一是严格的一个版本一个分支，不要因为发版计划变更了偷懒, 把不同日期发布的功能夹杂在一起
如果第一道防线出现纰漏, 第二道防线就是在预发布环境, 对现有的部署内容进行重置，都替换成要发布的内容，进行回归测试

如果前两道防线都没守住，最后的补救措施就是配置nginx，让nginx对新接口返回一个固定的响应值，不过这个补救措施只能让接口不报错，无法消除其它负面影响。

7.windows下nginx报错: [alert] could not open error log file: CreateFile() "logs/error.log 如何解决?

在window下配置了nginx的环境变量，使用start nginx命令启动时，报上面的错，这是因为在当前路径下，找不到logs/error.log文件，nginx.conf文件配置的相对路径在windows下非nginx的解压目录会找不到。最简单的解决方式，就是去nginx的解压目录，执行start nginx命令。

6.职场软技能--如何防止自己专注工作的时候，被打扰？

暂时退出企业微信，微信，钉钉，飞书...可能中断思绪的软件。
主动切换时间比如可以这样说 “我现在有点忙，过一个小时后我去找你商量，怎么样？”;“现在我手上的事情有点多，你看明天什么时候方便，我们用二十分钟一起碰碰？
主动切换到线下当面的打扰比线上更让人分心，所以你可以主动把一些别人想找你面谈的事情改换为电话或语音，文字沟通等其他方式。非当面沟通方式你更能厚着脸皮拒绝很多当面好意思拒绝的事情。

5.如何在VScode调试Vite+Vue3项目?

点击VSCode的运行和调试菜单之后，选择调试项目

选择要调试的应用类型

3. 修改项目下的.vscode\launch.json文件,修改启动端口和项目启动路径

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "针对 localhost 启动 Chrome",
      "url": "http://localhost:项目端口/项目启动路径",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

正常启动项目

yarn start

项目启动之后，点击运行和调试按钮右侧的绿色三角形，就会进入调试模式

如下图所示,已经进入调试模式。

4. 企业微信自动升级到4.1.9版本，用企业微信扫码登陆限定只能用企微扫码登陆的网站，PC端显示扫码成功, 移动端的登录页面却显示不出来，如何解决？

解决方法：

在豌豆荚网站上，找到企微历史版本，扫码下载

关闭应用市场的在WiFi下自动更新应用功能。

3. ant-design-vue + dayjs 如何将日历设置成中文?

<template>
  <ConfigProvider :locale="locale">
  </ConfigProvider>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { ConfigProvider } from 'ant-design-vue';
  import zhCN from 'ant-design-vue/es/locale/zh_CN';
  import dayjs from 'dayjs';
  import 'dayjs/locale/zh-cn';

  dayjs.locale('zh-cn');
  const locale = ref(zhCN);

</script>

2. 在package.json文件中，写死开发和生产npm依赖包的版本，不生成yarn.lock文件, 会出现什么问题？

问题的背景是这样的，接手了一个项目，npm镜像源配置的是个内网地址，却无法访问内网, 本地开发只能在外网安装项目依赖包。可是项目下的yarn.lock里面包的依赖全部是内网下载地址，当时以为只要在package.json中锁定依赖包版本，删除yarn.lock文件也无妨。结果后面出问题了，依赖的依赖包版本未锁定，CI工具在打包构建时，有个非直接依赖@yarnpkg/parsers安装报错，提示CI机器上当前的node版本过低，依赖包要求的node版本至少是xxx版本。后面恢复了删除的yarn.lock文件,问题才得到解决。

1. `This XML file does not appear to have any style information associated with it.` 是什么原因造成的?

这种错误是后端抛出的, 抛出这种错误的一种场景是: 访问前端的页面需要后端路由进行中转(因为在访问前端页面之前，需要后端先完成微信/企微登录授权，才能进行跳转。如果在浏览器地址栏输入的页面路径不存在，就会抛出这种错误。

每月进步一点点--202309