登录后不显示欢迎和退出

Question

老师，不知道为什么，我登录后导航nav.html不显示左上角的欢迎和退出
这是nav.html

<div class="nav">
    <div class="w">
        <div class="user-info">
            <span class="user not-login">
                <span class="link js-login">登录</span>
                <span class="link js-register">注册</span>
            </span>
            <span class="user login">
                <span class="link-text js-login">
                    欢迎，<span class="username"></span>
                </span>
                <span class="link js-logout">
                    退出
                </span>
            </span>
        </div>
        <ul class="nav-list">
            <li class="nav-item">
                <a href="./cart.html" class="link">
                    <i class="fa fa-shopping-cart"></i>
                    购物车（<span class="cart-cont">0</span>）
                </a>
            </li>
            <li class="nav-item">
                <a href="./order-list.html" class="link">我的订单</a>
            </li>
            <li class="nav-item">
                <a href="./user-center.html" class="link">我的MMall</a>
            </li>
            <li class="nav-item">
                <a href="./about.html" class="link">关于MMall</a>
            </li>
        </ul>
    </div>
</div>

这是nav的index.js

require('./index.css');

var _mm = require('util/mm.js');
var _user = require('service/user-service.js');
var _cart = require('service/cart-service.js');

// 导航
var nav = {
    init: function () {
        this.bindEvent();
        this.loadUserInfo();
        this.loadCartCount();
        // 为什么要return this还是没懂
        return this;
    },
    bindEvent: function () {
        // 登录点击事件
        $('.js-login').click(function () {
            _mm.doLogin();
        });
        // 注册点击事件
        $('.js-register').click(function () {
            window.location.href = './user-register.html';
        });
        // 退出点击事件
        $('.js-logout').click(function () {
            _user.logout(function (res) {
                window.location.reload();
            }), function (errMsg) {
                _mm.errorTips(errMsg);
            };
        });
    },
    // 加载用户信息
    loadUserInfo: function () {
        _user.checkLogin(function (res) {
            $('.user.not-login').hide().siblings('.user.login').show()
                .find('.username').text(res.username);
        }, function (errMsg) {
            // do nothing
        });
    },
    // 加载购物车数量
    loadCartCount: function () {
        _cart.getCartCount(function (res) {
            $('.cart-count').text(res || 0);
        }), function (errMsg) {
            $('.cart-count').text(0);
        };
    }
};

module.exports = nav.init();

这是nav的index.css

.nav{
    background: #eee;
    height: 30px;
    line-height: 30px;
}
/*用户部分*/
.nav .user{
    float: left;
}
.nav .user.login{
    display: none;
}
.nav .user .link{
    margin-right: 5px;
}
/*导航链接部分*/
.nav .nav-list{
    float: right;
}
.nav .nav-list .nav-item{
    display: inline-block;
    margin-left: 5px;
}

我的登录页面user-login.js如下：

/*console.log('hello user-login');*/
require('./index.css');
require('page/common/nav-simple/index.js');

var _mm = require('util/mm.js');
var _user = require('service/user-service.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();
});

F12后显示我根本没登录进去见第一张图，而且购物车那里还是404怎么会这样呢？
另外，我刚开启项目后，进来index.js.界面，单击登录或者注册，都不能跳转到正确的页面，会跳转到错误页面，如最后一站图所示

我的mm.js代码如下：

// 设置通用工具类
// 设置服务器地址的Host，便于改变
var conf = {
    serverHost: ''
}
// 引入JS模版引擎hogan，以渲染html
var Hogan = require('hogan.js');//hogan因版本更新，在引用时，需要将require('hogan')写成require('hogan.js')

