springboot+mybatisplus+vue登录加密

感谢您的问题！我可以回答这个问题。

Spring Boot是一个开源的Java Web框架，MyBatis Plus是MyBatis的增强工具包，可以简化MyBatis的使用，Vue是一种流行的JavaScript框架，可以用于构建现代化的Web应用程序。关于登录加密，可以使用密码哈希算法来加密用户密码，常用的算法包括MD5、SHA256等。在实际开发中，可以使用Spring Security框架来实现身份验证和授权。同时，也可以使用JWT（JSON Web Tokens）来实现无状态的身份验证，使得应用程序可以在分布式环境下运行。

相关问题

springboot+mybatisplus+vue登录加密代码

您好，以下是一个使用SpringBoot、Mybatis Plus和Vue实现的登录加密代码示例：

后端Java代码：

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;
    
    @PostMapping("/login")
    public String login(@RequestBody User user) {
        User loginUser = userService.login(user);
        if (loginUser != null) {
            String token = JwtUtil.createToken(loginUser.getId(), loginUser.getUsername());
            return token;
        } else {
            return "登录失败";
        }
    }
}

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
    @Override
    public User login(User user) {
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("username", user.getUsername());
        queryWrapper.eq("password", DigestUtils.md5DigestAsHex(user.getPassword().getBytes()));
        User loginUser = this.getOne(queryWrapper);
        return loginUser;
    }
}

public interface UserService extends IService<User> {
    User login(User user);
}

前端Vue代码：

<template>
  <div>
    <el-form ref="form" :model="loginForm" label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { login } from "@/api/user";
import JwtUtil from "@/utils/jwtUtil";

export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    login() {
      login(this.loginForm)
        .then((response) => {
          const token = response.data;
          JwtUtil.setToken(token);
          this.$router.push("/home");
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

其中，`UserService`定义了登录方法`login`，在实现类`UserServiceImpl`中调用`Mybatis Plus`提供的`QueryWrapper`构造查询条件，查询数据库中是否存在匹配的用户信息，如果存在则生成`JWT`令牌返回给前端。

前端Vue代码中，调用`API`提供的`login`方法发送登录请求，并在成功响应后将返回的`JWT`令牌存储在本地，跳转到首页。

vue+elementui+mybatisplus+springboot登录md5加密完整代码

以下是使用Vue、ElementUI、MybatisPlus和Spring Boot实现MD5加密的完整代码：

前端代码：

<template>
  <el-form :model="loginForm" ref="loginForm" :rules="rules" label-width="80px" class="login-form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="loginForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="loginForm.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="login">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import md5 from 'js-md5';

export default {
  name: 'LoginForm',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    };
  },
  methods: {
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loginForm.password = md5(this.loginForm.password);
          // 发送登录请求
        } else {
          return false;
        }
      });
    }
  }
};
</script>

后端代码：

import org.apache.commons.codec.digest.DigestUtils;

@RestController
@RequestMapping("/login")
public class LoginController {

  @PostMapping
  public Result login(@RequestBody LoginForm loginForm) {
    String username = loginForm.getUsername();
    String password = DigestUtils.md5Hex(loginForm.getPassword());
    // 根据用户名和密码验证登录
    return Result.success();
  }
}

以上代码中，前端使用了js-md5库对密码进行MD5加密，后端使用了commons-codec库对密码进行MD5加密。请注意，MD5加密虽然是常用的加密方式，但不是最安全的加密方式。建议在实际开发中，使用更加安全的加密方式，如bcrypt、scrypt等。