CN113434128A - 基于web端的vue代码编辑方法、编辑器及终端设备 - Google Patents

Abstract

本申请公开了一种基于web端的vue代码编辑方法、编辑器及终端设备，所述编辑方法包括获取待编辑代码，并确定所述编辑代码对应的代码内容；截取所述代码内容中的模板内容以及脚本内容；将所述模板内容赋值给vue中的模板属性，将脚本内容赋值给vue中所述脚本内容对应的目标对象，以将所述脚本内容展示于编辑页面中。本申请截取代码内容中的模板内容以及脚本内容，并模板内容赋值给vue中的模板属性，将脚本内容赋值给vue中所述脚本内容对应的目标对象，以将待编辑代码中的数据信息显示于编辑页面上，从而实现了在web端对vue代码进行在线编辑，并且通过一个编辑器即可以编辑vue中的所有组件。

Description

基于web端的vue代码编辑方法、编辑器及终端设备

技术领域

本申请涉及编辑器技术领域，特别涉及一种基于web端的vue代码编辑方法、编辑器及终端设备。

背景技术

随着互联网的不断进步，根据框架不断兴起，例如，前端中的vue，react以及angular等等。各框架均设置有各种对应的编程语言，并且每种编程语言均需要代码编辑器进行编辑，这就需要开发各种编辑器以适应各框架。虽然支持各编程语言的代码编辑器越来越多，但是在网页使用vue框架时，需要通过多个编辑器分别编辑网页所需插件(例如，html，css以及javascript等)，然后将编辑得到的插件拼接后供浏览器执行，而无法通过一个编辑器实现网页端的vue的在线编辑。

因而现有技术还有待改进和提高。

发明内容

本申请要解决的技术问题在于，针对现有技术的不足，提供一种基于web端的vue代码编辑方法、编辑器及终端设备。

为了解决上述技术问题，本申请实施例第一方面提供了一种基于web端的vue代码编辑方法，所述编辑方法具体包括：

获取待编辑代码，并确定所述编辑代码对应的代码内容；

截取所述代码内容中的模板内容以及脚本内容；

将所述模板内容赋值给vue中的模板属性，将脚本内容赋值给vue中所述脚本内容对应的目标对象，以将所述脚本内容展示于编辑页面中。

所述基于web端的vue代码编辑方法，其中，所述获取待编辑代码，并确定该编辑代码对应的代码内容具体包括：

通过编辑页面接收待编辑代码；

运行接收大的待编辑代码以确定所述编辑代码对应的代码内容。

所述基于web端的vue代码编辑方法，其中，所述截取所述代码内容中的模板内容以及脚本内容具体为：

通过vue中的字符串截取函数，截取所述代码内容中的模板内容以及脚本内容。

所述基于web端的vue代码编辑方法，其中，所述将脚本内容赋值给vue中所述脚本内容对应的目标对象具体包括：

将所述脚本内容转换为键值对象；

遍历待编辑代码对应的组件中的对象以得到所述脚本内容对应的目标对象，并将所述键值对象赋值给所述目标对象。

所述基于web端的vue代码编辑方法，其中，所述获取待编辑代码，并确定所述编辑代码对应的代码内容之前，所述方法还包括：

控制所述web端装载Codemirror编辑器，并将所述Codemirror编辑器的核心配置包配置为全局变量。

所述基于web端的vue代码编辑方法，其中，所述将所述Codemirror编辑器的核心配置包配置为全局变量具体为：

通过vue中的入口文件引入Codemirror编辑器的核心配置，以使得Codemirror编辑器的核心配置被配置为全局变量。

所述基于web端的vue代码编辑方法，其中，所述web端装载vue框架，并且所述待编辑代码为符合vue格式的代码文件。

本申请实施例第二方面提供了一种基于web端的vue代码编辑器，所述vue代码编辑器用于获取待编辑代码，并确定所述编辑代码对应的代码内容；截取所述代码内容中的模板内容以及脚本内容；将所述模板内容赋值给vue中的模板属性，将脚本内容赋值给vue中所述脚本内容对应的目标对象，以将所述脚本内容展示于编辑页面中。

本申请实施例第三方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现如上任一所述的基于web端的vue代码编辑方法中的步骤。

