CN109032594A

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

Info

Publication number: CN109032594A
Application number: CN201810704621.6A
Authority: CN
Inventors: 方义成
Original assignee: Anhui He Soft Information Technology Co Ltd
Current assignee: Anhui He Soft Information Technology Co Ltd
Priority date: 2018-06-30
Filing date: 2018-06-30
Publication date: 2018-12-18

Abstract

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

Description

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

技术领域

本发明涉及网站前端系统架构及服务器跨域领域，特别涉及一种高效的移动应用管理网站前端开发的方法及系统。

背景技术

早期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 请求中转服务模块传递的请求信号，根据配置的后端接口地址，找到需要向后端服务器请求的接口地址，向后端服务器进行请求，获取node服务端的返回结果，并将返回结果返回给 service请求中转服务模块。对页面展示的数据进行了双向绑定，能自动检测数据变化实时更新渲染页面，可直接请求后端接口地址，不用在前端设置服务器代理和更改host文件，有效的解决了前后端分离模式下，前端跨域无法访问的问题，并对可重用的UI元素进行整合复用，提高代码复用率，为项目开发的稳定有序进行、工作效率的提升提供了有力保障。

实施例。

本例提供的一种高效的移动应用管理网站前端开发的方法及系统，将前端和后端分离，前端独立成项，采用MVC设计模式，nodejs作为前端中的服务端，AgularJS、BootStrap、jquery框架，并与Git整合实现实时提交，保证版本准确性和唯一性，目的在于提供一种包含应用信息管理、应用版本控制管理、应用权限转让管理、应用相关文档管理、消息通知及用户管理的系统，方便了团队之间的共享与协作，提升了工作效率。

一种高效的移动应用管理网站前端开发的方法及系统，如图1所示：

一，建立项目及项目所需框架，并对项目文件进行配置并初始化项目配置，具体包括以下步骤：

步骤S101：建立项目及项目所需框架，配置项目及文件：

首先，建立基于nodejs、express的项目，将项目所需的框架jquery、BootStrap、AngularJS导入到项目中；

其次，修改项目中待测试的nodejs文件，配置静态文件根路径及页面引擎，配置项目需要的nodejs插件名称和版本号，用nodejs的npm命令行工具将配置好的插件安装到项目中；

然后，配置后端接口地址文件，该后端接口地址文件包含接口文件的标题、版本号、依赖的引擎、状态及每个接口地址的名称、ID、不同状态下的请求地址、请求方式及请求参数格式。

步骤S102：初始化项目配置：

首先，在项目主页中引入AngularJS与BootStrap需要的css、js文件；

其次，设置AngularJS的作用域，设置AngularJS路由，用于前端页面跳转，并编写相应的逻辑代码建立与路由对应的controller文件；建立与controller文件相应的service 文件及directive文件，将service文件注入到controller文件中，在service文件中编写相关代码，实现下文中service服务层接收页面控制器的请求信号，对请求信号进行中转处理。

然后，配置nodejs路由，用于页面请求node服务端接口地址的跳转，并建立与路由对应的nodejs文件。

二、编写不同路由对应的不同页面，配置不同路由对应的页面控制器实现不同页面的业务逻辑，具体包括以下步骤：

步骤S103：编写AngularJS路由所对应的页面，还原界面设计稿。

步骤S104：根据需求规格说明书，在AngularJS路由所对应的controller文件中，实现相应的业务逻辑。

三、service服务层接收页面控制器的请求信号，对请求信号进行中转处理，并接收返回结果，具体包括以下步骤：

步骤S105：在service服务层中接收controller中的请求信号，对请求信号进行中转处理，即根据配置的nodejs路由请求不同的路径。

步骤S106：node服务端接收请求后真正的向后端服务器发出请求，并接收后端返回的结果，并将结果返回到service服务层中。

其中，service服务层及node服务端之间传递的数据都按照json数据格式处理，并且遵循HTTP请求协议。

node服务端接收请求后向后端服务器发出请求时，运用nodejs插件 ali-data-proxy-lite解决了请求跨域问题。ali-data-proxy-lite为一种开源的nodejs跨域插件包。

四，service服务层将获取的返回结果返回到页面控制器，页面控制器对返回结果进行数据处理，并将处理后的数据绑定到页面中，具体包括以下步骤：

步骤S107：service服务层中接收到nodejs端返回的数据后，将该数据返回到页面控制器controller中。

步骤S108：页面控制器controller中对service返回的数据结果进行处理，将数据绑定到页面，并对返回结果可能的异常进行处理，并推送警告提示信息。

五，页面检测到数据发生变化，重新渲染页面，具体为：

步骤S109：页面检测到绑定数据发生变化后，自动重新渲染页面。

本例还提供了一种高效的网站开发的方法及系统的结构流程，整个前端系统，其中包括：页面展示模块、页面逻辑控制模块、service请求中转服务模块及node端服务模块；所述页面展示模块及页面逻辑控制模块之间的数据传输实现双向绑定；

所述页面展示模块，用于向用户展示网站页面，获取用户的操作信号，并将其传输给页面逻辑控制模块；还用于根据页面逻辑控制模块返回的数据，监控数据的变化，并自动重新渲染页面；

所述页面逻辑控制模块，用于获取页面展示模块获取的操作信号，确定待发出的请求信号，并将请求信号传输给service请求中转服务模块；还用于接收service请求中转服务模块的返回结果，对返回结果进行数据处理，并将处理后的数据绑定到页面中；

所述service请求中转服务模块，用于将获取的请求信号，转发至node端服务模块，并将node端服务模块的返回结果发送到页面逻辑控制模块；

所述node端服务模块，用于获取service请求中转服务模块传递的请求信号，根据配置的后端接口地址，找到需要向后端服务器请求的接口地址，向后端服务器进行请求，获取node服务端的返回结果，并将返回结果返回给service请求中转服务模块；优选的，还包括UI复用模块；所述UI复用模块，用于自定义网站页面中需要的组件，在页面展示模块中多处被复用。

通过对页面数据进行双向绑定，将页面的请求进行中转，防止跨域问题，用户只需创建需要发布的应用信息，点击发布就可以成功将应用上线，输入转让人名称或邮箱就可以将应用转让他人，如此，提高了工作效率，方便了应用的管理。

Claims

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