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参数输出错误信息。
Java Spring Boot + Vue 实习项目5:登录前端
最新推荐文章于 2023-03-14 15:10:45 发布