CN112817589A - mala前端快速开发框架系统及方法 - Google Patents

Abstract

本发明公开了mala前端快速开发框架系统及方法，具体涉及软件开发技术领域，包括前端技术平台，所述前端技术平台包括表单组件、其他组件、表格组件、图表组件、布局组件和提示组件。本发明实现真正的前后端解耦，前端服务器负责控制页面引用和跳转和路由，前端页面异步调用后端的接口，后端和应用服务器使用tomcat加快整体响应速度，且发现项目问题之后，可以快速定位是前和后端的问题，页面逻辑，跳转错误，浏览器兼容性问题，脚本错误，页面样式等问题，全部由前端工程师来负责，接口数据出错，数据没有提交成功，应答超时等问题，全部由后端工程师来解决，双方互不干扰，且前端大量的组件代码得以复用，组件化，有效提升其开发效率。

Description

mala前端快速开发框架系统及方法

技术领域

本发明涉及软件开发技术领域，更具体地说，本发明涉及mala前端快速开发框架系统及方法。

背景技术

早期主要使用的MVC框架通常是所有的请求都被发送给作为控制器的Servlet，它接受请求，并根据请求信息将它们分发给适当的JSP来响应。同时，Servlet还根据JSP的需求生成JavaBeans的实例并输出给JSP环境。JSP可以通过直接调用方法或使用UseBean的自定义标签得到JavaBeans中的数据。需要说明的是，这个View还可以采用Velocity、Freemaker等模板引擎。这种方式目前还有不少公司在使用，但整个服务的页面都在后端渲染，消耗后端服务资源的同时，后端中可能有前端代码，前端中也有后端代码，这对开发人员要求相对要高，同时出错率也高，影响开发效率。

发明内容

为了克服现有技术的上述缺陷，本发明提供了mala前端快速开发框架系统及方法，本发明所要解决的技术问题是：现有的前端框架整个服务的页面都在后端渲染，消耗后端服务资源的同时，后端中可能有前端代码，前端中也有后端代码，其出错率也高，且影响开发效率的问题。

为实现上述目的，本发明提供如下技术方案：mala前端快速开发框架系统，包括前端技术平台，所述前端技术平台包括表单组件、其他组件、表格组件、图表组件、布局组件和提示组件。

作为本发明的进一步方案：所述表单组件包括输入框、选择器、时间选择器、上传、单选多选、级联选择器、日期选择器和穿梭框。

作为本发明的进一步方案：所述其他组件包括树形控件、进度条、滚动条和轮播。

作为本发明的进一步方案：所述表格组件包括增删改查、弹框模板、多表联动、高级搜索、弹框表格和图标联动。

作为本发明的进一步方案：所述图表组件包括柱状图、环饼图、实时动态图、折线图、地图和多图联动。

作为本发明的进一步方案：所述布局组件包括Tabs标签页、下拉菜单、steps步骤条和折叠板。

作为本发明的进一步方案：所述提示组件包括Alert警告、消息提示和Notice通知。

mala前端快速开发框架方法，包括以下步骤：

首先，浏览器向静态文件服务器请求静态页面，静态文件服务器返回到静态页面，使得浏览器获得静态页面，并且前端向后端和数据库请求数据，接着验证TOKEN是否合法，合法请求则返回数据，且在APP界面进行展示，而非法请求则拒绝请求。

本发明的有益效果在于：

1、本发明实现真正的前后端解耦，前端服务器负责控制页面引用和跳转和路由，前端页面异步调用后端的接口，后端和应用服务器使用tomcat加快整体响应速度，且发现项目问题之后，可以快速定位是前和后端的问题，页面逻辑，跳转错误，浏览器兼容性问题，脚本错误，页面样式等问题，全部由前端工程师来负责，接口数据出错，数据没有提交成功，应答超时等问题，全部由后端工程师来解决，双方互不干扰。

2、本发明前后端通过JSON数据进行数据沟通、减少了服务端渲染的过程，前端直接在浏览器上渲染无需服务端做前置渲染，在部署时可使用GZIP，webpack混淆压缩等技术来减少前端服务和浏览器之间的数据量，提升加载响应效率的同时保证项目代码难以被理解，提升了项目的安全性，减少后端服务器的并发/负载压力，除了接口以外的其他所有http请求全部转移到前端nginx上，接口的请求调用后台服务，参考nginx反向代理tomcat，且除了第一次页面请求外，浏览器会大量调用本地缓存，且在大并发情况下，可以同时水平扩展前后端服务器。

3、本发明前端项目支持热部署，不用重启服务器，前端无缝升级，且增加代码的维护性和易读性，同时，其可以前后端并行开发，且前端大量的组件代码得以复用，组件化，有效提升其开发效率。

