精华内容
下载资源
问答
  • 今天是刘小爱自学Java的第105天。感谢你的观看,谢谢你。...一、前端发送请求现在不是注册页面了而是登录页面,也就是前端提供的静态资源中的login.html文件。在该文件中编写对应的js代码代码中的console...

    今天是刘小爱自学Java的第105天。

    感谢你的观看,谢谢你。

    话不多说,开始今天的学习:

    63e178d7115d23c51bb787a64e440692.png

    学完注册业务,开始学习新的功能:登录。

    一个功能的实现,基本上都是三个步骤:

    • 前端发送请求给后台服务器。
    • 后台去数据库查询数据响应数据。
    • 前端根据响应数据做不同的渲染。

    一、前端发送请求

    现在不是注册页面了而是登录页面,也就是前端提供的静态资源中的login.html文件。

    在该文件中编写对应的js代码:

    330fa5ae18e1780a7f72beaf80c90577.png

    代码中的console.log(),是为了检测代码是否能正常执行,若代码没问题就将这些删除。

    ①表单提交事件

    找到该页面中登录表单的id,然后根据其id绑定一个提交事件。

    在登录页面中,用户一旦提交就会触发。

    ②序列化表单数据

    如果数据存在多个的情况,可以选择将登录中的数据序列化,再将序列化后的数据提交。

    ③异步请求提交

    参数还是四个:

    • "userServlet?methodName=login":请求路径,携带的参数login就对应着方法login。
    • loginData:请求中携带的数据,这里就是序列化后的数据。
    • function(result){}:回调函数,result即为后台响应的数据,
    • "json":数据的传输格式为json。

    return false是将表单设置成默认不提交。

    二、Java后台代码编写

    Java三层架构中的代码编写:

    1web层

    前端提交的请求参数为login,就对应一个login方法:

    4d164083c19232f7c56f3043bce60978.png

    ①获取请求的数据

    登录页面中的数据不止一个,所以使用方法getParameterMap()获取数据

    ②将数据存放在user对象中

    在Java中一切万物都可以是类。

    无论是前端请求中的数据,还是数据库中的数据都是可以对应Java中的一个类。

    这里使用BeanUtils的populate方法将请求数据转换成一个user对象。

    ③业务层处理并返回结果

    业务层返回值是一个user对象:

    • 如果不为空,登录成功。
    • 如果为空,没有查到对应数据,登录失败。

    将结果以键值对的形式存储在map中:

    • 登录成功:返回true和对应的用户对象。
    • 登录失败:返回false和对应的错误信息。

    ④转换成json数据并响应

    这步不用多说,写了很多遍了。

    2service层

    2dd5727ba5715e62dfe988537cef7d34.png

    ①使用md5将密码加密

    用户在登录页面输入的密码是明文,而数据库中存的数据是使用md5加密后的密文。

    所以需要先将明文转换成密文,再拿着密文去数据库中查询。

    有一点值得注意的是

    不要忘了将密文重新设定到user中。

    ②dao层查询数据

    方法名的命名规则,见名知义:通过email和password来查询用户数据。

    返回结果是一个user对象,返回即可。

    3dao层

    使用jdbcTemplate查询数据:

    2736e9b7ca74bedfcaaaa4c5f2cb4de5.png

    如果我们是使用query方法,它查询的结果是一个集合(也就是一个或多个user对象)。

    而事实上根据现实中的逻辑判断,登录业务只能查询到一个user对象。

    所以这里使用queryForObject()方法,看方法名就能知道是以对象的形式查询数据。

    当然直接使用query方法,然后取集合中的第一个元素应该也是可以的。

    这里有一点需要注意:

    主动try…catch一个异常,因为如果查询不到元素,jdbcTemplate会报错。

    我们查看queryForObject()方法中的源码:

    3f85594e7d535954c5108bec618e57f7.png

    这块代码的意思是说,如果查询到的User对象个数为0,底层会抛异常。

    而我们需要将这个异常捕获,从而告诉前端没有查询到数据。

    当然源码中下面的异常是指如果能查询到多个User对象,底层也会抛异常。

    而这块异常一般是不会出现的,毕竟登录业务怎么可能一个用户名和密码对应好几个用户。

    在设计数据表的时候应该就需要考虑到这点,保证登录用户名的唯一性。

    三、前端页面渲染

    1响应数据格式

    Servlet响应的数据格式是json。

    那数据在浏览器中到底是什么样子的呢?

    通过浏览器F12打卡控制台可以查看:

    208add652d9ead6bbb35b40cbf66d4e8.png

    ①用户登录成功

    json数据,就可以理解成一个或多个键值对。

    • loginFlag:对应的值是true;
    • longinUser:对应的值是用户数据(值也是有多个键值对组成)

    ②用户登录失败

    • longinFlag:对应的值是false;
    • errorMsg:错误信息。

    这些数据是怎么来的呢?

    在servlet中我们自己创建的map集合,再向集合中添加的数据。

    而json是为了在浏览器与服务器之间传输方便,其实本质就可以按照一个map来理解。

    2渲染页面

    根据loginFlag对应的值,做出不同的处理:

    071d9451d767cf9a854190da9da722e9.png

    ①loginFlag为true

    登录成功了,所以使用location跳转到主页页面,也就是index.html。

    ②loginFlag为false

    在登录页面中有一个标签用以提示错误信息,其id就是errorMsg。

    登录失败了,就将错误信息添加到该页面中。

    最后

    谢谢你的观看。

    如果可以的话,麻烦帮忙点个赞,谢谢你。

    展开全文
  • 目录目录介绍用户登录页面 - login.html用户登录Handler登录失败页面 - login-failure.jsp用户登录的业务逻辑DAO层 - UserMapper总结介绍上篇文章我们实现了简单的用户注册功能,现在我们来实现用户登录功能。...

    本系列文章旨在记录和总结自己在Java Web开发之路上的知识点、经验、问题和思考,希望能帮助更多(Java)码农和想成为(Java)码农的人。

    目录

    1. 目录
    2. 介绍
    3. 用户登录页面 - login.html
    4. 用户登录Handler
    5. 登录失败页面 - login-failure.jsp
    6. 用户登录的业务逻辑
    7. DAO层 - UserMapper
    8. 总结

    介绍

    上篇文章我们实现了简单的用户注册功能,现在我们来实现用户登录功能。

    之前的文章中我们仅仅是实现了用户登录的页面,用户登录请求的处理逻辑尚未实现,可以参考这篇文章。

    用户登录页面 - login.html

    上篇文章中我们为登录页面添加了一个跳转到注册页面的链接,完整代码如下:

    租房网 - 登录用户名密码

    还没有注册?

    用户登录Handler

    原来的HouseRenterController中已经声明过登录Handler(可以参考这篇文章):

    @PostMapping("/login.action")public ModelAndView postLogin(String userName, String password) {//这里需要验证用户是否已经注册,省略System.out.println("userName: " + userName + ", password: " + password);ModelAndView mv = new ModelAndView();//重定向到查找感兴趣房源列表的动作mv.setViewName("redirect:houses.action?userName=" + userName);return mv;}

    不过,这个Handler对用户登录请求并没有实际的处理,即验证用户是否已经注册过,登录密码是否正确等等,现在就把这个业务逻辑加上。

    当然,这个业务逻辑被我们封装在服务层组件UserService中,方法原型如下:

    public void login(String userName, String password) throws Exception;

    由于实现用户注册功能时我们已经为HouseRenterController对象注入了UserService对象:

    @Autowiredprivate UserService userService;

    所以,我们直接用UserService对象来修改登录Handler即可:

    @PostMapping("/login.action")public ModelAndView postLogin(String userName, String password) {System.out.println("userName: " + userName + ", password: " + password);ModelAndView mv = new ModelAndView();try {userService.login(userName, password);//重定向到查找感兴趣房源列表的动作mv.setViewName("redirect:houses.action?userName=" + userName);} catch (Exception e) {mv.addObject("errorMessage", e.getMessage());mv.setViewName("login-failure.jsp");}return mv;}

    可以看到,与用户注册Handler类似,都是使用Java异常机制来处理各种错误,出现错误时跳转到错误页面login-failure.jsp。

    如果用户登录验证成功,那么仍旧重定向到房源列表页面。

    登录失败页面 - login-failure.jsp

    类似上篇文章中的注册失败页面register-failure.jsp,登录失败页面的代码也很简单:

    租房网 - 登录失败!

    登录失败!请重新登录!

    失败原因:${errorMessage}

    用户登录的业务逻辑

    如上所述,用户登录的业务逻辑封装在服务层组件UserService的login()方法中,主要包括验证用户是否已经注册过,登录密码是否正确等等:

    public void login(String userName, String password) throws Exception {User user = userMapper.selectByName(userName);if (user == null) {throw new Exception("用户名 " + userName + " 尚未注册!");} else if (!password.equals(user.getPassword())) {throw new Exception("密码错误!");}}

    代码很简单吧,主要是复用了UserMapper组件的selectByName()方法。

    加上上篇文章中的用户注册的业务逻辑,现在UserService变成这样:

    package houserenter.service;import java.util.UUID;import javax.annotation.PostConstruct;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import houserenter.entity.User;import houserenter.mapper.UserMapper;@Servicepublic class UserService {@Autowiredprivate UserMapper userMapper;@PostConstructpublic void init() {userMapper.cteateTable();}public User register(String userName, String password, String passwordConfirmed) throws Exception {if (!passwordConfirmed.equals(password)) {throw new Exception("两次输入的密码不一致,请重新输入!");}User user = userMapper.selectByName(userName);if (user != null) {throw new Exception("用户名 " + userName + " 已经注册过,请选择其他用户名!");}user = new User();user.setId(UUID.randomUUID().toString());user.setName(userName);user.setPassword(password);userMapper.insert(user);return user;}public void login(String userName, String password) throws Exception {User user = userMapper.selectByName(userName);if (user == null) {throw new Exception("用户名 " + userName + " 尚未注册!");} else if (!password.equals(user.getPassword())) {throw new Exception("密码错误!");}}}

    DAO层 - UserMapper

    不论是Mapper接口还是Mapper元数据,都不用做任何修改,参考上篇文章。

    总结

    这样,我们的用户登录功能就实现了,虽然比较简单,大家可以自行验证一下。

    bf16df88cc9384a64b761b1958744996.png

    不过,还存在不少问题:

    • 没有登录验证码;
    • 重复登录会怎样;
    • 密码是明文存储;
    • 登录后的会话仍然使用URL重写技术来跟踪;
    • 等等。
    展开全文
  • HTML>简单登录页面代码

    万次阅读 多人点赞 2016-12-06 10:18:50
    简单登录HTML

    这是一个简单的静态的html页面登录图片,之前写的,验证码方面没有搞懂,这里我重新参考了这里,但是部分功能还没有完善。仅供参考

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>静态页面登录测试</title> 
     
     <script language="javascript">
     window.onload = function() {
      createCode()
     }
     var code; //在全局定义验证码 
     function createCode() {
      code = "";
      var codeLength = 4; //验证码的长度 
      var checkCode = document.getElementById("code");
      var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
       'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数 
      for(var i = 0; i < codeLength; i++) { //循环操作 
      var index = Math.floor(Math.random() * 36); //取得随机数的索引(0~35) 
       code += random[index]; //根据索引取得随机数加到code上 
      }
      checkCode.value = code; //把code值赋给验证码 
     }
     //校验验证码 
    function validateLogin(){
        var sUserName = document.frmLogin.username.value ;
        var sPassword = document.frmLogin.password.value ;
        var inputCode = document.frmLogin.text_code.value;
        /*var sinputCode =document.frmLogin.inputcode.value ;  */
        if ((sUserName.length <= 0) || (sUserName=="")){
         alert("请输入用户名!");
         return false ;
        }
         
        if ((sPassword.length <= 0) || (sPassword=="")){
         alert("请输入密码!");
         return false ;
        }
        if ((inputCode.length<= 0) || (inputCode==NULL)){
            alert("请输入验证码!");
            return false ;
           }
       } 
      </script>
    </head>
    <body >
    <fieldset>
    <table background="images\e.jpg " width="933" height="412">
     <tr height="170">
     <td width="570px"> </td>
     <td> </td>
     </tr> 
     <tr>
    <td> </td>        
    <td><table>
    <form method ="POST" action="http://localhost:8080/test/hello.html?login=%B5%C7%C2%BC" name="frmLogin"  >
     <tr>
     <td><label for="username">用户名:</label></td>
     <td><input type="text" name="username"  id="username" placeholder="input your name" size="20" maxlength="20" /></td>
     <td > </td>
     <td> </td>
     </tr>
     <tr>
     <td><label for="password">密  码:</label></td>
     <td><input type="password" name="password" id="password" placeholder="input your password" size="20" maxlength="20" )  this.value='';" /></td>
     <td> </td>
     <td> </td>
     </tr>
     <tr>
     <td><label for="text_code">验证码:</label></td>
     <td><input type="text" size="" name="text_code" id="text_code" /></td>
     <td><input type="button" id="code" onclick="createCode()" name=""></td>
     </tr>
     <tr>
     <td><input type="checkbox" name="zlogin" value="1">自动登录</td>
     </tr>
     </table>
     </td>
      <tr>
      <td> </td>   
      <td><table>
       <tr>
      <td><input type="submit" name="login" value="登录" onClick="return validateLogin()"/></td>
      <td><input type="reset" name="rs" value="重置"></td>
      <td><input type="button" name="button" value="注册" onclick="window.location.href='https://www.w3school.com.cn/jsref/event_onfocus.asp'"></td>
      </tr>
     </tr>
     </table>
     </td>
     </table>
    </fieldset>
    </form>
     
    </body>
    </html>

    执行后如图

     

     



     

    展开全文
  • 当未经认证的用户访问Swagger文档时(http://localhost:8080/swagger-ui.html),页面将跳转到用户登录页面。 4.测试 现在,启动应用程序,并在浏览器地址栏输入:http://localhost:8080/swagger-ui.html 。按下回车键...

    接上篇《Apache Shiro 接管Swagger认证授权》,有热心网友反应Apache Shiro似乎太简单。针对这个问题,个人不做任何评价(一切技术服务于需求)。今天主要分享内容为:在Spring Security下如何接管Swagger的认证授权工作。

    b1651343cc55238c651ae2ebd5d8cc48.png

    1.添加依赖

    假定你对Swagger和Spring Security已经有一定的基础,现在开始检查你的项目中是否添加了Swagger和Spring Security的依赖。以Maven为例,向pom.xml文件添加如下配置信息:

    org.springframework.boot    spring-boot-starter-securityio.springfox    springfox-swagger2    2.9.2io.springfox    springfox-swagger-ui    2.9.2

    2.配置Swagger

    Swagger的配置相对比较简单,最主要的是配置其扫描的包路径,其他信息可以选配。你可以按照下列方式进行配置:

    @Configuration@EnableSwagger2public class SwaggerConfiguration {    @Bean    public Docket docket(){        return new Docket(DocumentationType.SWAGGER_2)                .pathMapping("/")                .select()                .apis(            RequestHandlerSelectors.basePackage("com.ramostear.apisecurity.controller"))                .paths(PathSelectors.any())                .build()                .apiInfo(                    new ApiInfoBuilder()                    .title("Spring Security接管Swagger认证授权")                    .description("Spring Security and Swagger")                    .version("1.0.0")                    .contact(                        new Contact(                            "树下魅狐",                            "https://www.ramostear.com",                            "ramostear@163.com"                        )                    ).build()                );    }}

    Swagger的配置基本与上一篇的内容一致,只是调整了basePackage的路径。

    3.配置Spring Security

    Spring Security的配置是本篇的重点。首先,基于内存设置两个登录时使用的账号,然后再将Swagger的资源路径添加到Spring Security的Authorize Filters中。创建Spring Security配置类,并添加如下代码(如果你已经配置过Spring Security,且基于JDBC获得登录账号信息,那么可以省略账户的配置)。

    SpringSecurityConfiguration.java

    @Configuration@EnableWebSecuritypublic class SpringSecurityConfiguration extends WebSecurityConfigurerAdapter {    private static final String[] AUTH_LIST = {      "/v2/api-docs",      "/configuration/ui",      "/swagger-resources/**",      "/configuration/security",      "/swagger-ui.html",      "/webjars/**"    };    @Override    protected void configure(AuthenticationManagerBuilder auth) throws Exception {        auth.inMemoryAuthentication()            .passwordEncoder(passwordEncoder())            .withUser("user")            .password(passwordEncoder().encode("password"))            .roles("USER");    }    @Override    protected void configure(HttpSecurity http) throws Exception {        http.authorizeRequests()            .antMatchers(AUTH_LIST)            .authenticated()            .and()            .formLogin()            .and()            .httpBasic();    }    @Bean    public PasswordEncoder passwordEncoder(){        return new BCryptPasswordEncoder();    }}

    在配置类中,AUTH_LIST数组存放了Swagger需要加入Spring Security认证的URL:

    private static final String[] AUTH_LIST = {      "/v2/api-docs",      "/swagger-resources/**",      "/swagger-ui.html",      "/webjars/**"    };

    这和Apache Shiro中的配置如出一辙,下面是Apache Shiro中配置Swagger的代码:

    @Beanpublic ShiroFilterFactoryBean shiroFilterFactoryBean(SecurityManager securityManager){    ShiroFilterFactoryBean filterFactoryBean = new ShiroFilterFactoryBean();    Map filterChainDefinition = new LinkedHashMap<>();    filterChainDefinition.put("/swagger-ui.html","authc");    filterChainDefinition.put("/v2/**","authc");    filterChainDefinition.put("/swagger-resources/**","authc");    filterFactoryBean.setFilterChainDefinitionMap(filterChainDefinition);    return filterFactoryBean;}

    让Spring Security接管Swagger认证授权的核心是configure(HttpSecurity http)方法:

    @Overrideprotected void configure(HttpSecurity http) throws Exception {    http.authorizeRequests()        .antMatchers(AUTH_LIST)        .authenticated()        .and()        .httpBasic();}

    只需将Swagger的相关URLs加入到Spring Security认证过滤链中即可。当未经认证的用户访问Swagger文档时(http://localhost:8080/swagger-ui.html),页面将跳转到用户登录页面。

    4.测试

    现在,启动应用程序,并在浏览器地址栏输入:http://localhost:8080/swagger-ui.html 。按下回车键后,页面被跳转到登录页面。

    79f13a0a367dfd254c3b25a4caed8660.png

    接下来,使用之前配置的账号和密码登录(用户名:user,密码:password)。成功登录后,便可浏览Swagger文档页面信息。

    3307505be448645634d17237505564f4.png

    通过下面的动态图片,你可以更直观的了解测试过程:

    c9d460f5db074f61f28ba60e5f261e92.gif

    5.总结

    本文详细介绍了在Spring Boot下,如果使用Spring Security接管Swagger默认的身份认证工作。通过与Apache Shiro管理Swagger认证授权会发现,Spring Security和Apache Shiro管理Swagger权限的逻辑基本一致,即将Swagger的URLs加入到各自的认证和授权过滤链中,当用户访问Swagger对应的资源时,Apache Shiro和Spring Security都会对当前请求路径进行检查(包括用户是否登录,当前用户是否有权限访问url)。

    展开全文
  • 登录页面HTML代码

    2018-05-30 16:07:07
    登录页面代码登录页面代码登录页面代码登录页面代码登录页面代码登录页面代码
  • HTML5登录页面是一款采用电子邮件跟密码的网站登录页面代码下载。
  • html简单登录页面代码

    万次阅读 2018-06-16 10:18:58
    图片必须是在Imges下的否则显示不出来(复制代码的话把图片换成你的图片就好了) 代码如下 &lt;html&gt; &lt;head&gt; &lt;title&gt;tes
  • 登录页面代码(html+css).zip
  • 登录注册HTML页面代码

    千次阅读 2021-01-06 17:29:23
    创建register.html文件,录入如下代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> form { width:100%;
  • 登录页面html代码

    2014-05-21 15:58:33
    应用html 编写登录页面,涉及web服务器的登录与数据库的查找
  • HTML163网易邮箱登录页面代码 input标签
  • 大家在浏览网站时有没有发现,几乎每个网站都会要求你注册或登录,那作为一个前端开发人员,你知道HTML登录页面怎么制作吗?这篇文章就给大家分享一个由HTML 和CSS实现的炫酷的登录页面代码,有一定的实用价值,感...
  • 登录页面代码

    2020-05-14 16:06:38
    登录页面代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>撩课-喜欢IT,就上撩课(itlike.com)</title> <link rel="shortcut icon" ...
  • login.html我们在此页面对我们的表单内容做了JS判断对表单做了css布局放入了我们yanzhengma.php,验证码文件html>登陆界面functionfoo(){if(myform.name.value==""){alert("请输入用户名");myform.name.focus();...
  • 登录页面代码html

    千次阅读 2016-08-13 14:38:57
    DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
  • 几乎每个网站都会有登录页面,那你知道如何写HTML登录页面吗?这篇文章就和大家分享一个HTML简单登录界面的代码,有一定的参考价值,感兴趣的朋友可以看看。实例:制作一个HTML登录页面,包含邮箱,登录密码,立即...
  • html】【一个简单的用户登录页面代码

    万次阅读 多人点赞 2018-03-15 15:52:49
    结果代码&lt;!DOCTYPE html&...用户登录.html&lt;/title&gt; &lt;meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&gt; &lt;met
  • html5+css3登录注册表单切换页面代码.zip
  • 手机登录页面代码

    2018-09-11 15:54:00
    PE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery.js"></script> <scri.....
  • HTML5Canvas知乎登录页面动态线条背景动画代码
  • 登录页 login Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production ...
  • 该楼层疑似违规已被系统折叠隐藏此楼查看此楼给你一个我五年多前的代码吧。longin.html无标题文档用户名:密码: longin.phprequire '../inc/config.php'; $n = $_POST['adminname'];$p = md5($_POST['adminpwd']); ...
  • 效果图 用户登录.html
  • html5星空背景的登录页面带粒子特效代码帮运工一枚,仅供学习,不供商用
  • 简单WEB登录页面代码实现

    千次阅读 2020-03-03 20:57:40
    longin.html登录页面,此处action引用**/**类型的地址,JSP可以用${ pageContext.request.contextPath }/LS <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR...
  • 基于js和html5的 登陆界面源码 仅供参考
  • 如何制作一个简单的HTML登录页面(附代码

    千次阅读 多人点赞 2020-05-26 19:43:44
    几乎每个网站都会有登录页面,那你知道如何写HTML登录页面吗?这篇文章就和大家分享一个HTML简单登录界面的代码,有一定的参考价值,感兴趣的朋友可以看看。 实例:制作一个HTML登录页面,包含邮箱,登录密码,立即...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,542
精华内容 1,416
关键字:

html登录页面代码