代码处理方法、装置、电子设备及存储介质.pdf

《代码处理方法、装置、电子设备及存储介质.pdf》由会员分享，可在线阅读，更多相关《代码处理方法、装置、电子设备及存储介质.pdf（23页完成版）》请在专利查询网上搜索。

1、(19)中华人民共和国国家知识产权局 (12)发明专利申请 (10)申请公布号 (43)申请公布日 (21)申请号 202010055008.3 (22)申请日 2020.01.17 (71)申请人 北京达佳互联信息技术有限公司 地址 100085 北京市海淀区上地西路6号1 幢1层101D1-7 (72)发明人 张文哲 (74)专利代理机构 北京润泽恒知识产权代理有 限公司 11319 代理人 李娜 (51)Int.Cl. G06F 8/33(2018.01) (54)发明名称 代码处理方法、 装置、 电子设备及存储介质 (57)摘要 本公开关于一种代码处理方法、 装置、 电子 设备及存储介。

2、质。 所述方法， 包括： 接收针对代码 编辑器的启动指令； 根据所述启动指令， 通过浏 览器对所述代码编辑器进行渲染展示， 得到代码 编辑器页面； 通过所述代码编辑器页面中的代码 输入区域接收待执行代码， 并在所述代码编辑器 页面中的结果展示区域展示所述待执行代码的 执行结果。 解决了相关技术中代码开发和测试过 程操作繁琐， 时间成本较大， 效率较低的技术问 题。 取得了提高代码开发和测试过程的效率的有 益效果。 权利要求书2页 说明书14页 附图6页 CN 111273899 A 2020.06.12 CN 111273899 A 1.一种代码处理方法， 其特征在于， 包括： 接收针对代码编。

3、辑器的启动指令； 根据所述启动指令， 通过浏览器对所述代码编辑器进行渲染展示， 得到代码编辑器页 面； 通过所述代码编辑器页面中的代码输入区域接收待执行代码， 并在所述代码编辑器页 面中的结果展示区域展示所述待执行代码的执行结果。 2.根据权利要求1所述的方法， 其特征在于， 所述代码编辑器页面中还包括控制台输出 区域， 所述方法还包括： 获取与所述代码编辑器页面关联的控制台的输出数据， 并在所述代码编辑器页面中的 控制台输出区域中展示所述输出数据。 3.根据权利要求2所述的方法， 其特征在于， 所述获取所述与所述代码编辑器页面关联 的控制台的输出数据， 并在所述代码编辑器页面中的控制台输出区。

4、域中展示所述输出数据 的步骤， 包括： 通过在所述代码编辑器页面的加载阶段重写的控制台函数， 将与所述代码编辑器页面 关联的控制台的输出数据绑定至预设的变量数组中， 并在所述代码编辑器页面中的控制台 输出区域显示所述变量数组。 4.根据权利要求1-3中任一项所述的方法， 其特征在于， 所述通过所述代码编辑器页面 中的代码输入区域接收待执行代码， 并在所述代码编辑器页面中的结果展示区域展示所述 待执行代码的执行结果的步骤， 包括： 根据接收到针对所述代码编辑器页面中任一模板标识的选择指令， 在所述代码输入区 域展示所述模板标识对应的模板； 在通过所述代码输入区域接收编辑操作的过程中， 响应于所述。

5、代码编辑器当前接收到 的编辑操作为有内容的输入， 根据所述编辑操作的输入内容， 进行代码自动提示； 响应于所述代码输入区域在预设时间段内未接收到编辑操作， 在所述结果展示区域中 展示所述代码输入区域中的待执行代码的执行结果。 5.根据权利要求1-3中任一项所述的方法， 其特征在于， 所述根据所述启动指令， 通过 浏览器对所述代码编辑器进行渲染展示， 得到代码编辑器页面的步骤， 包括： 响应于首次接收到所述启动指令， 和/或在当前客户端的本地未检测到所述代码编辑 器的文件包， 从服务器获取所述代码编辑器的文件包； 其中， 所述文件包中包含在所述服务 器中渲染完成的Nuxt框架； 响应于检测到所述。

6、Nuxt框架的所处环境为前端环境， 根据所述文件包加载并渲染展示 所述代码编辑器的编辑器插件。 6.根据权利要求5所述的方法， 其特征在于， 所述根据所述文件包加载并渲染展示所述 代码编辑器的编辑器插件的步骤， 包括： 根据所述代码编辑器的主配置文件中配置的压缩参数， 获取用以组成所述编辑器插件 的各个压缩文件并解压缩， 得到所述编辑器插件的至少一个组件； 通过所述编辑器插件对应的配置文件， 在所述代码编辑器页面中引入所述组件， 并通 过所述代码编辑器页面的mounted钩子函数， 初始化所述代码编辑器页面， 同时将初始化后 的编辑器插件与所述代码编辑器页面中的代码输入区域绑定。 权利要求书 。