附图说明

图1为本发明的系统结构框图；

图2为本发明的前后端交互结构框图；

图3为本发明的前后端交互流程图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1-3所示，本发明提供了mala前端快速开发框架系统，包括前端技术平台，前端技术平台包括表单组件、其他组件、表格组件、图表组件、布局组件和提示组件。

表单组件包括输入框、选择器、时间选择器、上传、单选多选、级联选择器、日期选择器和穿梭框。

其他组件包括树形控件、进度条、滚动条和轮播。

表格组件包括增删改查、弹框模板、多表联动、高级搜索、弹框表格和图标联动。

图表组件包括柱状图、环饼图、实时动态图、折线图、地图和多图联动。

布局组件包括Tabs标签页、下拉菜单、steps步骤条和折叠板。

提示组件包括Alert警告、消息提示和Notice通知。

一种mala前端快速开发框架方法，包括以下步骤：

首先，浏览器向静态文件服务器请求静态页面，静态文件服务器返回到静态页面，使得浏览器获得静态页面，并且前端向后端和数据库请求数据，接着验证TOKEN是否合法，合法请求则返回数据，且在APP界面进行展示，而非法请求则拒绝请求。

框架：

脚手架zzyc-cli

组件库zzyc-components

可在npm私服进行查看http://47.110.15.71:8334/。

框架依赖：

基views文件夹下的vue文件会自动生成路由，使用的是z-auto-route数据请求和页面加载时页面顶部会有加载进度，使用的是nprogress数据加密功能，使用的是crypto-js复制功能clipboard。

安装脚手架：

命令行执行npm i zzyc-cli-g进行脚手架全局安装

每次框架更新，重新执行即可更新。

创建项目：

对应的前端文件夹，打开cmd输入zzyc(如果提示命令无效，执行zzyc.cmd)，执行之后，按提示输入项目初始化信息。

生成项目解构：

├─build前端服务webpack配置文件，一般不用调整

│...

│

├─config前端服务webpack配置文件，一般不用调整

│...

│

├─src

││App.vue前端项目入口Vue，一般不用调整

││globle.config.yml项目yml配置文件，每个项目都需要调整

││main.js入口JS

││permission.js权限控制JS

││

│├─assets项目静态文件

│││logo.png

││...

││

│├─components项目的组件文件夹，在`zzyc-components`组件库中有的不要重复造轮子

│├─router

││index.js路由配置文件

││viewRouter.js自动生成的路由文件，不要提交版本控制

││

│├─store项目的store控制

││index.js

││

│├─svg项目中使用的svg文件存放位置

││zip.svg

││....

││

│├─utils项目中用的JS工具

││clipboard.js

││request.js

││tool.js

││

│├─views业务页面文件夹，按照对应路径创建文件夹和文件，会自动生成router

││pageNoCreated.vue

││waitingForDevelopment.vue

││

│└─viewsOfFrame框架页面文件夹

││mapExample.vue

││pageError.vue

││

│├─layouts

│││index.vue

│││

││└─theme

││├─theme1

│││historyTab.vue

│││index.vue

│││menuTree.vue

│││

││└─theme2

││historyTab.vue

││index.vue

││menuTree.vue

││

│├─login

││index.vue

││

│├─page

││index.vue

│└─svg-icons

│index.vue

│requireIcons.js

└─static放静态文件的位置

│└─.gitkeep

│.babelrc

│.editorconfig

│.gitignore

│.postcssrc.js

│favicon.ico

│index.html

│package.json

│README.md。

安装依赖：执行npm install。

启动项目：npm工具栏执行dev或者start或者命令行执行npm run dev。项目打包：npm工具栏执行build或命令行执行node build/build.js。

修改配置文件：src/globle.config.yml是项目配置文件，包括请求地址、项目信息、主题等。

创建页面：

src/views文件夹中创建的vue

普通的vue文件不会自动生成为路由页面

需要加上<z-route>标签

在需要生成路由的vue文件头部加上z-route标签，里面为json

<z-route>

{"dynamic":false,"meta":{"title":"根布局页面"}}

</z-route>

其中meta为vue-router配置的meta属性一致，dynamic为单独设置该路由是否为按需加载，不设置默认使用全局配置的dynamic。

页头创建人的信息

z-route详见https://www.npmjs.com/package/z-auto-route

<！--Created by YangWei on 2020/11/18 13:20-->

<z-route>

{"dynamic":true,"meta":{"title":"标题",}}

</z-route>

<template>

</template>

<script>

export default{

name:'pageNoCreat',

}

</script>

<style scoped>

</style>

编写页面：数据请求：

