登陆成功后直接打开请假单的HTML发现session回话里面没有存储userID和employeeid，为啥？

相关截图：

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>请假申请单</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="/assets/element-plus/index.css">
    <!-- 引入组件库 -->
    <script src="/assets/vue/vue.global.js"></script>
    <script src="/assets/element-plus/index.full.js"></script>
    <script src="/assets/element-plus/locale/zh-cn.js"></script>
    <script src="/assets/axios/axios.js"></script>

    <style>
        .el-form {
            border: 1px solid #DCDFE6;
            width: 600px;
            margin: 180px auto;
            padding: 35px 35px 15px 35px;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            box-shadow: 0 0 25px #909399;
        }
    </style>

</head>
<body>
<div id="app">
    <el-form ref="leaveForm" :model="form" :rules="rules" label-width="80px">
        <el-descriptions title="请假申请单" :column="1" border>
            <el-descriptions-item label="部门">研发部</el-descriptions-item>
            <el-descriptions-item label="申请人">王美美[高级研发工程师]
            </el-descriptions-item>
            <el-descriptions-item label="请假类型">

                <el-select v-model="form.formType" style="width: 100%">
                    <el-option label="事假" value="1"></el-option>
                    <el-option label="病假" value="2"></el-option>
                    <el-option label="工伤假" value="3"></el-option>
                    <el-option label="婚嫁" value="4"></el-option>
                    <el-option label="产假" value="5"></el-option>
                    <el-option label="丧假" value="6"></el-option>
                </el-select>

            </el-descriptions-item>
            <el-descriptions-item label="请假时间">
                <el-form-item prop="timeRange" label-width="0px">
                    <div class="block">
                        <el-date-picker
                                v-model="form.timeRange"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="请假原因">
                <el-form-item prop="reason" label-width="0px">
                    <el-input type="text" placeholder="请输入请假原因" v-model="form.reason"/>
                </el-form-item>
            </el-descriptions-item>

        </el-descriptions>
        <div style="text-align: center;padding-top: 30px">
            <el-button type="primary" >立即申请</el-button>
        </div>
    </el-form>

</div>

<script>

    var Main = {
        data() {
            return {
                employee:{},
                form: {
                    formType: "3",
                    timeRange: "",
                    startTime: "",
                    endTime: "",
                    reason: "",
                    eid: "",
                },
                // 表单验证，需要在 el-form-item 元素中增加 prop 属性
                rules: {
                    timeRange: [
                        {required: true, message: '请选择请假时间', trigger: 'blur'}
                    ],
                    reason: [
                        {required: true, message: '请填写请假原因', trigger: 'blur'}
                    ]
                }
            }
        }
        ,mounted(){
            const objApp = this;
            axios.get("/api/user_info?userId="+sessionStorage.userId+"&employeeId="+sessionStorage.employeeId).then(function
                (response) {
                console.info(response);
            })
        }
    };
    ElementPlus.locale(ElementPlus.lang.zhCn);
    const app = Vue.createApp(Main);
    app.use(ElementPlus, ElementPlus.lang.zhCn);
    app.mount("#app")
</script>
</body>
</html>

weixin_慕少5379513 2023-02-17

源自：慕课OA系统 3-7 开发请假申请View层-1

收起

1回答

好帮手慕小蓝 2023-02-17 13:39:51

同学你好，由于同学项目中的变量名和映射名等与课程不一致，老师无法直接测试同学的代码。老师这里可以根据报错信息给同学一些排查思路：

从报错信息看，可能是用户ID和员工ID获取不成功，导致这两个值为undefined，所以可以先检查存入sessionStorage时，后端返回的数据是否正确。

代码位于login.html的登录功能中，里面有向sessionStorage存储数据的语句，在存储前可以先使用console.log打印一下这两个值。方式如下：

祝学习愉快~

收起回答

提问者 weixin_慕少5379513 #1

都可以打印出来的

为啥到了表单的就不行了，还是这样

2023-02-17 14:18:46
好帮手慕小蓝回复提问者 weixin_慕少5379513 #2

同学你好，从截图中老师没有清楚的看到哪些是获取的两个ID的值，建议同学不要直接打印对象，而是按照老师的方式单独打印两个ID的值。
另外，建议同学检查一下login.html中向sessionStorage存储时，使用的属性名与表单中使用的是否一致。
建议同学提供一下login.html的代码，老师可以帮助同学检查一下。
祝学习愉快~

2023-02-17 14:28:21