laravel vue - 上传项目后axios的方法无法正常工作

Posted 2023-02-25

【中文标题】laravel vue - 上传项目后axios的方法无法正常工作

【英文标题】：laravel vue - axios's methods not working correctly after upload project

【发布时间】：2018-01-29 03:02:59

【问题描述】：

之后我在 xampp 的 virtualHost axios 方法中上传站点停止工作。（但站点运行良好）

httpd-vhosts：

NameVirtualHost *:80
<VirtualHost *:80>
    DocumentRoot C:\xampp\htdocs\zbudWew\public
    ServerName localhost
    <Directory C:\xampp\htdocs\zbudWew\public>
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

.env:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=zbudwew
DB_USERNAME=root
DB_PASSWORD=

示例 axios 方法：

axios.post('api/news/', this.info).then(response => 
                        this.news.unshift(response.data.info);
                        this.info = title: '', body:'';
                        console.log(response.data);

                    , response => 
                        this.errors = response.data;
                    );

在我的 localhost:8000 地址站点上，添加内容运行良好，但如果我尝试在我的 192.168.0.199 地址上添加内容，则会出现错误：

[Vue warn]: Error in render function: "TypeError: Cannot read property 'title' of undefined"

found in

---> <Info> at C:\xampp\htdocs\zbudWew\resources\assets\js\components\Info.vue
       <NewsManagement> at C:\xampp\htdocs\zbudWew\resources\assets\js\components\NewsManagement.vue
         <Root>

这很奇怪，因为：

axios.get('api/news').then(response => 
                this.news = response.data.news;
            );

工作正常。各位大神能不能给我一个解决方法的建议？

Data 属性和 axios.post 如下所示：

data() 
        return 
            show: false,
            news: [],
            errors: [],
            info: 
                title: '',
                body: '',
            
        
    , components: 
        Info
    , created() 
        this.fetchNews();
    , methods: 
        fetchNews() 
            axios.get('api/news').then(response => 
                this.news = response.data.news;
            );
        , createInfo() 
            axios.post('api/news/', this.info).then(response => 
                this.news.unshift(response.data.info);
                this.info = 
                    title: '',
                    body: ''
                ;
            );
        

Info 组件如下所示：

<template>
    <tr>
        <td>
            <span id="errorInfo"></span>
            <input type="text" class="form-control"
                v-model="editForm.title" v-if="edit" placeholder="Tytuł">
            <span v-else> info.title </span>
            <br>
            <div v-if="edit">
                <textarea id="editorInfo" name="editorInfo" type="text" class="form-control"
                    v-model="editForm.body" ></textarea>
            </div>
            <span v-else></span>

        </td>


        <td align="right">
            <button v-on:click="editInfo" type="button" class="btn btn-info"
                v-if="!edit"
            >Edytuj</button>
            <button v-on:click="$emit('delete-info', info)" type="button" class="btn btn-danger"
                v-if="!edit">Usuń</button>


            <button v-on:click="updateInfo(info, editForm)" type="button" class="btn btn-primary"
                v-if="edit"
            >Gotowe</button>
            <button v-on:click="cancelEdit" type="button" class="btn btn-default"
                v-if="edit"
            >Anuluj</button>
        </td>
    </tr>
</template>

<script>
    export default 
        props: ['info'],
        data()
            return 
                edit: false,
                editForm:
                    title: '',
                    body:''
                
            
        ,
        methods: 
            editInfo()
                this.edit = true;
                this.editForm.title = this.info.title;
                this.editForm.body = this.info.body;
                window.setTimeout(function()
                    try
                        CKEDITOR.replace('editorInfo'); 
                    catch(e)
                , 1);
                $('#errorInfo').html('');
            ,
            cancelEdit()
                this.edit = false;
                this.editForm.title = '';
                this.editForm.body = '';
                $('#errorInfo').html('');
            ,
            updateInfo(oldUser, newUser)


                newUser.body = CKEDITOR.instances.editorInfo.getData();
                $('#errorInfo').html('');
                if (newUser.body == '' || newUser.title == '')
                    if(newUser.body == '')
                        $('#errorInfo').append('Treść jest wymagana i nie może być pusta.<br>');
                    

                    if(newUser.title == '')
                        $('#errorInfo').append('Tytuł jest wymagany i nie może być pusty.');
                    
                 else 

                    axios.patch('/api/news/' + oldUser.id, newUser).then(response=>
                    
                        this.$emit('update-info');
                        this.cancelEdit();
                        console.log(response.data);
                    );

                   
            
        
    
</script>


<style>
#errorInfo 
    color: #660000;

</style>

【问题讨论】：

您问题中的代码不会产生该错误消息。您在哪里尝试访问 title 属性？

这里：<input placeholder="Tytuł.." type="text" v-model="info.title" class="form-control">info: title: '', body: '',

您的data 属性是什么样的？你的axios.post 在哪里运行？

我编辑了问题。

我觉得这是某种权限的问题，因为在 artisan serve (localhost:8000) 上一切正常。问题仅在我的 VirtualHost 的地址上，但我找不到在哪里..

【参考方案1】：

我解决了问题！

首先我需要像这样在我的 web.php 文件中分离方法：

Route::post('/api/newsAdd', 'NewsController@store');

那是以前的：

Route::resource('api/news', 'NewsController');

第二个问题是斜线：

之前：axios.post('api/newsAdd/', this.info)

之后：axios.post('api/newsAdd', this.info)