项目的文件路径
- 步骤一:
在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>已有账号 前去登录 </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>