ssm登录注册增删改查

小咪咪 2022-02-23 01:44 351阅读 0赞
  1. 此项目原本是两个不同的项目,博主从网上找的,都是基于ide开发的项目,然当我导入ideeclipse却运行不了,没办法只能博主自己重新构建项目,参考这两个不同的项目,修改了一部分的代码,最后把这两个项目合并为一个简单的ssm登录注册与增删改项目,。希望能帮助到你,加油,倔强与坚持,从放弃到开始!!!!!!

项目环境介绍:eclipse jdk7 maven .建议与博主的环境一样,要不可能会有不兼容,需要你自己去调整。

这边代码还是非常多,博主就不贴代码了。数据库也在项目中博主有上传,这边把代码上传到csdn中,

欢迎下载参考:下载之后修改你自己的环境,如果,你能看到博主下面提供的界面,说明你成功了!博主亲测可用。

下载地址:https://download.csdn.net/download/qq_30764991/11091023

项目页面可能并不美观,没办法。将就着用,以后再慢慢优化改善。

这边把项目运行后的界面提供参考,如果赶兴趣,可以下载:

项目结构表:相信这样博主介绍的很清楚了吧,喜欢记得留言支持。您的鼓励,是我最大的动力,谢谢!!!

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70

一:用户注册页面:页面做了相应的ajax校验,做的还是不错的。然后又再后台做了相应的校验。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70 1

二:登录功能:

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70 2

三:主页面如下图:

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70 3