7、1/2 页 2 CN 111273899 A 2 7.根据权利要求1-3中任一项所述的方法， 其特征在于， 在所述通过所述代码编辑器页 面中的代码输入区域接收待执行代码， 并在所述代码编辑器页面中的结果展示区域展示所 述待执行代码的执行结果的步骤之后， 还包括： 保存所述代码编辑器页面中显示的内容， 并在下次启动所述代码编辑器时， 在渲染完 成的代码编辑器页面中展示上一次在所述代码编辑器页面中显示的内容。 8.一种代码处理装置， 其特征在于， 包括： 启动指令接收模块， 被配置为执行接收针对代码编辑器的启动指令； 代码编辑器渲染模块， 被配置为执行根据所述启动指令， 通过浏览器对所述代码编辑 。

8、器进行渲染展示， 得到代码编辑器页面； 代码接收处理模块， 被配置为执行通过所述代码编辑器页面中的代码输入区域接收待 执行代码， 并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果。 9.一种电子设备， 其特征在于， 包括： 处理器； 用于存储所述处理器可执行指令的存储器； 其中， 所述处理器被配置为执行所述指令， 以实现如权利要求1至7中任一项所述的代 码处理方法。 10.一种存储介质， 当所述存储介质中的指令由电子设备的处理器执行时， 使得电子设 备能够执行如权利要求1至7中任一项所述的代码处理方法。 权利要求书 2/2 页 3 CN 111273899 A 3 代码处理方。

9、法、 装置、 电子设备及存储介质 技术领域 0001 本公开涉及计算机技术领域， 尤其涉及一种代码处理方法、 装置、 电子设备及存储 介质。 背景技术 0002 在前端开发工程师日常开发的过程中或者学习过程中会遇到一些需要测试的代 码片段， 而测试或者学习之前需要下载编辑器以及相关调试工具， 并且需要完整的输入编 程语言所规定的固定模板才可以进行代码调试。 例如， 为了进行代码测试， 需要下载代码编 辑器， 进而在本地的代码编辑器新建文件， 新建代码模板， 保存文件并在浏览器中运行， 而 且需要另外打开控制台以查看代码输出。 另外， 如果重新提交代码， 则需要在浏览器中重新 刷新页面， 以获取。

10、最新页面展示。 0003 有上述分析可知， 相关技术中， 前端开发人员在学习过程中为了进行代码测试， 需 要进行新建文件、 新建模板、 保存代码、 刷新浏览器、 打开控制台等一系列操作， 使得在代码 开发和测试过程操作繁琐， 时间成本较大， 效率较低。 发明内容 0004 本公开提供一种代码处理方法、 装置、 电子设备及存储介质， 以至少解决相关技术 中代码开发和测试过程操作繁琐， 时间成本较大， 效率较低的问题。 本公开的技术方案如 下： 0005 根据本公开实施例的第一方面， 提供一种代码处理方法， 包括： 0006 接收针对代码编辑器的启动指令； 0007 根据所述启动指令， 通过浏览器。

11、对所述代码编辑器进行渲染展示， 得到代码编辑 器页面； 0008 通过所述代码编辑器页面中的代码输入区域接收待执行代码， 并在所述代码编辑 器页面中的结果展示区域展示所述待执行代码的执行结果。 0009 可选地， 所述代码编辑器页面中还包括控制台输出区域， 所述方法还包括： 0010 获取与所述代码编辑器页面关联的控制台的输出数据， 并在所述代码编辑器页面 中的控制台输出区域中展示所述输出数据。 0011 可选地， 所述获取所述与所述代码编辑器页面关联的控制台的输出数据， 并在所 述代码编辑器页面中的控制台输出区域中展示所述输出数据的步骤， 包括： 0012 通过在所述代码编辑器页面的加载阶段。

12、重写的控制台函数， 将与所述代码编辑器 页面关联的控制台的输出数据绑定至预设的变量数组中， 并在所述代码编辑器页面中的控 制台输出区域显示所述变量数组。 0013 可选地， 所述通过所述代码编辑器页面中的代码输入区域接收待执行代码， 并在 所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果的步骤， 包括： 0014 根据接收到针对所述代码编辑器页面中任一模板标识的选择指令， 在所述代码输 说明书 1/14 页 4 CN 111273899 A 4 入区域展示所述模板标识对应的模板； 0015 在通过所述代码输入区域接收编辑操作的过程中， 响应于所述代码编辑器当前接 收到的编辑操作为。

