Database 在laravel 8中使用vuejs从数据库获取数据

我正在尝试使用vuejs（在Laravel8框架中）从数据库中获取数据。但它不会产生数据，也不会产生错误。我在这里分享一些截图和代码：

查看

<template>
  <div>
    <table  class="_table">
          <tr>
              <td>Name</td>
              <td>Action</td>
          </tr>
      
          <tr v-for="(getname, i) in admins" :key="i" v-if="admins.length">
              <td class="_table_name">{{getname.tagName}}</td>
              <td>
                  <Button class="btn btn-info" size="small">Edit</Button>
                  <Button class="btn btn-danger" size="small">Delete</Button>                 
              </td>
          </tr>
      </table>

  </div>

</template>



<script>
    export default {
        data (){
            return {
                data:{
                     tagName:''
                },
                modal1: false,
                isAdding: false,
                admins: []
            }
        
        },

        methods :{
       
            async created(){
                const res = await this.callApi('get','app/get_data')
                if(res.status==200) {
                    this.admins = res.data
                
                }else{
                    this.smr()
                }
            }
        }
    
    }

</script>

数据库

<template>
  <div>
    <table  class="_table">
          <tr>
              <td>Name</td>
              <td>Action</td>
          </tr>
      
          <tr v-for="(getname, i) in admins" :key="i" v-if="admins.length">
              <td class="_table_name">{{getname.tagName}}</td>
              <td>
                  <Button class="btn btn-info" size="small">Edit</Button>
                  <Button class="btn btn-danger" size="small">Delete</Button>                 
              </td>
          </tr>
      </table>

  </div>

</template>



<script>
    export default {
        data (){
            return {
                data:{
                     tagName:''
                },
                modal1: false,
                isAdding: false,
                admins: []
            }
        
        },

        methods :{
       
            async created(){
                const res = await this.callApi('get','app/get_data')
                if(res.status==200) {
                    this.admins = res.data
                
                }else{
                    this.smr()
                }
            }
        }
    
    }

</script>