本申请实施例第四方面提供了一种终端设备，其包括：处理器、存储器及通信总线；所述存储器上存储有可被所述处理器执行的计算机可读程序；

所述通信总线实现处理器和存储器之间的连接通信；

所述处理器执行所述计算机可读程序时实现如上任一所述的基于web端的vue代码编辑方法中的步骤。

有益效果：与现有技术相比，本申请提供了一种基于web端的vue代码编辑方法、编辑器及终端设备，所述编辑方法包括获取待编辑代码，并确定所述编辑代码对应的代码内容；截取所述代码内容中的模板内容以及脚本内容；将所述模板内容赋值给vue中的模板属性，将脚本内容赋值给vue中所述脚本内容对应的目标对象，以将所述脚本内容展示于编辑页面中。本申请截取代码内容中的模板内容以及脚本内容，并模板内容赋值给vue中的模板属性，将脚本内容赋值给vue中所述脚本内容对应的目标对象，以将待编辑代码中的数据信息显示于编辑页面上，从而实现了在web端对vue代码进行在线编辑，并且通过一个编辑器即可以编辑vue中的所有组件。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员而言，在不符创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请提供的基于web端的vue代码编辑方法的流程图。

图2为本申请提供的终端设备的结构原理图。

具体实施方式

本申请提供一种基于web端的vue代码编辑方法、编辑器及终端设备，为使本申请的目的、技术方案及效果更加清楚、明确，以下参照附图并举实施例对本申请进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。

本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解，当我们称元件被“连接”或“耦接”到另一元件时，它可以直接连接或耦接到其他元件，或者也可以存在中间元件。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。

本技术领域技术人员可以理解，除非另外定义，这里使用的所有术语(包括技术术语和科学术语)，具有与本申请所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是，诸如通用字典中定义的那些术语，应该被理解为具有与现有技术的上下文中的意义一致的意义，并且除非像这里一样被特定定义，否则不会用理想化或过于正式的含义来解释。

具体实现中，本申请实施例中描述的终端设备包括但不限于诸如具有触摸敏感表面(例如，触摸显示屏和/或触摸板)的移动电话，膝上形计算机或平板计算机之类的其他便携式设备。还应该理解的是，在某些实施例中，所述设备并非便携式通讯设备，而是具有触摸敏感表面(例如，触摸显示屏和/或触摸板)的台式计算机。

在接下来的讨论中，描述了包括显示器和触摸敏感表面的终端设备。然而，应当理解的是，终端设备还可以包括诸如物理键盘、鼠标和/或控制杆的一个或多个其他物理用户接口设备。

终端设备支持各种应用程序，例如以下中的一个或多个：绘图应用程序、演示应用程序、文字处理应用程序、视频会议应用程序、盘刻录应用程序、电子表格应用程序、游戏应用程序、电话应用程序、视频会议应用程序、电子邮件由于程序、即时消息收发应用程序、锻炼支持应用程序、照片管理应用程序、数据相机应用程序、数字摄像机应用程序、web浏览应用程序、数字音乐播放器应用程序和/或数字视频播放应用程序等。

可以在终端设备上执行的各种应用程序可以使用诸如触摸敏感表面的至少一个公共物理用户接口设备。可以在应用程序之间和/或相应应用程序内调整和/或改变触摸敏感表面的第一或多个功能以及终端上显示的相应信息。这样，终端的公共物理框架(例如，触摸敏感表面)可以支持具有对用户而言直观且透明的用户界面的各种应用程序。

应理解，本实施例中各步骤的序号和大小并不意味着执行顺序的先后，各过程的执行顺序以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

发明人经过研究发现，随着互联网的不断进步，根据框架不断兴起，例如，前端中的vue，react以及angular等等。各框架均设置有各种对应的编程语言，并且每种编程语言均需要代码编辑器进行编辑，这就需要开发各种编辑器以适应各框架。虽然支持各编程语言的代码编辑器越来越多，但是在网页使用vue框架时，需要通过多个编辑器分别编辑网页所需插件(例如，html，css以及javascript等)，然后将编辑得到的插件拼接后供浏览器执行，而无法通过一个编辑器实现网页端的vue的在线编辑。

