Как использовать JQuery EasyUI и Spring Boot для создания простых страниц регистрации / входа в систему с user / pass, сохраненным в json? - PullRequest
Новая
       24

Как использовать JQuery EasyUI и Spring Boot для создания простых страниц регистрации / входа в систему с user / pass, сохраненным в json?

1 голос
/ 05 мая 2019

Мой начальник попросил меня создать несколько страниц для демонстрации клиенту, и время ограничено. Он просто помог мне настроить среду EasyUI с Spring Boot (плагин Eclipse STS3) и попросил меня создать страницу регистрации, чтобы записать введенное имя пользователя / пароль в файл JSON. А также сделать страницу входа для приема ввода и проверки с сохраненным именем пользователя / паролем в файле JSON.

Поскольку время ограничено, я должен найти несколько примеров для начала. Я нашел один пример (https://www.jianshu.com/p/54353cc566df), и его страница очень похожа на то, что мне нужно. Но это не совсем то же самое. Он использует базу данных SQL для хранения имени пользователя / пароля.

Также используется PHP-сервер, который покажет ошибку

Решено [Org.springframework.web.HttpRequestMethodNotSupportedException: Метод запроса 'POST' не поддерживается]

когда я запускаю его, используя Run As -> Spring Boot App в Eclipse ...

Ниже приведен код из примера. 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
        <script type="text/javascript" src="easyui/jquery.min.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
        <title>registerDemo</title>
        <style>
            .regContainer {
                width:360px;
                height: 270px;
                border: 1px solid lightblue;
                border-radius: 5px;
                text-align: center;
            }
            .regInput {
                margin-top: 20px;
            }
            .regTitle {
                width:100%;
                margin-top: 10px;
                text-align: center;
                font-family: '黑体';
                font-size: 16px;
            }
            .regDivide {
                height:1px;
                width:100%;
                background: lightblue;
                margin: 10px 0 10px 0
            }
        </style>
    </head>
    <body>
        <div class="contianer">
            <form id='frmRegister' method="post">
                <div class="regContainer">
                    <div class="regTitle">FORM组件（注册）</div>
                    <div class="regDivide"></div>
                    <div class="regInput">
                        <input id="user" name="user" class="easyui-textbox"  
                          data-options="iconCls:'icon-man',width:250,height:35,prompt:'输入用户名'">
                    </div>
                    <div class="regInput">
                        <input id="pwd" name="pwd" class="easyui-textbox" 
                          data-options="iconCls:'icon-lock',width:250,height:35,type:'password'">
                    </div>
                    <div class="regInput">
                        <input id="pwd2" name="pwd2" class="easyui-textbox" 
                          data-options="iconCls:'icon-lock',width:250,height:35,type:'password'">
                    </div>
                    <div class="regInput">
                        <a class="easyui-linkbutton" onclick="regUser();" href="javascript:void(0)" 
                          data-options="iconCls:'icon-add',width:80,height:30">
                          注册
                        </a>
                    </div>
                </div>
            </form>
        </div>

        <script>
            $("#frmRegister").form({
                url:"model/registerUser.php",
                onSubmit:function() {
                    /* 获取用户名密码，$.trim过滤空格、tab等空白字符 */
                    var name = $.trim($("#user").textbox("getValue"));
                    var pwd = $.trim($("#pwd").textbox("getValue"));
                    var pwd2 = $.trim($("#pwd2").textbox("getValue"));
                    if (name == "" || pwd == "" || pwd2 == "") {
                        alert("用户名或密码为空");
                        return false;
                    }
                    else if (pwd != pwd2) {
                        alert("两次输入的密码不同");
                        return false;
                    }
                    return true;
                },
                success:function(data) {
                    var data = eval('(' + data + ')');
                    if (data.success == 1) {
                        alert("注册成功");
                    }
                    else {
                        alert("注册失败：" + data.msg);
                    }
                }
            });

            function regUser() {
                $("#frmRegister").form("submit");
            }

        </script>
    </body>
</html>

registerUser.php: 

<?php
/* 
 * 本模块实现用户注册 
 */

/* 以下是数据库信息 */
define ("DATABASE","mysql");
define ("DATABASE_NAME","easyuidemo2");
define ("DATABASE_USER","root");
define ("DATABASE_PASSWORD","12345");
define("DATABASE_HOST","localhost");
define ("DATABASE_TABLE_NAME", "demo_user");
define("DSN", DATABASE . ":" . "host=" . DATABASE_HOST . ";dbname=" . DATABASE_NAME . ";charset=utf8");

header("Content-Type:text/html; charset=utf-8");
date_default_timezone_set("Asia/Shanghai");

/* 定义返回给请求页面的反馈数据包 */
$result= Array("success"=>0, "msg"=>"");

$user = trim(filter_input(INPUT_POST, "user"));
$pwd = trim(filter_input(INPUT_POST, "pwd"));
$pwd2 = trim(filter_input(INPUT_POST, "pwd2"));

if (!$user || !$pwd || !$pwd2) {
    $result["success"] = 0;
    $result["msg"] = "用户名或密码不能为空";
    echo json_encode($result);
    exit();
}
else if (!$pwd != !$pwd2) {
    $result["success"] = 0;
    $result["msg"] = "两次输入的密码不同";
    echo json_encode($result);
    exit();
}

try {
    /* 通过pdo来操作数据库 */
    $db_pdo = new PDO(DSN, DATABASE_USER, DATABASE_PASSWORD);
    $db_pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

    /* 获取当前日期时间 */
    $d = date("Y-m-d H:i:s",time());

    $sql = "INSERT INTO " . DATABASE_TABLE_NAME . " VALUES (NULL, :user, :pwd, '$d');";
    $stmt = $db_pdo->prepare($sql);

    if (!$stmt) {
        throw new Exception("注册用户失败（数据库连接错误）");
    }
    if (!$stmt->execute(array(":user"=>$user, ":pwd"=>$pwd))) {
        throw new Exception("注册用户失败（数据库赋值错误）");
    }
    $result["success"] = 1;
    $result["msg"] = "用户注册成功！";
    echo json_encode($result);

} catch (Exception $ex) {
    $result["success"] = 0;
    /* $ex->getMessage()用于获取try块中构造Exception时赋予的错误说明 */
    $result["msg"] = $ex->getMessage();
    echo json_encode($result);
}

Я не знаю, как преобразовать это, чтобы заставить его записывать имя пользователя / пароль в файл JSON вместо SQL? Также, как исправить эту ошибку «Запрос метода« POST »не поддерживается»?

...