申请/专利权人：四川长虹电器股份有限公司

申请日：2018-09-29

公开（公告）日：2021-04-27

公开（公告）号：CN109271149B

主分类号：G06F8/20(20180101)

分类号：G06F8/20(20180101);G06F8/38(20180101)

优先权：

专利状态码：有效-授权

法律状态：2021.04.27#授权;2019.02.26#实质审查的生效;2019.01.25#公开

摘要：本发明公开了一种架构单页应用程序的方法，包括：创建mian.js，在mian.js引入store模块、views模块、router模块、axios模块、components模块和util模块。本发明基于Vue.js+Vuex+iView+Axios架构单页程序，结合了以数据驱动和组件化的思想、状态管理模式、开源UI组件库以及基于promise用于浏览器和node.js的http客户端，提供更简洁和易于理解的API，集中管理应用的所有组件的状态，可以通过编辑变量列表定制UI主题，实现了程序的快速开发、减少开发周期以及降低了时间成本。

主权项：1.一种架构单页应用程序的方法，其特征在于，包括：创建入口文件mian.js，在入口文件mian.js引入store模块、views模块、router模块、axios模块、components模块和util模块，其中：store模块：包括子文件xx.js、getter.js、index.js和generator.js，所述子文件xx.js根据业务需求创建，并定义了state、mutation和action；所述generator.js包含根据子文件xx.js的命名和收到的网络请求接口生成state、mutation和action的方法，所述生成state、mutation和action的方法被映射到子文件xx.js中；所述getter.js获取state数据，并返回至index.js，index.js用于组装子文件xx.js和getter.js，并导出至views模块；views模块：包括app.vue、theme.less和module，所述app.vue为程序的主组件，所述theme.less用于提供UI主题，所述module为根据业务划分的子模块，所述子模块内包含功能页面；router模块：包含router.js，用于创建新路由，并将组件映射到路由，接收theme.less的UI主题并向main.js提供渲染组件的位置；axios模块：包括fetch.js，用于初始化axios模块并配置网络拦截器，并将网络请求接口传递给store模块的generator.js；components模块：包含自定义控件；util模块：用作工具箱，所述工具箱包含用于写入复用的数据的混入文件。

