frame框架初步解析

最新推荐文章于 2023-07-18 17:14:30 发布

辛聪明

最新推荐文章于 2023-07-18 17:14:30 发布

阅读量1.1k

点赞数 1

分类专栏： java

本文链接：https://blog.csdn.net/qq_41861558/article/details/100886321

版权

java 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

需求：

在登陆界面输入帐号密码，点击登陆按钮之后，在数据库查询账号密码是否正确。正确即登陆成功，错误即无法登陆。

简单分析：

在html页面表单输入账号密码，使用serializeArray()方法获取表单全部信息。在按钮提交事件中通过ajax方式提交到指定url，在controller类中进行接收帐号密码，并通过mybatis技术在数据库中查询是否正确。最后把信息返回到回调函数。

步骤分析：

1、登陆界面login.html

注：form表单id为：newForm，登陆按钮的id是btn_login

这里按钮并没有声明点击事件。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">      <!-- 引入thymleaf约束 -->
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <script type="text/javascript" src="/js/sys.js"></script>    <!-- 引入sys.js资源 -->
</head>
<body style="text-align:center">
        <form id="newForm">
            <p>用户名：<input type="text" name="username" id="username" value="辛聪明" required><br></p>
            <p>密  码：<input type="password" name="password" id="password" value="123" required><br></p>
            <p><button type="submit" id="btn_login">登陆</button></p>
        </form>
    <th:block th:replace="common/include">           <!-- 引入jquery资源 -->
    </th:block>
    <th:block th:replace="js/login_js">             <!-- 引入login_js，注：放在最底下 -->
    </th:block>
</body>
</html>

2、login_js页面

注：1、文档就绪事件：$(document)是一个选择器，加载了所有的html资源，$(document).ready 里的代码是在页面内容都加载完才执行的，所以放在login_js最下面

2、文件就绪事件调用了Login.init()方法，在Login.init()方法中主要调用了sys.js中的Sys.initSubmit()方法，并对此方法传递了“提交参数”和“提交方法”。

3、submitParam（）：提交参数、submitHandler：提交方法，具体提交方法内容封装在了 Sys.submitForm()中

"ajaxUrl": "/login.json"-->提交url

<script type="text/javascript">
    var Login = function () {
        return {
            //main function to initiate the module
            init: function () {
                //初始化事件
                this.initEvent();
                //初始化提交
                Sys
                    .initSubmit({
                        //提交参数
                        submitParam: {
                            "initForm": function () {
                                return true;
                            },
                            "btnSubmitingVal": "登录中...",
                            "btnVal":"登录",
                            "btnId": "btnLogin",
                            //"ajaxType":"post";
                            "ajaxUrl": "/login.json",
                            //"formId" : "newForm",
                            //"successTip":"操作成功！",
                            "successCallback": function (resp) {
                                if (!resp.success) {
                                    $("#spanErrMsg").html(resp.resultMsg);
                                    return;
                                }
                                location.href = "/index.html";
                            }
                        },
                        //提交方法
                        submitHandler: Sys.submitForm
                    });
            },
            /**
             * 初始化事件
             */
            initEvent: function () {
            }
        };
    }();
//加载完毕以后执行
    $(document).ready(function () {
        Login.init();
    });
</script>

3、sys.js是封装了提交方法等的JavaScript文件（只展示本节用到的代码）

（1）curParam是形式参数，实际参数是submitParam、submitHandler

（2）$('#' + param.formId)                          //按钮提交事件，当点击登陆，调param.submitHandler中ajax方式提交数据
            .submit(function(){
                param.submitHandler(param.submitParam);
            });

（3）serializeObject()是自己设置的function，并用$.each()遍历，返回指定表单内所有内容