为了解决上述问题，在本申请实施例中，获取待编辑代码，并确定所述编辑代码对应的代码内容；截取所述代码内容中的模板内容以及脚本内容；将所述模板内容赋值给vue中的模板属性，将脚本内容赋值给vue中所述脚本内容对应的目标对象，以将所述脚本内容展示于编辑页面中。本申请通过截取到的模板内容以及脚本内容替换这编辑页面内，实现了web端的vue代码的在线编辑。

下面结合附图，通过对实施例的描述，对申请内容作进一步说明。

本实施例提供了一种基于web端的vue代码编辑方法，如图1所示，所述方法包括：

S10、获取待编辑代码，并确定所述编辑代码对应的代码内容。

具体地，待编辑代码为用于编辑vue中的组件的代码，并且待编辑代码符合vue格式的程序代码，其中，vue框架中配置有若干组件，待编辑代码对应的组件可以为若干组件的任一组件。vue为用于构建用户界面的渐进式JavaScript框架，Vue可以自底向上逐层应用，并且Vue的核心库主要关注视图层。

在本实施例的一个实现方式中，所述获取待编辑代码，并确定该编辑代码对应的代码内容具体包括：

通过编辑页面接收待编辑代码；

运行接收大的待编辑代码以确定所述编辑代码对应的代码内容。

具体地，所述编辑页面为web端的一个页面，通过编辑页面可以输入程序代码，以对vue进行在线编辑，其中，web端采用vue框架，通过web端中的编辑页面可以对vue框架进行在线编辑。例如，当用户需要对web端的vue框架进行在线编辑时，可以控制web显示编辑页面，通过编辑页面可以输入程序代码，以使得web端可以获取到待编辑代码。在获取到待编辑代码后，通过预设编辑器运行待编辑代码以得到代码内容，其中，代码内容为待编辑代码通过预设编辑器编辑所得到的字符串。

在本实施例的一个实现方式中，预设编辑器为预先装配于web端内，用于运行通过编辑页面接收到的待编辑代码。相应的，所述获取待编辑代码，并确定所述编辑代码对应的代码内容之前，所述方法还包括：

控制所述web端装载Codemirror编辑器，并将所述Codemirror编辑器的核心配置包配置为全局变量。

具体地，所述Codemirror编辑器为用于编辑器文本框textarea代码高亮javascript插件，为各种编程语言实现关键字，函数，变量等代码高亮显示。其中，Codemirror编辑器的核心配置包配置为全局变量，以使得vue框架中的任一组件均可以使用Codemirror编辑器，这样通过Codemirror编辑器可以编辑vue框架中的各个组件。此外，在装配完codemirror编辑器并配置为全局变量后，当需要在线编辑vue中的组件时，可以通过<textarea></textarea>引入codemirror编辑器并配置相关属性。

在本实施例的一个实现方式中，所述Codemirror编辑器的核心配置可以通过vue中的入口文件引入的，通过入口文件将Codemirror编辑器的核心配置文件配置为全局变量。其中，所述入口文件可以为main.js，即通过main.js引入核心配置，并通过main.js将Codemirror编辑器的核心配置文件配置为全局变量。其中，main.js为vue中的各组件的入口文件，vue中的各组件中的所有文件都会加载main.js，main.js可以用来实例化vue，存储vue框架中的全局插件以及全局变量。由此，将Codemirror编辑器的核心配置存储于入口文件内，以使得vue框架中的所有组件均可以获取到Codemirror编辑器的核心配置，从而可以采用Codemirror编辑器来编辑vue中的各组件。

S20、截取所述代码内容中的模板内容以及脚本内容。

具体地，所述模板内容用于渲染编辑页面模板，脚本内容用于为vue中的对象赋值，以将脚本内容所携带的数据传输至vue内。其中，所述模板内容和脚本内容均包含于代码内容，并且模板内容在代码内容中所处的代码位置与脚本内容在代码内容中所处的代码位置不重叠。

在本实施例的一个实现方式中，所述截取所述代码内容中的模板内容以及脚本内容具体为：

通过vue中的字符串截取函数，截取所述代码内容中的模板内容以及脚本内容。

