用后端实现一个简单的登录模块3 注册

该模块能做到的功能:

1阶:输入账号和密码,输入正确即可返回登录成功的信息,反之则登录失败

2阶:有简单的前端页面,有登录成功和失败的弹窗,还有登录成功的主页面

3阶:添加注册功能,前端页面的注册也可以使用,注册完的帐号能直接登录

接下来写注册功能

1.UserController

回到后端代码部分,进入UserController控制类里,在登录功能下面添加如下代码

/**
     * 用户注册
     * @param userRequest
     * @return
     */
    @PostMapping("register")
    public Result register(@RequestBody @Valid UserRequest userRequest, BindingResult result) {

        if (result.hasErrors()) {
            // 处理验证失败的逻辑,例如返回错误信息
            ResponseEntity<String> body = ResponseEntity.badRequest().body(result.getAllErrors().get(0).getDefaultMessage());
            return Result.error(-1,body.getBody());
        }
        else {
            if (userService.register(userRequest)) {
                return Result.ok(userRequest,"success");
            }
            else {
                return Result.error(500,"该账号已被注册过,请登录");
            }
        }
    }

如果爆红,就快捷键Alt+Enter引入一下

2.UserService

引入到UserServiceImpl后,将register方法改成这样

/**
   * 用户注册
   * @param userRequest
   * @return
   */
  @Override
  public boolean register(UserRequest userRequest) {
      try {
          userRequest.setPassword(MD5Util.encrypt(userRequest.getPassword()));
      } catch (NoSuchAlgorithmException e) {
          throw new RuntimeException(e);
      }

      UserRequest onlyName = new UserRequest();
      onlyName.setName(userRequest.getName());
      if (userMapper.select(onlyName) != null){
          return false;
      }
      return userMapper.register(userRequest);
  }

3.UserMapper

将register改成

UserVo select(@Param("user") UserRequest userRequest);

将这个方法添加mybatis新增,生成新增语句 insert

<insert id="register">
        INSERT INTO
        login
        VALUES
            (NULL,
            #{user.name},
            #{user.password})
    </insert>

现在运行即可实现注册功能

接下来,把2阶的前端注掉的代码给取消掉,这样,前端传递值就能和后端连上了

好的,下面是一个简单的示例代码: 1. 登录模块 Login.vue: ```html <template> <div> <h2>登录</h2> <form @submit.prevent="login"> <div> <label>用户名:</label> <input type="text" v-model="username"> </div> <div> <label>密码:</label> <input type="password" v-model="password"> </div> <button type="submit">登录</button> </form> </div> </template> <script> export default { data() { return { username: "", password: "", }; }, methods: { login() { // 在这里实现登录逻辑,例如发送请求给后端验证用户名和密码等 console.log("登录中..."); }, }, }; </script> ``` 2. 注册模块 Register.vue: ```html <template> <div> <h2>注册</h2> <form @submit.prevent="register"> <div> <label>用户名:</label> <input type="text" v-model="username"> </div> <div> <label>密码:</label> <input type="password" v-model="password"> </div> <div> <label>确认密码:</label> <input type="password" v-model="confirmPassword"> </div> <button type="submit">注册</button> </form> </div> </template> <script> export default { data() { return { username: "", password: "", confirmPassword: "", }; }, methods: { register() { // 在这里实现注册逻辑,例如发送请求给后端创建新用户等 console.log("注册中..."); }, }, }; </script> ``` 以上代码只是一个简单的示例,实际开发中可能需要加入更多的验证逻辑、错误处理等。具体实现方式还需要根据后端接口的设计和前端框架的特点进行进一步的调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值