带头像的注册小项目(上)
其中环境部分和菜单小项目类似,不占用空间进行赘述了
要求:
编写客户端脚本验证,所有内容不能为空
密码和确认密码必须一样
密码必须是6-12位,包含字母数字下划线.
失去焦点后如果正确在输入框后面显示绿色对号
如果错误,在输入框后面显示红色×
1.创建数据库表
create table users(
id int(10) primary key auto_increment,
username varchar(20),
password varchar(20),
photo varchar(50)
);
2.建立项目名为menu
3.导入jar包
4.配置web.xml文件
5.配置src下的全局配置文件spring和springmvc
6.建立登陆注册页面register.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var username = false;
var password = false;
var passwordSure = false;
//用户名的验证
$(":text:eq(0)").blur(function(){
if($(this).val()==""){
$(this).next().css("color","red").html("X");
username = false;
}else{
$(this).next().css("color","green").html("√");
username = true;
}
});
//密码的验证
$(":password:eq(0)").blur(function(){
//在js中要求正则两侧//
if(!$(this).val().match(/^\w{6,12}$/)){
$(this).next().css("color","red").html("X");
password= false;
}else{
$(this).next().css("color","green").html("√");
password = true;
}
});
//确认密码
$(":password:eq(1)").blur(function(){
if($(this).val()==""||$(this).val()!=$(":password:eq(0)").val()){
$(this).next().css("color","red").html("X");
passwordSure = false;
}else{
$(this).next().css("color","green").html("√");
passwordSure = true;
}
});
$(":submit").click(function(){
if(username==false||password==false||passwordSure==false||$(":file").val()==""){
alert("请添加完整信息");
return false;
}
})
});
</script>
</head>
<body>
<form action="register" method="post" enctype="multipart/form-data">
用户名:<input type="text" name="username"/><span></span><br/>
密码:<input type="password" name="password"/><span></span><br/>
确认密码:<input type="password" name="passwordSure"/><span></span><br/>
头像:<input type="file" name="file"/><br/>
<input type="submit" value="注册"/>
</form>
</body>
</html>
7.新建实体类pojo
为了完成对数据库的新增前缀,其中加入get和set方法
public class Users {
private int id;
private String username;
private String password;
private String photo;
}
8.新建mapper层
完成对数据库的新增前缀的接口
public interface UsersMapper {
@Insert("insert into users values (default,#{username},#{password},#{photo})")
int insUsers(Users users);
}
9.新建service接口
public interface UsersService {
int insRegister(Users users);
}
10.新建service接口实现类
@Service
public class UsersServiceImpl implements UsersService{
@Resource
private UsersMapper usersMapper;
@Override
public int insRegister(Users users) {
return usersMapper.insUsers(users);
}
}
11.新建controller类
注:需要导入commons的两个相关包
@Controller
public class UsersController {
@Resource
private UsersService usersServiceImpl;
@RequestMapping("register")
public String register(Users users,MultipartFile file,HttpServletRequest req){
String fileName = UUID.randomUUID().toString()+file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
String path = req.getServletContext().getRealPath("images")+"/"+fileName;
try {
FileUtils.copyInputStreamToFile(file.getInputStream(), new File(path));
} catch (IOException e) {
e.printStackTrace();
}
//只能取到webapps文件夹内容
users.setPhoto(fileName);
int index = usersServiceImpl.insRegister(users);
if(index>0){
req.getSession().setAttribute("user", users);
return "redirect:/show";
}else{
return "redirect:/register.jsp";
}
}
}
在JDK API文档中搜索pattern可以看到相关正则信息