13、有内容的输入， 根据所述编辑操作的输入内容， 进行代码自动提示； 0016 响应于所述代码输入区域在预设时间段内未接收到编辑操作， 在所述结果展示区 域中展示所述代码输入区域中的待执行代码的执行结果。 0017 可选地， 所述根据所述启动指令， 通过浏览器对所述代码编辑器进行渲染展示， 得 到代码编辑器页面的步骤， 包括： 0018 响应于首次接收到所述启动指令， 和/或在当前客户端的本地未检测到所述代码 编辑器的文件包， 从服务器获取所述代码编辑器的文件包； 其中， 所述文件包中包含在所述 服务器中渲染完成的Nuxt框架； 0019 响应于检测到所述Nuxt框架的所处环境为前端环境， 根据所。

14、述文件包加载并渲染 展示所述代码编辑器的编辑器插件。 0020 可选地， 所述根据所述文件包加载并渲染展示所述代码编辑器的编辑器插件的步 骤， 包括： 0021 根据所述代码编辑器的主配置文件中配置的压缩参数， 获取用以组成所述编辑器 插件的各个压缩文件并解压缩， 得到所述编辑器插件的至少一个组件； 0022 通过所述编辑器插件对应的配置文件， 在所述代码编辑器页面中引入所述组件， 并通过所述代码编辑器页面的mounted钩子函数， 初始化所述代码编辑器页面， 同时将初始 化后的编辑器插件与所述代码编辑器页面中的代码输入区域绑定。 0023 可选地， 在所述通过所述代码编辑器页面中的代码输入区。

15、域接收待执行代码， 并 在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果的步骤之后， 还 包括： 0024 保存所述代码编辑器页面中显示的内容， 并在下次启动所述代码编辑器时， 在渲 染完成的代码编辑器页面中展示上一次在所述代码编辑器页面中显示的内容。 0025 根据本公开实施例的第二方面， 提供一种代码处理装置， 包括： 0026 启动指令接收模块， 被配置为执行接收针对代码编辑器的启动指令； 0027 代码编辑器渲染模块， 被配置为执行根据所述启动指令， 通过浏览器对所述代码 编辑器进行渲染展示， 得到代码编辑器页面； 0028 代码接收处理模块， 被配置为执行通过所述代码。

16、编辑器页面中的代码输入区域接 收待执行代码， 并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结 果。 0029 可选地， 所述代码编辑器页面中还包括控制台输出区域， 所述装置还包括： 0030 控制台数据展示模块， 被配置为执行获取与所述代码编辑器页面关联的控制台的 输出数据， 并在所述代码编辑器页面中的控制台输出区域中展示所述输出数据。 0031 可选地， 所述控制台数据展示模块， 具体被配置为执行： 通过在所述代码编辑器页 面的加载阶段重写的控制台函数， 将与所述代码编辑器页面关联的控制台的输出数据绑定 至预设的变量数组中， 并在所述代码编辑器页面中的控制台输出区域显示所述。

17、变量数组。 0032 可选地， 所述代码接收处理模块， 包括： 0033 模板选择显示子模块， 被配置为执行根据接收到针对所述代码编辑器页面中任一 说明书 2/14 页 5 CN 111273899 A 5 模板标识的选择指令， 在所述代码输入区域展示所述模板标识对应的模板； 0034 代码自动提示子模块， 被配置为执行在通过所述代码输入区域接收编辑操作的过 程中， 响应于所述代码编辑器当前接收到的编辑操作为有内容的输入， 根据所述编辑操作 的输入内容， 进行代码自动提示； 0035 代码处理子模块， 被配置为执行响应于所述代码输入区域在预设时间段内未接收 到编辑操作， 在所述结果展示区域中展。

18、示所述代码输入区域中的待执行代码的执行结果。 0036 可选地， 所述代码编辑器渲染模块， 包括： 0037 文件包获取子模块， 被配置为执行响应于首次接收到所述启动指令， 和/或在当前 客户端的本地未检测到所述代码编辑器的文件包， 从服务器获取所述代码编辑器的文件 包； 其中， 所述文件包中包含在所述服务器中渲染完成的Nuxt框架； 0038 编辑器插件渲染子模块， 被配置为执行响应于检测到所述Nuxt框架的所处环境为 前端环境， 根据所述文件包加载并渲染展示所述代码编辑器的编辑器插件。 0039 可选地， 所述编辑器插件渲染子模块， 包括： 0040 编辑器插件获取单元， 被配置为执行根据。

