SSM实战之商品信息管理系统《四》

SSM实战之商品信息管理系统《四》

需要源码的留下邮箱或者自己去下一篇博文《五》中下载。

1.前言

本系统属于SSM的常用功能整合使用练习。
涉及到SSM框架整合+前端框Bootstrap+Ajax校验+登录拦截器+图片文件上传+日期类型转换器+json格式传参等常用功能的使用。

上一篇点这里 完成了ssm的分页+登录+数据分页展示和查询显示功能,从login.jsp登录成功跳转到showItems.jsp。

下面开始完善showItems.jsp的商品的增删查改改功能。

2.SSM实战之增删查功能

实际上我们在前一章的分页显示数据的时候已经完成了数据的查询功能。所以现在做修改、删除和增加功能。

1.增加商品功能

运行项目,看到在前面已经写了一个添加商品的按钮。
这里写图片描述
找到对应的按钮的代码区域:
这里写图片描述

可以见到,原先在这里写的是一个button按钮。

现在我们使用bootstrap前端框架的一个东西,叫做模态框(modal)。不知道的小伙伴可以参考:bootstrap之模态框

所以在jsp的页面中引用模态框:

<script type="text/javascript">
/* 按钮触发调用状态框 */
    $("#myModal").modal({
        keyboard : false,//当设置为true时,按下 esc 键时关闭模态框,设置为 false 时则按键无效。
        backdrop : true  //为true时,显示对话框的遮蔽背景,鼠标点击背景即可关闭对话框,为false时,无背景。
    });
</script>

这就是通过添加按钮的时候,出现添加的状态框。
于是在jsp页面最下面增加一个用来显示状态框内容的div。

这里写图片描述

运行的效果如图:
这里写图片描述

好了,现在我们写好了前端的用来添加商品的模态框,也添加了按钮。
并且在模态框中写了form表单提交到:

action=”${pageContext.request.contextPath }/items/addItems.action”

我们把数据定义提交到/items/addItems.action下,所以需要去到controller层下写一个处理方法addItems():
这里写图片描述

完成这一些以后,我们的添加商品功能就可以了。
运行一下效果:
这里写图片描述

这里写图片描述

为什么图片没有出来?
因为这里我们并没有设置上传图片的保存路径。于是tomcat服务器默认将图片存在临时文件夹里面,所以就没有了图片

可以看见,实际上我们的图片是上传了的,只不过存储的地方是默认的tomcat的服务器临时文件夹下。
这里写图片描述
你可以根据路径去看看是不是存在你的tomcat服务器下。

现在修改为本地文件夹>>打开自己的tomcat下的servlet.Xm文件,在最下面添加一句话:
其中docBase就是指定图片上传保存的位置。

<Context crossContext="true" docBase="G:\maven lianxi\Commodity_system\WebRoot\upload" path="/upload" reloadable="true" />

保存退出,然后再次运行项目,就可以看见图片上传到了你指定的那个文件夹里面。

还有一个地方就是原来我们写获取照片的时候,只是暂时写了个#来占位。
这里写图片描述

现在将其修改为:
这里写图片描述

最后运行项目,就可以看见上传的图片了:
这里写图片描述
这样就完成了我们的添加商品功能。


2.删除商品功能:

同样的找到我们删除图片的jsp接口。
这里写图片描述

修改链接的地方:

这里写图片描述

值得注意的是:

一般的这种超链接带参数提交的方式,容易出现一个安全问题=SQL注入漏洞。
关于防范SQL注入漏洞,有兴趣的同学可以参考我的其他博文,这里就不详说了。

添加了jsp页面的跳转链接以后,需要去ItemsController控制层里面写一个del方法来做删除操作:
这里写图片描述
这里调用service下的del方法,通过id执行删除。

运行项目执行删除:
这里写图片描述

3.修改商品功能

在jsp页面中找到预留的修改的a标签处 》》
这里写图片描述

修改为:
这里写图片描述

注意:
修改的原理:做修改,首先应该是通过 id(其他)查询出需要修改的某条数据,然后控制层 return 到updata更新的方式上,再做修改更新的操作。
也就是先查询,再更新。

所以在jsp的链接时需要传递一个id参数,然后去ItemsController控制层里面先写:

a.查询单条数据的方法:
这里写图片描述

b.写修改方法:
这里写图片描述

运行项目修改前:
这里写图片描述
修改后:
这里写图片描述

到这里就把商品管理系统的增删改查都做好了。



顺便解决一下注销:
这里写图片描述

这里写图片描述
修改为:
这里写图片描述

然后去UserController.java下面添加一个注销的方法。
因为一开始我们登录的时候,保存到session中,现在只需要把session注销掉接口。
这里写图片描述

好了,到这里,整个商品管理系统的登录注册,注销,增删改查和分页,日期输出,ajax提交都完成了。
后一篇介绍一下使用前端框架bootstarp来美化界面。
需要源码的留下邮箱或者自己去下一篇博文《五》中下载。


You got a dream, you gotta protect it.
如果你有梦想的话,就要去捍卫它 。 ——《当幸福来敲门》

猜你喜欢

转载自blog.csdn.net/itbiggod/article/details/80069791