全文数据：一种架构单页应用程序的方法技术领域本发明涉及计算机技术与WEB应用开发技术领域，具体的说，是一种架构单页应用程序的方法。背景技术Vue.js自2016年大火，现在是前端开发主流的一个JavaScriptMVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得用户能快速上手并使用Vue.js。Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。为了快速运用新技术来开发或重构项目，本发明实例提供了一种以Vue.js+Vuex+iView+Axios架构单页应用程序的方法，用户可以迅速使用该方法投入开发，使其项目开发周期缩短，开发成本下降。发明内容本发明的目的在于提供一种架构单页应用程序的方法，用于解决现有技术中开发或重构项目不够快速，开发周期长，开发成本高的问题。本发明通过下述技术方案解决上述问题：一种架构单页应用程序的方法，包括：创建入口文件mian.js，在入口文件mian.js引入store模块、views模块、router模块、axios模块、components模块和util模块，其中：store模块：包括子文件xx.js、getter.js、index.js和generator.js，所述子文件xx.js根据业务需求创建，并定义了state、mutation和action；所述generator.js包含根据子文件xx.js的命名和收到的网络请求接口生成state、mutation和action的方法，所述生成state、mutation和action的方法被映射到子文件xx.js中；所述getter.js获取state数据，并返回至index.js，index.js用于组装子文件xx.js和getter.js，并导出至views模块；views模块：包括app.vue、theme.less和module，所述app.vue为程序的主组件，所述theme.less用于提供UI主题，所述module为根据业务划分的子模块，所述子模块内包含功能页面；router模块：包含router.js，用于创建新路由，并将组件映射到路由，接收theme.less的UI主题并向main.js提供渲染组件的位置；axios模块：包括fetch.js，用于初始化axios模块并配置网络拦截器，并将网络请求接口传递给store模块的generator.js；components模块：包含自定义控件；util模块：用作工具箱，所述工具箱包含用于写入复用的数据的混入文件。原理：axios模块、store模块、components模块、util模块、views模块和router模块，六个模块功能划分清晰：以axios模块作为http客户端发起网络请求获取数据，并将网络请求接口传递至store模块中的generator.js；store模块中可以根据业务需求创建子文件xx.js，xx.js中定义的state用于记录状态，通过mutation改变state状态，action用以异步分发mutation中的具体内容；store模块以Vuex集中存储和管理应用的所有组件的状态，并按照定义的规则保证组件的变化可预测；views模块以iView作为网页UI组件框架，包含app.vue、theme.less和module，app.vue即程序的主组件，确定了网站布局，其他所有页面都是在app.vue下切换的，theme.less是iView默认提供的一套UI主题，定义了一套样式变量，编辑这个变量列表就可以轻松定制新主题，以满足业务和品牌上的多样化视觉需求；module内是根据业务需求划分的子模块，子模块内有对应功能的页面。router模块将组件映射到路由，以Vue-router渲染组件；store模块和views模块根据业务需求划分出对应的子模块，六个模块功能划分清晰。Components模块：包含各种根据业务需求编写的自定义控件，在页面可引入使用。也可用npm安装github上的第三方控件并在页面中直接使用。用户更改axios模块的fetch.js文件内的网络请求接口地址和对应命名，根据业务需求创建store模块内的子模块xx.js，在其中声明与fetch.js相同的接口命名，再根据业务需求编写自定义getter.js，在index.js中将子模块xx.js和getter组合起来并导出store模块，由此，便结合Axios和Vuex完成了整个项目的网络接口请求数据并全局管理数据的功能。之后，用户再根据业务需求编写views模块的app.vue确定整个系统的布局，编写views模块的子模块页面，修改theme.less定制新主题，根据需要编写components模块中的自定义控件和工具类，最后编写router模块的router.js，创建新Router将组件映射到路由，由此便完成整个程序。用户根据业务需求可自行修改本架构中的模块，比如若利用iView的theme.less来创建新主题无法满足视觉需求，可以另新建CSS文件来编写样式。本发明与现有技术相比，具有以下优点及有益效果：本发明基于Vue.js+Vuex+iView+Axios架构单页程序，结合了以数据驱动和组件化的思想、状态管理模式、开源UI组件库以及基于promise用于浏览器和node.js的http客户端，提供更简洁和易于理解的API，集中管理应用的所有组件的状态，可以通过编辑变量列表定制UI主题，实现了程序的快速开发、减少开发周期以及降低了时间成本。附图说明图1为本发明的架构图。具体实施方式下面结合实施例对本发明作进一步地详细说明，但本发明的实施方式不限于此。实施例1：结合附图1所示，一种架构单页应用程序的方法，包括：创建入口文件mian.js，在入口文件mian.js引入store模块、views模块、router模块、axios模块、components模块和util模块，其中：store模块：包括子文件xx.js、getter.js、index.js和generator.js，所述子文件xx.js根据业务需求创建，并定义了state、mutation和action；所述generator.js包含根据子文件xx.js的命名和收到的网络请求接口生成state、mutation和action的方法，所述生成state、mutation和action的方法被映射到子文件xx.js中；所述getter.js获取state数据，并返回至index.js，index.js用于组装子文件xx.js和getter.js，并导出至views模块；views模块：包括app.vue、theme.less和module，所述app.vue为程序的主组件，所述theme.less用于提供UI主题，所述module为根据业务划分的子模块，所述子模块内包含功能页面；router模块：包含router.js，用于创建新路由，并将组件映射到路由，接收theme.less的UI主题并向main.js提供渲染组件的位置；axios模块：包括fetch.js，用于初始化axios模块并配置网络拦截器，并将网络请求接口传递给store模块的generator.js；components模块：包含自定义控件；util模块：用作工具箱，所述工具箱包含用于写入复用的数据的混入文件。原理：axios模块、store模块、components模块、util模块、views模块和router模块，六个模块功能划分清晰：以axios模块作为http客户端发起网络请求获取数据，并将网络请求接口传递至store模块中的generator.js；store模块中可以根据业务需求创建子文件xx.js，xx.js中定义的state用于记录状态，通过mutation改变state状态，action用以异步分发mutation中的具体内容；store模块以Vuex集中存储和管理应用的所有组件的状态，并按照定义的规则保证组件的变化可预测；views模块以iView作为网页UI组件框架，包含app.vue、theme.less和module，app.vue即程序的主组件，确定了网站布局，其他所有页面都是在app.vue下切换的，theme.less是iView默认提供的一套UI主题，定义了一套样式变量，编辑这个变量列表就可以轻松定制新主题，以满足业务和品牌上的多样化视觉需求；module内是根据业务需求划分的子模块，子模块内有对应功能的页面。router模块将组件映射到路由，以Vue-router渲染组件；store模块和views模块根据业务需求划分出对应的子模块，六个模块功能划分清晰。Components模块：包含各种根据业务需求编写的自定义控件，在页面可引入使用。也可用npm安装github上的第三方控件并在页面中直接使用。用户更改axios模块的fetch.js文件内的网络请求接口地址和对应命名，根据业务需求创建store模块内的子模块xx.js，在其中声明与fetch.js相同的接口命名，再根据业务需求编写自定义getter.js，在index.js中将子模块xx.js和getter组合起来并导出store模块，由此，便结合Axios和Vuex完成了整个项目的网络接口请求数据并全局管理数据的功能。之后，用户再根据业务需求编写views模块的app.vue确定整个系统的布局，编写views模块的子模块页面，修改theme.less定制新主题，根据需要编写components模块中的自定义控件和工具类，最后编写router模块的router.js，创建新Router将组件映射到路由，由此便完成整个程序。用户根据业务需求可自行修改本架构中的模块，比如若利用iView的theme.less来创建新主题无法满足视觉需求，可以另新建CSS文件来编写样式。尽管这里参照本发明的解释性实施例对本发明进行了描述，上述实施例仅为本发明较佳的实施方式，本发明的实施方式并不受上述实施例的限制，应该理解，本领域技术人员可以设计出很多其他的修改和实施方式，这些修改和实施方式将落在本申请公开的原则范围和精神之内。

