计算机原理可视化项目

项目概述

计算机原理可视化项目是一个以 HTML5 技术为基础，利用 Vue.js 前端框架实现的一个 Web 应用。它旨在通过可视化的方式，帮助用户理解计算机的基本工作原理和流程，包括数据和指令的处理，以及从高级语言到二进制代码的编译过程。

主要功能

1. 二进制原理展示：项目将展示二进制（数据和代码）的基本原理，包括整数（补码）和浮点数的表示方法，以及指令集设计原理。

2. 计算机模型展示：项目将展示以内存为中心的程序员视角的计算机模型，包括计算机加电开机的过程模型，内存编址和分段（Segment），以及处理器计算和 I/O 的过程。

3. 代码执行流程展示：项目将展示基于 "JUMP" 的代码执行 "顺序、分支、循环" 的三个基本流程。

4. 编译过程展示：项目将展示从高级语言到二进制代码的编译过程，以及具有运行时环境（如 JRE）的代码运行过程。

加分项

1. 指令集和二进制的对应关系：参考 MIPS 或者 RISC-V 指令集规范，完整演示指令集和二进制的对应关系。

2. 中间代码的编译和运行过程：参考 Java ByteCode、.Net IL 等中间代码规范，完整演示中间代码的编译和运行过程。

3. 开机过程演示：参考 X86 计算机开机的地址规范，演示开机过程。

技术栈

该项目使用 HTML5 和 Vue.js 作为主要开发技术，可能会结合使用 JQuery、Bootstrap 等成熟的前端框架来提高开发效率和用户体验。

项目目标

通过本项目，我们希望能够帮助用户更好地理解计算机的工作原理，从而提高他们的计算机科学知识和技能。同时，我们也希望这个项目能够成为一个有用的教育工具，帮助教师在教学过程中更好地解释和展示复杂的计算机原理。

目标与完成情况

目标	完成情况
主页面	采用文字动画，采用侧边栏、顶栏、底栏、主要区域的页面布局
演示整数（补码）、浮点数的原理	交互组件与文字展示
指令集设计原理	通过文字，思维导图展示
计算机加电开机的过程模型	通过走马灯的形式图文展示，直接以x86计算机为例
计算机内存编址和分段（Segment）	增加分页介绍，以引导式的方法展示
处理器计算和I/O的过程	通过互动式组件与图文进行展示
基于“JUMP”的代码	图文展示，接入本地的API进行展示
高级语言到二进制代码的编译过程	拆分成高级->RISC-V->二进制，前半部分接入外部网站的API，后半部分图文展示
运行时环境	通过时间线的形式展示
中间代码规范	图文形式展示

项目细节

HomePage

该项目主要由一个 Vue 组件构成，该组件在页面加载时，以动态的方式显示项目的介绍信息。

以下是 Vue 组件的结构：

• template：定义了组件的 HTML 结构。主要包括一些标题和一个段落，段落的内容是动态显示的。

• script：定义了组件的行为。主要包括一些数据和一个生命周期钩子函数。

  • data：定义了两个数据属性 message 和 messageDisplayed。message 包含了完整的项目介绍信息，messageDisplayed 则用于存储当前已经显示的信息。
  • mounted：这是一个生命周期钩子函数，它在组件被添加到 DOM 之后执行。在这个函数中，我们设置了一个定时器，每隔一定的时间就将 message 中的一个字符添加到 messageDisplayed 中，从而实现了动态显示信息的效果。

• style：定义了组件的样式。主要是设置了段落的颜色和字体大小。

二进制原理展示

整数、浮点数与二进制的转换

这个项目是一个基于 Vue.js 和 Element UI 的 Web 应用，主要功能是将用户输入的十进制整数或浮点数转换为二进制形式，并显示转换过程和结果。对于整数，还会显示原码、反码和补码；对于浮点数，还会显示符号位、阶码部分和尾数部分，以及按照 IEEE 754 标准转换后的结果。

该项目主要由一个 Vue 组件构成，该组件包括以下部分：

• template：定义了组件的 HTML 结构。主要包括一些标题、输入框、单选按钮组、表格、按钮和段落，以及一些条件渲染的模板。

