Java Spring Boot + Vue 实习项目5：登录前端

1. 知识点
1.1 浏览器向服务器提交参数的几种方式：
1) 请求查询字符串的方式：在URL后用?串接参数，用于get请求。
如：http://xxx/yyy?a=123&b=nnn
2) 路径参数：可以用于get、post、put、delete等各种请求。
如：http://xxx/yyy/123/nnn (其中123和nnn为参数)
3) 表单数据方式（form-data）：只用于post请求。
4) payload方式：一般以JSON的方式传参，可用于post、put、delete请求。
注：客户端传参方式不同，服务器接受方式也不同。
1.2 RESTful风格的接口API
1) 从服务器获取数据用get请求。
2) 向服务器投送数据用post请求。
3) 更新服务器数据用put请求。
4) 移除服务器数据用delete请求。
注：这里“获取数据”、“投送数据”、“更新数据”、“移除数据”都是基于语义的，并非对应数据库的增删改查。
采用RESTful开发的API接口称为RESTful接口。
2. 前端欢迎界面
2.1 mounted(){
        //setTimeout函数中有两个参数，第一个参数是一个函数，第二个参数是毫秒数
        //该函数在第二个参数指定的毫秒数后执行第一个参数的函数
        setTimeout(()=>{
            //跳转到login.vue
            this.$router.push('/login');
        },2000);
}
3. 前端登录界面
3.1 使用Element-UI的卡片组件制作登录界面。
3.2 登录方法中使用this.$post()方法向后端发送数据，使用this.$router.push("/home")实现跳转页面。
login() {
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          //以form-data格式数据发送post请求
          this.$post("security/login", this.user).then(() => {
            //该函数在响应成功之后执行
            this.$router.push("/home");
          });
          console.log("OK");
        } else {
          console.log("err");
        }
        return false; //阻止表单事件的默认行为（提交）
      });
    },
  },
3.3 表单无法直接输入数字，需要先定义对象。
<el-form :model="user">
<el-input v-model="user.u_id" placeholder="账号"></el-input>
<el-input v-model="user.u_pwd" :show-password="true" type="password" placeholder="密码" ></el-input>
user: {}, //登录表单数据
      loginFormRules: {
        //定义验证规则
        u_id: [{ required: true, message: "请输入账号！", trigger: "blur" }],
        u_pwd: [{ required: true, message: "请输入密码！", trigger: "blur" }],
      },
4. 登录后端
4.1 创建一个存放当前用户的CurrUser.java的JavaBean，属性为userId和userName；一个public static final String SESSION_ATTR_CURRUSER = "SESSION_ATTR_CURRUSER";常量，用于session的名称。
4.2 改造SecurityLoginServiceImpl.java，使用User user对象接受DAO传递的查找结果，并将user的id和pwd赋值给CurrUser currUser对象中，返回该对象。
4.3 改造SecurityLoginController.java，创建一个name为上述常量、内容为服务层传递的currUser的session，向前端返回登录成功或失败的信息。
5. 业务错误（BussinessException）：由于用户操作失误导致的异常。
系统异常（SysException）：由于软件bug导致的异常。
定义的时候extends RuntimeException，继承所有方法，使用时可以用一个String类型参数输出错误信息，也可以用一个String参数、一个Exception参数输出错误信息。