一种基于Vue的根据参数配置页面的方法技术

本发明专利技术公开了一种基于Vue的根据参数配置页面的方法，其首先在Vue项目中安装一个网络请求库，发起http请求到服务端接口，请求服务端接口获取页面配置所需的参数信息；再根据服务端返回参数信息动态导入前端本地组件生成页面。本发明专利技术操作便捷性高，通过服务端参数动态生成前端页面组件，实现了无需前端更新代码，服务端也可修复或调整前端页面的功能，保证前端页面线上动态变更或者快速修复前端页面；还可根据配置参数动态生成Vue组件来提高开发效率，降低开发成本。降低开发成本。降低开发成本。

【技术实现步骤摘要】
一种基于Vue的根据参数配置页面的方法


[0001]本专利技术涉及一种基于Vue的根据参数配置页面的方法，属于计算机web开发


技术介绍

[0002]在前端开发中通常会遇到大量重复且简单的活动页开发，同类型的页面编写不仅繁琐且耗时，使得开发效率低下且开发成本升高，同时因为线上页面更新需要前端重新发布代码，所以也无法实现在线热更新的功能，因为根据后端参数动态配置前端页面的需求变得十分迫切。

技术实现思路

[0003]鉴于此，本专利技术的目的是提供一种基于Vue的根据参数配置页面的方法，可以克服现有技术的不足。
[0004]本专利技术的目的是通过以下技术方案实现的：一种基于Vue的根据参数配置页面的方法，包括如下步骤：S1、在Vue项目中安装一个网络请求库，发起http请求到服务端接口，请求服务端接口获取页面配置所需的参数信息；S2、根据服务端返回参数信息动态导入前端本地组件生成页面。
[0005]前述步骤S1中，根据服务端返回的http报文响应获取到页面所需要动态生成的组件配置信息，利用Vue动态组件的规则使用components标签来生成所需要的组件,具体有如下步骤：（1.1）在vue项目中使用npm安装axios库，通过axios发起http请求到服务端接口，请求服务端配置参数，如果请求成功则获取服务端接口返回的响应信息，响应中包含当前需要生成页面的配置参数；如果请求失败则返回到指定错误页面并重试；（1.2）根据Vue动态组件的规则，使用Vue提供的内置组件<component>来实现组件的标签生成，该标签用于动态组件的渲染；（1.3）通过配置参数开始进行组件样式渲染，配置各生成组件的style属性。
[0006]使用npm安装axios到Vue项目中，通过axios的get、post方法获取服务端接口的响应，从响应信息中得到页面配置参数。
[0007]利用Vue框架提供的component标签来作为动态组件的占位，然后根据component标签的is属性填入需要生成的组件名称生成相应组件。
[0008]根据Vue动态组件components提供的is属性传入需要生成的组件名称，即可渲染出对应的组件，通过组件的style属性传入组件的样式配置信息。
[0009]前述步骤S2中，根据Vue组件规则，在前端设有一个与生成的动态组件对应的基础组件库，定义props指令来接收组件的属性配置项和事件监听，从而支持特殊组件的自定义功能，实现逻辑功能。
[0010]与现有技术比较，本专利技术公开的一种基于Vue的根据参数配置页面的方法，其首先在Vue项目中安装一个网络请求库，发起http请求到服务端接口，请求服务端接口获取页面配置所需的参数信息；再根据服务端返回参数信息动态导入前端本地组件生成页面。本专利技术操作便捷性高，通过服务端参数动态生成前端页面组件，实现了无需前端更新代码，服务端也可修复或调整前端页面的功能，保证前端页面线上动态变更或者快速修复前端页面；还可根据配置参数动态生成Vue组件来提高开发效率，降低开发成本。
[0011]本专利技术的其他优点、目标和特征在某种程度上将在随后的说明书中进行阐述，并且在某种程度上，基于对下文的考察研究对本领域技术人员而言将是显而易见的，或者可以从本专利技术的实践中得到教导。本专利技术的目标和其他优点可以通过下面的说明书来实现和获得。
附图说明
[0012]为了使本专利技术的目的、技术方案和优点更加清楚，下面将结合附图对本专利技术作进一步的详细描述，其中：图1为本专利技术的流程框图。
具体实施方式
[0013]以下将参照附图，对本专利技术的优选实施例进行详细的描述。应当理解，优选实施例仅为了说明本专利技术，而不是为了限制本专利技术的保护范围。
[0014]如图1所示，一种基于Vue的根据参数配置页面的方法，包括如下步骤：S1、在Vue项目中安装一个网络请求库，发起http请求到服务端接口，请求服务端接口获取页面配置所需的参数信息；S2、根据服务端返回参数信息动态导入前端本地组件生成页面。
[0015]利用网络请求库获取服务端返回页面配置信息的参数，根据配置参数利用Vue动态组件特性生成对应组件，从而实现页面配置。
[0016]步骤S1中，根据服务端返回的http报文响应获取到页面所需要动态生成的组件配置信息，利用Vue动态组件的规则使用components标签来生成所需要的组件,具体有如下步骤：（1.1）在vue项目中使用npm安装axios库，通过axios发起http请求到服务端接口，请求服务端配置参数，如果请求成功则获取服务端接口返回的响应信息，响应中包含当前需要生成页面的配置参数；如果请求失败则返回到指定错误页面并重试；具体地，使用npm安装axios到Vue项目中，通过axios的get、post方法获取服务端接口的响应，从响应信息中得到页面配置参数；（1.2）根据Vue动态组件的规则，使用Vue提供的内置组件<component>来实现组件的标签生成，该标签用于动态组件的渲染；具体地，利用Vue框架提供的component标签来作为动态组件的占位，然后根据component标签的is属性填入需要生成的组件名称生成相应组件；（1.3）通过配置参数开始进行组件样式渲染，配置各生成组件的style属性，具体地，根据Vue动态组件components提供的is属性传入需要生成的组件名称，即
可渲染出对应的组件，通过组件的style属性传入组件的样式配置信息。
[0017]步骤S2中，根据Vue组件规则，在前端设有一个与生成的动态组件对应的基础组件库，定义props指令来接收组件的属性配置项和事件监听，从而支持特殊组件的自定义功能，实现逻辑功能。
[0018]具体地，为了使得Vue项目获得与服务端传输信息的能力，需要在Vue项目中安装axios库，可以使用专门的包安装工具NPM来安装axios，axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js。通过axios的get、post等方法获取服务端接口的响应，从响应信息中得到页面配置参数。如果成功获取到服务端配置参数后可以利用Vue定义的component组件开始动态生成组件，如果获取服务端失败，则会跳到错误页面进行重试。用Vue框架提供的component标签来作为动态组件的占位，然后根据component标签的is属性填入需要生成的组件名称生成相应组件，成功获取配置参数后将配置参数中的组件名称通过component的is属性传入，此时Vue将会渲染与is参数名称一致的前端本地目录中的组件作为动态组件。
[0019]例如，需要生成的页面是一个登录界面，含有输入框与按钮。服务端可以定义一段JSON格式的报文作为配置参数，配置参数中含有需要动态生成的组件名称，样式信息等。同时，前端应有一个对应的基础组件库，可包含按钮，输入框等基础组件。根据JSON配置参数将其中本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于Vue的根据参数配置页面的方法，其特征在于，包括如下步骤：S1、在Vue项目中安装一个网络请求库，发起http请求到服务端接口，请求服务端接口获取页面配置所需的参数信息；S2、根据服务端返回参数信息动态导入前端本地组件生成页面。2.根据权利要求1所述的基于Vue的根据参数配置页面的方法，其特征在于：步骤S1中，根据服务端返回的http报文响应获取到页面所需要动态生成的组件配置信息，利用Vue动态组件的规则使用components标签来生成所需要的组件,具体有如下步骤：（1.1）在vue项目中使用npm安装axios库，通过axios发起http请求到服务端接口，请求服务端配置参数，如果请求成功则获取服务端接口返回的响应信息，响应中包含当前需要生成页面的配置参数；如果请求失败则返回到指定错误页面并重试；（1.2）根据Vue动态组件的规则，使用Vue提供的内置组件<component>来实现组件的标签生成，该标签用于动态组件的渲染；（1.3）通过配置参数开始进行组件样式渲染，...

【专利技术属性】
技术研发人员：杨兴海，董进才，李建州，杨兴荣，
申请(专利权)人：世纪恒通科技股份有限公司，
类型：发明
国别省市：