大家好，今天给各位分享ssm资讯网站源码分享的一些知识，其中也会对ssm项目免费下载进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
??有用吗？对于学完Spring、SpringMVC、Mybatis还无从下手的同学来说这是一个很好引子。对于正在学习同一个案例的同学，可能解决一些问题。对于需要这个案例的同学可以直接获取。
??有什么？：xml配置文件编写，引入一个简单的前端框架，使用MyBatisGenerator逆向工程生成一些代码，使用框架简单快速搭建一个页面，好用的分页工具PageHelper，简单的前后端分离，发送ajax请求，利用json传递数据，增、删、改、查的简单实现。
??简单吗？内容很简单，涉及Java代码不多，但是对于新手来说，最困难的部分是各种环境搭建、配置文件、版本冲突，如果能够根据错误提示动手解决，那就是一大进步。
??怎么学？如果有时间可以在B站搜索：ssm整合crud，雷丰阳讲的。如果想看到每个功能的实现过程和源码，可以在这里学习，每个步骤都有注释。也可以作为复习快速浏览。
3、新增
前端格式校验、用户名校验、后端校验、JSR303校验，效果如图
1.员工新增模态框
使用弹出模态框作为新增模块，参考Bootstrap代码
在index.jsp添加新增模态框代码
<!–为新增按钮增加模态框，利用按钮绑定单击事件–>\n<!–Modal–>\n<divclass=&34;id=&34;tabindex=&34;role=&34;\naria-labelledby=&34;>\n<divclass=&34;role=&34;>\n<divclass=&34;>\n<divclass=&34;>\n<buttontype=&34;class=&34;data-dismiss=&34;\naria-label=&34;>\n<spanaria-hidden=&34;>×</span>\n</button>\n<h4class=&34;id=&34;>员工添加</h4>\n</div>\n<divclass=&34;>\n<!–添加表单–>\n<formclass=&34;id=&34;>\n<!–姓名–>\n<divclass=&34;>\n<labelfor=&34;class=&34;>EmpName</label>\n<divclass=&34;>\n<inputtype=&34;class=&34;name=&34;id=&34;\nplaceholder=&34;>\n<!–用来显示错误提示–>\n<spanclass=&34;></span>\n</div>\n</div>\n<!–邮箱–>\n<divclass=&34;>\n<labelfor=&34;class=&34;>Email</label>\n<divclass=&34;>\n<inputtype=&34;class=&34;name=&34;id=&34;\nplaceholder=&34;>\n<!–用来显示错误提示–>\n<spanclass=&34;></span>\n</div>\n</div>\n<!–性别–>\n<divclass=&34;>\n<labelclass=&34;>Gender</label>\n<divclass=&34;>\n<!–单选–>\n<labelfor=&34;><inputtype=&34;\nname=&34;id=&34;\nname=&34;value=&34;checked>\n男\n</label>\n<labelfor=&34;><inputtype=&34;\nname=&34;id=&34;\nname=&34;value=&34;>\n女\n</label>\n</div>\n</div>\n<!–部门下拉框–>\n<divclass=&34;>\n<labelclass=&34;>DeptName</label>\n<divclass=&34;>\n<!–部门下拉列表使用ajax查询出来的动态拼接，值为部门id–>\n<selectclass=&34;name=&34;id=&34;></select>\n</div>\n</div>\n\n</form>\n\n</div>\n<divclass=&34;>\n<buttontype=&34;class=&34;data-dismiss=&34;>关闭</button>\n<buttontype=&34;class=&34;id=&34;>保存</button>\n</div>\n</div>\n</div>\n</div>
绑定单击事件
//添加模态栏$(&emp_add_modal_btn&34;34;).modal({\n//模态框参数，点击背景不关闭\nbackdrop:&34;\n});\n});
创建一个查询部门的方法
//新增模态框$(&emp_add_modal_btn&34;34;)[0].reset();\n//清空输入格式、重名校验的css样式\nreset_form(&empAddModalform&34;34;);\n//添加模态框，在模态框中需要所有部门，所以需要查询所有部门信息\n$(&empAddModal&34;static&34;*&34;has-errorhas-success&34;.help-block&34;&34;${PATH}/depts&34;GET&34;/depts&34;depts&34;${PATH}/depts&34;GET&34;<option></option>&34;value&34;34;).click(function(){\n//1、模态框中填写的表单数据提交给服务器进行保存\n//2、发送ajax请求保存员工\n$.ajax({\nurl:&34;,\ntype:&34;,\ndata:$(&empAddModalform&34;34;).serialize());\n//empName=Tom&email=Tom%40123.com&gender=M&dId=1\nsuccess:function(result){\n//1.添加成功，关闭模态框\n$(&empAddModal&34;hide&34;/saveemp&34;34;).blur(function(){\n\n//发送ajax请求，验证用户名是否可用\nvarempName=this.value;\n$.ajax({\nurl:&34;,\ndata:&34;+empName,\ntype:&34;,\nsuccess:function(result){\nconsole.log(result);\n//获取到返回值，Msg中的状态码\nif(result.code==2333){\nshow_validate_msg(&empName_add_input&34;success&34;用户名可用&34;34;).attr(&34;,&34;);\n\n\n}elseif(result.code==5555){\nshow_validate_msg(&empName_add_input&34;error&34;34;).attr(&34;,&34;);\n\n}\n}\n});\n});
邮箱格式独立校验
//2.邮箱独立验证//新增保存信息–独立邮箱格式验证\n$(&email_add_input&34;34;).val();\nvarregEmail=/^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$/;\nif(!regEmail.test(email)){\n//alert(&34;);\nshow_validate_msg(&email_add_input&34;error&34;邮箱格式不正确&34;34;,&34;,&34;);\n}\n//最后方法通过\n//returntrue;\n})
格式+用户名验证+提交保存请求
//3.格式+用户名验证+提交保存请求，一共有两种验证方式1.输入框焦点单独验证2.提交按钮总验证，//为了不两种方式的css样式相互覆盖，每种方式都验两遍，格式在前，用户名在后\n//新增保存信息–请求\n$(&emp_save_btn&34;ajax-vl&34;error&34;ajax-vl&34;error&34;${PATH}/saveemp&34;POST&34;34;).serialize(),\n//.serialize()方法能将表单中数据序列化，直接发送给controll封装成Bean\n//console.log($(&empAddModalform&34;34;).modal(&34;);\n//2.来到最后一页，显示插入的数据，可以直接跳到一个很大的页数，因为\n//合理性，所以不会超出，这里使用全局参数，参数值在上面分页时获取的，数据总条数+1保证不出现极端情况\nto_page(totalRecord+1);\n}\n});\n});
请求按钮JQuery格式总校验方法
//新增保存信息–请求按钮JQuery格式总校验方法functionvalidate_add_form(){\nconsole.log(&34;)\n//1.拿到校验的数据，使用正则表达式\n//根据bootstrap提供的组件\n//校验用户名\nvarempName=$(&empName_add_input&34;用户名可以是2-5位中文或者2-8位英文和数字的组合&34;34;,&34;,&34;);\nreturnfalse;\n}else{\nshow_validate_msg(&empName_add_input&34;success&34;&34;34;).val();\nvarregEmail=/^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$/;\nif(!regEmail.test(email)){\n//alert(&34;);\nshow_validate_msg(&email_add_input&34;error&34;邮箱格式不正确&34;34;,&34;,&34;);\n}\n//最后方法通过\nreturntrue;\n}
添加样式方法
//新增保存信息–添加css样式//show_validate_msg显示校验状态，通过添加样式，ele表示被选择元素，status状态\n//用来判断是用什么样式，绿色、红色，msg提示信息\nfunctionshow_validate_msg(ele,status,msg){\n//判断之前先清空之前样式\n$(ele).parent().removeClass(&34;);\n$(ele).next(&34;).text(&34;);\nif(&34;==status){\n$(ele).parent().addClass(&34;);\n$(ele).next(&34;).text(msg)\n}elseif(&34;==status){\n$(ele).parent().addClass(&34;);\n$(ele).next(&34;).text(msg)\n}\n}
4.ajax用户名校验
如果添加相同的用户名会造成混淆，所以在输入用户名之后立即进行校验
发送ajax请求（与上一节相同）
$(&empName_add_input&34;${PATH}/checkname&34;empName=&34;POST&34;34;,&34;,&34;);\n//因为使用了两种方式验证，格式和重名，会有css样式冲突覆盖，所以再加一次验证\n//自定义属性，或全局变量\n//给添加按钮添加自定义属性，在提交时判断是否通过两项验证。\n$(&emp_save_btn&34;ajax-vl&34;success&34;34;,&34;,result.extend.msg);\n$(&emp_save_btn&34;ajax-vl&34;error&34;/checkname&34;empName&34;(^[a-zA-Z0-9_-]{2,8}$)|(^[\\\\u2E80-\\\\u9FFF]{2,5})&34;msg&34;用户名可以是2-5位中文或者2-8位英文和数字的组合&34;msg&34;用户名已存在&34;(^[a-zA-Z0-9_-]{2,8}$)|(^[\\\\u2E80-\\\\u9FFF]{2,5})&34;用户名可以是2-5位中文或者2-8位英文和数字的组合&34;^([a-z0-9_\\\\.-]+)@([\\\\da-z\\\\.-]+)\\\\.([a-z\\\\.]{2,6})$&34;邮箱格式不正确&34;/saveemp&34;错误的字段名:&34;错误信息:&34;errorFields&34;empName&34;用户名已存在&34;pageInfo&34;34;).click(function(){\n//点击就发送请求，保存使用POST请求\n\n//1.先验证ajax重名校验，防止用户输入重复用户名之后，直接输入正确的邮箱，点击提交，重名的验证提示会被覆盖\nif($(this).attr(&34;)==&34;){\nreturnfalse;\n}\n//2.点击保存按钮请求之前完整验证一遍输入格式\nconsole.log(&34;)\n//方法一：JQuery格式总验证\nif(!validate_add_form()){\nreturnfalse;\n}\n//3.重名验证\nconsole.log(&34;)\n//ajax重名校验\nif($(this).attr(&34;)==&34;){\nreturnfalse;\n}\n//1、模态框中填写的表单数据提交给服务器进行保存\n//2、发送ajax请求保存员工\n$.ajax({\nurl:&34;,\ntype:&34;,\ndata:$(&empAddModalform&34;34;).serialize());\n//empName=Tom&email=Tom%40123.com&gender=M&dId=1\nsuccess:function(result){\n\n//清除模态框和提示信息\n$(&empAddModalform&34;*&34;has-errorhas-success&34;34;).find(&34;).text(&34;);\n\n//在这里判断后端JSR303校验结果，最后一次！！！！！！！！！真的\n//前后端验证可以独立运行，注释前端后端也能实现一样效果\nif(result.code==2333){\n\n//alert(result.msg);\n//1.添加成功，关闭模态框\n$(&empAddModal&34;hide&34;34;,&34;,result.extend.errorFields.empName);\n}\n}else{\nif(undefined!=result.extend.empName){\n//查重错误\nshow_validate_msg(&empName_add_input&34;error&34;34;,&34;,result.extend.errorFields.email);\n}\n}\n}\n}\n});\n});
6.完整代码
模态框
<!–为新增按钮增加模态框，利用按钮绑定单击事件–>\n<!–Modal–>\n<divclass=&34;id=&34;tabindex=&34;role=&34;\naria-labelledby=&34;>\n<divclass=&34;role=&34;>\n<divclass=&34;>\n<divclass=&34;>\n<buttontype=&34;class=&34;data-dismiss=&34;\naria-label=&34;>\n<spanaria-hidden=&34;>×</span>\n</button>\n<h4class=&34;id=&34;>员工添加</h4>\n</div>\n<divclass=&34;>\n<!–添加表单–>\n<formclass=&34;id=&34;>\n<!–姓名–>\n<divclass=&34;>\n<labelfor=&34;class=&34;>EmpName</label>\n<divclass=&34;>\n<inputtype=&34;class=&34;name=&34;id=&34;\nplaceholder=&34;>\n<!–用来显示错误提示–>\n<spanclass=&34;></span>\n</div>\n</div>\n<!–邮箱–>\n<divclass=&34;>\n<labelfor=&34;class=&34;>Email</label>\n<divclass=&34;>\n<inputtype=&34;class=&34;name=&34;id=&34;\nplaceholder=&34;>\n<!–用来显示错误提示–>\n<spanclass=&34;></span>\n</div>\n</div>\n<!–性别–>\n<divclass=&34;>\n<labelclass=&34;>Gender</label>\n<divclass=&34;>\n<!–单选–>\n<labelfor=&34;><inputtype=&34;\nname=&34;id=&34;\nname=&34;value=&34;checked>\n男\n</label>\n<labelfor=&34;><inputtype=&34;\nname=&34;id=&34;\nname=&34;value=&34;>\n女\n</label>\n</div>\n</div>\n<!–部门下拉框–>\n<divclass=&34;>\n<labelclass=&34;>DeptName</label>\n<divclass=&34;>\n<!–部门下拉列表使用ajax查询出来的动态拼接，值为部门id–>\n<selectclass=&34;name=&34;id=&34;></select>\n</div>\n</div>\n\n</form>\n\n</div>\n<divclass=&34;>\n<buttontype=&34;class=&34;data-dismiss=&34;>关闭</button>\n<buttontype=&34;class=&34;id=&34;>保存</button>\n</div>\n</div>\n</div>\n</div>
请求和方法
<scripttype=&34;>\n//——————增删改查都使用REST风格——————-\n\n//1.（内部Java格式验证）+ajax用户名验证\n//新增保存信息–ajax用户名校验\n//由于在java内又做了一次格式验证，所以这个方法相当于即验证了格式，又验证了重名\n$(&empName_add_input&34;${PATH}/checkname&34;empName=&34;POST&34;34;,&34;,&34;);\n//因为使用了两种方式验证，格式和重名，会有css样式冲突覆盖，所以再加一次验证\n//自定义属性，或全局变量\n//给添加按钮添加自定义属性，在提交时判断是否通过两项验证。\n$(&emp_save_btn&34;ajax-vl&34;success&34;34;,&34;,result.extend.msg);\n$(&emp_save_btn&34;ajax-vl&34;error&34;34;).blur(function(){\nvaremail=$(&email_add_input&34;邮箱格式不正确&34;34;,&34;,&34;);\n//returnfalse;\n}else{\nshow_validate_msg(&email_add_input&34;success&34;&34;34;).click(function(){\n//点击就发送请求，保存使用POST请求\n\n//1.先验证ajax重名校验，防止用户输入重复用户名之后，直接输入正确的邮箱，点击提交，重名的验证提示会被覆盖\nif($(this).attr(&34;)==&34;){\nreturnfalse;\n}\n//2.点击保存按钮请求之前完整验证一遍输入格式\nconsole.log(&34;)\n//方法一：JQuery格式总验证\nif(!validate_add_form()){\nreturnfalse;\n}\n//3.重名验证\nconsole.log(&34;)\n//ajax重名校验\nif($(this).attr(&34;)==&34;){\nreturnfalse;\n}\n//1、模态框中填写的表单数据提交给服务器进行保存\n//2、发送ajax请求保存员工\n$.ajax({\nurl:&34;,\ntype:&34;,\ndata:$(&empAddModalform&34;34;).serialize());\n//empName=Tom&email=Tom%40123.com&gender=M&dId=1\nsuccess:function(result){\n\n//清除模态框和提示信息\n$(&empAddModalform&34;*&34;has-errorhas-success&34;34;).find(&34;).text(&34;);\n\n//在这里判断后端JSR303校验结果，最后一次！！！！！！！！！真的\n//前后端验证可以独立运行，注释前端后端也能实现一样效果\nif(result.code==2333){\n\n//alert(result.msg);\n//1.添加成功，关闭模态框\n$(&empAddModal&34;hide&34;34;,&34;,result.extend.errorFields.empName);\n}\n}else{\nif(undefined!=result.extend.empName){\n//查重错误\nshow_validate_msg(&empName_add_input&34;error&34;34;,&34;,result.extend.errorFields.email);\n}\n}\n}\n}\n});\n});\n\n//新增保存信息–请求按钮JQuery格式总校验方法\nfunctionvalidate_add_form(){\nconsole.log(&34;)\n//1.拿到校验的数据，使用正则表达式\n//根据bootstrap提供的组件\n//校验用户名\nvarempName=$(&empName_add_input&34;用户名可以是2-5位中文或者2-8位英文和数字的组合&34;34;,&34;,&34;);\nreturnfalse;\n}else{\nshow_validate_msg(&empName_add_input&34;success&34;&34;34;).val();\nvarregEmail=/^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$/;\nif(!regEmail.test(email)){\n//alert(&34;);\nshow_validate_msg(&email_add_input&34;error&34;邮箱格式不正确&34;34;,&34;,&34;);\n}\n//最后方法通过\nreturntrue;\n}\n\n//新增保存信息–添加css样式\n//show_validate_msg显示校验状态，通过添加样式，ele表示被选择元素，status状态\n//用来判断是用什么样式，绿色、红色，msg提示信息\nfunctionshow_validate_msg(ele,status,msg){\n//判断之前先清空之前样式\n$(ele).parent().removeClass(&34;);\n$(ele).next(&34;).text(&34;);\nif(&34;==status){\n$(ele).parent().addClass(&34;);\n$(ele).next(&34;).text(msg)\n}elseif(&34;==status){\n$(ele).parent().addClass(&34;);\n$(ele).next(&34;).text(msg)\n}\n}\n</script>
__EOF__
本文作者：蔚然丶丶
本文链接：https://www.cnblogs.com/wei-ran/p/16131419.html
关于ssm资讯网站源码分享到此分享完毕，希望能帮助到您。