• script：定义了组件的行为。主要包括一些数据属性、方法和监听器。

  • data：定义了一些用于存储用户输入和转换结果的数据属性。
  • methods：定义了一些用于转换整数和浮点数的方法。
  • watch：定义了一些监听器，用于在用户输入改变时自动进行交互组件的状态转换。

• style：定义了组件的样式。主要是设置了标题和输入框的样式。

指令集设计原理

该项目是一个基于 Vue.js 和 Element UI 的 Web 应用，主要功能是展示计算机指令系统设计的基本概念和原理。该应用包括以下几个部分：

• 设计指令系统的原则和重要方面
• 操作数类型和存储方式
• 指令设计风格，包括四种主要类型的指令风格和比较
• 复杂指令集计算机（CISC）和精简指令集计算机（RISC）的详细介绍

该项目主要由一个 Vue 组件构成，该组件包括以下部分：

• template：定义了组件的 HTML 结构。主要包括一些标题、段落、列表和图像，以及滚动条组件用于提供滚动功能。

• style：定义了组件的样式。主要是设置了滚动条组件和内容项的样式。

计算机模型展示

x86计算机开机过程模型

这个项目是一个基于 Vue.js 和 Element UI 的 Web 应用，主要功能是展示计算机启动流程的各个步骤和相关概念。用户可以通过点击图片来查看每个步骤的详细信息。

该项目主要由一个 Vue 组件构成，该组件包括以下部分：

• template：定义了组件的 HTML 结构。主要包括一个轮播组件，用于展示各个步骤的标题和图片，以及一些弹出窗口，用于展示各个步骤的详细信息。

• script：定义了组件的行为。主要包括一些数据属性，用于存储各个步骤的标题和弹出窗口的状态，以及一些方法，用于打开和关闭弹出窗口。

• style：定义了组件的样式。主要是设置了轮播组件、标题、图片和弹出窗口的样式。

计算机内存编址和分段与分页

这个项目是一个基于 Vue.js 的 Web 应用，主要功能是展示计算机内存管理的相关概念和原理，包括计算机内存的编址方式、虚拟内存、内存分段和分页等。用户可以通过点击按钮来查看不同主题的描述和例子。

该项目主要由一个 Vue 组件构成，该组件包括以下部分：

• template：定义了组件的 HTML 结构。主要包括一些标题、按钮、文本和图片，用于展示各个主题的描述和例子。

• script：定义了组件的行为。主要包括一些数据属性，用于存储当前选中的主题和用户输入的数据，以及一些计算属性和方法，用于处理用户的输入和计算结果。

• style：定义了组件的样式。主要是设置了各个元素的布局、颜色、字体、边框等。

处理器计算和I/O过程

这个项目是一个基于 Vue.js 的 Web 应用，旨在通过可视化的方式帮助用户理解计算机处理器的计算过程以及I/O控制方式。该应用主要包括两个部分：处理器计算过程的可视化和三种I/O控制方式（轮询方式，中断方式，DMA方式）的介绍。

该项目主要由一个 Vue 组件构成，该组件包括以下部分：

• template：定义了组件的 HTML 结构。它包含了所有的 HTML 元素，如标题、段落、列表、按钮、图片、SVG 图形等。每个元素都可能有一些特定的属性，如样式（style）、事件监听器（v-on 或 @）、条件渲染（v-if 或 v-else-if）、数据绑定（v-bind 或 :）等。这些属性用于控制元素的外观和行为。

• script：定义了组件的 JavaScript 逻辑。它主要由一个默认导出的对象构成，这个对象包含了一些选项：

  • data：一个函数，返回一个对象，该对象包含了组件的初始数据，如步骤、百分比、对话框的可见性、颜色等。

  • methods：一个对象，包含了组件的方法，如处理按钮点击事件、搜索事件等。

  • watch：一个对象，包含了对组件数据的观察者，用于在数据改变时执行一些操作。

• style：定义了组件的 CSS 样式。它包含了一些 CSS 规则，这些规则应用于模板中的 HTML 元素。样式可以直接写在这里，也可以通过 CSS 预处理器（如 SCSS 或 Less）生成。使用 scoped 属性，可以确保样式只应用于当前组件，不会影响其他组件。