19、所述代码编辑器的主配置文件中配置的 压缩参数， 获取用以组成所述编辑器插件的各个压缩文件并解压缩， 得到所述编辑器插件 的至少一个组件； 0041 编辑器插件渲染单元， 被配置为执行通过所述编辑器插件对应的配置文件， 在所 述代码编辑器页面中引入所述组件， 并通过所述代码编辑器页面的mounted钩子函数， 初始 化所述代码编辑器页面， 同时将初始化后的编辑器插件与所述代码编辑器页面中的代码输 入区域绑定。 0042 可选地， 所述装置还包括： 0043 内容记录回溯模块， 被配置为执行保存所述代码编辑器页面中显示的内容， 并在 下次启动所述代码编辑器时， 在渲染完成的代码编辑器页面中展示上一。

20、次在所述代码编辑 器页面中显示的内容。 0044 根据本公开实施例的第三方面， 提供一种电子设备， 包括： 0045 处理器； 0046 用于存储所述处理器可执行指令的存储器； 0047 其中， 所述处理器被配置为执行所述指令， 以实现如前述的任意一种代码处理方 法。 0048 根据本公开实施例的第四方面， 提供一种存储介质， 当所述存储介质中的指令由 电子设备的处理器执行时， 使得电子设备能够执行如前述的任意一种代码处理方法。 0049 根据本公开实施例的第五方面， 提供一种计算机程序产品， 当所述存储介质中的 指令由电子设备的处理器执行时， 使得电子设备能够执行如前述的任意一种代码处理方 。

21、法。 0050 本公开的实施例提供的技术方案至少带来以下有益效果： 在本申请实施例中， 通 过接收针对代码编辑器的启动指令； 根据所述启动指令， 通过浏览器对所述代码编辑器进 行渲染展示， 得到代码编辑器页面； 通过所述代码编辑器页面中的代码输入区域接收待执 行代码， 并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果。 可 以在输入代码的同时实时展示代码执行结果的变化， 提高代码开发测试的效率。 说明书 3/14 页 6 CN 111273899 A 6 0051 应当理解的是， 以上的一般描述和后文的细节描述仅是示例性和解释性的， 并不 能限制本公开。 附图说明 0052 。

22、此处的附图被并入说明书中并构成本说明书的一部分， 示出了符合本公开的实施 例， 并与说明书一起用于解释本公开的原理， 并不构成对本公开的不当限定。 0053 图1是根据一示例性实施例示出的一种代码处理方法的流程图。 0054 图2是根据一示例性实施例示出的另一种代码处理方法的流程图。 0055 图3是根据一示例性实施例示出的一种代码编辑器页面的示意图。 0056 图4是根据一示例性实施例示出的一种代码测试装置的框图。 0057 图5是根据一示例性实施例示出的另一种代码测试装置的框图。 0058 图6是根据一示例性实施例示出的一种装置的框图。 0059 图7是根据一示例性实施例示出的另一种装置的。

23、框图。 具体实施方式 0060 为了使本领域普通人员更好地理解本公开的技术方案， 下面将结合附图， 对本公 开实施例中的技术方案进行清楚、 完整地描述。 0061 需要说明的是， 本公开的说明书和权利要求书及上述附图中的术语 “第一” 、“第 二” 等是用于区别类似的对象， 而不必用于描述特定的顺序或先后次序。 应该理解这样使用 的数据在适当情况下可以互换， 以便这里描述的本公开的实施例能够以除了在这里图示或 描述的那些以外的顺序实施。 以下示例性实施例中所描述的实施方式并不代表与本公开相 一致的所有实施方式。 相反， 它们仅是与如所附权利要求书中所详述的、 本公开的一些方面 相一致的装置和方。

24、法的例子。 0062 图1是根据一示例性实施例示出的一种代码处理方法的流程图， 如图1所示， 代码 处理方法可用于电脑、 笔记本、 手机、 服务器等电子设备中， 包括以下步骤。 0063 在步骤S11中， 接收针对代码编辑器的启动指令。 0064 在步骤S12中， 根据所述启动指令， 通过浏览器对所述代码编辑器进行渲染展示， 得到代码编辑器页面。 0065 在步骤S13中， 通过所述代码编辑器页面中的代码输入区域接收待执行代码， 并在 所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果。 0066 在本申请实施例中， 为了提高代码测试效率， 降低时间成本， 可以预先设置一可在 线的。

25、前端代码编辑器， 也即可在浏览器中渲染展示的代码编辑器， 通过该代码编辑器可直 接在浏览器中进行代码输入， 并且在编辑器页面中可以设置指定区域进行实时的代码编译 后的成果展示， 从而可以直接减少前端开发人员在学习、 测试、 开发等过程中需要新建文 件、 保存代码， 刷新浏览器等一系列操作， 提高代码测试效率。 0067 具体地， 在本申请实施例中， 如果接收到针对代码编辑器的启动指令， 则可以根据 所述启动指令， 通过浏览器对所述代码编辑器进行渲染展示， 得到代码编辑器页面。 而且， 在渲染得到的代码编辑器页面中可以至少包括代码输入区域和结果展示区域。 那么则可以 通过所述代码编辑器页面中的代。

