登录页面的开发2

JS逻辑的开发

User-login: index.js

00:54

'use strict';
require('./index.css');
require('page/common/nav-simple/index.js');
var _user   = require('service/user-service.js');
var _mm     = require('util/mm.js');

var page = {
	init: function(){

	}
};

$(function()){
	page.init();
});

出错信息隐藏

01:39 出错信息隐藏

User-login.css:

/* 错误提示框 */
.user-con .user-box .error-item{
    position: relative;
    padding: 4px 0 4px 40px;
    margin-bottom: 10px;
    border: 1px solid red;
    color: red;
    background: #fde9e9;
    display: none;
}

User-login/index.js逻辑处理

/*
* @Author: Rosen
* @Date:   2017-05-08 22:26:19
* @Last Modified by:   Rosen
* @Last Modified time: 2017-05-21 22:36:14
*/

'use strict';
require('./index.css');
require('page/common/nav-simple/index.js');
var _user   = require('service/user-service.js');
var _mm     = require('util/mm.js');

// 表单里的错误提示
var formError = {
    show : function(errMsg){
        $('.error-item').show().find('.err-msg').text(errMsg);
    },
    hide : function(){
        $('.error-item').hide().find('.err-msg').text('');
    }
};

// page 逻辑部分
var page = {
    init: function(){
        this.bindEvent();
    },
    bindEvent : function(){
        var _this = this;
        // 登录按钮的点击
        $('#submit').click(function(){
            _this.submit();
        });
        // 如果按下回车，也进行提交
        $('.user-content').keyup(function(e){
            // keyCode == 13 表示回车键
            if(e.keyCode === 13){
                _this.submit();
            }
        });
    },
    // 提交表单
    submit : function(){
        var formData = {
                username : $.trim($('#username').val()),
                password : $.trim($('#password').val())
            },
            // 表单验证结果
            validateResult = this.formValidate(formData);
        // 验证成功
        if(validateResult.status){
            _user.login(formData, function(res){
                window.location.href = _mm.getUrlParam('redirect') || './index.html';
            }, function(errMsg){
                formError.show(errMsg);
            });
        }
        // 验证失败
        else{
            // 错误提示
            formError.show(validateResult.msg);
        }

    },
    // 表单字段的验证
    formValidate : function(formData){
        var result = {
            status  : false,
            msg     : ''
        };
        if(!_mm.validate(formData.username, 'require')){
            result.msg = '用户名不能为空';
            return result;
        }
        if(!_mm.validate(formData.password, 'require')){
            result.msg = '密码不能为空';
            return result;
        }
        // 通过验证，返回正确提示
        result.status   = true;
        result.msg      = '验证通过';
        return result;
    }
};
$(function(){
    page.init();
});

user-service中添加函数

在service/user-service中添加函数login 10:43

// 用户登录
   login : function(userInfo, resolve, reject){
       _mm.request({
           url     : _mm.getServerUrl('/user/login.do'),
           data    : userInfo,
           method  : 'POST',
           success : resolve,
           error   : reject
       });
   },

然后本地输 一个用户名、密码，会发现 NOT FOUND ,初步验证成功

测试验证

16：14 打开代理软件Charles

在localhost:8088中点击右键，打开map remote

16：54

这时再输入用户名、密码就可以访问了。（rosen,123456)