代码一点:这边粘贴一点jsp前端页面代码:index.jsp代码如下:

  1. <%@ page language="java" contentType="text/html; charset=utf-8"
  2. pageEncoding="utf-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <%
  7. String path = request.getContextPath();
  8. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  9. %>
  10. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  11. <title>Insert title here</title>
  12. <%--<script type="javascript" src="<%=basePath%>js/jquery-3.2.1.js"></script>--%>
  13. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  14. <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
  15. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  16. <%--<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>--%>
  17. <style type="text/css">
  18. .modal{top:30%;}
  19. </style>
  20. <script type="text/javascript">
  21. $(function(){
  22. $("#body").css("background-image","url("+"<%=basePath%>"+"/images/9.jpg)");
  23. //$("#body").css("background-repeat","no-repeat");
  24. // background-repeat:no-repeat
  25. totaladd(); //定时时触发的函数
  26. setInterval(totaladd,3000);//设置定时1000=1秒
  27. //登陆模态框的触发
  28. $('#loginButton').click(function(){
  29. $('#userName').val('');
  30. $('#password').val('');
  31. $('#checkCode').val('');
  32. $('#message').css("display","none");
  33. $('#message').html("");
  34. getCheckCode();
  35. })
  36. //注册模态框的触发
  37. $('#registerButton').click(function(){
  38. $('#register_userName').val('');
  39. $('#register_password').val('');
  40. $('#register_checkCode').val('');
  41. $('#register_message').css("display","none");
  42. $('#register_message').html("");
  43. getCheckCode_register();
  44. })
  45. //密码样式修改 待做
  46. $('#show_login').click(function(){
  47. $('#password').removeAttr('type');
  48. $('#password').attr("type","text");
  49. $('#show_login').css('display','none');
  50. $('#hide_login').css('display','block');
  51. })
  52. $('#hide_login').click(function(){
  53. $('#password').removeAttr('type');
  54. $('#password').attr("type","password");
  55. $('#hide_login').css('display','none');
  56. $('#show_login').css('display','block');
  57. })
  58. })
  59. function totaladd(){
  60. var num = Math.floor(Math.random()*8);
  61. var moveheight = num *1080;
  62. var str = "0px "+moveheight+"px"
  63. $("#body").css("background-position",str);
  64. }
  65. </script>
  66. <script type="text/javascript">
  67. //用于刷新验证码
  68. function getCheckCode() {
  69. document.getElementById("checkCodeImage").src = document.getElementById("checkCodeImage").src + "?nocache=" + new Date().getTime();
  70. }
  71. //注册模态框刷新验证码 document.getElementById("register_checkCodeImage").src = document.getElementById("register_checkCodeImage").src + "?nocache=" + new Date().getTime();
  72. function getCheckCode_register() {
  73. document.getElementById("register_checkCodeImage").src = document.getElementById("register_checkCodeImage").src + "?nocache=" + new Date().getTime();
  74. }
  75. //模态框页面 点击登录 校验验证码
  76. function check() {
  77. var userName = $('#userName').val();
  78. var password = $('#password').val();
  79. var vcode = $('#checkCode').val();
  80. if(userName==""){
  81. getCheckCode();
  82. $('#message').css("display","block");
  83. $('#message').html("用户名不能为空");
  84. return;
  85. }
  86. if(password==""){
  87. console.log('检验')
  88. getCheckCode();
  89. $('#message').css("display","block");
  90. $('#message').html("密码不能为空");
  91. return;
  92. }
  93. if(vcode==""){
  94. getCheckCode();
  95. $('#message').css("display","block");
  96. $('#message').html("验证码不能为空");
  97. return;
  98. }
  99. $.ajax({
  100. url: "<%=basePath%>loginController/checkCode",
  101. type: 'GET',
  102. data: {
  103. signcode: vcode,
  104. },
  105. dataType:"json",
  106. xhrFields: {
  107. withCredentials: true
  108. },
  109. success: function (data) {
  110. console.log("校验验证码返回值为data=="+data)
  111. if("1"==data){
  112. getCheckCode();
  113. $('#message').css("display","block");
  114. $('#message').html("验证码不能为空");
  115. return;
  116. }
  117. if("2"==data){
  118. getCheckCode();
  119. $('#message').css("display","block");
  120. $('#message').html("操作异常,请重新登录");
  121. return;
  122. }
  123. if("4"==data){
  124. getCheckCode();
  125. $('#message').css("display","block");
  126. $('#message').html("验证码不正确");
  127. return;
  128. }
  129. if("3"==data){
  130. $('#message').css("display","none");
  131. $('#message').html("");
  132. login(userName,password);
  133. }
  134. }
  135. })
  136. }
  137. //模态框页面 点击注册 校验验证码
  138. function register_check() {
  139. //register_button
  140. $('#register_button').attr('disabled','disabled');
  141. var userName = $('#register_userName').val();
  142. var password = $('#register_password').val();
  143. var secondPassword = $('#register_second_password').val();
  144. var vcode = $('#register_checkCode').val();
  145. if(userName==""){
  146. getCheckCode_register();
  147. $('#register_message').css("display","block");
  148. $('#register_message').html("用户名不能为空,请输入用户名");
  149. return;
  150. }
  151. if(password==""){
  152. console.log('检验')
  153. getCheckCode_register();
  154. $('#register_message').css("display","block");
  155. $('#register_message').html("密码不能为空");
  156. return;
  157. }
  158. if(secondPassword==""){
  159. console.log('检验')
  160. getCheckCode_register();
  161. $('#register_message').css("display","block");
  162. $('#register_message').html("请再次输入密码");
  163. return;
  164. }
  165. if(vcode==""){
  166. getCheckCode_register();
  167. $('#register_message').css("display","block");
  168. $('#register_message').html("验证码不能为空");
  169. return;
  170. }
  171. if(password!=secondPassword){
  172. console.log('检验')
  173. getCheckCode_register();
  174. $('#register_message').css("display","block");
  175. $('#register_message').html("密码不一致,请重新输入");
  176. return;
  177. }
  178. $.ajax({
  179. url: "<%=basePath%>loginController/checkCode",
  180. type: 'GET',
  181. data: {
  182. signcode: vcode,
  183. },
  184. dataType:"json",
  185. xhrFields: {
  186. withCredentials: true
  187. },
  188. success: function (data) {
  189. console.log("校验验证码返回值为data=="+data)
  190. if("1"==data){
  191. getCheckCode_register();
  192. $('#register_message').css("display","block");
  193. $('#register_message').html("验证码不能为空");
  194. $('#register_button').removeAttr('disabled');
  195. return;
  196. }
  197. if("2"==data){
  198. getCheckCode_register();
  199. $('#register_message').css("display","block");
  200. $('#register_message').html("操作异常,请重新登录");
  201. $('#register_button').removeAttr('disabled');
  202. return;
  203. }
  204. if("4"==data){
  205. getCheckCode_register();
  206. $('#register_message').css("display","block");
  207. $('#register_message').html("验证码不正确");
  208. $('#register_button').removeAttr('disabled');
  209. return;
  210. }
  211. if("3"==data){
  212. $('#register_message').css("display","none");
  213. $('#register_message').html("");
  214. $('#register_button').removeAttr('disabled');
  215. register(userName,password,secondPassword);
  216. }
  217. }
  218. })
  219. }
  220. /**登录校验用户名和密码*/
  221. function login(userName,password){
  222. $.post("<%=basePath%>loginController/login",
  223. {
  224. userName: userName,
  225. password:password,
  226. },
  227. function(data){
  228. if(data.code=="1"){
  229. console.log("用户名为空")
  230. getCheckCode();
  231. $('#message').css("display","block");
  232. $('#message').html("用户名为空");
  233. }
  234. if(data.code=="2"){
  235. console.log("密码为空")
  236. getCheckCode();
  237. $('#message').css("display","block");
  238. $('#message').html("密码为空");
  239. }
  240. if(data.code=="3"){
  241. console.log("用户名不存在")
  242. getCheckCode();
  243. $('#message').css("display","block");
  244. $('#message').html("用户名不存在");
  245. }
  246. if(data.code=="4"){
  247. console.log("用户名和密码不正确")
  248. getCheckCode();
  249. $('#message').css("display","block");
  250. $('#message').html("用户名和密码不正确");
  251. }
  252. if(data.code=="6"){
  253. console.log("业务异常")
  254. getCheckCode();
  255. $('#message').css("display","block");
  256. $('#message').html("业务异常");
  257. }
  258. if(data.code=="5"){
  259. console.log("登录成功")
  260. window.location.href="<%=basePath%>loginController/tiao";
  261. }
  262. })
  263. }
  264. /**注册校验用户名和密码*/
  265. function register(userName,password,secondPassword){
  266. $.post("<%=basePath%>registerController/register",
  267. {
  268. userName: userName,
  269. password:password,
  270. secondPassword:secondPassword
  271. },
  272. function(data){
  273. if(data.code=="1"){
  274. console.log("用户名不能为空")
  275. getCheckCode_register();
  276. $('#register_message').css("display","block");
  277. $('#register_message').html("用户名不能为空");
  278. }
  279. if(data.code=="2"){
  280. console.log("密码不能为空")
  281. getCheckCode_register();
  282. $('#register_message').css("display","block");
  283. $('#register_message').html("密码不能为空");
  284. }
  285. if(data.code=="7"){
  286. console.log("二次输入密码为空")
  287. getCheckCode_register();
  288. $('#register_message').css("display","block");
  289. $('#register_message').html("二次输入密码为空");
  290. }
  291. if(data.code=="8"){
  292. console.log("二次输入密码为空")
  293. getCheckCode_register();
  294. $('#register_message').css("display","block");
  295. $('#register_message').html("两次输入密码不同,请重新输入");
  296. }
  297. if(data.code=="3"){
  298. console.log("该账户已注册")
  299. getCheckCode_register();
  300. $('#register_message').css("display","block");
  301. $('#register_message').html("该账户已注册");
  302. }
  303. if(data.code=="6" || data.code=="5"){
  304. console.log("业务异常")
  305. getCheckCode_register();
  306. $('#register_message').css("display","block");
  307. $('#register_message').html("业务异常");
  308. }
  309. if(data.code=="4"){
  310. console.log("注册成功")
  311. // window.location.href="<%=basePath%>registerController/";
  312. $("#myModalRegister").modal('hide');
  313. $('#register_password').val('');
  314. $("#myModal").modal('show'); //手动开启
  315. $("#userName").val('');
  316. $("#checkCode").val('');
  317. $('#register_second_password').val('');
  318. }
  319. })
  320. }
  321. </script>
  322. </head>
  323. <body id="body">
  324. <div class="container">
  325. <div id="userButton" style="width: 200px;height: 50px;width: 15%;float: left">
  326. <span id="loginButton" data-toggle="modal" data-target="#myModal" class="btn btn-default btn-lg glyphicon glyphicon-log-in"> 用户登录</span>
  327. </div>
  328. <div id="registerUserButton" style="width: 200px;height: 50px;width: 15%;float: left;">
  329. <span id="registerButton" data-toggle="modal" data-target="#myModalRegister" class="btn btn-default btn-lg glyphicon glyphicon-user"> 用户注册</span>
  330. </div>
  331. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  332. <div class="modal-dialog">
  333. <div class="modal-content">
  334. <div class="modal-header">
  335. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  336. ×
  337. </button>
  338. <h4 class="modal-title" id="myModalLabel">
  339. 登录
  340. </h4>
  341. </div>
  342. <div class="modal-body">
  343. <div id="logon" style="display: block">
  344. <div class="input-group" style="padding-bottom: 10px">
  345. <span class="input-group-addon" >用户名</span>
  346. <input id="userName" type="text" class="form-control" placeholder="请输入用户名" aria-describedby="basic-addon1">
  347. </div>
  348. <div class="input-group" style="padding-bottom: 10px">
  349. <span class="input-group-addon">密 码</span>
  350. <input id="password" type="password" class="form-control" placeholder="请输入密码" aria-describedby="basic-addon1" style="display:block;z-index:9;float: left" >
  351. <span id="show_login" class="glyphicon glyphicon-eye-close" style="display:block;z-index:10;float: left;margin-left: -5%;margin-top: 2%"></span>
  352. <span id="hide_login" class="glyphicon glyphicon-eye-open" style="display:none;z-index:10;float: left;margin-left: -5%;margin-top: 2%"></span>
  353. </div>
  354. <div class="input-group" style="padding-bottom: 10px">
  355. <span class="input-group-addon" >验证码</span>
  356. <%--nocache=" + new Date().getTime()--%>
  357. <input id="checkCode" type="text" class="form-control " placeholder="请输入图形验证码" aria-describedby="basic-addon1" style="width:50%">
  358. <img id="checkCodeImage" src="<%=basePath%>loginController/getCheckCode" alt="图片加载失败" onclick="getCheckCode()" style="width: 100px;height: 30px;margin-left: 5%" >
  359. </div>
  360. <div class="input-group" >
  361. <span id="message" class="bg-info" style="display: none" aria-describedby="basic-addon1" ></span>
  362. </div>
  363. </div>
  364. </div>
  365. <div class="modal-footer">
  366. <button type="button" class="btn btn-default" data-dismiss="modal">关闭
  367. </button>
  368. <button onclick="check()" type="button" class="btn btn-primary">
  369. 登录
  370. </button>
  371. </div>
  372. </div><!-- /.modal-content -->
  373. </div><!-- /.modal -->
  374. </div>
  375. <div class="modal fade" id="myModalRegister" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  376. <div class="modal-dialog">
  377. <div class="modal-content">
  378. <div class="modal-header">
  379. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  380. ×
  381. </button>
  382. <h4 class="modal-title" id="registerAccount">
  383. 注册
  384. </h4>
  385. </div>
  386. <div class="modal-body">
  387. <div id="register" style="display: block">
  388. <div class="input-group" style="padding-bottom: 10px">
  389. <span class="input-group-addon" >用户名</span>
  390. <input id="register_userName" type="text" class="form-control" placeholder="请输入用户名" aria-describedby="basic-addon1">
  391. </div>
  392. <div class="input-group" style="padding-bottom: 10px">
  393. <span class="input-group-addon">密 码</span>
  394. <input id="register_password" type="password" class="form-control" placeholder="请输入密码" aria-describedby="basic-addon1">
  395. </div>
  396. <div class="input-group" style="padding-bottom: 10px">
  397. <span class="input-group-addon">密 码</span>
  398. <input id="register_second_password" type="password" class="form-control" placeholder="请输入密码" aria-describedby="basic-addon1">
  399. </div>
  400. <div class="input-group" style="padding-bottom: 10px">
  401. <span class="input-group-addon" >验证码</span>
  402. <input id="register_checkCode" type="text" class="form-control " placeholder="请输入图形验证码" aria-describedby="basic-addon1" style="width:50%">
  403. <img id="register_checkCodeImage" src="<%=basePath%>loginController/getCheckCode" alt="图片加载失败" onclick="getCheckCode_register()" style="width: 100px;height: 30px;margin-left: 5%" >
  404. </div>
  405. <div class="input-group" >
  406. <span id="register_message" class="bg-info" style="display: none" aria-describedby="basic-addon1" ></span>
  407. </div>
  408. </div>
  409. </div>
  410. <div class="modal-footer">
  411. <button type="button" class="btn btn-default" data-dismiss="modal">关闭
  412. </button>
  413. <button id="register_button" onclick="register_check()" type="button" class="btn btn-primary">
  414. 注册
  415. </button>
  416. </div>
  417. </div><!-- /.modal-content -->
  418. </div><!-- /.modal -->
  419. </div>
  420. </div>
  421. </body>
  422. </html>