this.$request(params)

参数同axios,同时增加了以下参数

@name$request

@description{Promise方法，成功.then，失败.catch}请求获取数据方法常见的参数说明

@paramparam.url{String}请求地址：/a/b

@paramparam.method{String}请求方式POST/GET

@paramparam.params{JSON}发送的数据

@param param.uploadBol{Boolean}是否使用[x-www-form-urlencoded]方式上传，用户表单提交和文件上传method为POST时生效

@paramparam.tips{String}设置等待提示语，默认为：【加载中，请耐心等待…】值为‘none’时不显示加载层ips传值时，使用传递的值

@paramparam.successTips{String}设置请求成功提示语，默认不提示,有值才提示

@paramparam.responseNoCode{Boolean}设置返回数据是否走code判断true不判断code不写该参数或为false则判断code

element-ui上传的action配置方式：

:action＝"server.basePath+server.serverName+'上传地址(前面不要/)'"

对应看下方的server对象

虚拟滚动条组件：

<vue-scroll>

...页面内容...

<vue-scroll>

vue-scroll的父级dom需要给定高度(使用纵向滚动条)或给定宽度(使用横向滚动条)

svg图标组件：

<svg-icon icon-class＝"svgName"/>

如:addBtn.svg对应的就是<svg-icon icon-class＝"addBtn"/>

svg文件在src/svg文件夹中项目查看地址路径：/svg-icons

自定义指令：

v-dialogdrag

功能：el-dialog弹框拖拽

使用方式:

<el-dialog

title＝"添加"

...

v-dialogdrag>

...弹出框内容....

</el-dialog>

v-angle

功能：用于input输入框禁用全角符号和数组，全用半角的使用方式：

<el-input type＝"text"v-angle＝"value"v-model＝"value">

配置文件中的server的对象：

this.server

只能用于读取参数，不要做任何修改操作

数据如下：

"server":{

"dataCenterBasePath":"http://47.110.15.71:8888/zzjg",//登录以及修改密码的接口前缀组织机构的地址一般不用调整

"basePath":"http://47.110.15.71:8888",//业务系统后台服务请求地址单独启动前端项目时配置后台的ip和端口

"serverName":"/zzjg/",//业务系统后台服务的服务名和`basePath`进行拼接组成`axios`的base&&访问项目的路径前缀格式：/项目名/

"VerifyCodeBol":false,//是否开启验证码

"passwordEncryptionBol":true,//是否开启密码混淆

"modulesResourceNos":[//系统获取资源用的ResourceNos

"1003"

],

"mapUrl":

"http://122.224.168.146:16080/gisapi/rest/api/js/5.0/BF833A1145CB44669FB387DEA62AC464",//gis地图的js地址

"projectName":"组织机构管理系统",//项目名称,中文名

"theme":{//layouts主题设置

"name":"theme1",//主题名称theme1(纯左侧导航)、theme2(顶部+左侧导航)

"menuMaxWidth":"250px",//左侧菜单的宽度，如果用的主题有左侧菜单时生效

"multiLabelMode":true//是否开启多标签页开启多标签页：内容顶部显示页面标签，同时页面会被缓存关闭多标签页：内容顶部显示页面位置,页面不缓存

}

}

JS工具类：

在’src/utils’文件夹中

tool.js各种js方法

有验证空、JSON处理、storage处理等自行查看js，注释很全面

requireIcons.js对应返回

{

icons,//svg文件夹中所有名称的数组['addbtn','areaSet'...]

iconsArray//svg文件夹中数据的数组象[{id:'addbtn',key:'addbtn',value:'addbtn',iconClass:'addbtn',type:'svg图标'},...]

}

clipboard.js返回复制方法

用法如下：

<template>

<div@click＝"handleClipboard($event)">

...

</div>

</template>

<script>

import clipboard from'@/utils/clipboard'

export default{

methods:{

handleClipboard(event){

var text＝'复制的文字'

clipboard(text,event)

}

}

}

</script>

框架基础页面说明：

登陆：

路径:/或者/login

对应的文件src/viewsOfFrame/login/index.vue

项目svg列表查看页面：

路径：/svg-icons

查看项目中所有的svg图标，点击图标即可负责代码使用

错误页：

路径:/pageError

地址输入错误会进到这个页面

对应文件src/viewsOfFrame/pageError.vue

地图调用演示：

路径：/mapExample

对应文件src/viewsOfFrame/mapExample.vue

5Globle.config.yml配置说明：

前端项目配置文件

创建项目必改项modulesResourceNos

系统获取资源用的ResourceNos

详解：

#使用方式

#import＝>import*as GCBase from'globle-config/index.json'GCBase就是转换后的JSON

