【直播笔记】(我叫不拖延)：YuIndex 网页终端（上）

两晚才写出来，但是很多地方鱼皮一笔带过，我也没有细看，所有可能有不足之处希望大家指出来，共同学习，后面会仔细的看项目的源码，不是后面，就是最近哈哈哈 ，

web终端项目-YuIndex学习笔记

项目相关网网址

项目地址：https://github.com/liyupi/yuindex

百度api申请地址：https://fanyi-api.baidu.com

前端技术选型openbase：https://openbase.com/

项目发布网址：https://www.yuindex.com/#/

项目技术参考网站w3c：https://www.w3school.com.cn/

项目前端免费部署：https://vercel.com/

项目视频及其资源（鱼总分享）：

https://wx.zsxq.com/dweb2/index/topic_detail/585181814415154

看完视频，我们会什么

1. 知道这个项目是什么？ 使用什么技术实现？为什么使用这个技术？
2. 能够自己实现这个项目？（看完上下）
3. 能够基于本项目进行二次开发？（看完上下）

视频时间线

1. 0-8分钟:项目基本介绍，项目的由来及其未来
2. 8-12分钟：项目优势，
3. 12-16分钟:项目产生背景
4. 16-22分钟：项目开发周期 & 项目开发流程
5. 22-1小时4分钟：开发每个过程的具体工作 + 技术选型+部署等等
6. 1小时4分钟-1小时30分钟：项目系统设计,设计思路，设计模式，举例说明
7. 1小时31分钟-2小时7分钟： 源码阅读-快速过一遍项目结构
8. 2小时7分钟-2小时18分钟： 源码阅读-阅读核心功能代码，例如：终端具体代码实现，代码思路
9. 最后： 总结说拜拜

项目介绍

项目整体介绍

• 项目面向群体：程序员，经常在网页上搜索资源的群体
• 项目初衷：为了一站式实现资源查找，快捷，方便，简约
• 项目借鉴：借鉴了linux的命令行的思想，看似一个命令行 ，但是能做很多很多事情
• 项目优势：
• 对比同类型的游览器插件，utools，它更加轻量，方便，只需要有一个游览器即可
• 不需要更新，打开永远都是最新版

项目产生原因

1. 实际需求
2. 网上没有类似项目
3. web终端并没有人关注和分享，自己做一个，开源
4. 帅

项目开发流程

1. 构思+需求分析

1. 有一个想法
2. 做调研，这个其实很重要，调研例如：查看竞品，去让人填表收集信息等等
3. 挖掘需求（从竞品中，SWOT分析：https://baike.baidu.com/item/SWOT%E5%88%86%E6%9E%90%E6%B3%95/150223）
4. 排需求的优先级，非常重要

2. 技术选型

1. 选择一套技术，更快，更稳的完成我们的所有需求
2. 技术选型方法（前端）：
3. 使用openbase：https://openbase.com/
4. 游览器，例如：baidu Google bing等等
5. GitHub，npmjs.掘金技术社区等等
6. 使用第三方库，需要注意开源许可协议是否可以商用等等

3. 开发

4. 测试

5. 部署上线

• 前端：vercel -免部署和运维
• 后端：微信云托管

前端技术

1. xtermjs的缺点 它的官网:https://github.com/xtermjs/xterm.js
2. 项目文档缺失，社区不好，有问题，没人解决
3. 它更适合开发前后端一体的终端，它是更加重视后端进行逻辑处理
4. 项目使用技术
5. 前端：vue3 +vite2+and design vue3+ pinia+ts+eslint+prettier
6. 前端引入第三方库：getopts命令参数解析库

后端技术

node.js的兼容性比较好，使用了虚拟机

1. nodejs
2. express+express-session
3. mysql
4. sequelize(ORM框架)
5. Redis
6. 依赖服务
7. 百度翻译
8. 新浪壁纸

项目系统设计

如何实现，个人理解，一个文字草稿纸+一个画图的草稿纸

• 及时的把自己的任何想法都记录下来
• 遵循马斯克的第一性原理

使用工具：

1. Markdown的文字编辑器
2. draw.io一个在线画图工具：diagrams.net

具体设计：

微终端和命令系统属于本项目的核心模块

1. 微终端：打开网址前端看到的就是微终端，旗下的功能也是和终端联系紧密，具体功能：
2. 历史记录
3. 输入输出
4. 快捷键
5. 操作接口：控制用户使用权限，例如不允许用户修改提示等等
6. 一组可以操作终端的API（函数）
7. 用于控制操作的权限
8. 解耦(比如你可以通过$refs强制访问，容易出现冲突）
9. 更清晰明确 需要看代码理解
10. 提示
11. 命令系统：拿到命令，做具体的事情或者提示报错
12. 注册器：把定义好的所有命令，作为一个map变量，把它注册进来，让命令系统知道，有这个命令，
13. 匹配器：匹配命令，例如：baidu hhh -s 它就会匹配baidu为关键词，去注册器中找是否有这个关键词，然后去命令集中匹配命令，在此处可以做错误处理
14. 解析器：把字符串解析为js对象。我们输入的是一串字符串，它会帮我们解析为更加通用的对象，用于后面去使用
15. 执行器：调用子命令的执行函数，执行命令对应的具体的工作
16. 子命令：独立的模块，命令支持递归的解析，看代码理解
17. 命令集：更加具体的某个功能，具体某个命令对应的代码
18. 空间系统
19. 搜索
20. 用户系统
21. 终端控制（帮助，历史等等)
22. 其他 等等
23. 设计模式
24. 命令模式：https://www.runoob.com/design-pattern/command-pattern.html
25. 操作接口