export default {
data(){
    return{

    }
},
methods:{
    async callApi(method, url, dataobject){

        try{
          return await axios({
             method: method,
             url: url,
             data: dataobject
           });

        }catch(e){
          return e.response
        }
    }
}

web.php

Route::get('/','App\Http\Controllers\vuecrud@index');

Route::post('/app/add_data','App\Http\Controllers\adminController@addTag');

Route::get('/app/get_data','App\Http\Controllers\adminController@show');

Route::any('{slug}','App\Http\Controllers\vuecrud@index'); 

<template>
  <div>
    <table  class="_table">
          <tr>
              <td>Name</td>
              <td>Action</td>
          </tr>
      
          <tr v-for="(getname, i) in admins" :key="i" v-if="admins.length">
              <td class="_table_name">{{getname.tagName}}</td>
              <td>
                  <Button class="btn btn-info" size="small">Edit</Button>
                  <Button class="btn btn-danger" size="small">Delete</Button>                 
              </td>
          </tr>
      </table>

  </div>

</template>



<script>
    export default {
        data (){
            return {
                data:{
                     tagName:''
                },
                modal1: false,
                isAdding: false,
                admins: []
            }
        
        },

        methods :{
       
            async created(){
                const res = await this.callApi('get','app/get_data')
                if(res.status==200) {
                    this.admins = res.data
                
                }else{
                    this.smr()
                }
            }
        }
    
    }

</script>

AdminController

public function show()
{  
   
   return admin::all();
   
}

require('./bootstrap');

window.Vue = require('vue')
import router from './router'
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
import common from './common'
Vue.mixin(common)

Vue.use(ViewUI);

('mainapp', require('./components/mainapp.vue').default)
const app = new Vue({
    el: '#app',
    router
})

<template>
  <div>
    <table  class="_table">
          <tr>
              <td>Name</td>
              <td>Action</td>
          </tr>
      
          <tr v-for="(getname, i) in admins" :key="i" v-if="admins.length">
              <td class="_table_name">{{getname.tagName}}</td>
              <td>
                  <Button class="btn btn-info" size="small">Edit</Button>
                  <Button class="btn btn-danger" size="small">Delete</Button>                 
              </td>
          </tr>
      </table>

  </div>

</template>



<script>
    export default {
        data (){
            return {
                data:{
                     tagName:''
                },
                modal1: false,
                isAdding: false,
                admins: []
            }
        
        },

        methods :{
       
            async created(){
                const res = await this.callApi('get','app/get_data')
                if(res.status==200) {
                    this.admins = res.data
                
                }else{
                    this.smr()
                }
            }
        }
    
    }

</script>

管理员（型号）

<template>
  <div>
    <table  class="_table">
          <tr>
              <td>Name</td>
              <td>Action</td>
          </tr>
      
          <tr v-for="(getname, i) in admins" :key="i" v-if="admins.length">
              <td class="_table_name">{{getname.tagName}}</td>
              <td>
                  <Button class="btn btn-info" size="small">Edit</Button>
                  <Button class="btn btn-danger" size="small">Delete</Button>                 
              </td>
          </tr>
      </table>

  </div>

</template>



<script>
    export default {
        data (){
            return {
                data:{
                     tagName:''
                },
                modal1: false,
                isAdding: false,
                admins: []
            }
        
        },

        methods :{
       
            async created(){
                const res = await this.callApi('get','app/get_data')
                if(res.status==200) {
                    this.admins = res.data
                
                }else{
                    this.smr()
                }
            }
        }
    
    }

</script>

app.js（js floder内部）

<template>
  <div>
    <table  class="_table">
          <tr>
              <td>Name</td>
              <td>Action</td>
          </tr>
      
          <tr v-for="(getname, i) in admins" :key="i" v-if="admins.length">
              <td class="_table_name">{{getname.tagName}}</td>
              <td>
                  <Button class="btn btn-info" size="small">Edit</Button>
                  <Button class="btn btn-danger" size="small">Delete</Button>                 
              </td>
          </tr>
      </table>

  </div>

</template>



<script>
    export default {
        data (){
            return {
                data:{
                     tagName:''
                },
                modal1: false,
                isAdding: false,
                admins: []
            }
        
        },

        methods :{
       
            async created(){
                const res = await this.callApi('get','app/get_data')
                if(res.status==200) {
                    this.admins = res.data
                
                }else{
                    this.smr()
                }
            }
        }
    
    }

</script>

router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import firstPage from './components/pages/firstvuepage'
import aboutpage from './components/pages/aboutus'
import admin from './components/pages/admin'

const routes = [
    {
        path:'/firstpage',
        component: firstPage
    },
    {
        path:'/about',
        component: aboutpage
    },
    {
        path:'/admin',
        component: admin
    }
]

export default new Router({
    mode:'history',
    routes
}) 

<template>
  <div>
    <table  class="_table">
          <tr>
              <td>Name</td>
              <td>Action</td>
          </tr>
      
          <tr v-for="(getname, i) in admins" :key="i" v-if="admins.length">
              <td class="_table_name">{{getname.tagName}}</td>
              <td>
                  <Button class="btn btn-info" size="small">Edit</Button>
                  <Button class="btn btn-danger" size="small">Delete</Button>                 
              </td>
          </tr>
      </table>

  </div>

</template>



<script>
    export default {
        data (){
            return {
                data:{
                     tagName:''
                },
                modal1: false,
                isAdding: false,
                admins: []
            }
        
        },

        methods :{
       
            async created(){
                const res = await this.callApi('get','app/get_data')
                if(res.status==200) {
                    this.admins = res.data
                
                }else{
                    this.smr()
                }
            }
        }
    
    }

</script>

admin.vue（我试图从数据库中获取数据的位置）

<template>
  <div>
    <table  class="_table">
          <tr>
              <td>Name</td>
              <td>Action</td>
          </tr>
      
          <tr v-for="(getname, i) in admins" :key="i" v-if="admins.length">
              <td class="_table_name">{{getname.tagName}}</td>
              <td>
                  <Button class="btn btn-info" size="small">Edit</Button>
                  <Button class="btn btn-danger" size="small">Delete</Button>                 
              </td>
          </tr>
      </table>

  </div>

</template>



<script>
    export default {
        data (){
            return {
                data:{
                     tagName:''
                },
                modal1: false,
                isAdding: false,
                admins: []
            }
        
        },

        methods :{
       
            async created(){
                const res = await this.callApi('get','app/get_data')
                if(res.status==200) {
                    this.admins = res.data
                
                }else{
                    this.smr()
                }
            }
        }
    
    }

</script>

---

我相信您希望在创建组件时调用created方法。从methods属性中删除创建的函数，并将其添加到导出的默认对象中

export default {
    data() {...},
    methods: {...}, 
    created() {...}
}

---

检查正在填充哪些数据的最简单方法是通过vue devtools（管理员的值）。您还可以通过在if（res==200）块

console.log（res）

中插入console.log语句来检查axios请求接收到的数据，并检查consoleTry中的值，在url

this.callApi（'get'，'/app/get_data'）中添加一个正斜杠。

不工作，但我得到警告：它说DevTools未能加载SourceMap:无法加载以下内容：HTTP错误：状态代码404，网络：：错误\u HTTP\u响应\u代码\u失败“从过滤器组件面板中查找

admin

组件，然后在下面的面板中查看

admin

的值。如果这不是你所期望的。转到

网络

选项卡，找到

/app/get_data

的条目，查看收到的响应

管理员

属性为空数组-不符合要求。您需要通过

console.log（res）

查看网络选项卡，找到

/api/get\u data

并检查其响应。需要确定是否按预期从服务器接收数据-

dd（admin:：all（））

在controller中-需要找出哪里出了问题还需要确认您已将common.js文件注册为全局mixin或将其注册到admin.vue文件谢谢您的帮助！在我将created method置于方法之外之后，它开始工作：{…}，但是您能告诉我为什么它在方法内部不工作：{…}现在问题是-我要刷新页面，看看插入的数据是否

created（）

是vue组件的生命周期挂钩，它在vue组件的生命周期内自动运行。其中作为

方法：{}

中的那些需要被明确地运行。您有什么解决方案使created（）在methode:{…}中运行吗？