20231220 前端开发日报

前端项目公共组件封装思想（Vue）；2023 年最后一波工具安利「GitHub 热点速览」；Web 自动化神器 Playwright：统一 API 操作多种浏览器 | 开源日报 No.113；“Vue框架入门：让前端开发轻松愉快起来”；NocoDB：把任意数据库转换成智能表格 | 开源日报 No.112；2023年中大厂面试经历分享，很可惜，但是没关系；开源啦轻量级工作流引擎管理系统；Vue 使用 js-audio-recorder 实现录制、播放、下载音频

1. 前端项目公共组件封装思想（Vue）

   1. 通用组件（表单搜索+表格展示+分页器） 在项目当中我们总会遇到这样的页面：页面顶部是一个表单筛选项，下面是一个表格展示数据。表格下方是一个分页器，这样的页面在我们的后台管理系统中经常所遇到，有时

2. 2023 年最后一波工具安利「GitHub 热点速览」

   2023 年还有两周就要接近尾声了，2023 年的热点速览还有一波工具好安利：比如上周推荐之后上了热榜的远程调试工具 page-spy-web，让调试像呼吸一般自然方便；还有轻量级的搜索引擎 oram

3. Web 自动化神器 Playwright：统一 API 操作多种浏览器 | 开源日报 No.113

   Playwright 是一个用于 Web 测试和自动化的框架，它允许使用单个 API 测试Chromium、Firefox 和 WebKit。

4. “Vue框架入门：让前端开发轻松愉快起来”

   在前端开发中，修改 HTML 数据是一项常见的任务。然而，纯粹的 JavaScript 方法存在一些不足和缺陷。为了解决这些问题，并更便捷地进行数据修改和更新，引入 Vue 框架是一个明智的选择。

5. NocoDB：把任意数据库转换成智能表格 | 开源日报 No.112

   Kata Containers 是一个开源项目和社区，旨在构建轻量级虚拟机 (VMs) 的标准实现，使其在性能上表现得像容器一样，同时提供 VMs 级别的工作负载隔离和安全优势。它提供了类似容器的体验

6. 2023年中大厂面试经历分享，很可惜，但是没关系

   已经好久没有面试了，突然想起来自己曾经有面试过几家公司，那就分享一下这些面经吧，也算是积攒一下人品了。 先来说说我都面了啥吧。作为一个没有学历也没有什么实习经历的我，有幸靠着两个 star 数还可以的

7. 开源啦轻量级工作流引擎管理系统

   流程设计 新增 点击列表左上角“新增”按钮，可新增流程设计，这里只需要填写基本信息。 字段说明 显示名称，流程显示的名称，相当于中文标题 唯一编码，流程编码的唯一编码，通过该编码一流程定义的name相

8. Vue 使用 js-audio-recorder 实现录制、播放、下载音频

   文章浏览阅读340次，点赞8次，收藏7次。Vue 使用 js-audio-recorder 实现录制、播放、下载音频

9. react解决跨域问题——设置代理、发送ajax

   文章浏览阅读171次，点赞3次，收藏4次。模拟搭建服务器、发送react-ajax请求、配置多个代理解决跨域问题

10. useConsole的封装,vue,react，htmlscript标签，通用

    文章浏览阅读193次，点赞5次，收藏4次。之前用了接近hack的方式实现了console的封装，目标是获取console.log函数的执行（所在位置）所在的代码行数。例如以下代码，执行window.mylog(1)时候，console.log实际是在匿名的箭头函数()=>{//这里执行的}如果代码改为以下，因为log返回的是conosle.log本身，并且它并没有在函数内执行，也就是函数。

11. 基于vue与three.js给模型添加标签（CSS2DRenderer与CSS2DObject）

    文章浏览阅读191次，点赞6次，收藏4次。this.$refs.three_container为3D渲染的容器，注意zindex必须足够高。得用deep，不然容易不生效。

12. vue 对接海康威视web视频监控，配合iframe使用

    文章浏览阅读96次。bin目录下，打开bin文件安装。

13. Vue Teleport和Vue的介绍

    文章浏览阅读322次，点赞9次，收藏3次。Vue Teleport是Vue 3中的一个新功能，它允许我们将组件的内容渲染到DOM中的不同位置。在Vue中，组件的内容通常被渲染到组件的父元素中。但是有时候我们希望将组件的内容渲染到DOM的其他位置，比如body或者其他组件中，这时就可以使用Vue Teleport。具体使用步骤如下：在需要使用Vue Teleport的组件中添加标签，指定目标位置的选择器或者DOM元素作为teleport的属性值。例如表示将组件内容渲染到id为"target"的元素中。

14. Vue 组件内路由守卫beforeRouteUpdate调用无效的时候解决方案

    文章浏览阅读171次，点赞4次，收藏3次。当beforeRouteUpdate调用无效时

15. 20.（vue3.x+vite）Vue子组件和父组件执行顺序

    文章浏览阅读92次，点赞4次，收藏4次。20.（vue3.x+vite）Vue子组件和父组件执行顺序

16. ES6 语法精粹简读

    文章浏览阅读314次，点赞12次，收藏6次。ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，在 2015 年 6 月正式发布。目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

17. 跟着官网学 Vue – 异步组件

    文章浏览阅读319次，点赞11次，收藏11次。最终效果是：2秒后显示"这是异步加载的组件内容！“，再过3秒后更新为"延迟5秒后的内容！

18. react基于antd二次封装分页组件Pagination

    文章浏览阅读129次，点赞2次，收藏5次。【代码】react基于antd二次封装分页组件Pagination。

19. vue导入文本文字

    文章浏览阅读258次，点赞3次，收藏7次。this.$message.success("文件类型错误,请重新选择文件");插入文本alert("您的浏览器不支持FileReader接口");

20. Vue 3 路由精讲：掌握 children 属性打造多层次嵌套导航

    文章浏览阅读166次，点赞3次，收藏3次。在Vue 3中，当你使用Vue Router创建路由配置时，children属性允许你为某个路由定义嵌套路由。这意味着你可以在父路由下设置子路由，从而构建出具有层级结构的URL路径。这里是一