为什么会报错呢？Java代码测试没问题，前端也能成功获取到响应，但是没法把数据加载到页面上

<!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="部门">{{department.departmentName}}</el-descriptions-item>
            <el-descriptions-item label="申请人">{{employee.name}}[{{employee.title}}]
            </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:{}
                ,department:{}
                ,form: {
                    formType: "1",
                    timeRange: "",
                    startTime: "",
                    endTime: "",
                    reason: "",
                    eid: "",
                },
                // 表单验证，需要在 el-form-item 元素中增加 prop 属性
                rules: {
                    timeRange: [
                        {required: true, message: '请选择请假时间', trigger: 'blur'}
                    ],
                    reason: [
                        {required: true, message: '请填写请假原因', trigger: 'blur'}
                    ]
                }
            }
        }
        ,mount(){
            const objApp = this;
            axios.get("/api/user_info?uid=" + sessionStorage.uid + "&eid=" + sessionStorage.eid)
                .then(function (response){
                    console.log(response);
                    objApp.employee = response.data.data.employee;
                    objApp.department = response.data.data.department;
                })
        }
    };
    ElementPlus.locale(ElementPlus.lang.zhCn);
    const app = Vue.createApp(Main);
    app.use(ElementPlus, ElementPlus.lang.zhCn);
    app.mount("#app")
</script>
</body>
</html>

王小east 2022-11-24

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

收起

1回答

好帮手慕小脸 2022-11-24 11:28:43

同学你好，

1、进行页面初始化的加载这里使用的是mounted

2、其次上述控制台展示的报错信息，并不是同学代码问题，这里猜测可能是浏览器插件引起的报错，建议同学更换浏览器访问项目试试，这里因没有复现此问题，并不能给出具体演示步骤，所以建议同学也可以搜索如何关闭浏览器的插件

祝学习愉快~

收起回答

提问者王小east #1

关闭浏览器所有插件后，在index.html中访问leave_form.html还是无法加载员工信息，但是直接访问leave_form.html是可以加载员工信息的
换Safari浏览器可以正常加载

2022-11-27 23:06:11
好帮手慕小小回复提问者王小east #2

同学你好，猜测可能还是由于浏览器安装的扩展插件导致的，建议更换浏览器测试运行程序。
祝学习愉快~

2022-11-28 10:28:09