#require＝>const GC＝require('globle-config/index.json')GC就是转换后的JSON

#转换原理读取当前文件，node_modules/globle-config/index.json

#--

#项目描述信息

describe:

createdBy:yangwei

creatTime:'2020-12-05 16:8:11'

desc:数据资源管理系统

#服务相关配置

server:

#登录以及修改密码的接口前缀组织机构的地址一般不用调整

dataCenterBasePath:'http://47.110.15.71:8888/zzjg'

#业务系统后台服务请求地址单独启动前端项目时配置后台的ip和端口也可留空下方配置反向代理customConfig.proxyTable

#basePath:'http://47.110.15.71:8888'

basePath:'http://127.0.0.1:8080'

#业务系统后台服务的服务名一般和`basePath`进行拼接组成`axios`的base&&访问项目的路径前缀

#格式：/项目名/

serverName:/dataResource/

#是否开启验证码

VerifyCodeBol:false

#是否开启密码混淆

passwordEncryptionBol:true

#系统获取资源用的ResourceNos

modulesResourceNos:

-'1004'

#gis地图的js地址

mapUrl:>-

http://122.224.168.146:16080/gisapi/rest/api/js/5.0/BF833A1145CB44669FB387DEA62AC464

#项目名称,中文名

projectName:数据资源

#是否开启TOKEN验证默认不开启false，以免有时候单个项目无法运行true为开启

tokenValidate:false

#layouts主题设置

theme:

#主题名称theme1(纯左侧导航)、theme2(顶部+左侧导航)

name:theme1

#左侧菜单的宽度，如果用的主题有左侧菜单时生效

menuMaxWidth:250px

#是否开启多标签页开启多标签页：内容顶部显示页面标签，同时页面会被缓存关闭多标签页：内容顶部显示页面位置，页面不缓存

multiLabelMode:true

#webpack配置

customConfig:

#是否作为单独项目打包默认false向上两级的static文件夹打包设置为true则在当前项目根目录的dist文件夹下打包

buildAsSingleProject:false

#前端单独部署模式打包时(buildAsSingleProject＝true)，前端的项目名称

frontEndProjectName:/dataResource-web/

#反向代理开发过程中使用

proxyTable:

/dataResource:

target:'http://127.0.0.1:8080'

changeOrigin:true

pathRewrite:

^/dataResource:/dataResource

#前端服务启动的端口

port:8092。

最后应说明的几点是：首先，在本申请的描述中，需要说明的是，除非另有规定和限定，术语“安装”、“相连”、“连接”应做广义理解，可以是机械连接或电连接，也可以是两个元件内部的连通，可以是直接相连，“上”、“下”、“左”、“右”等仅用于表示相对位置关系，当被描述对象的绝对位置改变，则相对位置关系可能发生改变；

其次：本发明公开实施例附图中，只涉及到与本公开实施例涉及到的结构，其他结构可参考通常设计，在不冲突情况下，本发明同一实施例及不同实施例可以相互组合；

最后：以上所述仅为本发明的优选实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (8)

1.mala前端快速开发框架系统，包括前端技术平台，其特征在于：所述前端技术平台包括表单组件、其他组件、表格组件、图表组件、布局组件和提示组件。

2.根据权利要求1所述的mala前端快速开发框架系统，其特征在于：所述表单组件包括输入框、选择器、时间选择器、上传、单选多选、级联选择器、日期选择器和穿梭框。

3.根据权利要求1所述的mala前端快速开发框架系统，其特征在于：所述其他组件包括树形控件、进度条、滚动条和轮播。

4.根据权利要求1所述的mala前端快速开发框架系统，其特征在于：所述表格组件包括增删改查、弹框模板、多表联动、高级搜索、弹框表格和图标联动。

5.根据权利要求1所述的mala前端快速开发框架系统，其特征在于：所述图表组件包括柱状图、环饼图、实时动态图、折线图、地图和多图联动。

6.根据权利要求1所述的mala前端快速开发框架系统，其特征在于：所述布局组件包括Tabs标签页、下拉菜单、steps步骤条和折叠板。

7.根据权利要求1所述的mala前端快速开发框架系统，其特征在于：所述提示组件包括Alert警告、消息提示和Notice通知。

8.前端快速开发框架方法，其特征在于：根据权利要求1-7所述mala前端快速开发框架系统：包括以下步骤：

首先，浏览器向静态文件服务器请求静态页面，静态文件服务器返回到静态页面，使得浏览器获得静态页面，并且前端向后端和数据库请求数据，接着验证TOKEN是否合法，合法请求则返回数据，且在APP界面进行展示，而非法请求则拒绝请求。

Images