创建java后端数据库
创建数据库,并命名为travel
CREATE DATABASE travel
此处我以sqlyog来进行创建,如下
使用数据库
USE travel;
在travel创建本次项目所要使用到的表
我在项目中的travel.sql已提供建表语句,将其内容复制到sqlyog中执行即可
执行后,若0 Error就说明建表成功
如下是travel中的表
java后端完成注册功能的编写
以下是实现注册功能,要完成的所有细节流程,如果你看不懂,没关系,可以先对这张图有个印象,后续写的代码,都会以此图为导向
现在我开始打开idea,准备开始编写代码
打开idea后,运行昨天写的项目时,发现报了如下错误
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default-compile) on project travel: Error while storing the mojo status: E:\MyProject\Mytravel\travel\target\maven-status\maven-compiler-plugin\compile\default-compile\inputFiles.lst (拒绝访问。) -> [Help 1]
昨天能运行成功,但今天却运行不了,还真是奇怪,该错误说的是target目录中的一个文件被拒绝访问了,traget目录中的文件是maven在编译项目时自动生成的,那我可以将它删除,然后重新运行。
OK,问题已解决。
现在我就开始准备写注册的功能代码了
当我点击注册时,应该对输入的内容进行校验,具体要校验的内容如下
表单校验:
1.用户名:单词字符,长度8到20位
2.密码:单词字符,长度8到20位
3.email:邮件格式
4.姓名:非空
5.手机号:手机号格式
6.出生日期:非空
7.验证码:非空
在本次项目中,我只校验用户名,密码,email,剩下的你可以自己补齐。
在注册页面加载完毕后,监听form表单的submit
$(function () {
//当表单提交时,调用所有的校验方法
$("#registerForm").submit(function(){
//1.发送数据到服务器
if(checkUsername() && checkPassword() && checkEmail()){
//校验通过,发送ajax请求,提交表单的数据 username=zhangsan&password=123
}
//2.不让页面跳转
return false;
//如果这个方法没有返回值,或者返回为true,则表单提交,如果返回为false,则表单不提交
});
});
checkUsername()的实现
//单词字符,长度8到20位
function checkUsername() {
//1.获取用户名值
var username = $("#username").val();
//2.定义正则
var reg_username = /^\w{8,20}$/;
//3.判断,给出提示信息
var flag = reg_username.test(username);
if(flag){
//用户名合法
$("#username").css("border","");
}else{
//用户名非法,加一个红色边框
$("#username").css("border","1px solid red");
}
return flag;
}
checkPassword的实现
//校验密码
function checkPassword() {
//1.获取密码值
var password = $("#password").val();
//2.定义正则
var reg_password = /^\w{8,20}$/;
//3.判断,给出提示信息
var flag = reg_password.test(password);
if(flag){
//密码合法
$("#password").css("border","");
}else{
//密码非法,加一个红色边框
$("#password").css("border","1px solid red");
}
return flag;
}
checkEmail的实现
//校验邮箱
function checkEmail(){
//1.获取邮箱
var email = $("#email").val();
//2.定义正则 itcast@163.com
var reg_email = /^\w+@\w+\.\w+$/;
//3.判断
var flag = reg_email.test(email);
if(flag){
$("#email").css("border","");
}else{
$("#email").css("border","1px solid red");
}
return flag;
}
当输入框失去焦点时,此时也应该再次去校验输入框的内容是否正确
//当某一个组件失去焦点是,调用对应的校验方法
$("#username").blur(checkUsername);
$("#password").blur(checkPassword);
$("#email").blur(checkEmail);
如何获取表单中填写的数据
通过调用form对象的serialize(),可获取表单中所有填写的数据,获取到的数据格式如下
username=zhangsan&password=123
将表单中填写的数据发送到服务器上
此处采用ajax将数据发送到服务器上
$.post("registUserServlet",$(this).serialize(),function(data){
//处理服务器响应的数据 data {flag:true,errorMsg:"注册失败"}
if(data.flag){
//注册成功,跳转成功页面
location.href="register_ok.html";
}else{
//注册失败,给errorMsg添加提示信息
$("#errorMsg").html(data.errorMsg);
}
});