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`令牌存储在本地，跳转到首页。

springboot+mybatisplus+vue实现登录跳转

首先，你需要创建一个登录页面，用户输入用户名和密码后，前端将用户名和密码发送到后端进行验证。后端可以使用SpringBoot + MybatisPlus来实现数据的查询和验证。

1. 创建前端登录页面

在Vue中，你可以使用ElementUI等UI框架来快速创建登录表单。以下是一个简单的登录表单示例：

<template>
  <div class="login">
    <el-card class="login-form">
      <h2>用户登录</h2>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px" class="demo-ruleForm">
        <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>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login() {
      // TODO: 发送登录请求
    }
  }
}
</script>

2. 创建后端登录接口

在后端，你可以使用SpringBoot + MybatisPlus来实现登录接口。以下是一个简单的登录接口示例：

@RestController
@RequestMapping("/api")
public class LoginController {
    @Autowired
    private UserService userService;

    @PostMapping("/login")
    public Result login(@RequestBody User user) {
        User dbUser = userService.getOne(new QueryWrapper<User>()
                .eq("username", user.getUsername())
                .eq("password", user.getPassword()));
        if (dbUser != null) {
            return Result.ok().put("user", dbUser);
        } else {
            return Result.error("用户名或密码错误");
        }
    }
}

该接口接收一个User对象，包含用户名和密码。然后使用MybatisPlus进行查询，如果查询到了用户，则返回成功结果和用户信息；否则返回失败结果。

3. 前后端交互

前端在点击登录按钮后，可以使用axios等HTTP库将用户输入的用户名和密码发送给后端接口。以下是一个简单的前后端交互示例：

import axios from 'axios';

export default {
  methods: {
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          axios.post('/api/login', this.loginForm)
            .then(resp => {
              if (resp.data.code === 0) {
                this.$message.success('登录成功');
                // TODO: 跳转到主页
              } else {
                this.$message.error(resp.data.msg);
              }
            })
            .catch(error => {
              console.error(error);
              this.$message.error('登录失败');
            });
        } else {
          return false;
        }
      });
    }
  }
}

在收到后端接口的响应后，根据返回结果进行跳转或弹出错误提示。