如何使用Laravel Vue.js在数据库中保存用户id_Laravel_Vue.js

如何使用Laravel Vue.js在数据库中保存用户id

laravel vue.js

如何使用Laravel Vue.js在数据库中保存用户id,laravel,vue.js,Laravel,Vue.js,我创建的目的是使用laravel、pusher和vue.js在点击按钮时获取用户的实时位置。所有这些都工作正常，但我也插入了身份验证Id，不知道如何使用vue.js在laravel中使用它。请告诉我如何使用vue.js保存用户身份验证id 示例组件.vue <template> <div class="container"> <div class="row justify-content-center"> <div class=

我创建的目的是使用laravel、pusher和vue.js在点击按钮时获取用户的实时位置。所有这些都工作正常，但我也插入了身份验证Id，不知道如何使用vue.js在laravel中使用它。请告诉我如何使用vue.js保存用户身份验证id

示例组件.vue

<template>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Example Component</div>
                <button class="btn btn-success" @click="updateLocation">Update Position</button>
                <div class="card-body">

                    <div id="realtimemap" style="height: 412px; width: 100%;"></div>

                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>

     export default{

     data(){

        return{
            map:null,
            marker:null,
            center:{lat: 10, lng: 10},
            data:null,
            lineCoordinates:[]
        }
    },

    methods:{

        mapInit(){


            this.map = new google.maps.Map(document.getElementById('realtimemap'),{
                center: this.center,
                zoom: 8
            });

            this.marker = new google.maps.Marker({
                map: this.map,
                position: this.center,
                animation:"bounce",
            });
        },

        updateMap(){
            let newPosition = {lat:this.data.lat,lng:this.data.long};
            this.map.setCenter(newPosition);
            this.marker.setPosition(newPosition);

            this.lineCoordinates.push(new google.maps.LatLng(newPosition.lat,newPosition.lng));

            var lineCoordinatesPath = new google.maps.Polyline({
                path: this.lineCoordinates,
                geodesic: true,
                map: this.map,
                strokeColor: '#FF000',
                strokeOpacity: 1.0,
                strokeWeight: 2
            });
        },

        updateLocation(){

            let randomNumber=Math.random();

            let position={
                lat:10+randomNumber,
                long:10+randomNumber
            };

            axios.post('/api/map',position).then(response=>{
                console.log(response);
            })
        }

    },

    mounted() {
        console.log('Component mounted.');
        this.mapInit();
    },
    created(){
        Echo.channel('location')
            .listen('SendLocation', (e) => {
                this.data=e.location;

                this.updateMap();
                console.log(e);
        });
        }
       }
    </script>


示例组件
更新位置
导出默认值{
数据（）{
返回{
map:null，
标记：空，
中心：{lat:10，lng:10}，
数据：空，
线坐标：[]
}
},
方法：{
mapInit（）{
this.map=new google.maps.map（document.getElementById（'realtimemap'）{
中心：这个，中心，
缩放：8
});
this.marker=new google.maps.marker({
map:this.map，
位置：本中心，
动画：“反弹”，
});
},
更新映射（）{
让newPosition={lat:this.data.lat，lng:this.data.long}；
此.map.setCenter（新位置）；
此.marker.setPosition（新位置）；
this.lineCoordinates.push（新的google.maps.LatLng（newPosition.lat，newPosition.lng））；
var linecoordinatePath=新建google.maps.Polyline({
path:this.lineCoordinates，
测地线：正确，
map:this.map，
strokeColor:“#FF000”，
笔划不透明度：1.0，
冲程重量：2
});
},
updateLocation（）{
让randomNumber=Math.random（）；
让位={
lat:10+随机数，
长：10+随机数
};
post（'/api/map'，position）。然后（response=>{
控制台日志（响应）；
})
}
},
安装的（）{
console.log（“组件安装”）；
这是mapInit（）；
},
创建（）{
Echo.channel（'位置'）
.listen（'SendLocation'，（e）=>{
此数据=e位置；
这个.updateMap（）；
控制台日志（e）；
});
}
}

欢迎使用.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Laravel</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="{{asset('css/app.css')}}">

</head>
<body>
    <div class="flex-center position-ref full-height">
        <!--@if (Route::has('login'))
            <div class="top-right links">
                @if (Auth::check())
                    <a href="{{ url('/home') }}">Home</a>
                @else
                    <a href="{{ url('/login') }}">Login</a>
                    <a href="{{ url('/register') }}">Register</a>
                @endif
            </div>
        @endif-->

        <div class="content">
            <div class="title m-b-md" id="app">
                <example-component></example-component>
            </div>
        </div>
    </div>

     <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfRzdTIIRmsW1VaQiOzZCuRngBKqw3QUU&callback=initMap" type="text/javascript"></script>
    <script src="{{ asset('js/app.js') }}"></script>
</body>


拉维尔

我收到的错误消息

请帮帮我

提前感谢。

将此添加到您的

updateLocation（）

中

将此添加到您的

updateLocation（）

上

在

示例组件.vue上

需要定义一个新道具：

export default{ 
  props: {
    userId: {
      type: string, 
      required: true,
    }
  }
}

在调用需要传递此道具的组件时启用：

<div class="content">
  <div class="title m-b-md" id="app">
    <example-component 
      :user-id="{{ Auth::user()->id }}"
    ></example-component>
  </div>
</div>

可帮助您了解此解决方案的资源：

在

示例组件.vue

上，您需要定义一个新道具：

export default{ 
  props: {
    userId: {
      type: string, 
      required: true,
    }
  }
}

在调用需要传递此道具的组件时启用：

<div class="content">
  <div class="title m-b-md" id="app">
    <example-component 
      :user-id="{{ Auth::user()->id }}"
    ></example-component>
  </div>
</div>

可帮助您了解此解决方案的资源：

谢谢你的回答，但我在控制台应用程序中收到了这条消息。js:48020[Vue warn]：v-on处理程序中的错误：“ReferenceError:user\u id未定义”@ayushflitzip然后你需要定义它，例如在static

user\u id:1

中

是

user\u id

的值。但是我必须传递已登录的user\u id。。。假设我是一个用户，登录仪表板并发送命令，然后我的id也保存在一个表中。谢谢你的回答，但我在控制台应用程序中收到了这条消息。js:48020[Vue warn]：v-on处理程序中的错误：“ReferenceError:user_id未定义”@ayushflitzip然后你需要定义它，例如在static

user_id:1

中

是

user\u id

的值。但是我必须传递已登录的user\u id。。。假设我是一个用户，登录了dashboard并发送命令，然后我的id也保存在一个表中。先生，谢谢您的回答..现在我在blade中收到这个错误消息，试图获取非对象的属性“id”（视图：D:\XAMPP\htdocs\addspy\resources\views\welcome.blade.php）用户未登录，因此，您将无法获得idsir感谢您的回答..现在我在blade中收到此错误消息，试图获取非对象的属性“id”（视图：D:\XAMPP\htdocs\addspy\resources\views\welcome.blade.php）用户未登录，因此您将无法获取id