一种高效的移动应用管理网站前端开发的方法及系统技术方案

本发明专利技术一种高效的移动应用管理网站前端开发的方法及系统针对现有技术中前后端分离模式下，前端跨域无法访问的问题，提供一种网站开发方法，首先，建立项目及项目所需框架，并对项目文件进行配置并初始化项目配置；其次，编写不同路由对应的不同页面，配置不同路由对应的页面控制器实现不同页面的业务逻辑；然后，service服务层接收页面控制器的请求信号，对请求信号进行中转处理，并接收返回结果；再然后，service服务层将获取的返回结果返回到页面控制器，页面控制器对返回结果进行数据处理，并将处理后的数据绑定到页面中；最后，页面检测到数据发生变化，重新渲染页面。

【技术实现步骤摘要】
一种高效的移动应用管理网站前端开发的方法及系统
本专利技术涉及网站前端系统架构及服务器跨域领域，特别涉及一种高效的移动应用管理网站前端开发的方法及系统。
技术介绍
早期web系统采用MVC模式把前端和后端在一个项目里集成，现在web项目规模越来越大，中大型的Web系统是一个开放式的系统，开放型的系统用户在浏览器发起的请求可能会转发到外部的系统里进行处理，或者是本地的系统和外部系统一起完成请求的处理，此外有的请求可能不会直接请求数据库，而是请求缓存服务器，这些变化几乎都是发生在Web系统的服务端，前后端耦合度很高的Web系统服务端的复杂度提升必然带来了Web前端复杂度的提升。因此前后端的分离使前端对后端的依赖性降低，使得前后端更加专业，更便于管控。此外，除了一般的大企业会使用自己开发的一套框架或类库之外，其他的中小型企业一般都采用jquery作为前端框架。
技术实现思路
本专利技术所要解决的技术问题，就是提供一种高效的移动应用管理网站前端开发的方法及系统以解决前后端分离模式下，前端跨域无法访问的问题。本专利技术解决所述技术问题，采用的技术方案是，网站开发方法，，包括以下步骤：步骤1、建立项目及项目所需框架，并对项目文件进行配置并初始化项目配置；步骤2、编写不同路由对应的不同页面，配置不同路由对应的页面控制器实现不同页面的业务逻辑；步骤3、service服务层接收页面控制器的请求信号，对请求信号进行中转处理，并接收返回结果；步骤4、service服务层将获取的返回结果返回到页面控制器，页面控制器对返回结果进行数据处理，并将处理后的数据绑定到页面中；步骤5、页面检测到数据发生变化，重新渲染页面。具体的，所述步骤3中，还包括以下步骤：步骤31、service服务层接收页面控制器的请求信号；步骤32、service服务层向node服务端发送请求信号；步骤33、node服务端接收请求信号后向后端服务器发送请求，并接收后端的返回结果；步骤34、node服务端将返回结果发送到service服务层。进一步的，所述步骤1中包括以下步骤：对项目文件进行配置包括：修改项目中待测试的nodejs文件，配置静态文件根路径及页面引擎，配置项目需要的nodejs插件名称和版本号，并将配置后的插件安装至项目中，然后配置后端接口地址文件；初始化项目配置包括：在项目中引入框架AngularJS与BootStrap需要的css、js文件，设置AngularJS的作用域，设置AngularJS路由，用于前端页面跳转，并建立与路由对应的页面控制器，配置nodejs路由，用于页面请求node服务端接口地址的跳转，并建立与路由对应的nodejs文件。进一步的，采用npm命令行工具将配置后的插件安装至项目中；所述后端接口地址文件至少包括接口文件的标题、版本号、依赖的引擎及状态；还包括每个接口地址的名称、ID、不同状态下的请求地址、请求方式及请求参数格式。进一步的，所述步骤3中，service服务层及node服务端之间传递的数据都按照json数据格式处理，并且遵循HTTP请求协议。进一步的，所述步骤33中，node服务端接收请求后向后端服务器发出请求时，运用nodejs插件ali-data-proxy-lite解决请求跨域问题。具体的，所述步骤4中，还包括以下步骤：页面控制器对返回结果进行检测，若返回结果有异常，向页面推送警告提示信息，否则不动作。具体的，所述步骤5中，页面检测到数据发生变化包括：网站页面输入引起的数据变化及后台请求改变数据引起的数据变化。网站开发系统，包括页面展示模块、页面逻辑控制模块、service请求中转服务模块及node端服务模块；所述页面展示模块及页面逻辑控制模块之间的数据传输实现双向绑定。所述页面展示模块，用于向用户展示网站页面，获取用户的操作信号，并将其传输给页面逻辑控制模块；还用于根据页面逻辑控制模块返回的数据，监控数据的变化，并自动重新渲染页面。所述页面逻辑控制模块，用于获取页面展示模块获取的操作信号，确定待发出的请求信号，并将请求信号传输给service请求中转服务模块；还用于接收service请求中转服务模块的返回结果，对返回结果进行数据处理，并将处理后的数据绑定到页面中。所述service请求中转服务模块，用于将获取的请求信号，转发至node端服务模块，并将node端服务模块的返回结果发送到页面逻辑控制模块。所述node端服务模块，用于获取service请求中转服务模块传递的请求信号，根据配置的后端接口地址，找到需要向后端服务器请求的接口地址，向后端服务器进行请求，获取node服务端的返回结果，并将返回结果返回给service请求中转服务模块。具体的，还包括UI复用模块；所述UI复用模块，用于自定义网站页面中需要的组件，在页面展示模块中多处被复用。本专利技术的有益效果是：对页面展示的数据进行了双向绑定，能自动检测数据变化实时更新渲染页面，可直接请求后端接口地址，不用在前端设置服务器代理和更改host文件，有效的解决了前后端分离模式下，前端跨域无法访问的问题，并对可重用的UI元素进行整合复用，提高代码复用率，为项目开发的稳定有序进行、工作效率的提升提供了有力保障。附图说明。图1为本专利技术网站开发方法及系统实施例的方法流程图。以下结合实施例的具体实施方式，对本专利技术的上述内容再作进一步的详细说明。但不应将此理解为本专利技术上述主题的范围仅限于以下的实例。在不脱离本专利技术上述技术思想情况下，根据本领域普通技术知识和惯用手段做出的各种替换或变更，均应包括在本专利技术的范围内。具体实施方式。下面结合附图及实施例详细描述本专利技术的技术方案。本专利技术针对现有技术中前后端分离模式下，前端跨域无法访问的问题，提供一种网站开发方法，首先，建立项目及项目所需框架，并对项目文件进行配置并初始化项目配置；其次，编写不同路由对应的不同页面，配置不同路由对应的页面控制器实现不同页面的业务逻辑；然后，service服务层接收页面控制器的请求信号，对请求信号进行中转处理，并接收返回结果；再然后，service服务层将获取的返回结果返回到页面控制器，页面控制器对返回结果进行数据处理，并将处理后的数据绑定到页面中；最后，页面检测到数据发生变化，重新渲染页面。网站开发系统，包括页面展示模块、页面逻辑控制模块、service请求中转服务模块及node端服务模块；所述页面展示模块及页面逻辑控制模块之间的数据传输实现双向绑定；所述页面展示模块，用于向用户展示网站页面，获取用户的操作信号，并将其传输给页面逻辑控制模块；还用于根据页面逻辑控制模块返回的数据，监控数据的变化，并自动重新渲染页面；所述页面逻辑控制模块，用于获取页面展示模块获取的操作信号，确定待发出的请求信号，并将请求信号传输给service请求中转服务模块；还用于接收service请求中转服务模块的返回结果，对返回结果进行数据处理，并将处理后的数据绑定到页面中；所述service请求中转服务模块，用于将获取的请求信号，转发至node端服务模块，并将node端服务模块的返回结果发送到页面逻辑控制模块；所述node端服务模块，用于获取service请求中转服务模块传递的请求信号，根据配置的后端接口地址，找到需要向后端服务器请求本文档来自技高网...

【技术保护点】
1. 一种高效的移动应用管理网站前端开发的方法，其特征在于，包括以下步骤：步骤1、建立项目及项目所需框架，并对项目文件进行配置并初始化项目配置；步骤2、编写不同路由对应的不同页面，配置不同路由对应的页面控制器实现不同页面的业务逻辑；步骤3、service服务层接收页面控制器的请求信号，对请求信号进行中转处理，并接收返回结果；步骤4、service服务层将获取的返回结果返回到页面控制器，页面控制器对返回结果进行数据处理， 并将处理后的数据绑定到页面中；步骤5、页面检测到数据发生变化，重新渲染页面。

【技术特征摘要】
1.一种高效的移动应用管理网站前端开发的方法，其特征在于，包括以下步骤：步骤1、建立项目及项目所需框架，并对项目文件进行配置并初始化项目配置；步骤2、编写不同路由对应的不同页面，配置不同路由对应的页面控制器实现不同页面的业务逻辑；步骤3、servi...

【专利技术属性】
技术研发人员：方义成，
申请(专利权)人：安徽合软信息技术有限公司，
类型：发明
国别省市：安徽,34