既然是用户添加，我们不妨写个注册用户。
目录
思路整理
我们还是以 前端页面→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> <label
class="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="女"> <label
class="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
//用户注册
@Override
public int insert(User user) {
// TODO Auto-generated method stub
return 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 exception
rtn = ajaxReturn(false, "添加失败");
}
return rtn;
}
到此，用户注册成功！
176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
