Vue.js 用户信息显示 - 后端数据获取与渲染 - 常规

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
        \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\n<head>\n    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/ >\n    <title>Vue.js 用户信息显示 - 后端数据获取与渲染</title>\n    <link href=\"css/style.css\" rel=\"stylesheet\" type=\"text/css\"/ >\n    <script language=\"JavaScript\" src=\"js/jquery.js\"/ ></script>\n    <!--引入vue2插件-->\n    <script src=\"js/vue.js\" type=\"text/javascript\"/ ></script>\n    <!--引入axios插件-->\n    <script src=\"js/axios.min.js\" type=\"text/javascript\"/ ></script>\n    <!--引入教师提供的axios的全局配置-->\n    <script src=\"js/my_base_config.js\" type=\"text/javascript\"/ ></script>\n    <script type=\"text/javascript\">\n        $(function () {\n            //顶部导航切换\n            $(\"\.nav li a\").click(function () {\n                $(\"\.nav li a.selected\").removeClass(\"selected\")\n                $(this).addClass(\"selected\");\n            })\n        })\n    </script>\n\n\n</head>\n\n<body style=\"background:url(images/topbg.gif) repeat-x;\">\n<div id=\"app\">\n\n    <div class=\"topleft\">\n        <a href=\"main.html\" target=\"_parent\"><img src=\"images/logo.png\" title=\"系统首页\"/ ></a>\n    </div>\n\n    <ul class=\"nav\">\n        <li><a href=\"default.html\" target=\"rightFrame\" class=\"selected\"><img src=\"images/icon01.png\" title=\"工作台\"/ >\n            <h2>工作台</h2></a></li>\n        <li><a href=\"imgtable.html\" target=\"rightFrame\"><img src=\"images/icon02.png\" title=\"模型管理\"/ >\n            <h2>模型管理</h2></a></li>\n        <li><a href=\"imglist.html\" target=\"rightFrame\"><img src=\"images/icon03.png\" title=\"模块设计\"/ >\n            <h2>模块设计</h2></a></li>\n        <li><a href=\"tools.html\" target=\"rightFrame\"><img src=\"images/icon04.png\" title=\"常用工具\"/ >\n            <h2>常用工具</h2></a></li>\n        <li><a href=\"computer.html\" target=\"rightFrame\"><img src=\"images/icon05.png\" title=\"文件管理\"/ >\n            <h2>文件管理</h2></a></li>\n        <li><a href=\"tab.html\" target=\"rightFrame\"><img src=\"images/icon06.png\" title=\"系统设置\"/ >\n            <h2>系统设置</h2></a></li>\n    </ul>\n\n    <div class=\"topright\">\n        <ul>\n            <li><span><img src=\"images/help.png\" title=\"帮助\" class=\"helpimg\"/ ></span><a href=\"#\">帮助</a></li>\n            <li><a href=\"#\">关于</a></li>\n            <li><a href=\"login.html\" target=\"_parent\">退出</a></li>\n        </ul>\n\n        <div class=\"user\">\n            <span>{{admin.name}}</span>\n            <i>消息</i>\n            <b>5</b>\n        </div>\n\n    </div>\n</div>\n<script>\n    new Vue({\n        el: '#app',\n        data: {\n            admin:{},//用于接受后端接口的当前登录账户的信息\n        },\n        methods:{\n            readSession(){//读取当前登录账户\n                axios\n                    .get(\"/backstage/admin/session\")\n                    .then(response=>{//获取返回的信息\n                        const data=response.data;//获取服务器返回的json字符串（axios已经默认转为js对象）\n                        if(data.success){//如果成功获取\n                           this.admin =  data.data;//获取登录账户的信息\n                        }else{\n                            alert(data.msg);\n                        }\n                    });\n            }\n        },\n        mounted(){//页面初始化的时候就执行\n            this.readSession();\n        }\n    });\n</script>\n</body>\n</html>\n\n为什么<span>{{admin.name}}</span>这串代码的后端信息没有改变\n\n\n根据提供的代码，可以看到Vue实例中的`admin`对象是通过后端接口获取的当前登录账户的信息。在`mounted`钩子函数中，调用了`readSession`方法来获取后端数据并将其赋值给`admin`对象。\n\n如果`{{admin.name}}`没有改变，可能有以下几个原因：\n\n1. 后端接口返回的数据没有包含`name`属性。可以检查后端接口返回的数据结构，确认是否包含`name`属性。\n2. 后端接口返回的数据没有成功获取。可以在浏览器的开发者工具中查看网络请求，确认后端接口是否返回了正确的数据。\n3. 前端代码没有正确执行。可以在浏览器的控制台中查看是否有任何错误提示，以及`readSession`方法是否被正确调用。\n\n建议检查以上几个方面，确定问题出在哪里。如果还有其他问题，请提供更多相关的代码和错误信息，以便更详细地排查问题。