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都打印出来观看。
以上,登录的验证功能用提升了一下。