MVC——13 带头像的注册小项目(上)

最新推荐文章于 2024-04-07 15:13:01 发布

Re_view

最新推荐文章于 2024-04-07 15:13:01 发布

阅读量203

点赞数

分类专栏： SpringMVC 文章标签：带头像的注册小项目(上)

本文链接：https://blog.csdn.net/Re_view/article/details/100622064

版权

SpringMVC 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

带头像的注册小项目(上)

其中环境部分和菜单小项目类似，不占用空间进行赘述了
要求：
编写客户端脚本验证,所有内容不能为空
密码和确认密码必须一样
密码必须是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可以看到相关正则信息

Re_view

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
MVC——13 带头像的注册小项目(上)

带头像的注册小项目(上)其中环境部分和菜单小项目类似，不占用空间进行赘述了要求：编写客户端脚本验证,所有内容不能为空密码和确认密码必须一样密码必须是6-12位,包含字母数字下划线.失去焦点后如果正确在输入框后面显示绿色对号如果错误,在输入框后面显示红色×1.创建数据库表create table users(id int(10) primary key auto_incremen...
复制链接

扫一扫

专栏目录