26、码输入区域接收待执行代码， 并在所述代码编辑器页面中 说明书 4/14 页 7 CN 111273899 A 7 的结果展示区域展示所述待执行代码的执行结果。 0068 其中， 在本申请实施例中， 可以通过任何可用方式对代码编辑器进行渲染展示， 对 此本申请实施例不加以限定。 而且， 为了实现在代码编辑器页面中可以至少包括代码输入 区域和结果展示区域， 以实时展示代码编译后的执行结果， 可以在预先配置代码编辑器的 安装包时， 在代码编辑器页面中设置代码输入区域和结果展示区域。 0069 例如， 在本申请实施例中， 底层可以使用构建数据驱动的web界面的渐进式框架 vue.js技术， 配置基于V。

27、ue.js的通用应用框架nuxt.js技术框架作为前端开发模板。 在针对 代码编辑器进行代码开发完成之后， 则可以上传代码至服务器并打包， 而且可以通过pm2等 进程管理工具守护进程启动后端文件， 也即服务器中的代码编辑器的安装包文件。 0070 另外， 在本申请实施例中， 可以通过任何可用方式接收针对代码编辑器的启动指 令， 对此本申请实施例不加以限定。 例如， 可以在浏览器的菜单栏中增加一用以触发启动代 码编辑器的控件， 用户可以通过触发该控件输入针对代码编辑器的启动指令， 进而则可以 在相应的浏览器中渲染展示相应的代码编辑器。 在本申请实施例中， 可以用以实现代码编 辑器的渲染展示的浏览。

28、器可以根据需求进行自定义设置， 对此本申请实施例不加以限定。 0071 在本申请实施例中， 通过接收针对代码编辑器的启动指令； 根据所述启动指令， 通 过浏览器对所述代码编辑器进行渲染展示， 得到代码编辑器页面； 通过所述代码编辑器页 面中的代码输入区域接收待执行代码， 并在所述代码编辑器页面中的结果展示区域展示所 述待执行代码的执行结果。 可以在输入代码的同时实时展示代码执行结果的变化， 提高代 码开发测试的效率。 0072 参照图2， 在本申请实施例中， 所述代码编辑器页面中还包括控制台输出区域， 所 述代码处理方法还可以包括： 0073 步骤S14， 获取与所述代码编辑器页面关联的控制台。

29、的输出数据， 并在所述代码编 辑器页面中的控制台输出区域中展示所述输出数据。 0074 另外， 在实际应用中， 用户输入的代码可能存在错误使得编译失败， 在相关技术中 用户需要另外手动触发启动或者是切换至代码编辑器的控制台界面， 以查看控制台报错数 据， 用户无法在输入代码的同时实时查看得到控制台数据。 0075 因此， 在本申请实施例中， 为了方便用户可以实时查看控制台报错， 可以设置代码 编辑器页面中还包括控制台输出区域， 那么此时还可以获取与所述代码编辑器页面关联的 控制台的输出数据， 并在所述代码编辑器页面中的控制台输出区域中展示所述输出数据。 0076 其中， 在本申请实施例中， 可。

30、以通过任何可用方式获取与所述代码编辑器页面关 联的控制台的输出数据， 对此本申请实施例不加以限定。 例如， 可以在用户授权的情况下， 通过钩子函数拦截控制台的输出数据， 并在码编辑器页面中的控制台输出区域中展示， 等 等。 而且， 在本申请实施例中， 在代码编辑器页面中展示控制台的输出数据时， 可以不调整 输入数据的原始格式， 当然也可以根据控制台输出区域的具体位置、 尺寸等调整输入数据 的格式， 以使其适应控制台输出区域， 具体的可以根据需求进行自定义设置， 对此本申请实 施例不加以限定。 0077 可选地， 在本申请实施例中， 所述步骤S14进一步可以包括： 通过在所述代码编辑 器页面的加。

31、载阶段重写的控制台函数， 将与所述代码编辑器页面关联的控制台的输出数据 绑定至预设的变量数组中， 并在所述代码编辑器页面中的控制台输出区域显示所述变量数 说明书 5/14 页 8 CN 111273899 A 8 组。 0078 在本申请实施例中， 为了及时获取控制台的输出数据， 以实时在代码编辑器页面 中展示， 可以在页面的加载阶段重写相应代码编辑器的控制台(console)函数， 将控制台每 次的输出数据绑定至预设的变量数组中， 并将变量数组在代码编辑器页面中的控制台输出 区域中显示， 从而可以实现在控制台输出区域中展示控制台每次的输出数据， 即可实现页 面的实时数据输出观察。 0079 。

