> 웹 프론트엔드 > 레이이 튜토리얼 > Layui 로그인 인터페이스 미화 효과 표시

Layui 로그인 인터페이스 미화 효과 표시

王林
풀어 주다: 2021-01-22 11:37:24
앞으로
5829명이 탐색했습니다.

Layui 로그인 인터페이스 미화 효과 표시

전체 코드는 다음과 같습니다.

(동영상 공유 학습: 프로그래밍 소개)

1 프론트엔드 html

login.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport"

    content="width=device-width, initial-scale=1, maximum-scale=1">

<title>登录</title>

<link rel="stylesheet" href="/static/css/layui.css">

<link rel="stylesheet" href="/static/css/login.css">

</head>

<body>

    <p class="clear box layui-main login">

   

        <form class="layui-form layui-form-pane1" action="ulogin" method="post">

            <p class="layui-form-item">

                <label class="layui-form-label">用户名:</label>

                <p class="layui-input-block">

                    <input type="text" name="user.name" lay-verify="uname" required

                        placeholder="请输入用户名" autocomplete="off" class="layui-input">${UnameErrMsg?if_exists}

                </p>

            </p>

            <p class="layui-form-item">

                <label class="layui-form-label">密码:</label>

                <p class="layui-input-block">

                    <input type="password" name="user.pwd" lay-verify="" required

                        placeholder="请输入密码" autocomplete="off" class="layui-input">${PwdErrMsg?if_exists}

                </p>

            </p>

            <p class="layui-form-item">

                <label class="layui-form-label">验证码:</label>

                <p class="layui-input-block">

                    <input type="text" name="yzm" lay-verify="" required

                        placeholder="请输入验证码" autocomplete="off" class="layui-input">${yzmErrMsg?if_exists}<br>

                <a href="/login.html"><img src="/static/imghw/default1.png"  data-src="/yzm"  class="lazy"  alt="验证码" ></a>

                </p>

            </p>

            <p class="layui-form-item">

            <label class="layui-form-label"></label>

                <button class="layui-btn layui-btn-normal btn-center" type="submit">登录</button>

            </p>

        </form>

    </p>

   

    <script src="/static/js/layui.js"></script>

</body>

</html>

로그인 후 복사

로그인 인터페이스 스타일

1

2

3

4

5

6

7

8

9

10

11

12

13

@CHARSET "UTF-8";

body{

    background-image:url(/static/images/login-bg.png);

}

.login {

    padding-top: 15%;

    width: 26%;

}

   

.btn-center{

    text-center:center;

    margin:0 auto;

}

로그인 후 복사

2.

그 중 로그인 메소드와 ulogin 메소드

컨트롤러 패키지의 IndexController 클래스

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

package cn.pangpython.controller;

   

import com.jfinal.aop.Before;

import com.jfinal.core.Controller;

import com.jfinal.ext.kit.SessionIdKit;

   

import cn.pangpython.model.User;

import cn.pangpython.utils.DateUtils;

import cn.pangpython.utils.MD5;

import cn.pangpython.validate.RegistValidator;

import cn.pangpython.validate.UserLoginValidator;

   

/**

 * @author pangPython

 * 主页控制器

 */

public class IndexController extends Controller {

    public void index(){

        renderText("index");

    }

   

    //渲染注册页面

    public void regpage(){

        render("regist.html");

    }

   

    //处理注册

    @Before(RegistValidator.class)

    public void regist(){

        String pwd = getPara("user.pwd");

        String confirm = getPara("reg.confirm");

   

        //验证码验证

        boolean result = validateCaptcha("reg.yzm");

        if(!result){

            setAttr("yzmErrMsg", "验证码错误!");

            render("regist.html");

            return;

        }

        //确认密码验证

        if(!pwd.equals(confirm)){

            setAttr("confirmErrMsg", "请正确填写确认密码!");

            render("regist.html");

            return;

        }

   

        String uname = getPara("user.name");

        User user = getModel(User.class);

        String reg_time = DateUtils.dateToUnixTimestamp(DateUtils.getNowTime())+"";

        //使用用户注册日期作为md5密码加密的盐值,可节省一个salt数据库字段

        pwd = MD5.GetMD5Code(pwd+reg_time);

   

        //给user实体类填充数据

        user.setName(uname);

        user.setPwd(pwd);

        user.setRegTime(reg_time);

   

        //使用jfinal的保存操作

        user.save();

   

        renderText("注册成功!");

    }

   

    public void login(){

        render("login.html");

    }

   

    @Before(UserLoginValidator.class)

    public void ulogin(){

        // 验证码结果

        boolean result = validateCaptcha("yzm");

        if (!result) {

            setAttr("yzmErrMsg", "验证码错误!");

            render("login.html");

            return;

        }

   

        String uname = getPara("user.name");

        String sql = "select * from user where name = ? limit 1";

   

        User user = User.dao.findFirst(sql, uname);

        if (user != null) {

            String pwd = MD5.GetMD5Code(getPara("user.pwd") + user.getRegTime());

   

            if (user.getPwd().equals(pwd)) {

   

                // 生成唯一标识

                String sessionId = SessionIdKit.me().generate(getRequest());

                // 设置服务器端session

                setSessionAttr(sessionId, user);

                // 设置用户端cookie

                setCookie("cuser", sessionId, 60000);

                //redirect("/user");

                renderText("登录成功!");

   

            } else {

                // 密码不正确

                setAttr("UnameErrMsg", "用户名或密码不正确!");

                render("login.html");

            }

   

        } else {

            // 用户名不存在

            setAttr("UnameErrMsg", "用户名不存在!");

            render("login.html");

        }

   

    }

   

}

로그인 후 복사

3. 로그인 유효성 검사기 쓰기

validator 패키지의 UserLoginValidator는 JFinal의 Validator

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

import com.jfinal.core.Controller;

import com.jfinal.validate.Validator;

   

public class UserLoginValidator extends Validator {

   

    @Override

    protected void handleError(Controller controller) {

        controller.keepPara();

   

    }

   

    @Override

    protected void validate(Controller arg0) {

        validateRequired("user.name", "UnameErrMsg", "请输入用户名!");

        validateRequired("user.pwd", "PwdErrMsg", "请输入密码!");

        validateRequired("yzm", "yzmErrMsg", "请输入验证码!");

    }

   

}

로그인 후 복사

효과 표시를 상속합니다.

관련 추천: Layui 로그인 인터페이스 미화 효과 표시layui

Layui 로그인 인터페이스 미화 효과 표시

위 내용은 Layui 로그인 인터페이스 미화 효과 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