前后端登录注册demo

前后端分离登录注册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会存在一定技术盲区