赞
踩
本文主要教会大家如何搭建一套简单的Eclipse开发框架,为快速开发网页项目做准备。
安装好Eclipse开发环境,懂得简单的配置,新建和发布项目。
开发一个登录功能,前端HTML页面发送数据到后端,后端收到数据,并验证返回结果。
(蚂蚁虽小,五脏俱全,这样一个简单实现,可以让你快速了解什么是架构。本文的所有源码包含库,都在附件云盘资料中,可提前下载,同步实践,学习更快!)
系统架构:MVC分层架构(Model数据模型层,Control业务处理层,View视图层)
(1)Model数据模型层:model.User.java
说明:简单的数据型类对象,包含数据字段及Get/Set方法,俗称:javabean。因为我们要做用户登录功能,那么显然,用户字段包括:用户名、密码。
(2)Control业务处理层:control.User.java
说明:业务逻辑处理对象,它会使用模型层的数据,你可以在这里进行数据判断,数据转换等,并将结果返回给视图层。
(3)View视图层:Login.html
说明:视图层很好理解了,就是用户看到的交互界面,通常是前端HTML页面,包含标签、脚本、样式,动态网页与静态网页不同,动态网页是在不重新加载页面的情况下,实现网页的局部变化。目前,主流网页与后台异步通信的主要方式是ajax(post或get),数据的主要格式是json。
本文中,我们将从登陆页面发送以下数据给后台,并简单判断返回结果:
(1)发送的格式:
{"ask":"login","UserName":"tangbin","PassWord":"123"}
ask—指令,UserName—用户名,PassWord—密码
(2)返回的格式:
{"json":"ResultJson","ask":"login","code":"0","message":"密码错误!","data":null}
ask—指令,code—指令
New—》Web—》Dynamic Web Project
项目命名,本文命名bin-test
项目新建后自动生成项目结构
jar文件包含了已编译的java的可执行程序,请将本文附件中获取本框架的核心bin.jar,以及本框架依赖的相关jar包,需要一并拷贝到WEB-INF下的lib文件夹中,建议直接将整个lib文件夹拷贝过来。
在src源码文件夹中新建package包:
(1)control:放置业务控制类
(2)model:放置数据模型类
(3)servlet:服务
控制层:control.User类(继承类:BaseJsonHandler,在bin.jar包中),代码如下:
其中:
(1)GetParamStr(参数名):获取前端传过来的参数;
(2)ResultJson:是一个结果类,可以设置code、message等字段给前端;
(3)WriteResult(返回数据包):把操作结果数据返回给前端;
模型层:新建model.User类(继承类:BaseJson,在bin.jar包中),代码如下:
服务层:需要右键servlet包,New新建——》Other——》Web——》Servlet
为服务命名,本文用:JsonServlet
Finish完成后,Eclipse会自动生成代码,包含get和post请求处理方法:
我们主要使用post方法,请参照修改post方法:
这两句与框架有关,复制粘贴即可,这里的xml与框架有关,后续会说明,建议按本文命名。
这便是后端的所有内容。
前端的WebContent文件夹中添加js文件夹,用于放置框架所需的js文件,并新建login.htm前端页面,把js引入html文件中。
前端html代码如下:
前端js代码如下:
前端的指令如何映射到后端呢?如:ask为login的指令传给User的Login方法并返回
我们注意到,后台服务层JsonServlet使用了一个XML文件,C://XML/bin-test.xml
这个XML文件中包含了前端到后端的访问路径,通过前端指令,定向调用后端的制定方法,配置方法如下所示:
(1)code:代表ajax发送的ask指令,本文中前端发送了login指令;
(2)class:指向后台的某个控制类,本文中为conrol.User;
(3)method:需要调用的方法名称;
右键项目,RunAs——》Server,输入用户名密码,效果如下。
输入了正确的用户名和密码,后端发送了code=1结果包,前端收到后显示出ok。
这就是框架使用的主要内容,可以看出,本框架使用了MVC进行分层,并使用了映射实现了前后端的关联。
这套框架使用很简单,为了让您快速了解该框架使用,control.User控制类中并没有操作数据库,Login.html中只用了最简单的标签和脚本。
基于本框架使用的其他应用,会在后续中持续介绍,包括:
(1)如何基于本框架开发一套完整系统,包括基础数据设计,权限控制;
(2)如何结合VUE、Element-UI控件开发前端页面;
(3)如何结合Hibernate操作数据库;
(4)如何设置获取Session,可以调用BaseJsonHandler基类的GetSession、SetSession方法;
(5)如何将对象(数组)按需进行JSON序列化(toString),并在前端ajax.GetData()获取;
(6)其他;
本文的所有源码附件,您可下载获取,请尊重知识版权,复制和使用注明出处。
==================================================================
百度云盘下载地址:
链接: https://pan.baidu.com/s/1uByiOqCQZI4JNejmFSiDZQ
提取码: uqch
CSDN下载地址:
https://download.csdn.net/download/tangbinflash/86240279
==================================================================
(架构可能会更新,请及时关注)
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。