How to make the Laravel project see the Xios file?

Asked

Viewed 406 times

0

Before I was having trouble getting the project to see the Vue file as you can see in this post:

I need to make my Javascript file see the Vue and Axios files

He was like this :

inserir a descrição da imagem aqui

And now it’s like this, it’s been fixed:

inserir a descrição da imagem aqui

The change was to put the Axios and Vue file in the root of the lib folder and put the two imports as you can see below;

    window.Vue = require('vue');
window.Axios = require('axios');


var crud = new Vue({
            el: '#crud',
            created: function() {
                    this.getRegistros();
            },
            data: {...

But it only connected the Vue file and left Axios without connecting, why am I saying this? Because who makes submit the fomulários and save the files in the bank is the Axios and the system is misbehaving again, I’ll explain:

Before anything I will show my app.js file that has all the methods:

window.Vue = require('vue');
window.Axios = require('axios');


var crud = new Vue({
            el: '#crud',
            created: function() {
                    this.getRegistros();
            },
            data: {
                    registros: [],
                    newDesc: '',
                    newPreco: '',
                    newQtdQuartos: '',
                    newTipo: '',
                    newFinalidade: '',
                    newLogradouroEndereco: '',
                    newBairroEndereco: '',
                    preencherRegistro: {
                        'id': '',
                        'descricao': '',
                        'preco': '',
                        'qtdQuartos': '',
                         tipos: ''  ,// acho que meu problema está aqui******
                        'finalidade': '',// acho que meu problema está aqui******
                        'logradouroEndereco': '',
                        'bairroEndereco': ''
                    },
                    errors: []
            },

            methods: {
                    getRegistros: function() {
                        var urlRegistro = 'imovels';
                        axios.get(urlRegistro).then(response => {
                                this.registros = response.data
                        });
                    },
                    editarRegistro: function(registro) {
                        /*  alert(registro.tipos); */

                             this.preencherRegistro.id = registro.id;
                             this.preencherRegistro.descricao = registro.descricao;
                             this.preencherRegistro.preco = registro.preco;
                             this.preencherRegistro.qtdQuartos = registro.qtdQuartos;
                             this.preencherRegistro.tipos = registro.tipos;
                             this.preencherRegistro.finalidade = registro.finalidade;
                             this.preencherRegistro.logradouroEndereco = registro.logradouroEndereco;
                             this.preencherRegistro.bairroEndereco = registro.bairroEndereco;

                             $('#edit').modal('show');
                    },
                    updateRegistro: function(id) {
                            var url = 'imovels/' + id;
                            axios.put(url, this.preencherRegistro).then(response => {
                                    this.getRegistros();
                                    this.preencherRegistro = {  'id': '',
                                    'descricao': '',
                                    'preco': '',
                                    'qtdQuartos': '',
                                     tipos: ''  ,
                                    'finalidade': '',
                                    'logradouroEndereco': '',
                                    'bairroEndereco': ''  };
                                    this.errors   = [];
                                    $('#edit').modal('hide');
                                    toastr.success('Tarea actualizada con éxito');
                                            }).catch(error => {
                                                this.errors = 'Corrija para poder editar con éxito'
                                            });
                    },
                     createRegistro: function() {
                         var url = 'imovels';
                         axios.post(url, {
                            descricao: this.newDesc,
                            preco: this.newPreco,
                            qtdQuartos: this.newQtdQuartos,
                            tipos: this.newTipo,
                            finalidade: this.newFinalidade,
                            logradouroEndereco:  this.newLogradouroEndereco,
                          bairroEndereco:    this.newBairroEndereco
                         }).then(response => {
                             this.getRegistros();
                             this.newDesc = '';
                             this.newPreco = '';
                             this.newQtdQuartos = '';
                             this.newTipo = '';
                             this.newFinalidade = '';
                             this.newLogradouroEndereco = '';
                             this.newBairroEndereco = '';
                             this.errors = [];
                             $('#create').modal('hide');// efetuar a execução
                            toastr.success('Novo imóvel criado com sucesso!');
                         }).catch(error => {
                                this.errors = error.response.data
                         });
                     },
                    deletarRegistro: function(registro) {
                             var url = 'imovels/' + registro.id;
                             axios.delete(url).then(response => {
                                 this.getRegistros();
                                 toastr.success('Registro excluído com sucesso');
                             });
                    }
            }
        });



/*
var url = 'imovels';
axios.delete(url).then(response => {
    this.getRegistros();
    toastr.success('Egistro excluído');
});

*/

When I click the button New property she appears these forms below:

inserir a descrição da imagem aqui

When this template is filled it does not save the record, and when I will inspect the page it shows error 500 as internal URL error immovels

inserir a descrição da imagem aqui

On my local computer works normally, the method that save the records is called createRegister , you are able to view it in the app.js file and in the form as you can see below;

<form method="POST" v-on:submit.prevent="createRegistro">


  @section('content')
          @if($errors->any())
              <div class="alert alert-danger" role="alert">
                  @foreach ($errors->all() as $error)
                      {{ $error }}<br>
                  @endforeach
              </div>
          @endif


      <div class="modal fade" id="create" tabindex="2" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg ">
                <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">
                          <span>&time;</span>
                      </button>
                      <h4>Novo Imóvel</h4>
                    </div>
                    <div class="modal-body">

                            <label for="descricao">Criar Imóvel</label>
                            <input type="text" name="descricao"placeholder="Descrição do imóvel" class="form-control" v-model="newDesc" required>


                                      <div class="row">
                                          <div class="col-md-6">
                                              <div class="form-group">
                                                  <label for="preco">Preço</label>
                                                  <input type="text" class="form-control" placeholder="Preço" name="preco" v-model="newPreco" required>
                                              </div>
                                          </div>
                                          <div class="col-md-6">
                                              <div class="form-group">
                                                  <label for="qtdQuartos">Quantidade de Quartos</label>
                                                  <input type="number" class="form-control" placeholder="Quantidade de Quartos" name="qtdQuartos" v-model="newQtdQuartos" required>
                                              </div>
                                          </div>
                                      </div>

                                    <div class="row">
                                          <div class="col-md-6">
                                                <div class="form-group">
                                                      <label for="tipos">Tipo do Imóvel</label>
                                                      <select class="form-control" name="tipos" v-model="newTipo" required>
                                                      <option selected>Apartamento</option>
                                                      <option>Casa</option>
                                                      <option>Kitnet</option>
                                                    </select>
                                                </div>
                                          </div>

                                          <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="finalidade">Finalidade do imóvel</label>
                                                        <select class="form-control" name="finalidade" v-model="newFinalidade" required>
                                                            <option>Venda</option>
                                                            <option>Locação</option>
                                                        </select>
                                                    </div>
                                                <span v-for="error in errors" class="text-danger">@{{ error }}</span>
                                          </div>
                                    </div>

                                    <h4>Endereço</h4>
                                    <hr>

                                      <div class="form-group">
                                              <label for="logradouroEndereco">Logradouro</label>
                                              <input type="text" class="form-control" placeholder="Logradouro" name="logradouroEndereco" v-model="newLogradouroEndereco" required>
                                      </div>
                                      <div class="row">
                                          <div class="col-md-10">
                                              <div class="form-group">
                                                  <label for="bairroEndereco">Bairro</label>
                                                  <input type="text" class="form-control" placeholder="Bairro" name="bairroEndereco"  v-model="newBairroEndereco" required>
                                              </div>
                                          </div>
                                      </div>

                    </div>


                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary" value="Salvar">
                    </div>
                </div>
            </div>
        </div>
</form>

Again I strongly believe that the problem is configuration of Axios because on my local computer work normally, I need to know what exactly to change in the project for the Axios to be viewed.

=========================================================

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Imovel;


class ImovelController extends Controller
{






    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $imovels = Imovel::get();
        return $imovels;
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
      $this->validate($request, [
          'descricao' => 'required'
      ]);

      Imovel::create($request->all());
      return;
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        $imovel = Imovel::findOrFail($id);
        return $imovel;
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
              $this->validate($request, [
                'descricao' => 'required',
            ]);
            Imovel::find($id)->update($request->all());
            return;
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $imovel = Imovel::findOrFail($id);
        $imovel->delete();
    }
}
  • This is the URL of my page http://laravel-vue-axios.herokuapp.com/

  • for those who want to see my repository is this project: https://github.com/wladyband/projectodevmedia/blob/master/package.json

  • Hello wladyband error 500 is usually related to an internal error in the execution of the script, in general error of syntax missing a semicolon or call a function that does not exist, gives a check in the controller or put here for us to see. You can also test the URL by passing the parameters with Postman.

  • I just updated the controller, but I’m pretty sure it’s not the controller.

1 answer

1

My advice is to use vuex, besides being a good practice will help you not have bugs like this. In the internet has several examples is very simple and advantageous.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.