验证码代码如下:

  1. package cn.com.utils;
  2. import java.awt.*;
  3. import java.awt.image.BufferedImage;
  4. import java.util.Random;
  5. public class CheckCodeUtils {
  6. /**验证码图片的长和宽*/
  7. private int weight = 70;
  8. private int height = 30;
  9. /**用来保存验证码的文本内容*/
  10. private String text;
  11. private Random r = new Random(); //获取随机数对象
  12. private String[] fontNames = {"宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312"}; //字体数组
  13. private String codes = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ"; //验证码数组
  14. /**
  15. * 获取随机的颜色
  16. */
  17. private Color randomColor() {
  18. //这里为什么是150,因为当r,g,b都为255时,即为白色,为了好辨认,需要颜色深一点。
  19. int r = this.r.nextInt(150);
  20. int g = this.r.nextInt(150);
  21. int b = this.r.nextInt(150);
  22. //返回一个随机颜色
  23. return new Color(r, g, b);
  24. }
  25. /**
  26. * 获取随机字体
  27. */
  28. private Font randomFont() {
  29. //获取随机的字体
  30. int index = r.nextInt(fontNames.length);
  31. String fontName = fontNames[index];
  32. //随机获取字体的样式,0是无样式,1是加粗,2是斜体,3是加粗加斜体
  33. int style = r.nextInt(4);
  34. //随机获取字体的大小
  35. int size = r.nextInt(5) + 24;
  36. //返回一个随机的字体
  37. return new Font(fontName, style, size);
  38. }
  39. /**
  40. * 获取随机字符
  41. */
  42. private char randomChar() {
  43. int index = r.nextInt(codes.length());
  44. return codes.charAt(index);
  45. }
  46. /**
  47. * 画干扰线,验证码干扰线用来防止计算机解析图片
  48. */
  49. private void drawLine(BufferedImage image) {
  50. int num = 155;
  51. //定义干扰线的数量
  52. Graphics2D g = (Graphics2D) image.getGraphics();
  53. for (int i = 0; i < num; i++) {
  54. int x = r.nextInt(weight);
  55. int y = r.nextInt(height);
  56. int xl = r.nextInt(weight);
  57. int yl = r.nextInt(height);
  58. g.setColor(getRandColor(160, 200));
  59. g.drawLine(x, y, x + xl, y + yl);
  60. }
  61. }
  62. /**
  63. * 创建图片的方法
  64. */
  65. private BufferedImage createImage() {
  66. //创建图片缓冲区
  67. BufferedImage image = new BufferedImage(weight, height, BufferedImage.TYPE_INT_RGB);
  68. //获取画笔
  69. Graphics2D g = (Graphics2D) image.getGraphics();
  70. // 设定图像背景色(因为是做背景,所以偏淡)
  71. g.setColor(getRandColor(200, 250));
  72. g.fillRect(0, 0, weight, height);
  73. //返回一个图片
  74. return image;
  75. }
  76. /**
  77. * 获取验证码图片的方法
  78. */
  79. public BufferedImage getImage() {
  80. BufferedImage image = createImage();
  81. //获取画笔
  82. Graphics2D g = (Graphics2D) image.getGraphics();
  83. StringBuilder sb = new StringBuilder();
  84. drawLine(image);
  85. //画四个字符即可
  86. for (int i = 0; i < 4; i++) {
  87. //随机生成字符,因为只有画字符串的方法,没有画字符的方法,所以需要将字符变成字符串再画
  88. String s = randomChar() + "";
  89. //添加到StringBuilder里面
  90. sb.append(s);
  91. //定义字符的x坐标
  92. float x = i * 1.0F * weight / 4;
  93. //设置字体,随机
  94. g.setFont(randomFont());
  95. //设置颜色,随机
  96. g.setColor(randomColor());
  97. g.drawString(s, x, height - 5);
  98. }
  99. this.text = sb.toString();
  100. return image;
  101. }
  102. /**
  103. * 给定范围获得随机颜色
  104. */
  105. Color getRandColor(int fc, int bc) {
  106. Random random = new Random();
  107. if (fc > 255) {
  108. fc = 255;
  109. }
  110. if (bc > 255) {
  111. bc = 255;
  112. }
  113. int r = fc + random.nextInt(bc - fc);
  114. int g = fc + random.nextInt(bc - fc);
  115. int b = fc + random.nextInt(bc - fc);
  116. return new Color(r, g, b);
  117. }
  118. /**
  119. * 获取验证码文本的方法
  120. */
  121. public String getText() {
  122. return text;
  123. }
  124. }

发表评论

表情:
评论列表 (有 0 条评论,351人围观)

还没有评论,来说两句吧...

相关阅读

    相关 ssm整合增删

    总体的ssm整合增删改查的思想: > 1、一般我们做增删改查的项目的时候,我们可以先从数据层开始写,在数据层把增删改查的功能方法写好,然后再写业务逻辑层的逻辑,业务逻辑层接口

    相关 ssm登录注册增删

    >     此项目原本是两个不同的项目,博主从网上找的,都是基于ide开发的项目,然当我导入ide与eclipse却运行不了,没办法只能博主自己重新构建项目,参考这两个不同的项

    相关 ssm分页增删

    ssm分页增删改查,博主技术有限,暂时就这样啦.... > 如果觉得文章不错,对你有帮助,请作者喝杯咖啡,谢谢!如果对您有帮助 ,请多多支持.多少都是您的心意与支持,一分也