具体地，所述字符串截取函数用于截取代码内容中的部分代码，所述模板内容和脚本内容均对应有内容标识符，字符串截取函数基于模板内容对应的内容标识符在代码内容中截取模板内容，基于脚本内容对应的内容标识符在代码内容中截取脚本内容。可以理解的是，在截取模板内容时，可以将模板内容对应的内容标识符作为字符串截取函数的变量，通过字符串截取函数截取模板内容，同理，在截取脚本内容时，可以将脚本内容对应的内容标识符作为字符串截取函数的变量，通过字符串截取函数截取脚本内容。

在本实施例的一个实现方式中，字符串截取函数可以为str.substring()函数，str.substring()函数可以提取起始标识符和结束标签符之间的字符。例如，str.substring(start,stop)，其中strat为起始标识符,stop为结束标识符。相应的，字符标识符包括起始标识符和结束标签符，其中，模板内容对应的起始标识符为<template>，结束标识符为</template>，脚本内容对应的起始标识符为<script>，结束标识符为</script>，那么在通过字符串截取函数截取<template>和</template>之间内容作为模板内容，截取<script>和</script>之间的内容作为脚本内容。

例如，代码内容为：

那么通过字符串截取函数截取到模板内容为：<rd-button：name＝“name”：background＝“background”><rd-button>，通过字符串截取函数截取到的脚本内容为：

S30、将所述模板内容赋值给vue中的模板属性，将脚本内容赋值给vue中所述脚本内容对应的目标对象，以将所述脚本内容展示于编辑页面中。

具体地，所述模板属性用于渲染页面模板，将所述模板内容赋值给vue中的模板属性为对页面模板进行渲染，使得页面模板的模板属性为模板内容。其中，模板属性为vue.extend中的template属性，vue.extend为vue中用于替换模板的方式，将模板内容赋值于vue.extend中的template属性，然后通过运行vue.extend采用模板内容替换编辑页面中的模板，以得到变换后的模板。

在本实施例的一个实现方式中，所述将脚本内容赋值给vue中所述脚本内容对应的目标对象具体包括：

将所述脚本内容转换为键值对象；

遍历待编辑代码对应的组件中的对象以得到所述脚本内容对应的目标对象，并将所述键值对象赋值给所述目标对象。

具体地，代码内容采用字符串模式，脚本内容为键值字符串。待编码代码对应的组件采用对象模式，从而在获取到脚本内容后，可以兼职字符串形式的脚本内容转换成键值对象。在转换得到键值对象后，可以通过遍历待编辑代码对应的组件中的每个对象，以得到脚本内容对应的目标对象，并将转换得到的键值对象赋值给目标对象，以将所述脚本内容展示于编辑页面中。在本实施例的一个具体实现方式中，遍历待编辑代码对应的组件中的每个对象是可以在vue.extend中遍历待编辑代码对应的组件中的每个对象，并通过并vue.extend将脚本内容赋值给目标对象，已完成脚本内容携带的数据传输，以使得编辑页面中显示脚本内容。

综上所述，本实施例提供了一种基于web端的vue代码编辑方法、编辑器及终端设备，所述编辑方法包括获取待编辑代码，并确定所述编辑代码对应的代码内容；截取所述代码内容中的模板内容以及脚本内容；将所述模板内容赋值给vue中的模板属性，将脚本内容赋值给vue中所述脚本内容对应的目标对象，以将所述脚本内容展示于编辑页面中。本申请截取代码内容中的模板内容以及脚本内容，并模板内容赋值给vue中的模板属性，将脚本内容赋值给vue中所述脚本内容对应的目标对象，以将待编辑代码中的数据信息显示于编辑页面上，从而实现了在web端对vue代码进行在线编辑，并且通过一个编辑器即可以编辑vue中的所有组件。

基于上述基于web端的vue代码编辑方法，本实施例提供了一种基于web端的vue代码编辑器，所述vue代码编辑器用于获取待编辑代码，并确定所述编辑代码对应的代码内容；截取所述代码内容中的模板内容以及脚本内容；将所述模板内容赋值给vue中的模板属性，将脚本内容赋值给vue中所述脚本内容对应的目标对象，以将所述脚本内容展示于编辑页面中。

基于上述基于web端的vue代码编辑方法，本实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现如上述实施例所述的基于web端的vue代码编辑方法中的步骤。