32、当然， 根据需求也可以在其他时机重写代码编辑器的控制台函数， 具体的可以根 据需求进行自定义设置， 对此本申请实施例不加以限定。 而且， 在本申请实施例中， 变量数 组可以根据需求进行自定义设置， 可以通过任何可用方式实现将变量数组绑定至代码编辑 器页面中的控制台输出区域， 而且绑定方式可以为双向数据绑定， 也可以为单向绑定， 对此 本申请实施例不加以限定。 0080 如图3所示为一种代码编辑器页面的示意图。 其中， 左侧界面为代码输入区域， 右 侧上部区域为结果展示区域， 右侧下部区域为控制台输出区域。 此时， 在代码输入区域接收 到待执行代码之后， 则可以在右侧的结果展示区域中实时展示待执。

33、行代码的执行结果， 同 时可以在控制台输出区域展示控制台针对待执行代码的输出数据。 0081 参照图2， 在本申请实施例中， 所述步骤S13进一步可以包括： 0082 步骤S131， 根据接收到针对所述代码编辑器页面中任一模板标识的选择指令， 在 所述代码输入区域展示所述模板标识对应的模板； 0083 步骤S132， 在通过所述代码输入区域接收编辑操作的过程中， 响应于所述代码编 辑器当前接收到的编辑操作为有内容的输入， 根据所述编辑操作的输入内容， 进行代码自 动提示； 0084 步骤S133， 响应于所述代码输入区域在预设时间段内未接收到编辑操作， 在所述 结果展示区域中展示所述代码输入区。

34、域中的待执行代码的执行结果。 0085 在实际应用中， 存在多种不同类型语言， 而且针对同一语言类型， 在不同的应用场 景下， 也可能存在比较常用的代码模板， 如果用户每次都需要完全自行输入全部代码， 可能 每次都需要重复输入同样的内容， 影响代码测试效率。 因此， 在本申请实施例中， 可以预先 整理多套模板可供用户选择， 实现模板之间的一键切换无需重新编写。 而且， 为了方便用户 选择模板， 可以在代码编辑器页面中设置用以选择模板的快捷键， 通过触发该快捷键可以 触发在前端的代码编辑器页面中展示模板列表， 或者直接在代码编辑器页面中设置用以选 择模板的的筛选框， 用户可以通过模板列表或者筛选。

35、框选择当前所需的模板。 例如， 在图3 所示的代码编辑器页面中， 此时的代码输入区域中展示的代码中颜色较暗部分则为用户当 前选定的目标标识对应的模板。 0086 另外， 在本申请实施例中， 为了满足用户的个性化需求， 还可以开放一设置模板的 接口， 用户还可以将自定义的模板通过相应的接口上传至代码编辑器， 而且在本申请实施 例中， 用户也可以根据需求对预设的模板中的部分代码进行自定义调整， 以对其前端展示 的模板进行更新。 而且， 在本申请实施例中， 在实现前端页面中的代码切换时， 可以依靠vue 底层的双向数据绑定实时切换前端页面的代码展示效果。 其中， vue是一套构建用户界面的 渐进式框。

36、架。 0087 那么， 在本申请实施例中， 则可以根据接收到针对代码编辑器页面中任一模板标 说明书 6/14 页 9 CN 111273899 A 9 识的选择指令， 则可以在代码输入区域展示相应模板标识对应的模板， 而如果用户又选定 另一模板标识， 则相应地可以切换至另一模板标识对应的模板。 其中的模板标识可以为可 以唯一性地表征各个模板身份的标识， 具体地每个模板的模板标识可以根据需求进行自定 义设置， 对此本申请实施例不加以限定。 0088 另外， 在本申请实施例中， 由于代码编辑器还可以涉及自动补全， 代码高亮等功 能， 所以还可以根据需求配置包括但不限于以下属性： mode(语言模式。

37、， 例如可以采用html+ js等语言模式)、 theme(主题， 例如monokai等主题)、 tabSize(代码缩进数， 例如可以默认设 置为2)、 lineNumbers(显示代码行数)、 smartIndent(自动缩进)、 autofocus(自动聚焦)、 s t y l e A c t i v e L i n e (光 标 所 在 行 数 高 亮) 、 m a t c h B ra c k e t s (括 号 匹 配) 、 showCursorWhenSelecting(选择时显示光标)、 lineWrapping(线条包装)、 foldGutter、 gutters(代码折叠。

38、)、 autoCloseTags(html标签自动匹配)， 等等。 在本申请实施例中， 可以 通过任何可用方式设置上述属性， 以方便根据需求针对上述属性进行自定义设置或调整。 0089 在实际应用中， 用户在输入代码的过程中， 可能会忘记部分函数或者参数的具体 拼写方式， 从而影响代码编辑效率， 或者导致代码编辑出现错误。 因此， 在本申请实施例中， 为了避免上述情况， 可以在代码编辑器设置自动提示。 具体地， 在通过所述代码输入区域接 收编辑操作的过程中， 如果代码编辑器当前接收到的编辑操作为有内容的输入， 则可以根 据相应的编辑操作的输入内容， 进行代码自动提示。 例如， 可以通过onch。

