思路整理

我们还是以前端页面→Service层→Controllor层→前端页面的思路来整理。

注册和登录区别不大，一样是用表单提交数据，唯一不同的是，注册是直接插入数据库，而登录是与数据库里进行比较。

因此，前端写一个表单用来提交信息，service层写插入的方法，Controllor层实现插入和页面跳转。

代码编写

前端页面

前端页面要写一个表单，然后用表单来传递数据，因此表单填写完后要有一个提交按钮，点击按钮触发事件，使用ajax传递数据。

这段代码里使用了bootstrap制作表格，kindeditor上传图片，sweetalert弹出框和json序列化

Register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>注册页面</title><!-- kindeditor 图片上传-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugin/kindeditor/themes/default/default.css" /><!-- 页面样式 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/registerpage/register.css" /><!-- sweet alert -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugin/sweetalert/css/sweetalert2.min.css" /> <!-- bootstrap -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugin/register/bootstrap.min.css"><!-- jquery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/js/jquery.min.js"></script><!-- kindeditor -->
<script src="${pageContext.request.contextPath}/plugin/kindeditor/kindeditor.js"></script>
<script src="${pageContext.request.contextPath}/plugin/kindeditor/lang/zh_CN.js"></script><!-- json序列化 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/js/jquery.serializejson.min.js"></script><!-- sweetalert -->
<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/sweetalert/js/sweetalert2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/sweetalert/js/es6-promise.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/sweetalert/js/jquery-2.1.1.min.js"></script><!-- bootstrap -->
<script src="${pageContext.request.contextPath}/plugin/register/popper.min.js"></script>
<script src="${pageContext.request.contextPath}/plugin/register/bootstrap.min.js"></script>
</head><body><div class="boxmy"><div class="welcome"><div class="welcometitle"><p>欢 迎 注 册 ！</p></div></div><div class="registerpart"><!-- 表单 --><form id="save_form"><!-- 用户名 --><div class="form-group row"><label for="inputusername" class="col-sm-2 col-form-label">用户名</label><div class="col-sm-10"><input type="text" class="form-control" name="username"id="usernameinput" placeholder="请输入用户名" style="width: 300px"></div></div><!-- 密码 --><div class="form-group row"><label for="inputPassword" class="col-sm-2 col-form-label">密码</label><div class="col-sm-10"><input type="password" class="form-control" name="userpwd"id="userpwdinput" placeholder="请输入密码" style="width: 300px"></div></div><!-- 昵称 --><div class="form-group row"><label for="inputusernickname" class="col-sm-2 col-form-label">昵称</label><div class="col-sm-10"><input type="text" class="form-control" name="usernickname"id="usernicknameinput" placeholder="请输入昵称" style="width: 300px"></div></div><!-- 性别 --><fieldset class="form-group"><div class="row"><legend class="col-form-label col-sm-2 pt-0">性别</legend><div class="col-sm-10"><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="sexradio"id="sexradio1" value="男" checked> <labelclass="form-check-label" for="gridRadios1">男</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="sexradio"id="sexradio2" value="女"> <labelclass="form-check-label" for="gridRadios2">女</label></div></div></div></fieldset><!-- 用户头像 --><div class="form-group row"><label for="inputPassword3" class="col-sm-2 control-label">头像</label><div class="col-sm-10"><input name="userphoto" type="hidden" id="userphoto" value="" /><!-- <img id="myUpdateImage" alt="" src="" width="100" height="100" type="hidden"> --><input type="button" id="myPhotoButton" value="选择头像" /><span id="span1" style="color:red"></span></div></div></form><!-- 注册按钮 --><div class="signinbut"><div class="form-group row"><div class="col-sm-10"><button class="btn btn-success" id="registerbtn">注 册</button></div></div></div></div></div><script type="text/javascript">//注册$(function() {$("#registerbtn").click(function() {var data = $("#save_form").serializeArray();//ajax$.ajax({url : "${pageContext.request.contextPath}/userregister.do",  //url表示请求地址 即与controllor类里相对应的方法data : data,dataType : 'json',type : 'post',success : function(rtn) {swal({text: "注册成功！点击确认跳转到登录页面！",type: "success",confirmButtonText: '确认',confirmButtonColor: '#4cd964'}).then(function (isConfirm) {window.location.href="login.jsp"});}})})})//图片上传 $(function() {KindEditor.ready(function(K) {var editor = K.editor({allowFileManager : true});K('#myPhotoButton').click(function() {editor.loadPlugin('image', function() {editor.plugin.imageDialog({imageUrl : K('#userphoto').val(),//取值clickFn : function(url, title, width,height, border, align) {var startUrl = 'D:/sjsx/upload/image/';var newUrl = url.substr(startUrl.length);K('#userphoto').val(newUrl);//$("#myUpdateImage").attr("src","/imageurl/" + newUrl);editor.hideDialog();//文字添加document.getElementById("span1").innerHTML="图片上传成功";}});});});})})</script></body></html>