项目源码阅读

1. 通过readme快速了解项目
2. 下载下来，在中途中，在项目页按下句号键，会打开一个网页版的vscode，可以快速看一下项目
3. 号外：web IDE也是前端热门
4. 本地运行
5. 下载依赖，看package.json
6. 如果你的项目跑不起来，那么可能是你的电脑环境不符合项目需求，例如node版本低了等等
7. 具体代码模块
8. 项目下server包就是后端项目代码，
9. 启动后端方法
10. 下载依赖，讲解了本地环境和线上环境区别
11. 后端项目下的config文件夹下的代码作用
12. config文件：本地环境配置文件
13. getConfig文件：获取当前的环境
14. 后端启动，
15. 下载安装Redis
16. 安装MySQL数据库
17. 创建数据库，有ddl.sql 建表代码

1. 前端项目解读
2. .vscode：vite脚手架自动生成，用于配置vscode编辑器配置，例如提示插件等等
3. doc ：存放文档和图片
4. node_modules：对应package.json的依赖包
5. public： 用于存放项目静态资源，项目不需要打包工具打包的文件存放地方
6. server： 后端代码
7. src： 项目核心代码（源码）
8. .eslintrc.js：配置项目eslint规范，用于项目规范，自动提示等等，团队开发非常重要，能够大大提高代码质量和代码可读性
9. eslint不生效，解决

1. .gitignore： 配置忽略文件
2. CODE_OF_CONDUCT.md：开源贡献公约（对于项目运行效果没有影响）
3. components.d.ts：generated by unplugin-vue-components
4. Dockerfile： 定义镜像（容器）文件，打包构建时候使用
5. index.html：项目主页文件，可修改，一些信息。如：title，修改meta用于 SEO优化
6. LICENSE： 开源许可证。记得修改版权信息
7. package.json：包管理文件，脚本文件
8. README.md :项目介绍文件
9. tsconfig.json，tsconfig.node.json,: 配置ts规范
10. vite.config.ts:vite配置文件
11. yuindex-arch.drawio；系统架构图
12. 前端src文件夹解析
13. components： 组件，里面放着终端，（把终端看成一个组件）对应系统设计的微终端
14. config：项目配置文件夹，下面放着路由配置信息
15. 隐藏任务，有失败作，xterm的demo
16. core：核心，有命令注册器，匹配器等等，还有各种命令
17. pages： 页面，有主页面和xterm页面
18. index页面：把终端组件和core连接起来
19. plugins：
20. 放着封装的axios，请求和相应的拦截myAxios.defaults.withCredentials = true;向后台传递cookie，用于登录功能
21. 还有对dayjs库二次封装，全局设置为中文，继承了时长扩展
22. utils：工具方法，一般多处用到同样的逻辑，提取逻辑放到utils下，方便直接使用
23. App.vue：根组件
24. env.d.ts：环境类型声明文件
25. main.ts：项目入口文件，
26. 核心代码解读
27. components：终端组件，
28. hint,ts : 提示，操作提示，设置提示，防抖设置提示
29. history,ts：命令，上翻，下翻，查看命令当前位置
30. 待完善：把历史命令数据塞到这个模块中
31. shortcuts.ts：快捷键，最简单命令系统，快捷键匹配
32. type.d.ts： 类型声明，声明了输出类型有，命令，文本，组件等等 其中定义的TerminalType接口，用来限制访问操作终端的权限
33. ContentOutput.vue：内容输出，组件输出，自定义内容输出
34. YuTerminal.vue：核心组件，也就是显示的终端，输入输出的地方

项目中的代码知识

1. js中的?? 和?.什么意思：https://www.cnblogs.com/zhigu/p/13962661.html
2. cross-env:一个库，让脚本代码，兼容window，mac等等系统，仅在开发环境使用
3. 防抖和节流，这里有一个很好的例子，就是：防抖就是打游戏中的回城，你点击回城一直点击，取消，他会计算你最后那一次的点击回城，才进行回城倒计时，节流就是点击普攻键，无论你点击的多快，他都是到了相同的间隔时间才会继续进行下一次的攻击

项目具体需求

1. 先做一个，能够在网页端输入输出的终端
2. 解析命令功能，命令行
3. 搭建项目骨架，定规范，系统架构设计
4. 命令开发

项目开发中的好的编程思想（个人觉得）

• 在需求分析过程中，就想好如何实现它，具体使用什么技术，什么方法
• 敏捷开发，个人项目，在保证核心功能，立即上线，让产品和用户互动，从而收集反馈
• 项目开发之前，要先思考 项目通用的逻辑和功能，封装成全局，也就是搭建系统骨架，先设计好项目，再进行开发，也就是，先把系统用伪代码（文字 / 图）表达出来 ，再实现
• 企业开发 ，如果有现成的库能完成我们的需求，一定要用现成的
• 看项目源码，不要一直看readme，先把项目本地跑起来
• 从代码中，可以学习到项目解耦的思想，分层，各司其职，方便阅读，方便二次创作

项目快捷命令

基本上和linux系统命令一致 ,linux命令学习：

腾讯云：https://cloud.tencent.com/developer/article/1540697；

菜鸟大全：https://www.runoob.com/linux/linux-command-manual.html

• ctrl+o：折叠 & 展开
• historty： 查看历史命令
• ls：查看已经收藏的网页，可以把网页当成文件一样管理
• goto：快速跳转网页
• ctrl+l：清屏

END

其实，讲的都是真正在企业开发中，需要的知识，很多细节，鱼皮一笔带过，其实真的自己实现还是很麻烦，很费脑筋，也很佩服鱼皮的知识面很广,看完学到了很多前端项目的知识