39、ange事件监控代码 编辑器内的代码输入， 判断用的行为是增加还是删除， 当用户行为是增加时， 判断用户的输 入是否为空格， 当检测用户的输入含有具体内容时， 也即编辑操作为有内容的输入时， 则可 以进行代码自动提示。 0090 具体的代码自动提示的方式和位置等均可以根据需求进行自定义设置， 对此本申 请实施例不加以限定。 例如， 可以根据相应的编辑操作， 获取其包含其输入内容在内的全部 函数、 参数等等， 进而根据各个提示内容与输入内容的关联程度从高到低的顺序构建代码 提示列表并在光标下方展示， 等等。 0091 另外， 在本申请实施例中， 为了实现代码执行结果的实时展示同时避免资源浪费， 。

40、可以检测代码输入区域是否接收到编辑操作， 如果代码输入区域在预设时间段内未接收到 编辑操作， 则可以在结果展示区域中展示所述代码输入区域中的待执行代码的执行结果。 其中的预设时间段可以根据需求进行自定义设置， 对此本申请实施例不加以限定。 例如， 可 以设置预设时间段为3秒， 等等。 0092 需要说明的是， 在本发明实施例中， 可以并不限定步骤S131-S133的执行顺序及执 行次数， 可以针对用户的操作情况分别执行对应的步骤。 0093 参照图2， 在本申请实施例中， 所述步骤S12进一步可以包括： 0094 步骤S121， 响应于首次接收到所述启动指令， 和/或在当前客户端的本地未检测到。

41、 所述代码编辑器的文件包， 从服务器获取所述代码编辑器的文件包； 其中， 所述文件包中包 含在所述服务器中渲染完成的Nuxt框架； 0095 步骤S122， 响应于检测到所述Nuxt框架的所处环境为前端环境， 根据所述文件包 加载并渲染展示所述代码编辑器的编辑器插件。 0096 在实际应用中， 如果客户端本地已经缓存有代码编辑器的文件包， 那么为了提高 响应效率， 则可以直接基于本地的文件包进行代码编辑器的渲染展示。 而如果如果当前的 说明书 7/14 页 10 CN 111273899 A 10 客户端是首次接收到针对代码编辑器的启动指令， 那么本地一般不会存在缓存的代码编辑 器的文件包。 。

42、因此， 在本申请实施例中， 如果首次接收到针对代码编辑器的启动指令， 和/或 在当前客户端的本地未检测到所述代码编辑器的文件包， 则可以从服务器获取所述代码编 辑器的文件包。 0097 而且如前述， 在本申请实施例中， 可以配置Nuxt.js技术框架作为前端开发模板。 而且由于nuxt框架整体为后端渲染， 因此可以在服务器中完成对nuxt框架的渲染， 那么此 时在从服务器获取的文件包中至少包含了已经在服务器中渲染完成的Nuxt框架。 当然， 在 本申请实施例中， 如果采用了其他可以在客户端渲染的框架， 那么也可以在客户端进行框 架渲染， 此时文件包中包含的则为未渲染前的Nuxt框架。 0098。

43、 另外， 在本申请实施例中， 可以通过引入Codemirrow等编辑器插件进行在线代码 编辑器开发， 而且Codemirrow所需渲染环境为前端， 因此在本申请实施例中， 可以通过检测 渲染完成的Nuxt框架是否处于前端环境， 如果检测到Nuxt框架的所处环境为前端环境， 则 可以根据文件包加载并渲染展示相应的代码编辑器的编辑器插件， 以完成代码编辑器页面 的渲染展示。 0099 具体地， 在本申请实施例中， 可以通过任何可用方式检测Nuxt框架的所处环境是 否为前端环境， 对此本申请实施例不加以限定。 例如， 可以通过在mounted函数中的 process.client参数判断Nuxt框架。

44、所处环境是否为前端环境。 当Nuxt框架所处环境是否为 前端环境时， process.client参数的取值可以为前端环境对应的值。 其中， mounted在模板 渲染成html后调用， 通常是初始化页面完成后， 再对html的dom节点进行一些需要的操作， mounted通常是在一些插件的使用或者组件的使用中进行操作。 0100 可选地， 在本申请实施例中， 所述步骤S122进一步可以包括： 0101 步骤S1221， 根据所述代码编辑器的主配置文件中配置的压缩参数， 获取用以组成 所述编辑器插件的各个压缩文件并解压缩， 得到所述编辑器插件的至少一个组件； 0102 步骤S1222， 通过所。