后端代码

Service层

service.java

 //添加用户int insert(User user);

只是增加一个insert抽象方法。

serviceimpl.java

 //用户注册@Overridepublic int insert(User user) {// TODO Auto-generated method stubreturn userMapper.insert(user);}

与service.java一样。这里只是实现方法。

Controllor层

 // 添加用户@ResponseBody@RequestMapping("userregister")public Map<String, Object> userregister(User user) {Map<String, Object> rtn;try {userService.insert(user);rtn = ajaxReturn(true, "添加成功");} catch (Exception e) {// TODO: handle exceptionrtn = ajaxReturn(false, "添加失败");}return rtn;}

到此，用户注册成功！

GitHub

https://github.com/cmccq/ssmdemo02

java SSM项目基础(day 5)[实现用户添加功能(注册)]相关推荐

vue+elementui学生宿舍管理系统(报修,来访登记,水电费)java ssm项目介绍
宿舍,是大学生在高校校园里一个重要的学习.生活.交往的空间环境,大学生大约有2/3的时间是在宿舍环境里渡过的.作为计算机应用的一部分,使用计算机对宿舍信息进行管理,具有着手工管理所无法比拟的优点.例如 ...
java ssm项目经验描述_第一个SSM完整项目开发心得
博主因为打算要考研,所以为了给自己留一手后路.学习了SSM框架.这学期就做了一个完整的SSM项目.(如果考研失败就去外包做一波CRUD boy) 所以边考研边利用业余时间做了一学期,接着期末一周的We ...
idea 配置ssm项目后配置文件的简要解析及功能类之间的联系
注:本文不包含怎么配置 idea ssm 项目,仅做个人向配置好之后,对于各个文件的分析及跳转之间的的浅解析(之前照着配的文章找不到了qwq). 叠甲:新手,刚学,不太会,如有错请指出,谢谢! 目录 ...
Flask Web开发基础实战-1.0用户认证与注册模块
目录: 前言: 一,账户密码安全性使用Werkzeug实现密码散列二,创建登录的认证蓝本三,Flask-Login认证用户 1.用于登录的用户数据库模型 2.保护路由 3.添加登录表单 4.登入 ...
【VUE项目实战】56、商品添加功能（六）-提交添加的商品
接上篇<55.商品添加功能(五)-商品内容模块> 上一篇我们完成了商品内容编辑模块的开发,也即是完成了商品所有的信息编辑,本篇我们就来开发提交商品所有信息到后台的功能. 一.要实现的效果 ...
【VUE项目实战】54、商品添加功能（四）-商品图片上传模块
接上篇<53.商品添加功能(三)-商品参数及属性模块> 上一篇我们完成了商品参数和商品属性面板的开发,本篇我们来完成商品图片上传模块的开发. 一.要实现的效果我们在商品图片页签,需要放置 ...
java ssm项目_JAVA项目：逝去的SSM
SSM(Spring+SpringMVC+MyBatis) SSM(Spring+SpringMVC+MyBatis)框架集由Spring.SpringMVC.MyBatis三个开源框架整合而成,常作 ...
Java SSM项目运用策略模式思想
1. 策略模式简介策略模式(Strategy Pattern)中,定义算法族(策略组),分别封装起来,让他们之间可以互相替换,此模式让算法的变更和替换独立于使用算法的客户. 策略模式中体现了如下几种 ...
java ssm项目心得总结_SSM整合，个人总结和step
我最近才整合完SSM. 前段时间,分开学习了这三个框架,都是看某黄埔军校的视频,整合的部分没看视频,想自己做. 但是有一些部分自己没有能完成,主要是如何从spring容器里取出ApplicationC ...

java SSM项目基础(day 5)[实现用户添加功能(注册)]