Java：项目开发系列——第二章 用户注册功能

项目开发系列——第二章 用户注册功能

---

前言

用户注册接口以及前端功能实现

一、注册实现流程

二、后端接口开发

整合tkMapper后的用户注册接口

• 完成DAO操作
• 完成Service业务
• 完成Controller提供接口

1. DAO层操作

1.1 分析数据表结构

2. Service层业务

2.1 UserService接口定义方法

• UserService

public interface UserService {
	
	//用户登录
	public ResultVo checkLogin(String username,String password);
}

2.2 UserServiceImpl实现类

• UserServiceImpl

@Service
public class UserServiceImpl implements UserService {

    @Resource
    private UsersMapper usersMapper;

    @Override
    @Transactional
    public ResultVo userRegist(String username, String password) {
        synchronized (this){
            //根据用户名查询，这个用户是否被注册
            Example exampl = new Example(Users.class);
            Example.Criteria criteria = exampl.createCriteria();
            criteria.andEqualTo("username",username);
            List<Users> users = usersMapper.selectByExample(exampl);

            //如果没有被注册则进行保存操作
            if(users.size() == 0){
                //用md5加密密码
                String md5Pwd = MD5Utils.md5(password);
                Users user = new Users();
                user.setUsername(username);
                user.setPassword(md5Pwd);
                user.setUserImg("img/default.png");
                user.setUserRegtime(new Date());
                user.setUserModtime(new Date());

                //保存到数据库
                int i = usersMapper.insert(user);
                if(i > 0){
                    return new ResultVo(10000,"注册成功！",user);
                }else {
                    return new ResultVo(10002,"注册失败！",null);
                }
            }else {
                return new ResultVo(10001,"用户名已被注册！",null);
            }
        }
    }
}

3. Controller层接口

注册接口，传入的参数时一个对象

• UserController

@Controller
@ResponseBody
@RequestMapping("/user")
@Api(value = "提供用户列表接口",tags = "用户管理")
@CrossOrigin
public class UserController {

    @Resource
    private UserService userService;

    @ApiOperation("用户注册接口")
@PostMapping(value = "/regist")
public ResultVo regist(@RequestBody Users user){

    ResultVo resultVo = userService.userRegist(user.getUsername(), user.getPassword());
    return resultVo;
}
    }
}

4. 接口测试

基于swagger测试测试

注册用户xiaoqing8888 密码123456

再次注册xiaoqing8888 密码123456

三、前端功能实现

1. HTML

2.JavaScript

代码

<script type="text/javascript" src="static/js/vue.js" ></script>
<script type="text/javascript" src="static/js/axios.min.js" ></script>
<script type="text/javascript" src="static/js/base.js" ></script>
<script type="text/javascript">
    var baseUrl = "http://localhost:8080/"

var vm = new Vue({
    el:"#container",
    data:{
        user:{
            username:"",
            password:"",
            repassword:""
        },
        tips:"",
        colorStyle:"color:red",
        isRight:false
    },
    methods:{
        doRegist(){
            if(!vm.isRight){
                vm.tips="请确认注册信息输入完整且正确！";
            }else{
                //提交注册
                var url = baseUrl + "user/regist";
                //var url = baseUrl+"user/regist";
                //axios.post(url,{username:"111",password:"222"}).then((res)=>{
                //	console.log(res);
                //});
                axios({
                    method:"post",
                    url:url,
                    data:vm.user
                }).then((res)=>{
                    var vo = res.data;
                    if(vo.code == 10000){
                        vm.tips = "恭喜你，注册成功！";
                        vm.colorStyle="color:green";
                        setTimeout(function(){
                            window.location.href="login.html";
                        },3000)
                    }else{
                        vm.tips = "很遗憾，注册失败！";
                    }
                });
            }
        },
        checkRegistInfo(){
            //1.校验账号
            if(vm.user.username == ""){
                vm.tips="请输入账号！";
                vm.isRight = false;
            }else if(vm.user.username.length<8 || vm.user.username.length>20){
                vm.tips="账号长度必须为8-20给字符！";
                vm.isRight = false;
            }else{
                //2.校验密码
                if(vm.user.password == ""){
                    vm.tips="请输入密码！";
                    vm.isRight = false;
                }else if(vm.user.password.length<6 || vm.user.password.length>16){
                    vm.tips="密码长度必须为6-16给字符！";
                    vm.isRight = false;
                }else{
                    //3.校验重复密码
                    if(vm.user.repassword == ""){
                        vm.tips="请再次输入密码！";
                        vm.isRight = false;
                    }else if(vm.user.repassword != vm.user.password){
                        vm.tips="两次密码输入不一致！";
                        vm.isRight = false;
                    }else{
                        vm.tips = "";
                        vm.isRight = true;
                    }
                }
            }
        }
    }
});
</script>

``