权利要求：1.一种架构单页应用程序的方法，其特征在于，包括：创建入口文件mian.js，在入口文件mian.js引入store模块、views模块、router模块、axios模块、components模块和util模块，其中：store模块：包括子文件xx.js、getter.js、index.js和generator.js，所述子文件xx.js根据业务需求创建，并定义了state、mutation和action；所述generator.js包含根据子文件xx.js的命名和收到的网络请求接口生成state、mutation和action的方法，所述生成state、mutation和action的方法被映射到子文件xx.js中；所述getter.js获取state数据，并返回至index.js，index.js用于组装子文件xx.js和getter.js，并导出至views模块；views模块：包括app.vue、theme.less和module，所述app.vue为程序的主组件，所述theme.less用于提供UI主题，所述module为根据业务划分的子模块，所述子模块内包含功能页面；router模块：包含router.js，用于创建新路由，并将组件映射到路由，接收theme.less的UI主题并向main.js提供渲染组件的位置；axios模块：包括fetch.js，用于初始化axios模块并配置网络拦截器，并将网络请求接口传递给store模块的generator.js；components模块：包含自定义控件；util模块：用作工具箱，所述工具箱包含用于写入复用的数据的混入文件。

百度查询： 四川长虹电器股份有限公司 一种架构单页应用程序的方法

免责声明
1、本报告根据公开、合法渠道获得相关数据和信息，力求客观、公正，但并不保证数据的最终完整性和准确性。
2、报告中的分析和结论仅反映本公司于发布本报告当日的职业理解，仅供参考使用，不能作为本公司承担任何法律责任的依据或者凭证。

阅读全文 双屏查看 官方信息 专利公告 收藏专利 下载PDF 下载WORD