45、述编辑器插件对应的配置文件， 在所述代码编辑器页面中引入 所述组件， 并通过所述代码编辑器页面的mounted钩子函数， 初始化所述代码编辑器页面， 同时将初始化后的编辑器插件与所述代码编辑器页面中的代码输入区域绑定。 0103 另外， 由于codemirrow等编辑器插件自身包体积过大， 在主入口配置文件加载编 辑器插件容易导致首屏加载过慢影响性能。 因此在本申请实施例中， 可以采用页面单独引 入加载的方式以提高性能首屏， 也即通过编辑器插件对应的配置文件中引入编辑器插件， 并在主配置文件中配置optimization(压缩参数/打包参数， 例如压缩方式、 压缩路径， 等 等)。 0104 。

46、另外， 在本申请实施例中， 为了防止大量静态文件压缩至一个文件中， 避免增加浏 览器的请求时间。 还可以通过拆分编辑器插件中的chunks(块)进行各个组件单独压缩。 其 中， 编辑器插件的拆分方式可以根据需求进行自定义设置， 对此本申请实施例不加以限定。 例如， 可以将编辑器插件拆分出lib， addon， keymap， mode， theme五个组件， 分别代表主文 件， 插件， 快捷键， 编程语言模式以及主题。 那么则可以分别将五个组件分别压缩至不同的 文件中。 0105 那么在前端进行编辑器插件的渲染时， 则可以根据所述代码编辑器的主配置文件 中配置的压缩参数， 获取用以组成所述编辑。

47、器插件的各个压缩文件并解压缩， 得到所述编 说明书 8/14 页 11 CN 111273899 A 11 辑器插件的各个组件； 进而则可以通过编辑器插件对应的配置文件， 在所述代码编辑器页 面中引入所述组件， 并通过所述代码编辑器页面的mounted钩子函数， 初始化所述代码编辑 器页面， 而且为了展示编辑器插件， 可以将初始化后的编辑器插件绑定在代码编辑器页面 中建立的代码输入区域， 之后则可以通过代码输入区域进行代码输入并展示。 0106 参照图2， 在本申请实施例中， 在所述步骤S13之后， 进一步可以包括： 0107 步骤S15， 保存所述代码编辑器页面中显示的内容， 并在下次启动所。

48、述代码编辑器 时， 在渲染完成的代码编辑器页面中展示上一次在所述代码编辑器页面中显示的内容。 0108 另外， 在实际应用中， 用户在进行代码编辑过程中， 可能会由于操作失误关闭代码 编辑器， 或者是在下一次重启代码编辑器时仍然期望可以继续上一次的代码编辑， 等等。 因 此， 在本申请实施例中， 为了满足用户的上述需求， 还可以保存代码编辑器页面中显示的内 容， 并在下次启动所述代码编辑器时， 在渲染完成的代码编辑器页面中展示上一次在所述 代码编辑器页面中显示的内容。 0109 其中， 代码编辑器页面中显示的内容的保存地址可以根据需求进行自定义设置， 对此本申请实施例不加以限定。 例如， 可以。

49、设置将代码编辑器页面中显示的内容保存至浏 览器本地缓存中， 等等。 0110 而且， 在本申请实施例中， 为了保证所保存内容的时效性， 可以周期性地保存代码 编辑器页面中显示的内容。 例如， 可以在前端的代码编辑器中内置了一个定时器， 每三秒对 代码编辑器页面中显示的内容进行一次本地缓存的存储， 将每次用户的最新输入， 以及执 行结果和控制台的输出数据等存储至浏览器本地缓存中。 当用户下次在相应客户端启动代 码编辑器时， 可根据用户的缓存内容直接展示上次在所述代码编辑器页面中显示的内容。 0111 在本申请实施例中， 通过获取与所述代码编辑器页面关联的控制台的输出数据， 并在所述代码编辑器页面。

50、中的控制台输出区域中展示所述输出数据。 并且， 通过在所述代 码编辑器页面的加载阶段重写的控制台函数， 将与所述代码编辑器页面关联的控制台的输 出数据绑定至预设的变量数组中， 并在所述代码编辑器页面中的控制台输出区域显示所述 变量数组。 从而可以在集成控制台输出， 无需在浏览器内开启调试工具即可展示控制台最 新输出以及报错等。 0112 而且， 在本申请实施例中， 还可以根据接收到针对所述代码编辑器页面中任一模 板标识的选择指令， 在所述代码输入区域展示所述模板标识对应的模板； 在通过所述代码 输入区域接收编辑操作的过程中， 响应于所述代码编辑器当前接收到的编辑操作为有内容 的输入， 根据所述。