基于上述基于web端的vue代码编辑方法，本申请还提供了一种终端设备，如图2所示，其包括至少一个处理器(processor)20；显示屏21；以及存储器(memory)22，还可以包括通信接口(Communications Interface)23和总线24。其中，处理器20、显示屏21、存储器22和通信接口23可以通过总线24完成相互间的通信。显示屏21设置为显示初始设置模式中预设的用户引导界面。通信接口23可以传输信息。处理器20可以调用存储器22中的逻辑指令，以执行上述实施例中的方法。

此外，上述的存储器22中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。

存储器22作为一种计算机可读存储介质，可设置为存储软件程序、计算机可执行程序，如本公开实施例中的方法对应的程序指令或模块。处理器20通过运行存储在存储器22中的软件程序、指令或模块，从而执行功能应用以及数据处理，即实现上述实施例中的方法。

存储器22可包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据终端设备的使用所创建的数据等。此外，存储器22可以包括高速随机存取存储器，还可以包括非易失性存储器。例如，U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等多种可以存储程序代码的介质，也可以是暂态存储介质。

此外，上述基于web端的vue代码编辑器的工作过程，存储介质以及终端设备中的多条指令处理器加载并执行的具体过程在上述方法中已经详细说明，在这里就不再一一陈述。

最后应说明的是：以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (10)

1.一种基于web端的vue代码编辑方法，其特征在于，所述编辑方法具体包括：

获取待编辑代码，并确定所述编辑代码对应的代码内容；

截取所述代码内容中的模板内容以及脚本内容；

将所述模板内容赋值给vue中的模板属性，将脚本内容赋值给vue中所述脚本内容对应的目标对象，以将所述脚本内容展示于编辑页面中。

2.根据权利要求1所述基于web端的vue代码编辑方法，其特征在于，所述获取待编辑代码，并确定该编辑代码对应的代码内容具体包括：

通过编辑页面接收待编辑代码；

运行接收大的待编辑代码以确定所述编辑代码对应的代码内容。

3.根据权利要求1所述基于web端的vue代码编辑方法，其特征在于，所述截取所述代码内容中的模板内容以及脚本内容具体为：

通过vue中的字符串截取函数，截取所述代码内容中的模板内容以及脚本内容。

4.根据权利要求1所述基于web端的vue代码编辑方法，其特征在于，所述将脚本内容赋值给vue中所述脚本内容对应的目标对象具体包括：

将所述脚本内容转换为键值对象；

遍历待编辑代码对应的组件中的对象以得到所述脚本内容对应的目标对象，并将所述键值对象赋值给所述目标对象。

5.根据权利要求1所述基于web端的vue代码编辑方法，其特征在于，所述获取待编辑代码，并确定所述编辑代码对应的代码内容之前，所述方法还包括：

控制所述web端装载Codemirror编辑器，并将所述Codemirror编辑器的核心配置包配置为全局变量。

6.根据权利要求5所述基于web端的vue代码编辑方法，其特征在于，所述将所述Codemirror编辑器的核心配置包配置为全局变量具体为：

通过vue中的入口文件引入Codemirror编辑器的核心配置，以使得Codemirror编辑器的核心配置被配置为全局变量。

7.根据权利要求1所述基于web端的vue代码编辑方法，其特征在于，所述web端装载vue框架，并且所述待编辑代码为符合vue格式的代码文件。

8.一种基于web端的vue代码编辑器，其特征在于，所述vue代码编辑器用于获取待编辑代码，并确定所述编辑代码对应的代码内容；截取所述代码内容中的模板内容以及脚本内容；将所述模板内容赋值给vue中的模板属性，将脚本内容赋值给vue中所述脚本内容对应的目标对象，以将所述脚本内容展示于编辑页面中。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现如权利要求1-7任意一项所述的基于web端的vue代码编辑方法中的步骤。

10.一种终端设备，其特征在于，包括：处理器、存储器及通信总线；所述存储器上存储有可被所述处理器执行的计算机可读程序；

所述通信总线实现处理器和存储器之间的连接通信；

所述处理器执行所述计算机可读程序时实现如权利要求1-7任意一项所述的基于web端的vue代码编辑方法中的步骤。

Images