这个组件主要用于展示计算机处理器的计算过程和三种I/O控制方式（轮询方式，中断方式，DMA方式）。用户可以点击按钮来模拟这些过程，同时，也可以查看每个步骤的详细描述和示例。此外，还有一些 SVG 图形，用于更直观地展示这些过程。希望这个组件可以帮助用户更好地理解计算机原理。

代码执行流程展示

基于“JMP”的代码执行流程

这个项目是一个基于 Vue.js 的 Web 应用，旨在通过可视化的方式帮助用户理解计算机处理器中的跳转（JMP）指令。该应用主要包括两个部分：跳转指令的详细介绍和一个简单的 C++ 到汇编的编译器。

该项目主要由一个 Vue 组件构成，该组件包括以下部分：

• template：定义了组件的 HTML 结构。它包含了标题、段落、列表、代码块、表格、输入框、按钮等元素。这些元素用于展示跳转指令的介绍，显示各种跳转指令的列表，输入 C++ 代码，显示编译后的汇编代码等。

• script：定义了组件的 JavaScript 逻辑。它主要由一个默认导出的对象构成，这个对象包含了一些选项：

  • data：一个函数，返回一个对象，该对象包含了组件的初始数据，如跳转指令的列表、C++ 代码、汇编代码等。

  • methods：一个对象，包含了组件的方法，如编译 C++ 代码等。

• style：定义了组件的 CSS 样式。它包含了一些 CSS 规则，这些规则应用于模板中的 HTML 元素。样式可以直接写在这里，也可以通过 CSS 预处理器（如 SCSS 或 Less）生成。使用 scoped 属性，可以确保样式只应用于当前组件，不会影响其他组件。

这个组件主要用于展示跳转（JMP）指令的详细介绍和一个简单的 C++ 到汇编的编译器。用户可以查看各种跳转指令的列表，输入 C++ 代码，点击按钮编译 C++ 代码，查看编译后的汇编代码。希望这个组件可以帮助用户更好地理解跳转（JMP）指令和汇编语言。

服务端（server.cjs）

这个项目是一个基于 Express 的 Node.js 服务器，其主要功能是接收客户端发送的 C++ 代码，使用 g++ 编译器将其编译成汇编代码，并将生成的汇编代码发送回客户端。此外，它还提供了 Vue 应用的静态文件，并处理所有 GET 请求。

该项目由一个单一的 JavaScript 文件构成，该文件包含以下部分：

• 导入所需的模块：express、child_process、cors、fs、path。

• 创建一个 Express 应用。

• 使用 CORS 中间件，允许跨域请求。

• 使用 express.json 中间件，解析 JSON 格式的请求体。

• 定义一个 POST 路由 /compile，处理客户端发送的 C++ 代码。它将代码写入一个临时文件，然后使用 g++ 编译代码，并将生成的汇编代码发送回客户端。

• 使用 express.static 中间件，提供 Vue 应用的静态文件。

• 定义一个通配符 GET 路由，处理所有 GET 请求，将请求重定向到 Vue 应用。

• 启动服务器，监听特定的端口。

从高级语言到二进制代码的编译过程展示

高级语言->RISC-V指令集

这个项目是一个基于 Vue.js 和 Element UI 的在线编译器。它使用了 Compiler Explorer 的 API，用户可以选择不同的编程语言和编译器，输入源代码，点击按钮编译源代码，查看编译后的汇编代码。

该项目主要由一个 Vue 组件构成，该组件包含以下部分：

• template：定义了组件的 HTML 结构。它包含了表单、输入框、按钮等元素，用于选择编程语言和编译器，输入源代码，编译源代码，查看编译后的汇编代码。

• script：定义了组件的 JavaScript 逻辑。它主要由一个默认导出的对象构成，这个对象包含了一些选项：

  • data：一个函数，返回一个对象，该对象包含了组件的初始数据，如编程语言列表、编译器列表、源代码、编译结果等。

  • methods：一个对象，包含了组件的方法，如获取编程语言列表、获取编译器列表、编译源代码等。

  • mounted：一个生命周期钩子，当组件被挂载到 DOM 中时会被调用。在这里，我们调用了获取编程语言列表的方法。