var _mm = {
    // 请求后端数据
    request: function (param) {
        // 取不到_mm对象，因此定义_this对_mm对象进行缓存
        var _this = this;
        $.ajax({
            type: param.method || 'get',//请求方法
            url: param.url || "",//请求的文件地址
            dataType: param.type || 'json',//请求的数据类型
            data: param.data || "",//请求的数据
            // 请求成功的处理
            success: function (res) {
                // 请求成功
                if (0 === res.status) {
                    typeof  param.success === 'function' && param.success(res.data, res.msg);
                }
                // 无登录状态0，需要强制登录
                else if (10 === res.status) {
                    // 若未登录，则通过下面的doLogin进入登录页面，同时把本页面的参数传给登录页面，登陆后则可返回此页面
                    _this.doLogin();
                }
                // 请求数据失败
                else if (1 === res.status) {
                    typeof  param.error === 'function' && param.error(res.msg);
                }
            },
            // 请求失败的处理（404/503错误）
            error: function (err) {
                typeof  param.error === 'function' && param.error(err.statusText);
            }
        })
    },

    // 获取服务器地址
    getServerUrl: function(path) {
        return conf.serverHost +path;
    },

    // 获取url参数，参数一般是由key=value&key=value&key=value组成的
    getUrlParam: function(name) {
        var reg = new RegExp(('(^|&)' + name + '=([^&]*)(&|$)'));//使用正则表达式，去匹配key=value：(^|&)代表开头是空或者&符号；name代表参数；=([^&]*)(&|$)中，([^&]*)的^代表以...开头的意思，*代表匹配多个，([^&]*)整体代表如果非&就不结束匹配，(&|$)代表以&或者一个字符串的末尾$结束
        var result = window.location.search.substr(1).match(reg);//window.location.search是url中？其后的参数；substr(1)代表去掉第一个值（去掉？问号）；match(reg)代表进行通配符匹配
        return result ? decodeURIComponent(result[2]) : null;//返回值为结果，其中：decodeURIComponent(result[2])代表对结果进行解码，result的第二个值就是结果
    },

    // 编译并渲染html方法,npm install hogan --save,不要用在代码里，所以不要-dev
    renderHtml: function(htmlTemplate, data) {
        var template = Hogan.compile(htmlTemplate),//编译
            result = template.render(data);//渲染
        return result;
    },

    // 成功提示
    successTips: function(msg) {
        alert(msg || '操作成功！');
    },

    // 错误提示
    errorTips: function(msg) {
        alert(msg || '操作失败了');
    },

    // 字段的验证，支持非空、手机、邮箱的判断
    validate: function(value, type) {
        var value = $.trim(value);//对value去掉空格，并转化为字符串格式
        // 非空验证
        if ('require' === type) {
            return value;//将value强制转换为布尔值：如果value有值，则返回ture；如果value为空，则返回false
        }
        // 手机号验证
        if ('phone' === type) {
            return /^1\d{10}/.test(value);//以1开头，剩下10位数字，以$结尾，判断是否为手机号
        }
        // 邮箱格式验证
        if ('email' === type) {
            return /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/.test(value);//https://www.cnblogs.com/vs-bug/archive/2010/03/26/1696752.html查的
        }
    },

    // 统一登录处理，由当前页面跳转至登录页面，同时将当前页面地址作为参数进行传入，保证登陆后回到当前页面
    doLogin: function () {
        window.location.href = './user-login.html?redirect=' + encodeURIComponent(window.location.href);//redirect这个参数代表被强制登录时所在的页面地址；encodeURIComponent用来编码，防止redirect包含的特殊字符导致错误或截断
    },

    // 统一跳转至主页
    goHome: function () {
        window.location.href = './index.html';
    }
};

module.exports = _mm;

我的cart-service.js如下：

var _mm = require('util/mm.js');

var _cart ={
    // 获取购物车数量
    getCartCount: function (resolve, reject) {
        _mm.request({
            url: _mm.getServerUrl('/cart/get_cart_product_count.do'),
            success: resolve,
            error: reject
        });
    }
};

module.exports = _cart;

user-service.js代码如下：

var _mm = require('util/mm.js');

var _user ={
    // 用户登录
    login: function (userInfo, resolve, reject) {
        _mm.request({
            url: _mm.getServerUrl('/user/login.do'),
            data: userInfo,
            method: 'POST',
            success: resolve,
            error: reject
    });
    },
    // 检查用户名
    checkUsername: function (username, resolve, reject) {
        _mm.request({
            url: _mm.getServerUrl('/user/check_valid.do'),
            data: {
                type: 'username',
                str: username
            },
            method: 'POST',
            success: resolve,
            error: reject
        });
    },
    // 用户注册
    register: function (userInfo, resolve, reject) {
        _mm.request({
            url: _mm.getServerUrl('/user/register.do'),
            data: userInfo,
            method: 'POST',
            success: resolve,
            error: reject
        });
    },
    // 检查登录状态
    checkLogin: function (resolve, reject) {
        _mm.request({
            url: _mm.getServerUrl('/user/get_user_info.do'),
            method: 'POST',
            success: resolve,
            error: reject
        });
    },
    // 获取用户密码提示问题
    getQuestion: function (username, resolve, reject) {
        _mm.request({
            url: _mm.getServerUrl('/user/forget_get_question.do'),
            data: {
                username: username
            },
            method: 'POST',
            success: resolve,
            error: reject
        });
    },
    // 检查密码提示问题答案
    checkAnswer: function (userInfo, resolve, reject) {
        _mm.request({
            url: _mm.getServerUrl('/user/forget_check_answer.do'),
            data: userInfo,
            method: 'POST',
            success: resolve,
            error: reject
        });
    },
    // 重置密码
    resetPassword: function (userInfo, resolve, reject) {
        _mm.request({
            url: _mm.getServerUrl('/user/forget_reset_password.do'),
            data: userInfo,
            method: 'POST',
            success: resolve,
            error: reject
        });
    },
    // 登出
    logout: function (resolve, reject) {
        _mm.request({
            url: _mm.getServerUrl('/user/logout.do'),
            method: 'POST',
            success: resolve,
            error: reject
        });
    }
};
module.exports = _user;

Answer 1

Rosen 2019-01-13 08:46:04

接口用test.happymmall.com这套环境，学习之前看下群公告里的学前必读

• 提问者 xy319733580 #1

  我发现是代理的问题，我下的Charles好像有点儿不好用，设置完了text.happmmall.com也不行，后来重装了一下，清缓存，再试试就好了

• Rosen 回复 提问者 xy319733580 #2

  收到！