Fork me on GitHub

java初探(1)之登录初解

初识登录

登录的应用场景

登录比较常见,大多数网站都有登录的操作。然后登录本身也从简单到复杂有着漫长的发展历史。本文记录博主对登录的应用场景的剖析,深究不在于学习如何实现,主要关注其编码思想,过程中用到的技术,以及改进的可能。

搭建环境

本文使用SSM框架构建登录的场景,网页不采用jsp技术,而是用thymeleaf来构建模板。

  • 简单的网页login.html

    <!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>登录</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
        <!-- jquery -->
        <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
        <!-- jquery-validator -->
        <script type="text/javascript" th:src="@{/jquery-validation/jquery.validate.min.js}"></script>
        <script type="text/javascript" th:src="@{/jquery-validation/localization/messages_zh.min.js}"></script>
    
    
    </head>
    <body>
    
    <form name="loginForm" id="loginForm" method="post"  style="width:30%; margin:0 auto;">
    
        <h2 style="text-align:center; margin-bottom: 20px">用户登录</h2>
    
        <div>
            <div>
                <label>请输入手机号码</label>
                <div >
                    <input id="mobile" name = "mobile"  type="text" placeholder="手机号码"/>
                </div>
            </div>
        </div>
    
        <div>
            <div>
                <label>请输入密码</label>
                <div>
                    <input id="password" name="password" type="password"  placeholder="密码"/>
                </div>
            </div>
        </div>
    
        <div style="margin-top:40px;">
            <div >
                <button type="submit" onclick="login()">登录</button>
            </div>
        </div>
    
    </form>
    </body>
    <script>
        //此处增加验证代码
        // function login(){
        //     $("#loginForm").validate({
        //
        //         submitHandler:function(form){
        //             doLogin();
        //         }
        //     });
        // }
        function login(){
    
            $.ajax({
                url: "/login/do_login",
                type: "POST",
                data:{
                    mobile:$("#mobile").val(),
                    password: $("#password").val()
                },
                success:function(data){
                    alert(data)
                    //逻辑判断代码,暂时不写
                }
            });
        }
    </script>
    </html>

    网页做了个及其简陋的页面,但对于登录的逻辑判断已然足够。在springboot环境下,该html页面一定要放在resource目录下的templates子目录下,才会被视图解析器拿到。

  • 搭建依赖包环境-pom文件

   

<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.8.RELEASE</version>
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!--<dependency>-->
            <!--<groupId>org.mybatis.spring.boot</groupId>-->
            <!--<artifactId>mybatis-spring-boot-starter</artifactId>-->
            <!--<version>1.3.1</version>-->
        <!--</dependency>-->

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <!--<dependency>-->
            <!--<groupId>com.alibaba</groupId>-->
            <!--<artifactId>druid</artifactId>-->
            <!--<version>1.0.5</version>-->
        <!--</dependency>-->
        <!--<dependency>-->
            <!--<groupId>redis.clients</groupId>-->
            <!--<artifactId>jedis</artifactId>-->
        <!--</dependency>-->

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.38</version>
        </dependency>
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.6</version>
        </dependency>
        <!-- 参数校验工具 -->
        <!--<dependency>-->
            <!--<groupId>org.springframework.boot</groupId>-->
            <!--<artifactId>spring-boot-starter-validation</artifactId>-->
        <!--</dependency>-->
        <!--<dependency>-->
            <!--<groupId>org.springframework.boot</groupId>-->
            <!--<artifactId>spring-boot-starter-amqp</artifactId>-->
        <!--</dependency>-->
    </dependencies>

这里主要导入spring相关的包,spring-boot-starter-web以及spring-boot-starter-thymeleaf,因为springboot可以一键搭建环境,此处暂时不做配置,如需配置,只需要在resource下创建application.yml文件即可。

  • 创建实体类domain

  对于登录功能而言,需要的一定是一个用户的实体类,因为我们网页只有手机号和密码两个属性,因此用户实体类也只有这两个属性

public class Person {

//    @NotNull
    private String mobile;

    private String password;

    @Override
    public String toString() {
        return "Person{" +
                "mobile='" + mobile + '\'' +
                ", password='" + password + '\'' +
                '}';
    }