• style：定义了组件的 CSS 样式。它包含了一些 CSS 规则，这些规则应用于模板中的 HTML 元素。

API 说明

这个项目使用了 Compiler Explorer 的 API，包括以下两个 API：

• GET https://godbolt.org/api/languages：获取编程语言列表。

• GET https://godbolt.org/api/compilers/:lang：获取指定编程语言的编译器列表。:lang 是编程语言的 ID。

• POST https://godbolt.org/api/compiler/:compiler/compile：编译源代码。:compiler 是编译器的 ID。请求体是一个 JSON 对象，包含源代码、编译选项等信息。响应体是一个 JSON 对象，包含编译后的汇编代码等信息。

RISC-V指令集->二进制

这个项目是一个基于 Vue.js 和 Element UI 的 RISC-V 指令集可视化工具。它提供了一个用户友好的界面，用于展示和解释 RISC-V 指令集中的各种指令格式，包括 R 型、I 型、S 型、B 型、U 型和 J 型。

• 文本和图片：解释 RISC-V 指令集中的各种指令格式。

• 表格：显示各种指令格式的字段。

• 折叠面板：用于切换显示各种指令格式的详细信息，包括字段、指令和示例。

这个组件使用了 Element UI 的 el-collapse 和 el-collapse-item 组件来创建折叠面板，使用 el-table 和 el-table-column 组件来创建表格。

运行时环境（JRE）

这个项目是一个基于 Vue.js 和 Element UI 的 Java 运行时环境（JRE）可视化教学工具。它提供了一个用户友好的界面，用于展示和解释 JRE 的基本概念，包括运行时环境介绍，Java运行时环境，以及 JRE 如何与 Java 虚拟机（JVM）配合使用。

• 时间线：使用 Element UI 的 el-timeline 和 el-timeline-item 组件来创建时间线，每个时间线项目都包含一个标题和一个卡片。

• 卡片：使用 Element UI 的 el-card 组件来创建卡片，每个卡片都包含一段文本和一个图片，用于解释一个 JRE 的概念。

这个组件主要是静态的，不需要维护任何状态，所以它的 script 部分主要是一个空的数据对象。

Java ByteCode

Java ByteCode

这个项目是一个基于 Vue.js 和 Element UI 的 Java 字节码可视化教学工具。它提供了一个用户友好的界面，用于展示和解释 Java 字节码的基本概念，包括字节码的概述、字节码的定义，以及字节码的执行过程。

参考资料

一个 Vue 3 UI 框架 | Element Plus：https://element-plus.gitee.io/zh-CN/

简介 | Vue.js：https://cn.vuejs.org/guide/introduction.html

RISC-V指令集：https://blog.csdn.net/m0_47329175/article/details/127160108

第1章 初识RISC-V - Wahahahehehe：https://www.cnblogs.com/wahahahehehe/p/15574316.html

首页 - boardmix：https://boardmix.cn/app/home

计算机开机启动过程详解：https://blog.csdn.net/weixin_44984664/article/details/104524792

iconfont-阿里巴巴矢量图标库：https://www.iconfont.cn/

深入理解计算机系统（第3章 程序的机器级表示③：https://www.cnblogs.com/kirin-dev/p/Computer-Systems_Chapter-3-3.html#tid-556EkR

操作系统（八）——虚拟内存、内存分段和内存分页：https://blog.csdn.net/www_dong/article/details/115984208?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171152507016777224445671%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171152507016777224445671&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-8-115984208-null-null.nonecase&utm_term=%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F&spm=1018.2226.3001.4450

计算机操作系统学习笔记（四）：设备管理 — I/O 管理：https://zhuanlan.zhihu.com/p/331646965

Java字节码介绍：https://blog.csdn.net/qq_40124555/article/details/128403015

什么是JRE？ Java运行时环境简介：https://blog.csdn.net/hbkzhu13579/article/details/103889768

鸣谢

参考孙更欣的在线编辑器，学习了对Compiler Explorer 的 API调用方法。

参考侯博涵学长给出的设计建议。

参考Chat GPT 给出的设计建议。