登录的视图页面
在views里创建一个LoginView.vue,且配置一下路由
LoginView.vue代码
<div>
<div style="width: 400px; height: 350px; margin: 150px auto; background-color:rgba(107,149,224,0.5); border-radius: 10px">
<div style="width: 100%; height: 100px; font-size: 30px; line-height: 100px; text-align: center; color: #4a5ed0">欢迎登录</div>
<div style="margin-top: 25px; text-align: center; height: 320px;">
<el-form :model="admin">
<el-form-item>
<el-input v-model="admin.name" prefix-icon="el-icon-user" style="width: 80%" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="admin.password" prefix-icon="el-icon-lock" style="width: 80%" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button style="width: 80%; margin-top: 10px" type="primary" @click="login()">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
页面呈现:
router:
import LoginView from '../views/LoginView.vue'
{
path: '/login',
name: 'login',
component: LoginView
},
后端代码逻辑
AdminController
@PostMapping("/login")
public Result login(@RequestBody Admin admin) {
Admin loginUser = adminService.login(admin);
return Result.success(loginUser);
}
AdminService
public Admin login(Admin admin) {
// 1. 进行一些非空判断
if (admin.getName() == null || "".equals(admin.getName())) {
throw new CustomException("用户名不能为空");
}
if (admin.getPassword() == null || "".equals(admin.getPassword())) {
throw new CustomException("密码不能为空");
}
// 2. 从数据库里面根据这个用户名和密码去查询对应的管理员信息,
Admin user = adminDao.findByNameAndPassword(admin.getName(), admin.getPassword());
if (user == null) {
// 如果查出来没有,那说明输入的用户名或者密码有误,提示用户,不允许登录
throw new CustomException("用户名或密码输入错误");
}
// 如果查出来了有,那说明确实有这个管理员,而且输入的用户名和密码都对;
return user;
}
AdminMapper
@Select("select * from admin where name = #{name} and password = #{password} limit 1")
Admin findByNameAndPassword(@Param("name") String name, @Param("password") String password);
全局异常捕获
GlobalExceptionHandler
package com.example.exception;
import com.example.common.Result;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
@ControllerAdvice(basePackages="com.example.controller")
public class GlobalExceptionHandler {
private static final Logger log = LoggerFactory.getLogger(GlobalExceptionHandler.class);
//统一异常处理@ExceptionHandler,主要用于Exception
@ExceptionHandler(Exception.class)
@ResponseBody
public Result error(HttpServletRequest request, Exception e){
log.error("异常信息:",e);
return Result.error("系统异常");
}
@ExceptionHandler(CustomException.class)
@ResponseBody
public Result customError(HttpServletRequest request, CustomException e){
return Result.error(e.getMsg());
}
}
CustomException(自定义异常)
package com.example.exception;
public class CustomException extends RuntimeException {
private String msg;
public CustomException(String msg) {
this.msg = msg;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
注册同理