    public String getMobile() {
        return mobile;
    }

    public void setMobile(String mobile) {
        this.mobile = mobile;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

实体类的属性上可以添加验证标签,但现在先跳过。

  • 创建springboot的启动类

  

@SpringBootApplication
public class MyApplication {
    public static void main(String[] args) {
        SpringApplication.run(MyApplication.class);
    }
}

该类要放在所有类的父包之上,保证能扫描到所有的类。

  • 创建LoginController类

  

@Controller
@RequestMapping("/login")
public class LoginController {


@RequestMapping("/to_login")
public String tologin(){
return "login";
}

@RequestMapping("/do_login")
@ResponseBody
public String dologin(HttpServletResponse response, Person person){

System.out.println(person);
return person.toString();
}
}
  • 测试

  做到这里,已经完成了SSM环境的搭建,启动MyApplication类的main方法,springboot会自动的加载各种资源,并开启tomcat。

  打开浏览器,输入网址:http://localhost:8080/login/to_login  即可跳转到login.html页面上

 

 输入手机号码和密码点击登录,实现登录请求。

 

以上就是环境搭建的全过程


搭建完环境以后,会发现此刻点登陆按钮,会在页面弹出用户的信息。基本的功能已经实现,假设现在已经做好了数据库查询的功能,则需要对controller类做进一步的改进,来实现真正的登陆操作

此时,需要对controller类中的response返回对象做一些要求,最好是带有一定的规则约束,比如{code:xx,msg:xx,date:xx}这种类型。

  • 创建Result<>类,泛型类

  

public class Result<T> {

    private Integer code;
    private String Msg;
    private T date;

    @Override
    public String toString() {
        return "Result{" +
                "code=" + code +
                ", Msg='" + Msg + '\'' +
                ", date=" + date +
                '}';
    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return Msg;
    }

    public void setMsg(String msg) {
        Msg = msg;
    }

    public T getDate() {
        return date;
    }

    public void setDate(T date) {
        this.date = date;
    }
}

上述结果类的定义比较简单,可以在后面逐渐完善

 

  • 建立Service类,来提供登陆验证的方法

  因为之前没有建立与数据库的连接,因此,这里先模拟数据库的连接。

@Service
public class UserService {

    //1.登录

    public Result<Boolean> login(Person person){

        Result<Boolean> re=new Result<Boolean>();

        Person persondb=personByMobile(person.getMobile());

        if(persondb==null){
            re.setCode(0);
            re.setMsg("查无此人");
            re.setDate(false);
        }else if(!persondb.getPassword().equals(person.getPassword())){
            re.setCode(01);
            re.setMsg("密码错误");
            re.setDate(false);
        }else{
            re.setCode(1);
            re.setMsg("登录成功");
            re.setDate(true);
        }

        return re;
    }

    //2.根据用户手机查询用户
    public Person personByMobile(String mobile){

        Person person=new Person();
        person.setMobile("123");
        person.setPassword("123");

        if(mobile.equals(person.getMobile())){
            return person;
        }else
        {
            return null;
        }
    }

}

以上代码,仍然是一个比较简单,只用来实现功能的代码,后期需要不断修改。

 

  • 修改LoginController类如下:

  

@Controller
@RequestMapping("/login")
public class LoginController {

    @Autowired
    UserService userService;

    @RequestMapping("/to_login")
    public String tologin(){
        return "login";
    }

    @RequestMapping("/do_login")
    @ResponseBody
    public Result<Boolean> dologin(HttpServletResponse response, Person person){

        System.out.println(person);

        Result<Boolean> result = userService.login(person);


        return result;
    }
}

此时返回的数据data就是Result<Boolean>类型的数据格式。启动项目,在浏览器中按F12对response回来的数据进行查看,但此时页面已经刷新,无法看到,可以通过修改ajax的success处代码,将code,msg。data都打印出来观看。

 

 以上,登录的验证功能用提升了一下。

 

 

 

 

 

 

 

 

 

 

 

posted @ 2020-02-16 22:00  lovejune  阅读(378)  评论(0编辑  收藏  举报