var Sys = {
initSubmit: function (curParam) {
        console.log(JSON.stringify(curParam));  //在浏览器控制台打印出curParam的json格式
        var defaultParam = {
            formId: "newForm",
            rules: {},
            submitHandler: function () {
                Sys.submitForm(curParam.submitParam);
            }
        };
        var param = $.extend({}, defaultParam, curParam);       //将defaultParam, curParam声明为全局变量
        var form1 = $('#' + param.formId);

        $('#' + param.formId)                //按钮的提交事件
            .submit(function(){
                param.submitHandler(param.submitParam);
            });
    },

    submitForm: function (curParam) {
        if (!curParam.ajaxUrl) {
            alert("请设置ajaxUrl！");
            return;
        }
        if (!curParam.successUrl && !curParam.successCallback) {
            alert("请设置successUrl 或 successCallback！");
            return;
        }
        var defaultParam = {
            dialogType: "alert",
            btnSubmitingVal: "保存中...",
            btnVal: "保存",
            btnId: "btnSave",
            ajaxType: "post",
            formId: "newForm",
            // ajaxUrl:"",
            // successUrl:"",
            successTip: "操作成功!"

        };
        var param = $.extend({}, defaultParam, curParam);
        // alert(JSON.stringify(param));

        var postData = JSON.stringify($("#" + param.formId).serializeObject());
        if (param.buildData) {
            postData = param.buildData();
        }
        // 调用初始化表单方法
        if (param.initForm) {
            if (!param.initForm()) {
                return;
            }
        }
        //按钮的文本
        $("#" + param.btnId).html(param.btnSubmitingVal).attr("disabled", true);

        $.ajax({
            url: param.ajaxUrl,
            type: param.ajaxType,
            dataType: "json",               //返回json类型数据
            contentType: "application/json",             //提交数据类型
            data: postData,                              //提交的数据
            success: function (resp) {                   //回调函数，resp是返回的数据
                $("#" + param.btnId).html(param.btnVal).removeAttr("disabled");
                if (param.successCallback) {
                    param.successCallback(resp);
                    return;
                }
                if (!resp.success) {
                    // 提示信息
                    Sys.alert(resp.resultMsg);
                    return;
                }
                Sys.alertSuccess({
                    "successMsg": param.successTip,
                    "callbackFunc": function () {
                        location.href = param.successUrl;
                    }
                });
            },
            error: function (resp) {
                // location.href =
                // "/admin/err/500.html";
                alert(resp.resultCode);
            }
        });
    }
}
$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();              //序列化表单，返回一个array类型
    $.each(a, function() {                      //通过遍历将a数组中数据放在o中
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [ o[this.name] ];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
}

4、indexController: 接受数据，处理数据

（1）@RequestMapping(value = {"login.json"}) 对应 "ajaxUrl

（2）loginData.get（"key"）方法得到传递过来json数据中key所对应的value，即得到login.html中输入的帐号和密码

（3）User user = userService.selByName(name); 通过userService服务类的selByName()方法查询帐号在数据库中对应的密码，返回查询到信息封装到user中

package wang.doug.frame.controller;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import wang.doug.frame.common.BaseController;
import wang.doug.frame.common.BaseResult;
import wang.doug.frame.model.User;
import wang.doug.frame.service.UserService;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Map;

/**
 * 登录页面、首页
 */
@Controller
@RequestMapping("/")
public class IndexController extends BaseController {
    private static final Log logger = LogFactory.getLog(IndexController.class);
    @Resource
    UserService userService;
    /**
     * 登录页面
     * @param model
     * @return
     */
    @RequestMapping(value = {"", "login.html"})
    public String toLogin(Model model) {
        return "login";
    }

    /**
     * 登录接口
     *
     * @param model
     * @param loginData JSON格式的登录信息，可以使用Java类描述，也可以使用Map
     * @return
     */
    @RequestMapping(value = {"login.json"})
    @ResponseBody
    public BaseResult login(Model model, @RequestBody Map<String, Object> loginData
    ) {
        //TODO： 从loginData中获取账号和密码，进行验证，根据验证结果返回信息
        //控制类，根据你输入的账号密码与数据库对比
        String name=loginData.get("loginName").toString();
        String password = loginData.get("loginPwd").toString();
     
        User user = userService.selByName(name);

        BaseResult baseResult = new BaseResult();
        if (user != null){
            if (user.getPassword().equals(password)){
                baseResult.setSuccess(true);
            }else{
                baseResult.setSuccess(false);
            }
        }
        return baseResult;
    }
}

辛聪明

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
frame框架初步解析

需求：在登陆界面输入帐号密码，点击登陆按钮之后，在数据库查询账号密码是否正确。正确即登陆成功，错误即无法登陆。简单分析：在html页面表单输入账号密码，使用serializeArray()方法获取表单全部信息。在按钮提交事件中通过ajax方式提交到指定url，在controller类中进行接收帐号密码，并通过mybatis技术在数据库中查询是否正确。最后把信息返回到回调函数。步骤分...
复制链接

扫一扫