JAVA动态网页开发：框架

目标：

本文主要教会大家如何搭建一套简单的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—指令

实践：

一、新建项目（bin-test）

New—》Web—》Dynamic Web Project

项目命名，本文命名bin-test

项目新建后自动生成项目结构

二、后端搭建（JsonServlet、control.User.java、model.User.java）

1、拷贝jar包

jar文件包含了已编译的java的可执行程序，请将本文附件中获取本框架的核心bin.jar，以及本框架依赖的相关jar包，需要一并拷贝到WEB-INF下的lib文件夹中，建议直接将整个lib文件夹拷贝过来。

2、新建包

在src源码文件夹中新建package包：

（1）control：放置业务控制类

（2）model：放置数据模型类

（3）servlet：服务

3、新建类

控制层：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与框架有关，后续会说明，建议按本文命名。

这便是后端的所有内容。

三、前端搭建（Login.html）

 前端的WebContent文件夹中添加js文件夹，用于放置框架所需的js文件，并新建login.htm前端页面，把js引入html文件中。

前端html代码如下：

前端js代码如下：

四、配置XML

前端的指令如何映射到后端呢？如：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

==================================================================

（架构可能会更新，请及时关注）