1、解决前后端跨域问题

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOriginPatterns("*")
                .allowedMethods("GET", "HEAD", "POST","PUT", "DELETE", "OPTIONS")
                .allowCredentials(true).maxAge(3600);
    }
}

2、登录-后端代码

2.1 Service业务层

/**
 * <p>
 * 管理员表 服务类
 * </p>
 *
 * @author 未进化的程序猿
 * @since 2022-01-26
 */
public interface AdminService extends IService<Admin> {
    /**
     * 校验用户名和密码是否正确
     * @param username 用户名
     * @param password 密码
     * @return
     */
    public boolean checkPassword(String username,String password);
}

/**
 * <p>
 * 管理员表 服务实现类
 * </p>
 *
 * @author 未进化的程序猿
 * @since 2022-01-26
 */
@Service
public class AdminServiceImpl extends ServiceImpl<AdminMapper, Admin> implements AdminService {
    //导入管理dao
    @Autowired
    public AdminMapper adminMapper;
    /**
     * 校验用户名和密码是否正确
     * @param username 用户名
     * @param password 密码
     * @return
     */
    @Override
    public boolean checkPassword(String username, String password) {
        //如果根据用户名和密码查询返回的数量大于1，返回true，否则false
        QueryWrapper<Admin> wrapper = new QueryWrapper<>();
        wrapper.eq("username",username);
        wrapper.eq("password",password);
        Admin admin = this.baseMapper.selectOne(wrapper);
        if (admin != null){
            return true;
        }
        return false;
    }
}

2.2 Controller控制层

/**
 * <p>
 * 管理员表 前端控制器
 * </p>
 *
 * @author 未进化的程序猿
 * @since 2022-01-26
 */
@RestController
@RequestMapping("/musicserver/admin")
@Api(value = "管理员登录控制器")
public class AdminController {
    public static final Logger logger = LoggerFactory.getLogger(AdminController.class);
    @Autowired
    public AdminService adminService;
    /**
     * 校验用户名和密码是否正确
     * @param request
     * @param session
     * @return
     */
    @ApiOperation(value = "校验用户名和密码")
    @PostMapping(value = "/login/status")
    public R getLoginStatus(HttpServletRequest request, HttpSession session){
        String username = request.getParameter("username");
        logger.info("用户名: {}",username);
        String password = request.getParameter("password");
        logger.info("密码: {}",password);
        boolean flag = adminService.checkPassword(username, password);
        if(flag){
            //如果登录成功，生成token，返回给前端，下次客户端访问的时候，带上token进行校验
            return R.ok().message("登录成功!!");
        }
        return R.error().message("登录失败!!");
    }
}

3、登录-前端代码

3.1 封装Http.js请求

import axios from 'axios';
import router from '../router';
axios.defaults.timeout = 5000;  //超市时间是5秒
axios.defaults.withCredentials = true;  //允许跨域
//Content-Type 响应头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
//基础url
axios.defaults.baseURL = "http://localhost:8888";
//响应拦截器
axios.interceptors.response.use(
    response => {
        //如果reponse里面的status是200，说明访问到接口了，否则错误
        if(response.status == 200){
            return Promise.resolve(response);
        }else{
            return Promise.reject(response);
        }
    },
    error => {
        if(error.response.status){
            switch(error.response.status){
                case 401:       //未登录
                    router.replace({
                        path:'/',
                        query:{
                            redirect: router.currentRoute.fullPath
                        }
                    });
                    break;
                case 404:   //没找到
                    break;
            }
            return Promise.reject(error.response);
        }
    }
);
/**
 * 封装get方法
 */
export function get(url,params={}){
    return new Promise((resolve,reject) => {
        axios.get(url,{params:params})
        .then(response =>{
            resolve(response.data);
        })
        .catch(err =>{
            reject(err);
        })
    });
}
/**
 * 封装post方法
 */
export function post(url,data={}){
    return new Promise((resolve,reject) => {
        axios.post(url,data)
        .then(response =>{
            resolve(response.data);
        })
        .catch(err =>{
            reject(err);
        })
    });
}

3.2 编写前端请求方法

import {get,post} from '../http'
//判断管理员是否登录成功
export  const   getLoginStatus = (params) => post('/musicserver/admin/login/status',params);

3.3 完成登录

<template>
  <div class="login-wrap">
    <div class="ms-title">music 后台管理登录</div>
    <div class="ms-login">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" placeholder="请输入用户名" clearable></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码"  show-password></el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import {getLoginStatus} from '../api/login/index'
  export default {
    data() {
      return {
        ruleForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        var _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            //设置参数
            var params = new URLSearchParams();
            params.append("username",this.ruleForm.username);
            params.append("password",this.ruleForm.password);
            //向后端发送请求
            getLoginStatus(params).then((resp) => {
              //登录成功
              if(resp.code === 20000){
                //跳转到首页
                _this.$router.push("/Info");
                //给用户提出提示
                this.$notify({
                    message: '登录成功',
                    type: 'success'
                  });
              }else{
                //登录失败
                this.$notify({
                    message: '用户名或密码错误',
                    type: 'error'
                  });
                //清空输入框的内容
                _this.ruleForm.username='';
                _this.ruleForm.password='';
              }
              console.log(resp);
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>
<style scoped>
.login-wrap {
  position: relative;
  background: url("../assets/img/background.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.ms-title {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -230px;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
}
.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 160px;
  margin-left: -190px;
  margin-top: -150px;
  padding: 40px;
  border-radius: 5px;
  background: #fff;
}
/* .login-btn {
  text-align: center;
} */
.login-btn button {
  width: 100%;
  height: 36px;
}
</style>

var params = new URLSearchParams(); params.append(“username”,this.ruleForm.username); params.append(“password”,this.ruleForm.password);

创建new URLSearchParams(); 对象，设置参数值，提交给后端，通过HttpServletRequest获取请求参数

向后端发送请求，调用封装的getLoginStatus()方法，往后台发送数据

3.4 跳转到首页

4、扩展知识

封装mixins工具类，更好的去调用element-ui提供的通知方法

this.$notify({
  message: '登录成功',
  type: 'success'
});

代码封装，创建index.js

export const mixin = {
    methods:{
        //提示信息
        notify(title,type){
            this.$notify({
                title: title,
                type: type
            })
        }
    }
}

进行使用

1）导入index.js模块

import {mixin} from “../mixins/index”;

2）对mixins进行声明，才能使用

export default {
      mixins:[mixin],
        .....
}

3）使用

this.notify(“登录成功”,”success”);