极客范儿的游览器终端直播笔记-下

提示

本项目，适合学习完前端三件套，会一点node或者后端知识，学过并使用过vue3的同学，如果刚刚学习前端，没有任何前端框架基础，可能会听不懂

需要使用的文档

• ant design vue：https://antdv.com/components/overview
• vue3：https://v3.cn.vuejs.org/
• vite：https://cn.vitejs.dev/
• node.js：http://nodejs.cn/api/
• express-session：https://www.cnblogs.com/loaderman/p/11506682.html
• express：菜鸟教程
• pinia:https://pinia.web3doc.top/
• sequelize中文文档：https://www.sequelize.com.cn/

时间线

• 0- 54分钟： 上次直播内容回顾，复习，系统的讲解源码
• 0-5分钟：举例说明输出组件ContentOutput的逻辑
• 5分钟-10分钟：介绍todo组件，pinia状态管理库
• 11分钟-14分钟：hint文件，命令提示功能，history文件 ，历史命令模块。使用Composition API封装的自定义hooks，企业开发中如何快速完成需求
• 15分钟-25分钟：用户输入一个命令，到相应发生了什么？
• 25分钟-47分钟：命令系统讲解
• 47分钟- 54分钟：历史命令系统，上下翻功能，历史列表功能
• 54+ ：讲解一些设计，
• 54分钟-1小时：微终端的操作接口，用于限制，https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose
• 1小时-1小时9分钟：举例，如何写一个自定义命令，讲了参数和选项，和linux一样，自定义一个命令流程：
• 在core的commands下新建一个文件夹，写自己的命令逻辑
• 写好后，去commandRegister.ts去引入或者说注册进来我们的自定义命令
• 1小时9分钟- ：
• -1小时16分钟：子父命令，利用递归实现
• -1小时18分钟：帮助功能，
• -1小时18分钟：状态管理pinia，保存到localStorage
• 1小时18分钟- 1小时27分钟：后端代码阅读
• 1小时27分钟-1小时32分钟：思路扩展
• 1小时32分钟-END：项目亮点，用于简历

跟着视频 我做了什么

1. 安装mysql，redis 跑起来前后端代码
2. 跟着鱼皮，看源码，调试源码

源码阅读

前端

页面逻辑

src >components >yu-terminal >ContentOutput.vue

对结果进行展示的组件，可展示组件类型：文字，命令，组件,"command" | "text" | "component"

该页面逻辑：通过对输出类型（output.type ）判断，动态显示对应内容，负责输出各种结果

src >components >yu-terminal > hint.ts ：提示功能模块

src >components >yu-terminal > history,ts：历史命令模块

src >components >yu-terminal > shortcuts.ts：快捷键系统

src >components >yu-terminal > YuTerminal.vue：微终端组件

页面包括最外面的盒子，用于切换背景，里面包裹一个滚动的盒子，里面包裹循环输出列表模块，里面放着可折叠模块和不可折叠模块，下面就是输入模块，下面就是提示模块

• ！加历史命令索引，快速执行历史命令
• 为什么要把用户提交命令后做的事情，放在indexpage文件中定义？这样易于扩展，其实这是一种组件开发思维吧！就是组件内部暴露一个属性，这个属性接收一个函数，组件就可以调用组件实例的传进来的自定义方法，提高组件的灵活性

src >core>commandExecutor.ts：命令的解析和执行

src >core>commandRegister.ts：所有命令存放的地方

后面就没有记录了

后端

目录

config：定义配置

constant：定义常量

controller：请求层，处理用户请求

exception：接口报错定义

model：用户模型，操作数据库

service：业务逻辑层，具体做什么事情

thirdpart：第三方API,百度翻译，随机获取背景（新浪-搏天）

db.js：创建数据库实例并连接数据库

index.js：入口文件

routes.js：定义接口，给前端使用，和controller文件

server.js：后端具体服务

具体技术

• vue自定义组件component标签，参考文章：https://v3.cn.vuejs.org/api/built-in-components.html#component
• vue的defineProps:https://v3.cn.vuejs.org/api/sfc-script-setup.html#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4
• defineAsyncComponent：创建一个只有在需要才会加载的异步组件
• pinia：一个全局状态管理库，可以看成一个全局变量，更具体点就是一个全局对象，只要当前网页存在，它就存在，不会随着页面跳转，数据也没了，但是它会有额外的功能，能够监听每次数据变化，可以做额外的事情，主要用处：多个页面共享一个变量，
• 父子命令逻辑：递归，
• ORM框架：https://blog.csdn.net/papima/article/details/78219000

编程思想

• 模块化的思想，整个项目，代码逻辑清晰，模块解耦的真的棒，值得好好学习
• 解耦，不断解耦，抽离，封装，让通用逻辑全部都提出出来
• 好的代码，是可读性很强的，尽量写通俗易懂的代码

END

整个项目的收获，

1. 学习到了新的vue知识，例如：异步加载组件defineAsyncComponent ，利用vue Composition API封装自己的hooks，等等
2. 惊叹鱼皮系统设计的巧妙，对解耦，组件化，模块化有了更深的认识，也知道了基础知识真的很重要
3. 学习到了如何自己从零到一做一个cool又实用的项目，
4. 喜欢上看官方文档，知道如何快速上手一个新的技术，就是照着官方文档跑demo
5. 我还需要花时间看源码，感觉还有很多东西没学到，只学到了皮毛

最后感谢鱼皮，由衷的佩服鱼皮，我的榜样，优秀且谦虚，身上有太多我羡慕的品质，嗯 ，努力学习吧，我虽然羡慕，但是每个人都有自己的节奏，我希望我虽不能向鱼皮那样扶摇直上九万里，我也能做一个蜗牛，每天前进一点点，