前后端分离登录注册Demo
前端
登录demo
methods: {
//点击登录按钮执行该函数
submitForm(formName) {
this.$refs[formName].validate((valid) => {
//valid的值是true,表示登录表单校验通过,可以提交表单,如果值是false,表示校验未通过,不能提交表单
if (valid) {
//向后台发送异步请求,携带请求数据完成登录
//由于在config/index.js中配置了后台服务器的ip+端口号,所以在书写后台服务器资源路径的时候不需要书写三要素
let url = "/user/loginServlet";
//携带的参数
let params=`username=${this.ruleForm.username}&password=${this.ruleForm.password}`;
//向后台发送axios异步请求
axios.post("/user/loginServlet",`username=${this.ruleForm.username}&password=${this.ruleForm.password}`)
axios.post(url,params)
.then(resp=>{
//判断是否登录成功
if(resp.data){
//如果后端返回的是true,表示登录成功,提示登录成功,然后跳转到主页即success.vue
this.$message.success('登录成功');
//这里需要在/success路径前面加#,#/success==>router/index.js中的path: '/success',
//component: success==>import success from '@/views/user/success'==>success.vue
window.location.href='#/success';
}else{
//如果后端返回的是false,表示登录失败,提示用户名或者密码错误
this.$message.error('用户名或者密码错误');
}
});
} else {
//表单校验失败
// console.log('error submit!!');
this.$message.error('校验失败,不能提交表单');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
后端
Dao层
public interface UserMapper {
//1.定义根据用户名查询用户的方法
@Select("select * from user where username=#{username}")
User queryUserByUserName(@Param("username") String username);
//2.添加用户的方法
@Insert("insert into user values(null,#{username},#{password})")
void register(User user);
}
Service层
public class UserServiceImpl {
//登录
// 1.定义登录方法接收web层传递的用户对象
public User login(User user) {
// 2.使用mybatis工具类获取session对象
SqlSession sqlSession = SqlSessionUtil.getSqlSession(false);
// 3.使用session对象调用方法获取接口Mapper对象
UserMapper mapper = sqlSession.getMapper(UserMapper.class);
// 4.使用Mapper对象调用接口的登录方法
User u = mapper.login(user);
// 5.释放资源
sqlSession.close();
// 6.返回给web层对象u
return u;
}
//先根据用户名查询是否存在,如果不存在在注册,存在不注册
//1.定义注册的方法接收web层传递的user对象
public boolean register(User user) {
SqlSession sqlSession = null;
try {
// 2.使用mybatis工具类获取session对象
sqlSession = SqlSessionUtil.getSqlSession(false);
// 3.使用session对象调用方法获取接口Mapper对象
UserMapper mapper = sqlSession.getMapper(UserMapper.class);
//4.使用接口代理对象调用接口中的根据用户名查询的方法
User u = mapper.queryUserByUserName(user.getUsername());
//5.判断返回的User对象是否等于null
if (u == null) {
//6.如果等于null,说明没有查到,可以注册,使用接口代理对象调用注册方法
mapper.register(user);//这里传递的是user对象
//7.提交事务
sqlSession.commit();
//8.返回给web层true
return true;
} else {
//9.如果查询的用户对象不等于null,说明用户存在,不能注册,返回给web层false
return false;
}
} finally {
if (sqlSession != null) {
//10.释放资源
sqlSession.close();
}
}
}
}
Web层
@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.处理请求乱码
request.setCharacterEncoding("utf-8");
//2.获取页面的数据
String username = request.getParameter("username");
String password = request.getParameter("password");
//3.创建User对象
User user = new User();
//4.将获取的数据封装到User对象中
user.setUsername(username);
user.setPassword(password);
//5.创建业务层对象
UserServiceImpl userService = new UserServiceImpl();
//6.使用业务层对象调用注册方法,将User对象作为参数传递到业务层
boolean result = userService.register(user);
response.getWriter().print(result);
}
}
小结
登录注册案例demo小结:
使用技术点:
前端:Element-ui axios异步请求 Vue-cli(脚手架)
后端:mybatis、mysql、servlet、maven
web:接受前端传输过来的数据,并将其封装为pojo实体;给前端返回查询结果
Service:接收web层传输的对象,定义方法判断数据是否存在;返回web数据
dao分层:注解开发,和数据库进行交互查询;
遇到的困难点:
前端
axios未理解到位:获取后端url、get、post要携带的参数
axios.post().then()
前后端服务器交互流程不理解,数据流的传输存在模糊
后端:
针对前端传输参数乱码处理
mybatis环境配置
注解开发
后续注意点:
没有思路时,画流程图、尽可能把每一步的详细步骤写下来
利用浏览器抓包参考携带数据
加强debug的使用,测试程序的正确
养成完成一个小功能后进行测试的习惯
小知识点需要掌握,不然综合案例Demo会存在一定技术盲区