用Ajax 在SpringBoot+Mybits中写注册&登录

最新推荐文章于 2022-02-09 20:22:59 发布

原创最新推荐文章于 2022-02-09 20:22:59 发布 · 1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #JQuery #Springboot #注册 #maven

Java-Springboot 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的用户注册与登录功能实现过程，包括后端MyBatis映射文件的编写、服务层接口定义及实现、控制器层处理逻辑，以及前端页面的交互设计。

项目的文件路径

步骤一：

在UserMapper.java中写入如下代码：

//直接操作数据库中的数据

//查找数据库中是否存在这个用户
   @Select("select * from user where account =#{account}")
   @Results(id="userMapper",value={
	   		@Result(column="uid",property="uid",id=true),
	   		@Result(column="account",property="account"),
	   		@Result(column="password",property="password"),
	   		@Result(column="tel",property="tel"),
	   		@Result(column="username",property="username"),
	   		@Result(column="createtime",property="createtime"),
	   		@Result(column="uimg",property="uimg"),
	   		@Result(column="sex",property="sex"),
	   		@Result(column="email",property="email"),
	   		@Result(column="state",property="state"),
	   		@Result(column="typeid",property="typeid")
  })
   User seleUser(String account);
	
//注册  --- 插入一条用户信息的数据
   @Insert("INSERT INTO `user` (`account`, `password`, `tel`, `username`, `sex`, `email` ) VALUES ( '${account}', '${password}', '${tel}', '${username}', '${sex}', '${email}')")
   int addUser(@Param("account")String account,@Param("password")String password,@Param("tel")String tel,@Param("username")String username,@Param("sex")String sex,@Param("email")String email);

步骤二

在UserService.java中封装方法：

//注册
@Service          //调用注解方式
public class UserService {
   @Autowired    //依赖注入信息 自动扫描相应属性和方法
   private UserMapper userMapper;
   
   //注册 增加一条用户数据  我这里选择插入账号、密码、电话、姓名、性别、邮箱信息
   public int addUser(String account,String password, String tel, String username,String sex, String email) {
	return userMapper.addUser(account, password, tel, username, sex, email);
  }

   //查询用户名是否重复 [在数据库查找所有用户看是否有重复的进行验证]
   public User seleUser(String account) {
	   return userMapper.seleUser(account);
   }
}

步骤三

在UserController层中写相应的代码：（其实以下代码也可以写在service层这里是为了让你更好理解）

//控制器

@Controller
public class UserController {
   @Autowired
   private UserService userService;
   //注册
	@RequestMapping(value="/regist")   //取一个搜索网址的名字
	@ResponseBody   //把返回值变成string类型 进行对ajax传值
	public String regist(
    //得到页面的id属性 并定义相应的变量
		@RequestParam("account")String account,@RequestParam("password")String password,
		@RequestParam("tel")String tel,@RequestParam("username")String username,
		@RequestParam("sex")String sex, @RequestParam("email")String email
	){
		try {
           //得到相应的方法 返回给一个对象 根据账号得到这个对象的数据
			User user = userService.seleUser(account);
			if (account !="" || email != "") { // 进行空验证 在此本人是对账号和邮箱进行空验证
				if (user==null) { 
          //如果用户等于空 证明在数据库没有找到此用户 可以进行如下的注册操作
					userService.addUser(account, password, tel, username, sex, email);
					return "success";
                //返回成功字符串 为了之后在页面可以进行回调
				}else {
					return "error is user exist";
                     //否则返回相应的错误信息 用户已经存在 不能进行注册
				}	
			}else {
				return "error is null"; //返回错误信息 不能输入为空的信息
			}
		} catch (Exception e) {
			return "error is user exit";  //无论try什么错（上面没有判断的除外） 
                                          //都返回catch输出
		}
	}
	
	@RequestMapping("reg")   //返回一个注册的页面
    public String reg () {
    	return "register";
    }
}

步骤四

返回到页面层使用ajax进行传输数据：

<script>
function registss(){
    		$.ajax({
    			type: "post",
    			url: "regist",
    			data: {account:$("#account").val(),
    				   password:$("#password").val(),
    	               tel:$("#phone").val(),
    	               username:$("#username").val(),
    	               sex:$(".with-gap").val(),
    	               email:$("#email").val()
    	               },
    	        success: function(data){
    	        	if(data=="success"){
    	        		window.location.href="log";
    	        	}else{
    	        		$("#error").html(data);
    	        	}
    	        }
    		})
    	}
</script>

<input placeholder="account" id="account" name="account" type="text" class="validate">
                   
<input placeholder="Username" id="username" name="username" type="text" class="validate">
                   
<input placeholder="Password" id="password" name="password" type="password" class="validate">
                  
<input placeholder="Email" id="email" name="email" type="email" class="validate">
                 
<input placeholder="Phone" id="phone" name="phone" type="tel" class="validate">
                
<label class="mr-4">
   <input class="with-gap" name="title" type="radio" value="男"  /><span>Mr.</span>
</label>
 <label class="mr-4">
    <input class="with-gap" name="title" type="radio" value="女" /> <span>Ms.</span>
</label>
          <p id="error" style="color: red;"></p>
         
 <a href="log"><i>已有账号 前去登录 &nbsp;&nbsp;</i></a>
 <button onclick="registss()" class="waves-effect btn-large btn-large-white px-4 tm-border-radius-0" >Sign Up</button>

好了到这里我们的注册就写完了！

现在开始登录的ajax代码--在此还是层层讲解但是跟上面差不多就不详细讲解了：

步骤一：

在UserMapper.java中写入如下代码：

//登录
    @Select("select * from user where account=#{account} and password = #{password} ")
    @ResultMap("userMapper")
    User selectUserLogin(@Param("account")String account,@Param("password")String password);

步骤二

在UserService.java中封装方法：

//登录
   public User selectUserLogin(String account,String password) {
	   return userMapper.selectUserLogin(account, password);
   }

步骤三

在UserController层中写相应的代码：

//登录
	@RequestMapping("log")
    public String log () {
    	return "login";
    }
	
	@RequestMapping(value = "/login")
	@ResponseBody
	public String login(@RequestParam("account")String account,
						@RequestParam("password")String password,
			            HttpSession session) {
			if(account!="" || password!="") {
				User user = userService.selectUserLogin(account, password);
				if (user!=null) {
					
					session.setAttribute("logins", user);
					return "success";
				}else {
					return "error is account or password is mistake";
				}
				
			}else {
				return "error is null";
			}
	}

页面层：

//   JQuery版本的ajax  先引用一下jQuery的文件库

<script type="text/javascript">
       function login(){
    	   $.ajax({
    		   type:"post",  //传输数据的方法
    		   url:"login",  //传输数据的路径
    		   data:{
    			   account:$("#account").val(), //得到页面用户名的id标签值赋值给ajax进行传输数据
    			   password:$("#password").val() //密码
    		   },
    		   success:function(data){  //controller层返回字符类型的值
    			  //注册的方法体
                   if(data=="success"){
    				   window.location.href="index";
    			   }else{
    				   $("#error").html(data);
    			   }
    		   }
    	   })
       }
</script>

//页面上的点击按钮进行调用相应的ajax方法 
  <input placeholder="account" id="account" name="username" type="text" class="validate">
                   
  <input placeholder="Password" id="password" name="password" 
                   
 <button onclick="login()"   class="waves-effect btn-large btn-large-white px-4 black-text rounded-0">Login</button>