整个项目布置如下
具体的配置不再细讲遵循其他博客网站进行配置
总结
通过这段时期的学习,对整体框架的使用、个人理解及增删改查功能的实现进行一个梳理。
先对整体框架进行一个概括:
@Controller此标识标致该类需要被扫描。
@RequestMapping此标识中的值是需要访问的url路径。
@ModelAttribute此标识为需要从from表单中获取。
一、SpringMVC三个层的编辑(以数据库的增删改查为例)
Bean包:创建实体类
首先创建TestSave类,该类为实体类,可以将需要的属性全都放置进来,其中包括id(序号);code(编号);username(用户名);password(密码)四个属性,继承BaseEntity类,并进行getter和setter。
Action包:控制层
在该包下新建一个类TestAction类,该类继承了BaseAction类,也是前端和后台交互的一个桥梁,在该类下,对其进行@Controller和@RequestMapping标注,表名此类的作用和url请求路径。在该类中需要调用服务层中的TestService类,可以通过调用该类中的方法进行实现功能。
service包:即服务层(实现层),在该包中,可以对具体的功能进行编辑实现。在该包下,需要创建两个类,其一是TestService.java类,该类继承了BaseService类;其二是TestServiceImpl.java类,该类继承了BaseServiceImpl类,而且该类是实现类,需要对TestService进行实现,在该类中还需要调用MybatisBaseDaoImpl类,此类中是已经写好了的增删改查方法,我们只需找到需要的方式,然后调用该类中的方法即可。
TestService.java类:
TestServiceImpl.java类:
至此,SpringMVC三个类我们已经创建好了。
二、前后端交互
当类创建好之后,如何使得前后端交互呢?
1、创建一个界面
在src/main/webapp/WEB_INF/views/sys/下创建一个hello.jsp界面,并将字符编码改为utf-8,在该界面中加入
你好

2、TestAction.java类处理

在TestAction.java类中进行响应界面处理,即在类中定义一个list方法,使用@RequestMapping注释并且赋值,然后返回的是sys路径下的hello.jsp界面。
访问http://localhost:8080/platform-v3.0/a/sys/test/list

可以看到,浏览器中可以访问到我们新建的hello.jsp界面,至此,前端和后台的交互完成。
三、增删改查功能的实现
在界面路径下新建一个sql.jsp界面,该界面可以进行增删改查数据的显示,如图所示:

1、数据添加
在界面中添加一个“数据添加”按钮功能,点击该按钮则弹出一个框体,在框体内输入数据进行数据添加。如图:

数据添加窗口
如何实现弹出窗口:
a、在界面路径下新建一个sqlForm.jsp界面,该界面就如上图所示
b、在点击该按钮时,需要触发一个事件(请求url),我们需要在按钮点击后,向后台发送一个url请求,请求的路径如下所示。

c、当前台发起一个url请求后,后台需要进行响应,那就应该在控制层的TestAction.java类中进行响应,需要返回窗体界面,该部分代码如下所示:

d、当进行把数据填写完毕后,如何提交呢?需要用到一个方法即addRow,在该方法中我们定义了提交方式,通过url的请求来进行数据存储。

e、在sqlForm.jsp中,我们定义了一个action,需要进行什么动作(请求的路径),通过请求此url,可以对数据进行添加操作。

图中的id作用是在通过js方式进行调用,来呈现数据正在提交的效果,modelAttribute则在后台进行注释,表示每次操作都要从此实体类中进行数据获取。
@modelAttribute作用如下

f、因为用到了保存数据功能的实现,则需要在service层中进行功能实现。由于TestService.java类继承了BaseService类,该类中有save方法,我们只需在TestServiceImpl.java实现类中进行实现数据存储,通过调用mybatisBaseDaoImpl类中的通过sql语句进行数据添加方法来达到数据增加功能。

g、当实现类中的功能编辑好之后,就可以在控制层中对该方法进行调用,通过前台传过来的url请求,在TestAction.java类中创建新的方法,通过“save”标签来表名访问的是该方法,在该方法中调用已经在实现类中写好的save()方法,实现数据添加功能。

至此,数据添加功能完毕。
2、数据查询
数据查询总的来说有以下的流程:
(1)前台填写需要查找的数据;
(2)通过url请求,并将参数传递到后台;
(3)后台做出响应(通过查询数据库获取数据),将数据返回给前台;
(4)前台接受数据,并进行展示。
a 前台进行参数传递


在文本框内填写要查询的数据,通过点击查询按钮,调用search()方法(该方法在common.js中)通过form表单的id来进行参数传递,通过请求aciton中的路径来达到想后台传递参数的效果。
b 后台如何相应
在实现类中,需要对查询功能进行编辑实现,创建一个getByid()方法,由于查询出来的数据需要进行展示,所以,返回的类型应该是一个列表。

c 在控制层需要对该方法进行调用,需要注意的是,在该方法中还调用了Page方法,该方法有两种作用,其一是将数据翻页展示;其二是通过此方法,达到向前台传递查询结果的作用。

d 前台数据展示
在前台界面创建需要显示的数据属性名称,数据在前台展示的时候,需要注意的是所有的属性名称要和后台传递的参数对应上,否则就会出现数据不能正常展示的情况。

通过page属性来获取后台传递过来的数据进行展示。
3 数据删除
删除数据的大体流程为:前台将需要删除的数据传递到后台,后台接受到数据之后,通过该数据的主键来执行sql语句,进行删除数据。具体流程如下:
前台代码如下:

前台在发起一次url请求的同时,也携带着该数据的主键一起发送到后台,后台接收到该请求后,通过调用TestServiceImpl.java中的delete()方法进行删除,在删除之前需要进行传递过来的参数是否为空,不为空则执行删除,删除成功后,返回一个“成功”的界面。
TestServiceImpl.java中delete方法如下

TestAction.java类中调用delete方法代码如下:
至此,数据删除操作完成。
4 数据修改
数据修改的大体流程为:通过点击修改按钮,则弹出一个窗体,窗体有详细的数据信息,通过已显示的数据在窗体上修改,点击确定,向后台传递参数,后台进行相应的处理,完成数据修改。
修改界面如下图所示:
修改功能需要用到添加功能以及查询功能,通过调用添加功能和查询功能的接口,将两者结合起来,使得窗体显示出已有数据。具体流程如下:
通过请求url并传递给后台一个主键,通过主键来进行查找该数据,并返回给界面。在sqlform中,如何进行数据显示,通过@modelAttribute注释进行类数据获取,与前台界面进行对应,并在前台界面设置相应的属性进行接收参数展示。
编辑完成数据后,点击确定按钮,同样是调用保存数据代码,则可以对数据进行修改完成。